vue-ssr: JS injection

Author: Guillaume Chau

packages/vue-ssr/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+## v0.2.0 - 2017-05-01
+
+ - You can now inject arbitrary JS to the generated HTML by passing an object with `app` and `js` attribute to `VueSSR.createApp`.
+ 

packages/vue-ssr/README.md

@@ -12,8 +12,6 @@ meteor add akryum:vue-ssr
 
 **:warning: All your client-side code should be available on the server (which means they shouldn't be in a `client` folder), and the code and libraries should be able to run on the server.**
 
-*:warning: vuex & apollo are not tested yet.*
-
 Wrap your Vue root instance in a `createApp` function and export it, alongside with the router instance:
 
 ```javascript
@@ -61,7 +59,11 @@ VueSSR.createApp = function (context) {
   const { app, router } = CreateApp()
   // Set the url in the router
   router.push(context.url)
-  return app
+  return {
+    app,
+    // Inject some arbitrary JS
+    js: `console.log('hello')`,
+  }
 }
 ```
 
@@ -84,7 +86,11 @@ VueSSR.createApp = function (context) {
 
       // Can use components prefetch here...
 
-      resolve(app)
+      resolve({
+        app,
+        // Inject some arbitrary JS
+        js: `console.log('hello')`,
+      })
     })
   })
 }

packages/vue-ssr/package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'akryum:vue-ssr',
-  version: '0.1.0',
+  version: '0.2.0',
   summary: 'Render Vue server-side',
   git: 'https://github.com/Akryum/meteor-vue-component',
   documentation: 'README.md'

packages/vue-ssr/server/index.js

@@ -108,7 +108,15 @@ Meteor.bindEnvironment(function () {
             asyncResult = Promise.resolve(result)
           }
 
-          asyncResult.then(app => {
+          asyncResult.then(result => {
+
+            let app
+            if (result.app) {
+              app = result.app
+            } else {
+              app = result
+            }
+
             renderer.renderToString(
               app,
               (error, html) => {
@@ -122,7 +130,9 @@ Meteor.bindEnvironment(function () {
                 const data = frContext.getData()
                 InjectData.pushData(res, 'fast-render-data', data)
 
-                res.write = patchResWrite(res.write, VueSSR.template.replace(VueSSR.outlet, html))
+                const script = (result.js && `<script>${result.js}</script>`) || ''
+
+                res.write = patchResWrite(res.write, VueSSR.template.replace(VueSSR.outlet, html) + script)
 
                 next()
               },