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!