Vue.js can be used to implement server-side rendering by using the Vue Server Renderer. This library allows you to render a Vue application to HTML on the server and then send it to the client.

Example code

const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = new Vue({
  template: `<h1>Hello World</h1>`
})

renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // Outputs: <h1 data-server-rendered="true">Hello World</h1>
})

The code above uses the require() function to import the Vue library, the Vue Server Renderer library, and creates a new Vue instance. It then uses the renderToString() method to render the Vue application to HTML, which is then printed out to the console.

Code explanation

• require('vue'): imports the Vue library
• require('vue-server-renderer').createRenderer(): imports the Vue Server Renderer library and creates an instance of the renderer
• new Vue({template:

  Hello World

  }): creates a new Vue instance with a template of <h1>Hello World</h1>
• renderToString(): renders the Vue application to HTML
• console.log(html): prints the rendered HTML to the console

Helpful links

• Vue Server Renderer
• Vue.js

Edit this code on GitHub