Server Side Rendering with Vue and Express

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 vue-server-renderer library.

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

const { renderToString } = require('vue-server-renderer').createRenderer();
const expressApp = require('express')();

expressApp.get('*', (req, res) => {
  const app = new Vue({
    // Initialize with data from the request.
    data: { content: req.query.content },
    template: '<div>{{content}}</div>'
  });
  renderToString(app).
    // Sends '<div data-server-rendered="true">Hello, World</div>'
    then(html => res.send(html)).
    catch(err => res.status(500).send(err.stack));
});

const server = await expressApp.listen(3000);

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

Notice that the above div has a data-server-rendered attribute. The data-server-rendered attribute marks this div for client-side hydration. In other words, you can then use the $mount() function to make your Vue client pick up your static HTML and start reacting to client-side events.

---

---

More Vue Tutorials

• How to Create a Custom Scroll Event in Vue
• How to Use Vue Router's Push Function
• How to Use Vue with Axios to Make a PUT Request
• How to Drag and Drop File Upload with Vue
• Using Firebase with Vue for File Uploads
• How to Read Files with Vue
• How to Locally Scope the CSS in Your Vue Files