Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hilongjw/vue-ssr
Use Vue 2.0 Server Side Rendering with Express
https://github.com/hilongjw/vue-ssr
Last synced: 2 months ago
JSON representation
Use Vue 2.0 Server Side Rendering with Express
- Host: GitHub
- URL: https://github.com/hilongjw/vue-ssr
- Owner: hilongjw
- Created: 2016-10-13T03:21:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-17T11:28:20.000Z (about 8 years ago)
- Last Synced: 2024-11-03T01:32:50.766Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 93
- Watchers: 5
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-ssr - ssr?style=social) - 结合Express使用Vue2服务端渲染 (服务端)
- awesome-github-vue - vue-ssr - 结合Express使用Vue2服务端渲染 (服务端)
- awesome-github-vue - vue-ssr - 结合Express使用Vue2服务端渲染 (服务端)
- awesome - vue-ssr - 结合Express使用Vue2服务端渲染 (服务端)
README
# Vue SSR
Use Vue 2.0 server-side rendering with Express
## Installation
```sh
npm i vue-ssr --save
```
## Usage
```javascript
const express = require('express')
const router = express.Router()
const VueSSR = require('vue-ssr')
// webpack server-side bundle config
const serverConfig = require('path to webpack.server.js')
// create a project renderer
const indexRenderer = new VueSSR({
projectName: 'index',
rendererOptions: {
cache: require('lru-cache')({
max: 1000,
maxAge: 1000 * 60 * 15
})
},
webpackServer: serverConfig
})
// handle
function indexView (req, res) => {
indexRenderer.render(req, res, `
Cov-X
{{ STYLE }}
{{ APP }}
`)
}
router.get('/', indexView)
router.get('/home', indexView)
router.get('/article', indexView)
router.get('/tag', indexView)
```
## API
### projectName
project name of webpack entries that you want to server side rendering
```
// webpack config
...
entry: {
index: ['../path to app client entry'],
dashboard: ['../path to dashboard project client entry']
},
...
```
```
const indexRenderer = new VueSSR({
projectName: 'index',
webpackServer: serverConfig
})
const dashRenderer = new VueSSR({
projectName: 'dashboard',
webpackServer: serverConfig
})
```
### rendererOptions
rendererOptions is [Vue server renderer](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#renderer-options) options
#### directives
Allows you to provide server-side implementations for your custom directives:
```
const indexRenderer = new VueSSR('index', {
directives: {
example (vnode, directiveMeta) {
// transform vnode based on directive binding metadata
}
}
}, serverConfig)
```
#### cache
```
const indexRenderer = new VueSSR('index', {
cache: require('lru-cache')({
max: 1000,
maxAge: 1000 * 60 * 15
})
}, serverConfig)
```
[Why Use bundleRenderer?](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#creating-the-server-bundle)
### webpackServer
for example [webpack.server.js](https://github.com/hilongjw/vue-express-hot-simple/blob/master/build/webpack.server.js)
```
const serverConfig = require('path to webpack.server.js')
const indexRenderer = new VueSSR({
projectName: 'index',
webpackServer: serverConfig
})
```
### AppHtml
The default AppHtml is `{{ APP }}`, rendering of the server side is replaced by AppHtml
```html
{{ APP }}
```
```html
...
```
You can also customize it
```javascrit
const indexRenderer = new VueSSR({
projectName: 'index',
webpackServer: serverConfig,
AppHtml: '
'
})
```
### contextHandler
```
const indexRenderer = new VueSSR({
contextHandler: function (req) {
return {
url: req.url,
ua: uaParser(req.headers['user-agent'])
}
}
})
```
### defaultHeadData
```javascript
const indexRenderer = new VueSSR({
defaultHeadData: {
baseTitle: 'VueSSR',
baseKeywords: ',vue-ssr',
baseDescription: 'Vue server-side rendering',
title: '',
description: '',
keywords: ''
}
})
```
```jade
head
meta(charset="utf-8")
meta(name="renderer", content="webkit")
title {{ _VueSSR_Title }}
meta(name="viewport", content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no")
meta(name="keywords", content="{{ _VueSSR_Keywords }}")
meta(name="description", content="{{ _VueSSR_Description }}")
```
server-entry.js
```
export default context => {
router.push(context.url)
return Promise.all(router.getMatchedComponents().map(component => {
if (component.preFetch) {
return component.preFetch(store, router, context)
}
})).then(() => {
context.initialState = store.state
return app
})
}
```
simple component
```javascript
export default {
preFetch (store, router, context) {
context.headData = {
title: 'this article's title,
description: 'about this article',
keywords: 'Vue,vuejs,javascript'
}
return Promise.resolve()
}
}
```
# Example
[vue-express-hot-simple](https://github.com/hilongjw/vue-express-hot-simple)
# License
MIT