introduce the store

server.js

@@ -61,6 +61,7 @@ if (process.env.NODE_ENV !== 'production') {
 app.use(favicon(path.resolve(__dirname, 'src/assets/logo.png')))
 
 app.get('*', (req, res) => {
+  var s = Date.now()
   const context = { url: req.url }
   const renderStream = renderer.renderToStream(context)
   let firstChunk = true
@@ -88,6 +89,7 @@ app.get('*', (req, res) => {
 
   renderStream.on('end', () => {
     res.end(`<script src="/dist/client-bundle.js"></script></body></html>`)
+    console.log('whole request: ' + (Date.now() - s))
   })
 
   renderStream.on('error', err => {

src/App.vue

@@ -2,11 +2,14 @@
   <div id="app">
     <img src="./assets/logo.png">
     <h1>{{ msg }}</h1>
+    <p>Current URL is: {{ $store.state.url }} (from the store)</p>
     <ul>
       <li><router-link to="/">News</router-link></li>
       <li><router-link to="/about">About</router-link></li>
     </ul>
-    <router-view></router-view>
+    <transition name="view" mode="out-in">
+      <router-view class="view"></router-view>
+    </transition>
   </div>
 </template>
 
@@ -25,4 +28,10 @@ export default {
 body {
   font-family: Helvetica, sans-serif;
 }
+.view {
+  transition: all .35s ease;
+}
+.view-enter, .view-leave-active {
+  opacity: 0;
+}
 </style>

src/app.js

 import Vue from 'vue'
-import Router from 'vue-router'
 import App from './App.vue'
-import News from './views/News.vue'
-import About from './views/About.vue'
+import router from './router'
+import store from './store'
 
-Vue.use(Router)
-
-export const router = new Router({
-  mode: 'history',
-  routes: [
-    { path: '/', component: News },
-    { path: '/about', component: About }
-  ]
-})
+export { router, store }
 
 export const app = new Vue({
   router,
+  store,
   render: h => h(App)
 })

src/router/index.js

+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+import News from '../views/News.vue'
+import About from '../views/About.vue'
+
+export default new Router({
+  mode: 'history',
+  routes: [
+    { path: '/', component: News },
+    { path: '/about', component: About }
+  ]
+})

src/server-entry.js

-import { app, router } from './app'
+import { app, router, store } from './app'
 
 export default context => {
+  // set router's initial location
   router.setInitialLocation(context.url)
-  return app
+  // resolve store state
+  return store.dispatch('setURL', context.url).then(() => {
+    context.initialState = store.state
+    return app
+  })
 }

src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+// pre-fetched state injected by SSR
+const serverState = typeof window !== 'undefined' && window.__INITIAL_STATE__
+
+// default state
+const defaultState = {
+  url: '/'
+}
+
+export default new Vuex.Store({
+  state: serverState || defaultState,
+  mutations: {
+    setURL: (state, url) => state.url = url
+  },
+  actions: {
+    // just simulating an async action here
+    setURL: ({ commit }, url) => new Promise(resolve => {
+      commit('setURL', url)
+      setTimeout(resolve, 0)
+    })
+  }
+})

webpack.client.config.js

@@ -3,7 +3,7 @@ const webpack = require('webpack')
 const isProd = process.env.NODE_ENV === 'production'
 
 module.exports = {
-  devtool: '#eval-source-map',
+  devtool: '#source-map',
   entry: './src/client-entry.js',
   output: {
     path: path.resolve(__dirname, './dist'),
@@ -46,8 +46,7 @@ module.exports = {
   ]
 }
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = '#source-map'
+if (process.env.NODE_ENV === 'production' && process.env.VUE_ENV !== 'server') {
   module.exports.plugins = module.exports.plugins.concat([
     new webpack.optimize.UglifyJsPlugin({
       compress: {

webpack.server.config.js

@@ -12,7 +12,7 @@ module.exports = merge(webpackConfig, {
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
-        NODE_ENV: '"production"',
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
         VUE_ENV: '"server"'
       }
     })