Vue+Meteor SSR calling the client-side component lifecycle hooks `beforeMount()` and `mounted()` on the server-side
mrauhu opened this issue · comments
mrauhu commented
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: nuxt/vue-meta#569.
How to reproduce
- Clone the repo:
git clone https://github.com/mrauhu/meteor-ssr-vue-meta cd meteor-ssr-vue-meta
- Run Meteor:
meteor
Best wishes,
Sergey.
Welkin Wong commented
same
Ismail9k commented
Any updates regarding this issue?
Ismail9k commented
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