Remove Vue template server-side prerendering because of limitations

templates/VueSpa/ClientApp/boot-client.ts

@@ -1,10 +0,0 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
-import { routes } from './routes';
-Vue.use(VueRouter);
-
-new Vue({
-    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

@@ -1,16 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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/boot.ts

@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+Vue.use(VueRouter);
+
+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') }
+];
+
+new Vue({
+    el: '#app-root',
+    router: new VueRouter({ mode: 'history', routes: routes }),
+    render: h => h(require('./components/app/app.vue.html'))
+});

templates/VueSpa/ClientApp/routes.ts

@@ -1,5 +0,0 @@
-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') }
-];

templates/VueSpa/Views/Home/Index.cshtml

@@ -2,10 +2,8 @@
     ViewData["Title"] = "Home Page";
 }
 
-<div asp-prerender-module="ClientApp/dist/main-server">
+<div id='app-root'>Loading...</div>
-    <div id='app-root'>Loading...</div>
-</div>
 
 @section scripts {
-    <script src="~/dist/main-client.js" asp-append-version="true"></script>
+    <script src="~/dist/main.js" asp-append-version="true"></script>
 }

templates/VueSpa/package.json

@@ -3,7 +3,6 @@
   "version": "0.0.0",
   "devDependencies": {
     "@types/requirejs": "^2.1.28",
-    "aspnet-prerendering": "^2.0.3",
     "aspnet-webpack": "^1.0.27",
     "av-ts": "^0.7.1",
     "awesome-typescript-loader": "^3.0.0",
@@ -20,11 +19,8 @@
     "vue": "^2.2.2",
     "vue-loader": "^11.1.4",
     "vue-router": "^2.3.0",
-    "vue-server-renderer": "^2.2.2",
-    "vue-ssr-webpack-plugin": "^1.0.2",
     "vue-template-compiler": "^2.2.2",
     "webpack": "^2.2.0",
-    "webpack-hot-middleware": "^2.12.2",
+    "webpack-hot-middleware": "^2.12.2"
-    "webpack-merge": "^4.0.0"
   }
 }

templates/VueSpa/tsconfig.json

@@ -7,8 +7,7 @@
     "target": "es5",
     "sourceMap": true,
     "skipDefaultLibCheck": true,
-    "types": ["requirejs"],
+    "types": ["requirejs"]
-    "lib": ["dom", "es2015"]
   },
   "exclude": [
       "bin",

templates/VueSpa/webpack.config.js

@@ -2,22 +2,17 @@ const path = require('path');
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
-const VueSSRPlugin = require('vue-ssr-webpack-plugin');
-const merge = require('webpack-merge');
 const bundleOutputDir = './wwwroot/dist';
 
 module.exports = (env) => {
     const isDevBuild = !(env && env.prod);
 
-    // Configuration in common to both client-side and server-side bundles
+    const bundleOutputDir = './wwwroot/dist';
-    const sharedConfig = {
+    return [{
         stats: { modules: false },
         context: __dirname,
         resolve: { extensions: [ '.js', '.ts' ] },
-        output: {
+        entry: { 'main': './ClientApp/boot.ts' },
-            filename: '[name].js',
-            publicPath: '/dist/'
-        },
         module: {
             rules: [
                 { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
@@ -26,22 +21,18 @@ module.exports = (env) => {
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
             ]
         },
+        output: {
+            path: path.join(__dirname, bundleOutputDir),
+            filename: '[name].js',
+            publicPath: '/dist/'
+        },
         plugins: [
             new CheckerPlugin(),
             new webpack.DefinePlugin({
                 'process.env': {
                     NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
                 }
-            })
+            }),
-        ]
-    };
-
-    // Configuration for client-side bundle suitable for running in browsers
-    const clientBundleOutputDir = './wwwroot/dist';
-    const clientBundleConfig = merge(sharedConfig, {
-        entry: { 'main-client': './ClientApp/boot-client.ts' },
-        output: { path: path.join(__dirname, clientBundleOutputDir) },
-        plugins: [
             new webpack.DllReferencePlugin({
                 context: __dirname,
                 manifest: require('./wwwroot/dist/vendor-manifest.json')
@@ -50,34 +41,11 @@ module.exports = (env) => {
             // Plugins that apply in development builds only
             new webpack.SourceMapDevToolPlugin({
                 filename: '[file].map', // Remove this line if you prefer inline source maps
-                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
+                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
             })
         ] : [
             // Plugins that apply in production builds only
             new webpack.optimize.UglifyJsPlugin()
         ])
-    });
+    }];
-
-    // Configuration for server-side (prerendering) bundle suitable for running in Node
-    const serverBundlesOutput = {
-        libraryTarget: 'commonjs2',
-        path: path.join(__dirname, './ClientApp/dist')
-    };
-    const serverBundleConfig = merge(sharedConfig, {
-        resolve: { mainFields: ['main'] },
-        entry: { 'main': './ClientApp/boot-server-bundle.ts' },
-        externals: {},
-        plugins: [new VueSSRPlugin()],
-        output: serverBundlesOutput,
-        target: 'node',
-        devtool: 'inline-source-map'
-    });
-
-    const vueBundleRendererConfig = merge(sharedConfig, {
-        entry: { 'main-server': './ClientApp/boot-server.ts' },
-        output: serverBundlesOutput,
-        target: 'node'
-    });
-
-    return [clientBundleConfig, serverBundleConfig, vueBundleRendererConfig];
 };