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