Commit fc0c544

committed

add vue SSR example

1 parent 5b3067f commit fc0c544Copy full SHA for fc0c544

File tree

+48

-2

lines changed

+48

-2

lines changed

Lines changed: 41 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,41 @@`
	`1`	`+// Step 1: Create a Vue instance`
	`2`	`+const Vue = require('vue')`
	`3`	`+const app = new Vue({`
	`4`	+ template: `<div>Hello World</div>`
	`5`	`+})`
	`6`	`+`
	`7`	+const template = `<html>
	`8`	`+ <head>`
	`9`	`+ <title>{{ title }}</title>`
	`10`	`+ </head>`
	`11`	`+ <body>`
	`12`	`+ <!--vue-ssr-outlet-->`
	`13`	`+ </body>`
	`14`	+</html>`
	`15`	`+`
	`16`	`+// Step 2: Create a renderer`
	`17`	`+const renderer = require('vue-server-renderer').createRenderer({`
	`18`	`+ // template: require('fs').readFileSync('./index.template.html', 'utf-8')`
	`19`	`+ template: template`
	`20`	`+})`
	`21`	`+`
	`22`	`+exports.handler = (event, context, callback) => {`
	`23`	`+ const ssrContext = {`
	`24`	`+ title: 'Vue SSR Serverless'`
	`25`	`+ }`
	`26`	`+`
	`27`	`+ // Step 3: Render the Vue instance to HTML`
	`28`	`+ renderer.renderToString(app, ssrContext, (err, html) => {`
	`29`	`+ if (err) throw err`
	`30`	`+`
	`31`	`+ const response = {`
	`32`	`+ statusCode: 200,`
	`33`	`+ headers: {`
	`34`	`+ 'Content-Type': 'text/html',`
	`35`	`+ },`
	`36`	`+ body: html`
	`37`	`+ }`
	`38`	`+`
	`39`	`+ return callback(null, response)`
	`40`	`+ })`
	`41`	`+}`

Lines changed: 3 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,9 @@`
`13`	`13`	`"react": "^16.4.0",`
`14`	`14`	`"react-dom": "^16.4.0",`
`15`	`15`	`"react-scripts": "1.1.4",`
`16`		`- "serverless-http": "^1.6.0"`
	`16`	`+ "serverless-http": "^1.6.0",`
	`17`	`+ "vue": "^2.5.17",`
	`18`	`+ "vue-server-renderer": "^2.5.17"`
`17`	`19`	`},`
`18`	`20`	`"scripts": {`
`19`	`21`	`"start": "cross-env NODE_ENV=dev npm-run-all --parallel start:app start:server",`

Lines changed: 4 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,10 @@ class App extends Component {`
`29`	`29`	Example using `serverless-http` module
`30`	`30`	`</a>`
`31`	`31`	`<a className='link' href="/.netlify/functions/react-express-ssr">`
`32`		`- Example using react serverside rendering`
	`32`	`+ Example using React serverside rendering`
	`33`	`+ </a>`
	`34`	`+ <a className='link' href="/.netlify/functions/vue-ssr">`
	`35`	`+ Example using Vue serverside rendering`
`33`	`36`	`</a>`
`34`	`37`	`</div>`
`35`	`38`	`</div>`

Comments

(0)