meteor-vue / vue-meteor

🌠 Vue first-class integration in Meteor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue-SSR Problem???

thearabbit opened this issue · comments

I tried to use Vue-SSR, but don't work with serverPrefetch.

// app.js
import "isomorphic-fetch";

import "./plugins";

import Vue from "vue";
import { sync } from "vuex-router-sync";

import App from "./layouts/App.vue";
import createRouter from "./router";
import createStore from "./store";

function createApp(context) {
  // create router and store instances
  const router = createRouter();
  const store = createStore();

  // Sync so that route state is available as part of the store
  sync(store, router);

  // Create the app instance
  const app = new Vue({
    el: "app",
    router,
    store,
    ...App
  });

  return {
    app,
    router,
    store
  };
}

export default createApp;
// client.js
import "intersection-observer";

import { Meteor } from "meteor/meteor";
import createApp from "./app";

Meteor.startup(() => {
  const { app, router, store } = createApp({
    ssr: false
  });

  // Hydrate the Vuex store with the JSON string
  if (window.__INITIAL_STATE__) {
    store.replaceState(window.__INITIAL_STATE__);
  }
});
// server.js
import Vue from "vue";
import { VueSSR } from "meteor/akryum:vue-ssr";
import createApp from "./app";

// This will be called each time the app is rendered
VueSSR.createApp = function(context) {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp({
      ssr: true
    });

    // 1. Resolve the URL with the router
    router.push(context.url);

    router.onReady(() => {
      // This `rendered` hook is called when the app has finished rendering
      context.rendered = () => {
        context.state = store.state;
      };

      resolve(app);
    }, reject);
  });
};
// Component
  serverPrefetch () {
    console.log('serverPrefetch'); // don't work
    return this.getEmployee()
  },
  methods: {
    getEmployee() {
      return this.$store.dispatch("app/getEmployee");
    }
  }

Please help me