Tutorials / Vue /

Server Side Rendering with Vue and Express

May 5, 2019

Vue has solid support for server-side rendering in Node.js. This means that, given a Vue app, you can render the app in an Express endpoint using the renderToString function in the server-renderer directory.

Below is an example of rendering a Vue app using Express.

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

const server = express()

server.get('/', (req, res) => {
  const app = createSSRApp({
    data: () => ({ count: 1 }),
    template: `<button @click="count++">{{ count }}</button>`
  })

  renderToString(app).then((html) => {
    res.send(`
      <head>
        <title>Vue SSR Example</title>
      </head>
      <body>
        <div id="app">${html}</div>
      </body>
    `)
  })
})

server.listen(3000, () => {
  console.log('ready')
})

Note that the renderToString() function returns a promise. Make sure you handle errors.

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!

Server Side Rendering with Vue and Express

More Vue Tutorials