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!
