Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 119b274

Browse filesBrowse files
SteveSandersonMSSteveSandersonMS
committed
Add server-side rendering (via bundleRenderer, as this is what the Vue docs recommend, and apparently the only way it does encapsulation)
1 parent 360688f commit 119b274
Copy full SHA for 119b274

File tree

Expand file treeCollapse file tree

14 files changed

+117
-51
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

14 files changed

+117
-51
lines changed
Open diff view settings
Collapse file

‎templates/VueSpa/ClientApp/boot-client.ts‎

Copy file name to clipboard
+6-7Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import './css/site.css';
21
import Vue from 'vue';
3-
import router from './router';
4-
5-
const App = require('./components/app/app.vue.html');
2+
import VueRouter from 'vue-router';
3+
import { routes } from './routes';
4+
Vue.use(VueRouter);
65

76
new Vue({
8-
el: 'app',
9-
render: h => h(App, { props: {} }),
10-
router: router
7+
el: '#app-root',
8+
router: new VueRouter({ mode: 'history', routes: routes }),
9+
render: h => h(require('./components/app/app.vue.html'))
1110
});
Collapse file

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

Copy file name to clipboard
+16Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Vue from 'vue';
2+
import VueRouter from 'vue-router';
3+
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
4+
import { createBundleRenderer } from 'vue-server-renderer';
5+
import { routes } from './routes';
6+
Vue.use(VueRouter);
7+
8+
export default function(context: any) {
9+
const router = new VueRouter({ mode: 'history', routes: routes })
10+
router.push(context.url);
11+
12+
return new Vue({
13+
render: h => h(require('./components/app/app.vue.html')),
14+
router: router
15+
});
16+
}
Collapse file

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

Copy file name to clipboard
+18Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
2+
import { createBundleRenderer } from 'vue-server-renderer';
3+
const path = require('path');
4+
const bundleRenderer = createBundleRenderer(path.resolve('ClientApp/dist/vue-ssr-bundle.json'), {
5+
template: '<!--vue-ssr-outlet-->'
6+
});
7+
8+
export default createServerRenderer(params => {
9+
return new Promise<RenderResult>((resolve, reject) => {
10+
bundleRenderer.renderToString(params, (error, html) => {
11+
if (error) {
12+
reject(error);
13+
} else {
14+
resolve({ html: html });
15+
}
16+
});
17+
});
18+
});
Collapse file

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

Copy file name to clipboard
+1-2Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="container-fluid">
2+
<div id='app-root' class="container-fluid">
33
<div class="row">
44
<div class="col-sm-3">
55
<menu-component />
@@ -9,7 +9,6 @@
99
</div>
1010
</div>
1111
</div>
12-
1312
</template>
1413

1514
<script src="./app.ts"></script>
Collapse file

‎templates/VueSpa/ClientApp/css/site.css‎ ‎…ClientApp/components/navmenu/navmenu.css‎templates/VueSpa/ClientApp/css/site.css renamed to templates/VueSpa/ClientApp/components/navmenu/navmenu.css templates/VueSpa/ClientApp/css/site.css renamed to templates/VueSpa/ClientApp/components/navmenu/navmenu.css

Copy file name to clipboard
File renamed without changes.
Collapse file

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

Copy file name to clipboardExpand all lines: templates/VueSpa/ClientApp/components/navmenu/navmenu.vue.html
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,5 @@
3333
</div>
3434
</div>
3535
</template>
36+
37+
<style src="./navmenu.css" />
Collapse file

‎templates/VueSpa/ClientApp/router.ts‎

Copy file name to clipboardExpand all lines: templates/VueSpa/ClientApp/router.ts
-13Lines changed: 0 additions & 13 deletions
This file was deleted.
Collapse file

‎templates/VueSpa/ClientApp/routes.ts‎

Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const routes = [
2+
{ path: '/', component: require('./components/home/home.vue.html') },
3+
{ path: '/counter', component: require('./components/counter/counter.vue.html') },
4+
{ path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') }
5+
];
Collapse file

‎templates/VueSpa/Views/Home/Index.cshtml‎

Copy file name to clipboardExpand all lines: templates/VueSpa/Views/Home/Index.cshtml
+4-2Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
ViewData["Title"] = "Home Page";
33
}
44

5-
<app>Loading...</app>
5+
<div asp-prerender-module="ClientApp/dist/main-server">
6+
<div id='app-root'>Loading...</div>
7+
</div>
68

79
@section scripts {
8-
<script src="~/dist/main.js" asp-append-version="true"></script>
10+
<script src="~/dist/main-client.js" asp-append-version="true"></script>
911
}
Collapse file

‎templates/VueSpa/Views/Shared/_Layout.cshtml‎

Copy file name to clipboardExpand all lines: templates/VueSpa/Views/Shared/_Layout.cshtml
-3Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@
66
<title>@ViewData["Title"] - WebApplicationBasic</title>
77

88
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
9-
<environment names="Staging,Production">
10-
<link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
11-
</environment>
129
</head>
1310
<body>
1411
@RenderBody()

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.