Vue+Meteor SSR

Add Server-Side Rendering in your Vue+Meteor application

Installation:

meteor add akryum:vue-ssr

Usage

:warning: All your client-side code should be available on the server (which means they shouldn't be in a client folder), and the code and libraries should be able to run on the server.

Wrap your Vue root instance in a createApp function and export it, alongside with the router instance:

1import Vue from 'vue'
2
3// Meteor Tracker integration
4import VueMeteorTracker from 'vue-meteor-tracker'
5Vue.use(VueMeteorTracker)
6
7import App from './ui/App.vue'
8import router from './router'
9
10function createApp () {
11  return {
12    app: new Vue({
13      el: '#app',
14      router,
15      ...App,
16    }),
17    router,
18  }
19}
20
21export default createApp

In your client code, start the app as usual:

1import { Meteor } from 'meteor/meteor'
2import CreateApp from './app'
3
4Meteor.startup(() => {
5  CreateApp()
6})

In your server code, you need to set the VueSSR.createApp method with a function that returns the Vue instance:

1import { VueSSR } from 'meteor/akryum:vue-ssr'
2import CreateApp from './app'
3
4VueSSR.createApp = function (context) {
5  const { app, router } = CreateApp()
6  // Set the url in the router
7  router.push(context.url)
8  return {
9    app,
10    // Inject some arbitrary JS
11    js: `console.log('hello')`,
12  }
13}

Returning a promise works too:

1VueSSR.createApp = function (context) {
2  return new Promise((resolve, reject) => {
3    const { app, router } = CreateApp()
4    // Set the URL in the router
5    router.push(context.url)
6
7    router.onReady(() => {
8      const matchedComponents = router.getMatchedComponents()
9
10      // no matched routes
11      if (!matchedComponents.length) {
12        reject({ code: 404 })
13      }
14
15      // Can use components prefetch here...
16
17      resolve({
18        app,
19        // Inject some arbitrary JS
20        js: `console.log('hello')`,
21      })
22    })
23  })
24}

Add the <div id="app"></div> element in you HTML where you want to render the Vue app. If you don't, the app will be rendered at the beginning of the page body.

You can change the id of the element by setting the VUE_OUTLET environment variable, or by setting the VueSSR.outlet property:

1VueSSR.outlet = 'my-app'

In this example, Vue SSR expects a <div id="my-app"> element in the HTML page.

:warning: The CSS can flicker in developpement mode and load after the app is rendered. This is due to the HMR system having to append dynamic style tags in the page to get the fastest reloading possible. This is not the case in production mode (try running your app with meteor --production).

Example project

Head and Body injection

You can modify the head and body of the SSR render with the appendHtml function. This example uses vue-meta:

1VueSSR.createApp = function (context) {
2  return new Promise((resolve, reject) => {
3    const { app, router, store } = createApp()
4
5    router.push(context.url)
6    context.meta = app.$meta()
7
8    // ...
9
10    resolve({
11      app,
12      appendHtml() {
13        const {
14          title, link, style, script, noscript, meta
15        } = context.meta.inject()
16
17        return {
18          head: `
19            ${meta.text()}
20            ${title.text()}
21            ${link.text()}
22            ${style.text()}
23            ${script.text()}
24            ${noscript.text()}
25          `,
26          body: script.text({ body: true })
27        }
28      }
29    })
30  })
31}

LICENCE ISC - Created by Guillaume CHAU (@Akryum)