Vue.js

# Getting Started

This guide is currently under active development

# Installation

In order to create a server-side rendered application, we need to install the @vue/server-renderer package:

npm install @vue/server-renderer
## OR
yarn add @vue/server-renderer
1
2
3

# Notes

  • It's recommended to use Node.js version 12+.
  • @vue/server-renderer and vue must have matching versions.
  • @vue/server-renderer relies on some Node.js native modules and therefore can only be used in Node.js. We may provide a simpler build that can be run in other JavaScript runtimes in the future.

# Rendering a Vue Application

Unlike a client-only Vue application, which is created using createApp, an SSR application needs to be created using createSSRApp:

const { createSSRApp } = require('vue')

const app = createSSRApp({
  data() {
    return {
      user: 'John Doe'
    }
  },
  template: `<div>Current user is: {{ user }}</div>`
})
1
2
3
4
5
6
7
8
9
10

Now, we can use the renderToString function to render our application instance to a string. This function returns a Promise which resolves to the rendered HTML.


 










 

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')

const app = createSSRApp({
  data() {
    return {
      user: 'John Doe'
    }
  },
  template: `<div>Current user is: {{ user }}</div>`
})

const appContent = await renderToString(app)
1
2
3
4
5
6
7
8
9
10
11
12
13

# Integrating with a Server

To run an application, in this example we will use Express (opens new window):

npm install express
## OR
yarn add express
1
2
3
// server.js

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')
const server = require('express')()

server.get('*', async (req, res) => {
  const app = createSSRApp({
    data() {
      return {
        user: 'John Doe'
      }
    },
    template: `<div>Current user is: {{ user }}</div>`
  })

  const appContent = await renderToString(app)
  const html = `
  <html>
    <body>
      <h1>My First Heading</h1>
      <div id="app">${appContent}</div>
    </body>
  </html>
  `

  res.end(html)
})

server.listen(8080)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Now, when running this Node.js script, we can see a static HTML page on localhost:8080. However, this code is not hydrated: Vue hasn't yet taken over the static HTML sent by the server to turn it into dynamic DOM that can react to client-side data changes. This will be covered in the Client Side Hydration section.

← Writing Universal Code →