asyncData

Author: TheRatG

assets/js/app.js

@@ -3,6 +3,18 @@ import Vue from 'vue';
 import router from './router'
 import store from './store';
 
+Vue.mixin({
+    beforeMount() {
+        const {asyncData} = this.$options;
+        if (asyncData) {
+            this.dataPromise = asyncData({
+                store: this.$store,
+                route: this.$route
+            })
+        }
+    }
+});
+
 export default new Vue({
     router,
     store,

assets/js/components/FetchNumber.vue

@@ -9,6 +9,11 @@
     import {mapActions, mapGetters} from 'vuex';
 
     export default {
+        asyncData({store, route}) {
+            if (!window.__INITIAL_STATE__) {
+                store.dispatch('fetchNumber');
+            }
+        },
         name: "index",
         computed: {
             ...mapGetters(['number'])

assets/js/store.js

@@ -4,16 +4,17 @@ import axios from 'axios';
 
 Vue.use(Vuex);
 
+const state = {
+    number: null
+};
+
 export default new Vuex.Store({
+    state,
     actions: {
         fetchNumber({commit}) {
-            if (typeof window === 'undefined') {
-                commit('setNumber', 1234567890);
-            } else {
-                axios.get('/number').then(number => {
-                    commit('setNumber', number.data.number);
-                });
-            }
+            axios.get('/number').then(number => {
+                commit('setNumber', number.data.number);
+            });
         }
     },
     mutations: {

package.json

@@ -5,6 +5,7 @@
         "babel-plugin-transform-object-rest-spread": "^6.26.0",
         "vue": "^2.5.9",
         "vue-loader": "^13.5.0",
+        "vue-router": "^3.0.1",
         "vue-server-renderer": "^2.5.9",
         "vue-template-compiler": "^2.5.9",
         "vuex": "^3.0.1"
@@ -17,7 +18,5 @@
         "watch": "encore dev --watch",
         "build": "encore production"
     },
-    "dependencies": {
-        "vue-router": "^3.0.1"
-    }
+    "dependencies": {}
 }

readme.md

@@ -14,7 +14,7 @@ Until recently server-side rendering in VueJS wasn't possible outside Node.js en
 
 1) `composer install` to get PHP dependencies
 2) `yarn install` to get JS dependencies
-3) `yarn run encore dev` to build JS files (or `yarn run encore dev --watch` for interactive watch)
+3) `yarn run dev` to build JS files (or `yarn run watch` for interactive watch)
 4) `php bin/console server:run` to start a PHP server on `127.0.0.1:8000`
 
 ## Explanation

src/Service/RenderService.php

@@ -1,43 +1,49 @@
 <?php
+
 namespace App\Service;
 
 class RenderService
 {
-  /**
-   * string
-   */
-  private $nodeRoot;
-
-  /**
-   * string
-   */
-  private $jsRoot;
-  
-  public function __construct(string $rootDirectory)
-  {
-    $this->nodeRoot = sprintf('%s/../node_modules', $rootDirectory);
-    $this->jsRoot = sprintf('%s/../public/build/js', $rootDirectory);
-  }
-
-  public function render($path): string
-  {
-    $vueRenderer = file_get_contents(sprintf('%s/vue-server-renderer/basic.js', $this->nodeRoot));
-    $entryPoint = file_get_contents(sprintf('%s/server.js', $this->jsRoot));
-    $v8 = new \V8Js();
-
-    ob_start();
-
-    $js =
-<<<EOT
+    /**
+     * string
+     */
+    private $nodeRoot;
+
+    /**
+     * string
+     */
+    private $jsRoot;
+
+    public function __construct(string $rootDirectory)
+    {
+        $this->nodeRoot = sprintf('%s/../node_modules', $rootDirectory);
+        $this->jsRoot = sprintf('%s/../public/build/js', $rootDirectory);
+    }
+
+    public function render($path): string
+    {
+        $vueRenderer = file_get_contents(sprintf('%s/vue-server-renderer/basic.js', $this->nodeRoot));
+        $entryPoint = file_get_contents(sprintf('%s/server.js', $this->jsRoot));
+
+        $v8 = new \V8Js();
+        try {
+            ob_start();
+
+            $js =
+                <<<EOT
 var process = { env: { VUE_ENV: "server", NODE_ENV: "production" } }; 
 this.global = { process: process };
 let url = "$path";
 EOT;
-    
-    $v8->executeString($js);
-    $v8->executeString($vueRenderer);
-    $v8->executeString($entryPoint);
-    
-    return ob_get_clean();
-  }
+
+            $v8->executeString($js);
+            $v8->executeString($vueRenderer);
+            $v8->executeString($entryPoint);
+            $result = ob_get_clean();
+        } catch (\Exception $e) {
+            $result = $e->getMessage();
+        }
+
+        return $result;
+    }
 }