From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Tue, 23 Mar 2021 09:25:34 +0000 (+0100)
Subject: docs: ssr
X-Git-Tag: v2.0.0-alpha.8~19
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=2280a1d32df12e5e9f6598946503e7992329622a;p=thirdparty%2Fvuejs%2Fpinia.git

docs: ssr
---

diff --git a/docs/cookbook/composing-stores.md b/docs/cookbook/composing-stores.md
index 39251c61..74248b8f 100644
--- a/docs/cookbook/composing-stores.md
+++ b/docs/cookbook/composing-stores.md
@@ -1,10 +1,10 @@
 # Composing Stores
 
-Composing stores may look hard at first glance but there is only one rule to follow really:
+Composing stores is about having stores that use each other and there is one rule to follow:
 
-If **multiple stores use each other** or you need to use **multiple stores** at the same time, you must create a **separate file** where you import all of them.
+If **two or more stores use each other**, you must create a new store in a **separate file** where you import and use all of them.
 
-If one store uses an other store, there is no need to create a new file, you can directly import it. Think of it as nesting.
+Note that if one store uses an other store, **there is no need to create a new store in a separate file**, you can directly import it. Think of it as nesting.
 
 You can call `useOtherStore()` at the top of any getter an action:
 
@@ -66,7 +66,6 @@ import { useCartStore } from './cart'
 
 export const useSharedStore = defineStore({
   id: 'shared',
-  state: () => ({}),
   actions: {
     async orderCart() {
       const user = useUserStore()
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 5043df26..6046e3f1 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -9,7 +9,7 @@ npm install pinia@next
 ```
 
 :::tip
-`pinia@next` install Pinia v2 for Vue 3. If your app is using Vue 2, you need to install Pinia v1: `pinia@latest`.
+`pinia@next` install Pinia v2 for Vue 3. If your app is using Vue 2, you need to install Pinia v1: `pinia@latest` **and** `@vue/composition-api`. If you are using Nuxt, you should follow [these instructions](./server-side-rendering.md#nuxt-js).
 :::
 
 Create a pinia (the root store) and pass it to app:
diff --git a/docs/server-side-rendering.md b/docs/server-side-rendering.md
index ca2c3c4c..5cee50ca 100644
--- a/docs/server-side-rendering.md
+++ b/docs/server-side-rendering.md
@@ -29,6 +29,39 @@ router.beforeEach((to) => {
 })
 ```
 
+## Nuxt.js
+
+Make sure to install [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/):
+
+```bash
+yarn add pinia @nuxtjs/composition-api
+# or with npm
+npm install pinia @nuxtjs/composition-api
+```
+
+If you are using Nuxt, we supply a _module_ to handle everything for you, you only need to add it to `buildModules` in your `nuxt.config.js` file:
+
+```js
+// nuxt.config.js
+export default {
+  // ... other options
+  buildModules: ['@nuxtjs/composition-api', 'pinia/nuxt'],
+}
+```
+
+If you are using TypeScript or have a `jsconfig.json`, you should also add the types for `context.pinia`:
+
+```js
+{
+  "include": [
+    // ...
+    "pinia/nuxt/types"
+  ]
+}
+```
+
+## State hydration
+
 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
@@ -47,7 +80,43 @@ app.use(pinia)
 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:
+Depending on what you are using for SSR, you will set an _initial state_ variable that will be serialized in the HTML. Example with [vite-ssr](https://github.com/frandiox/vite-ssr):
+
+```js
+export default viteSSR(App, { routes }, ({ initialState }) => {
+  // ...
+  if (import.meta.env.SSR) {
+    initialState.pinia = JSON.stringify(pinia.state.value)
+  }
+})
+```
+
+And add a _module_ to load the state on the client. It should be picked up automatically by `vite-ssr`:
+
+```ts
+// modules/pinia.ts
+import { createPinia } from 'pinia'
+import { UserModule } from '~/types'
+
+export const install: UserModule = ({ isClient, router, app }) => {
+  const pinia = createPinia()
+  app.use(pinia)
+  router.pinia = pinia
+
+  if (isClient) {
+    console.log('setting')
+    // @ts-ignore
+    if (window.__INITIAL_STATE__?.pinia) {
+      // @ts-ignore
+      pinia.state.value = JSON.parse(window.__INITIAL_STATE__.pinia)
+    }
+  }
+
+  return pinia
+}
+```
+
+Adapt this strategy to your environment. Make sure to hydrate pinia's state before calling any `useStore()` function on client side. 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()