Skip to content

Commit 33608c8

Browse files
author
Guillaume Chau
committed
docs: migrated to vuepress
1 parent f90e301 commit 33608c8

File tree

9 files changed

+6886
-306
lines changed

9 files changed

+6886
-306
lines changed

‎README.md

Lines changed: 11 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
2+
<p align="center">
3+
<img src="./logo.png">
4+
</p>
5+
16
# @akryum/vue-cli-plugin-ssr
27

38
[![npm](https://img.shields.io/npm/v/@akryum%2Fvue-cli-plugin-ssr.svg) ![npm](https://img.shields.io/npm/dm/@akryum%2Fvue-cli-plugin-ssr.svg)](https://www.npmjs.com/package/@akryum%2Fvue-cli-plugin-ssr)
@@ -11,6 +16,12 @@ Simple Server-Side-Rendering plugin for Vue CLI (Work-in-Progress)
1116
</a>
1217
</p>
1318

19+
<br>
20+
21+
<h3 align="center"><a href="https://vue-cli-plugin-ssr.netlify.com/">Documentation</a></h3>
22+
23+
<br>
24+
1425
## Sponsors
1526

1627
### Silver
@@ -38,55 +49,3 @@ Simple Server-Side-Rendering plugin for Vue CLI (Work-in-Progress)
3849

3950
- Automatic conversion of vuex modules to `state () {}`
4051
- Integration with CLI UI
41-
42-
## Usage
43-
44-
```bash
45-
vue add @akryum/ssr
46-
yarn run ssr:serve
47-
```
48-
49-
To run the app in production:
50-
51-
```bash
52-
yarn run ssr:build
53-
yarn run ssr:start
54-
```
55-
56-
## Configuration
57-
58-
Here are the optional settings available in your `vue.config.js` file:
59-
60-
```js
61-
const path = require('path')
62-
63-
module.exports = {
64-
pluginOptions: {
65-
ssr: {
66-
// Listening port for `serve` command
67-
port: null,
68-
// Listening host for `serve` command
69-
host: null,
70-
// Entry for each target
71-
entry: target => `./src/entry-${target}`,
72-
// Default title
73-
defaultTitle: 'My app',
74-
// Path to favicon
75-
favicon: './public/favicon.ico',
76-
// Skip some requests from being server-side rendered
77-
skipRequests: req => req.originalUrl === '/graphql',
78-
// See https://ssr.vuejs.org/guide/build-config.html#externals-caveats
79-
nodeExternalsWhitelist: [/\.css$/, /\?vue&type=style/],
80-
// Function to connect custom middlewares
81-
extendServer: app => {
82-
const cookieParser = require('cookie-parser')
83-
app.use(cookieParser())
84-
},
85-
// Paths
86-
distPath: path.resolve(__dirname, './dist'),
87-
templatePath: path.resolve(__dirname, './dist/index.html'),
88-
serviceWorkerPath: path.resolve(__dirname, './dist/service-worker.js'),
89-
}
90-
}
91-
}
92-
```

‎docs/.vuepress/config.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
module.exports = {
2+
base: '/',
3+
serviceWorker: true,
4+
head: [
5+
['link', { rel: 'icon', href: '/logo.png' }],
6+
],
7+
locales: {
8+
'/': {
9+
lang: 'en-US',
10+
title: 'Vue CLI SSR plugin',
11+
description: 'Dead Simple Server-Side-Rendering',
12+
},
13+
},
14+
themeConfig: {
15+
repo: 'Akryum/vue-apollo',
16+
docsDir: 'docs',
17+
editLinks: true,
18+
locales: {
19+
'/': {
20+
selectText: 'Languages',
21+
label: 'English',
22+
lastUpdated: 'Last Updated',
23+
nav: [
24+
{
25+
text: 'Guide',
26+
link: '/guide/',
27+
},
28+
{
29+
text: 'Patreon',
30+
link: 'https://www.patreon.com/akryum',
31+
},
32+
],
33+
sidebarDepth: 3,
34+
sidebar: {
35+
'/guide/': [
36+
'',
37+
'configuration',
38+
'directives',
39+
],
40+
},
41+
},
42+
},
43+
},
44+
}

‎docs/.vuepress/public/logo.png

2.35 KB
Loading

‎docs/README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
home: true
3+
heroImage: /logo.png
4+
actionText: Get Started →
5+
actionLink: /guide/
6+
features:
7+
- title: Automatic conversion
8+
details: Do most of the conversion of your project to SSR!
9+
- title: Feature-rich
10+
details: Vuex, Async routes, Express server, Custom middlewares...
11+
- title: Apollo Support
12+
details: Add vue-cli-plugin-apollo before this plugin to enjoy SSR GraphQL
13+
footer: LICENCE MIT - Created by Guillaume CHAU (@Akryum)
14+
---
15+
16+
<p style="text-align: center;">
17+
<a href="https://www.patreon.com/akryum" target="_blank">
18+
<img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become a Patreon">
19+
</a>
20+
</p>
21+
22+
## Sponsors
23+
24+
### Silver
25+
26+
<p style="text-align: center;">
27+
<a href="https://vueschool.io/" target="_blank">
28+
<img src="https://vueschool.io/img/logo/vueschool_logo_multicolor.svg" alt="VueSchool logo" class="silver-sponsor">
29+
</a>
30+
</p>
31+
32+
33+
## Quick Start:
34+
35+
```bash
36+
vue add @akryum/ssr
37+
yarn run ssr:serve
38+
```

‎docs/guide/configuration.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Configuration
2+
3+
Here are the optional settings available in your `vue.config.js` file:
4+
5+
```js
6+
const path = require('path')
7+
8+
module.exports = {
9+
pluginOptions: {
10+
ssr: {
11+
// Listening port for `serve` command
12+
port: null,
13+
// Listening host for `serve` command
14+
host: null,
15+
// Entry for each target
16+
entry: target => `./src/entry-${target}`,
17+
// Default title
18+
defaultTitle: 'My app',
19+
// Path to favicon
20+
favicon: './public/favicon.ico',
21+
// Skip some requests from being server-side rendered
22+
skipRequests: req => req.originalUrl === '/graphql',
23+
// See https://ssr.vuejs.org/guide/build-config.html#externals-caveats
24+
nodeExternalsWhitelist: [/\.css$/, /\?vue&type=style/],
25+
// Function to connect custom middlewares
26+
extendServer: app => {
27+
const cookieParser = require('cookie-parser')
28+
app.use(cookieParser())
29+
},
30+
// Paths
31+
distPath: path.resolve(__dirname, './dist'),
32+
templatePath: path.resolve(__dirname, './dist/index.html'),
33+
serviceWorkerPath: path.resolve(__dirname, './dist/service-worker.js'),
34+
// Directives fallback
35+
directives: {
36+
// See 'Directive' chapter
37+
}
38+
}
39+
}
40+
}
41+
```

‎docs/guide/directives.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# Directives fallback
2+
3+
Let's take the example of a directive which adds red color to a div:
4+
5+
```js
6+
export default {
7+
inserted(el) {
8+
el.style.color = 'red'
9+
}
10+
}
11+
```
12+
13+
```js
14+
Vue.directive('red', red)
15+
```
16+
17+
```html
18+
<div v-red>My red text</div>
19+
```
20+
21+
This directive won't work with SSR. So we need a fallback.
22+
23+
SSR fallback for our directive (`red-server.js`):
24+
25+
```js
26+
/**
27+
* @param node the VNode where we applied the directive
28+
* @param dir properties of the directive
29+
*/
30+
module.exports = function (node, dir) {
31+
// get the current style of the node. If it doesn't have one, we create it
32+
const style = node.data.style || (node.data.style = {})
33+
// the style can be an array or an object
34+
if (Array.isArray(style)) {
35+
//if it's an array, we add a new style in it
36+
style.push({ color: 'red' })
37+
} else {
38+
// else we just set the color to red
39+
style.color = 'red'
40+
}
41+
}
42+
```
43+
44+
Then we need to register the directive in `vue.config.js`:
45+
46+
```js
47+
const red = require('red-server')
48+
49+
module.exports = {
50+
pluginOptions: {
51+
ssr: {
52+
directives: {
53+
red
54+
}
55+
}
56+
}
57+
}
58+
```

‎docs/guide/index.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Usage
2+
3+
::: warning
4+
This plugin is intended to be used in a project created with Vue CLI 3.
5+
:::
6+
7+
Add the plugin to the project:
8+
9+
```bash
10+
vue add @akryum/ssr
11+
```
12+
13+
Start the devlopment server:
14+
15+
```bash
16+
yarn run ssr:serve
17+
```
18+
19+
To run the app in production:
20+
21+
```bash
22+
yarn run ssr:build
23+
yarn run ssr:start
24+
```

‎package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
"scripts": {
88
"prepublishOnly": "yarn run test",
99
"test": "yarn run lint",
10-
"lint": "eslint ."
10+
"lint": "eslint .",
11+
"docs:dev": "vuepress dev docs",
12+
"docs:build": "vuepress build docs"
1113
},
1214
"repository": {
1315
"type": "git",
@@ -53,7 +55,8 @@
5355
"eslint-plugin-import": "^2.13.0",
5456
"eslint-plugin-node": "^7.0.1",
5557
"eslint-plugin-promise": "^3.8.0",
56-
"eslint-plugin-standard": "^3.1.0"
58+
"eslint-plugin-standard": "^3.1.0",
59+
"vuepress": "^0.14.8"
5760
},
5861
"peerDependencies": {
5962
"@vue/cli-service": "^3.0.0",

0 commit comments

Comments
 (0)