Skip to content

Commit 201526f

Browse files
committed
docs: Update ssr example
1 parent 6d5d484 commit 201526f

File tree

1 file changed

+8
-14
lines changed

1 file changed

+8
-14
lines changed

docs/howto/ssr.md

+8-14
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ If you are using `vue-cli` to build your project, we recommend using [@akryum/vu
77
****
88
:::
99

10-
## Usage
10+
## Setup
1111

1212
`@vue-a11y/dark-mode` adds a variable called `colorModeClass` to the SSR context for you to add to your server side template.
1313

@@ -36,24 +36,13 @@ In your `public/index.ssr.html`
3636
</html>
3737
```
3838

39-
Setup the plugin in `src/main.js`
40-
41-
```js
42-
import Vue from 'vue'
43-
import VueDarkMode from '@vue-a11y/dark-mode'
44-
45-
Vue.use(VueDarkMode)
46-
47-
// ...
48-
```
49-
50-
## Storage
39+
## Usage
5140

5241
For it to work on the server you need to use cookies as storage, just customize the `@vue-a11y/dark-mode` storage api.
5342

5443
In this example, we use the `universal-cookie` to work in both environments.
5544

56-
```vue{2,10,14,18,19,20,21,22}
45+
```vue{2,10,11,15,19,23,24,25,26,27}
5746
<template>
5847
<DarkMode :storage="storage">
5948
<template v-slot="{ mode }">
@@ -63,9 +52,14 @@ In this example, we use the `universal-cookie` to work in both environments.
6352
</template>
6453
6554
<script>
55+
import { DarkMode } from '@vue-a11y/dark-mode'
6656
import Cookies from 'universal-cookie'
6757
6858
export default {
59+
components: {
60+
DarkMode
61+
},
62+
6963
data: () => ({
7064
storage: null
7165
}),

0 commit comments

Comments
 (0)