Skip to content

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

Open
@mrauhu

Description

@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:

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.

Activity

welkinwong

welkinwong commented on Jul 18, 2020

@welkinwong

same

ismail9k

ismail9k commented on Oct 4, 2020

@ismail9k

Any updates regarding this issue?

ismail9k

ismail9k commented on Oct 16, 2020

@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

added a commit that references this issue on Oct 16, 2020
40172f4
linked a pull request that will close this issue on Oct 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @chris-visser@mrauhu@welkinwong@ismail9k

      Issue actions

        Vue+Meteor SSR calling the client-side component lifecycle hooks `beforeMount()` and `mounted()` on the server-side · Issue #409 · meteor-vue/vue-meteor