Add server-side rendering (via bundleRenderer, as this is what the Vue docs recommend, and apparently the only way it does encapsulation)

templates/VueSpa/ClientApp/boot-client.ts

@@ -1,11 +1,10 @@
-import './css/site.css';
 import Vue from 'vue';
-import router from './router';
-
-const App = require('./components/app/app.vue.html');
+import VueRouter from 'vue-router';
+import { routes } from './routes';
+Vue.use(VueRouter);
 
 new Vue({
-    el: 'app',
-    render: h => h(App, { props: {} }),
-    router: router
+    el: '#app-root',
+    router: new VueRouter({ mode: 'history', routes: routes }),
+    render: h => h(require('./components/app/app.vue.html'))
 });

templates/VueSpa/ClientApp/boot-server-bundle.ts

@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
+import { createBundleRenderer } from 'vue-server-renderer';
+import { routes } from './routes';
+Vue.use(VueRouter);
+
+export default function(context: any) {
+    const router = new VueRouter({ mode: 'history', routes: routes })
+    router.push(context.url);
+
+    return new Vue({
+        render: h => h(require('./components/app/app.vue.html')),
+        router: router
+    });
+}

templates/VueSpa/ClientApp/boot-server.ts

@@ -0,0 +1,18 @@
+import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
+import { createBundleRenderer } from 'vue-server-renderer';
+const path = require('path');
+const bundleRenderer = createBundleRenderer(path.resolve('ClientApp/dist/vue-ssr-bundle.json'), {
+    template: '<!--vue-ssr-outlet-->'
+});
+
+export default createServerRenderer(params => {
+    return new Promise<RenderResult>((resolve, reject) => {
+        bundleRenderer.renderToString(params, (error, html) => {
+            if (error) {
+                reject(error);
+            } else {
+                resolve({ html: html });
+            }
+        });
+    });
+});

templates/VueSpa/ClientApp/components/app/app.vue.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="container-fluid">
+    <div id='app-root' class="container-fluid">
         <div class="row">
             <div class="col-sm-3">
                 <menu-component />
@@ -9,7 +9,6 @@
             </div>
         </div>
     </div>
-
 </template>
 
 <script src="./app.ts"></script>

templates/VueSpa/ClientApp/components/navmenu/navmenu.vue.html

@@ -33,3 +33,5 @@
         </div>
     </div>
 </template>
+
+<style src="./navmenu.css" />

templates/VueSpa/ClientApp/router.ts

@@ -1,13 +0,0 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
-
-Vue.use(VueRouter);
-
-export default new VueRouter({
-    mode: 'history',
-    routes: [
-        { path: '/', component: require('./components/home/home.vue.html') },
-        { path: '/counter', component: require('./components/counter/counter.vue.html') },
-        { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') }
-    ]
-});

templates/VueSpa/ClientApp/routes.ts

@@ -0,0 +1,5 @@
+export const routes = [
+    { path: '/', component: require('./components/home/home.vue.html') },
+    { path: '/counter', component: require('./components/counter/counter.vue.html') },
+    { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') }
+];