Vue+Meteor SSR calling the client-side component lifecycle hooks beforeMount() and mounted() on the server-side

[mrauhu]

Greetings, @Akryum.

Problem

Vue+Meteor SSR calling the client-side component lifecycle hooks on the server-side:

• beforeMount();
• mounted().

This results in breaking other packages from the Vue ecosystem, as example:

• vue-meta@>=2.3.4 is broken, see: Fix: 500 error using Vue+Meteor SSR after update vue-meta version to 2.3.4 nuxt/vue-meta#569.

How to reproduce

1. Clone the repo:

   git clone https://github.com/mrauhu/meteor-ssr-vue-meta
   cd meteor-ssr-vue-meta
   

2. Run Meteor:

   meteor
   

Best wishes,
Sergey.

[welkinwong]

same

[ismail9k]

Any updates regarding this issue?

[ismail9k]

I've managed to fix this issue in my own project. The main idea is to prevent the Vue instance from mounting on the server, by removing the el property from the Vue object on the server-side, then mount the Vue instance manually client side

/client/app.js

import Vue from 'vue';

// Meteor Tracker integration
import VueMeteorTracker from 'vue-meteor-tracker'
Vue.use(VueMeteorTracker)

import App from './ui/App.vue'
import router from './router'

function createApp () {
  return {
    app: new Vue({
      // el: '#app', <= REMOVE THIS
      router,
      ...App,
    }),
    router,
  }
}

export default createApp;

/client/startup/index.js

import { Meteor } from 'meteor/meteor'
import CreateApp from './app'

Meteor.startup(() => {
  CreateApp().app.$mount('#app');
})

You can test this on my vue-meteor-boilerplate