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!

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

Server Side Rendering with Vue and Express

More Vue Tutorials