From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 8 Mar 2021 09:36:49 +0000 (+0100)
Subject: docs: add page
X-Git-Tag: v2.0.0-alpha.8~56
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=96511c9b5b263e0376d616c3d90af89cfd4f51df;p=thirdparty%2Fvuejs%2Fpinia.git

docs: add page
---

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 243a4f33..ea0f95dc 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -62,10 +62,10 @@ module.exports = {
               text: 'Getting Started',
               link: '/guide/',
             },
-            {
-              text: 'Features',
-              link: '/guide/features',
-            },
+            // {
+            //   text: 'Features',
+            //   link: '/guide/features',
+            // },
             {
               text: 'Server-Side Rendering (SSR)',
               link: '/guide/ssr',
diff --git a/docs/guide/index.md b/docs/guide/index.md
index cec4b826..b3a22cd5 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -184,68 +184,6 @@ Simply set your store `$stet` property to a new object:
 main.$state = { counter: 666, name: 'Paimon' }
 ```
 
-## SSR
-
-Creating stores with Pinia should work out of the box for SSR as long as you call your `useStore()` functions at the top of `setup` functions, `getters` and `actions`:
-
-```ts
-export default defineComponent({
-  setup() {
-    // this works because pinia knows what application is running
-    const main = useMainStore()
-    return { main }
-  },
-})
-```
-
-If you need to use the store somewhere else, you need to pass the `pinia` instance [that was passed to the app](#install-the-plugin) to the `useStore()` function call:
-
-```ts
-const pinia = createPinia()
-const app = createApp(App)
-
-app.use(router)
-app.use(pinia)
-
-router.beforeEach((to) => {
-  // ✅ This will work make sure the correct store is used for the current running app
-  const main = useMainStore(pinia)
-
-  if (to.meta.requiresAuth && !main.isLoggedIn) return '/login'
-})
-```
-
-To hydrate the initial state, you need to make sure the rootState is included somewhere in the HTML for Pinia to pick it up later on:
-
-```js
-import { createPinia } from 'pinia'
-// retrieve the rootState server side
-const pinia = createPinia()
-const app = createApp(App)
-app.use(router)
-app.use(pinia)
-
-// after rendering the page, the root state is build and can be read
-// serialize, escape (VERY important if the content of the state can be changed
-// by the user, which is almost always the case), and place it somewhere on
-// the page, for example, as a global variable. Note you need to use your own
-// `escapeHTML()` function or use an existing package
-escapeHTML(JSON.stringify(pinia.state.value))
-```
-
-On client side, you must hydrate pinia's state before calling any `useStore()` function. For example, if we serialize the state into a `<script>` tag to make it accessible globally on client side through `window.__pinia`, we can write this:
-
-```js
-const pinia = createPinia()
-const app = createApp(App)
-app.use(pinia)
-
-// must be set by the user
-if (isClient) {
-  pinia.state.value = JSON.parse(window.__pinia)
-}
-```
-
 ## Composing Stores
 
 Composing stores may look hard at first glance but there is only one rule to follow really:
diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md
new file mode 100644
index 00000000..36c2c5d9
--- /dev/null
+++ b/docs/guide/ssr.md
@@ -0,0 +1,61 @@
+# Server Side Rendering
+
+Creating stores with Pinia should work out of the box for SSR as long as you call your `useStore()` functions at the top of `setup` functions, `getters` and `actions`:
+
+```ts
+export default defineComponent({
+  setup() {
+    // this works because pinia knows what application is running
+    const main = useMainStore()
+    return { main }
+  },
+})
+```
+
+If you need to use the store somewhere else, you need to pass the `pinia` instance [that was passed to the app](#install-the-plugin) to the `useStore()` function call:
+
+```ts
+const pinia = createPinia()
+const app = createApp(App)
+
+app.use(router)
+app.use(pinia)
+
+router.beforeEach((to) => {
+  // ✅ This will work make sure the correct store is used for the current running app
+  const main = useMainStore(pinia)
+
+  if (to.meta.requiresAuth && !main.isLoggedIn) return '/login'
+})
+```
+
+To hydrate the initial state, you need to make sure the rootState is included somewhere in the HTML for Pinia to pick it up later on:
+
+```js
+import { createPinia } from 'pinia'
+// retrieve the rootState server side
+const pinia = createPinia()
+const app = createApp(App)
+app.use(router)
+app.use(pinia)
+
+// after rendering the page, the root state is build and can be read
+// serialize, escape (VERY important if the content of the state can be changed
+// by the user, which is almost always the case), and place it somewhere on
+// the page, for example, as a global variable. Note you need to use your own
+// `escapeHTML()` function or use an existing package
+escapeHTML(JSON.stringify(pinia.state.value))
+```
+
+On client side, you must hydrate pinia's state before calling any `useStore()` function. For example, if we serialize the state into a `<script>` tag to make it accessible globally on client side through `window.__pinia`, we can write this:
+
+```js
+const pinia = createPinia()
+const app = createApp(App)
+app.use(pinia)
+
+// must be set by the user
+if (isClient) {
+  pinia.state.value = JSON.parse(window.__pinia)
+}
+```