docs: better ssr

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index d84133eb9bdbeb835e4eacf4ff613a46e50f9106..9905109b8259a27a44495c17aa008e20548c5926 100644 (file)
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -183,6 +183,16 @@ module.exports = {
         {
           text: 'Server-Side Rendering (SSR)',
           link: '/ssr/',
+          children: [
+            {
+              text: 'Vue and Vite',
+              link: '/ssr/',
+            },
+            {
+              text: 'Nuxt.js',
+              link: '/ssr/nuxt.html',
+            },
+          ],
         },
         {
           text: 'Cookbook',

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index ef8960912c5295792c373a25b9de68bd0667498e..18595861d42844bee6b76ed6d54f4282678bb79a 100644 (file)
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -113,6 +113,14 @@ html:not(.light):root {
   --code-inline-bg-color: var(--c-black-light);
 }
 
+html:not(.light) .custom-block.warning {
+  color: var(--c-text);
+}
+
+html:not(.light) .custom-block.warning a {
+  color: var(--c-brand);
+}
+
 html:not(.light) .DocSearch {
   --docsearch-text-color: var(--c-white-dark);
   --docsearch-container-background: rgba(9, 10, 17, 0.8);

diff --git a/docs/getting-started.md b/docs/getting-started.md
index 2012d24855007c07a9b28f9e27da8b0803e962a9..c61eec74252e25eb8535d56f368d5f4488b4cbac 100644 (file)
--- 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` **and** `@vue/composition-api`. If you are using Nuxt, you should follow [these instructions](./ssr/index.md#nuxt-js).
+`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](/ssr/nuxt).
 :::
 
 Create a pinia (the root store) and pass it to app:

diff --git a/docs/ssr/index.md b/docs/ssr/index.md
index 5cee50cab6d2ac0c41556c1e233bd8158bc7864e..e256e9f9f873808081c859b7cc1e8b2cf2da6401 100644 (file)
--- a/docs/ssr/index.md
+++ b/docs/ssr/index.md
@@ -1,17 +1,24 @@
 # Server Side Rendering (SSR)
 
+:::tip
+If you are using **Nuxt.js,** you need to read [**these instructions**](./nuxt.md) instead.
+:::
+
 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
+    // this works because pinia knows what application is running inside of
+    // `setup()`
     const main = useMainStore()
     return { main }
   },
 })
 ```
 
+## Using the store outside of `setup()`
+
 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
@@ -22,41 +29,21 @@ app.use(router)
 app.use(pinia)
 
 router.beforeEach((to) => {
-  // ✅ This will work make sure the correct store is used for the current running app
+  // ✅ 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'
 })
 ```
 
-## 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:
+Pinia conveniently adds itself as `$pinia` to your app so you can use it in functions like `serverPrefetch()`:
 
 ```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"
-  ]
+  serverPrefetch() {
+    const store = useStore(this.$pinia)
+  },
 }
 ```
 

diff --git a/docs/ssr/nuxt.md b/docs/ssr/nuxt.md
new file mode 100644 (file)
index 0000000..de68638
--- /dev/null
+++ b/docs/ssr/nuxt.md
@@ -0,0 +1,70 @@
+# Nuxt.js
+
+Using Pinia with [Nuxt.js](https://nuxtjs.org/) is easier since Nuxt takes care of a lot of things when it comes to _server side rendering_.
+
+## Installation
+
+Make sure to install [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/) alongside `pinia`:
+
+```bash
+yarn add pinia @nuxtjs/composition-api
+# or with npm
+npm install pinia @nuxtjs/composition-api
+```
+
+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'],
+}
+```
+
+And that's it, use your store as usual!
+
+## Using the store outside of `setup()`
+
+If you want to use a store outside of `setup()`, remember to pass the `pinia` object to `useStore()`. We added it to [the context](https://nuxtjs.org/docs/2.x/internals-glossary/context) so you have access to it in `asyncData()` and `fetch()`:
+
+```js
+export default {
+  asyncData({ pinia }) {
+    const store = useStore(pinia)
+  },
+}
+```
+
+## Using the Nuxt context in stores
+
+You can also use [the context](https://nuxtjs.org/docs/2.x/internals-glossary/context) in any store by using the injected property `$nuxt`:
+
+```js
+defineStore({
+  id: 'main',
+
+  actions: {
+    login() {
+      if (!canLogin()) {
+        this.$nuxt.redirect('/login')
+      }
+    },
+  },
+})
+```
+
+## Typescript
+
+If you are using TypeScript or have a `jsconfig.json`, you should also add the types for `context.pinia`:
+
+```js
+{
+  "include": [
+    // ...
+    "pinia/nuxt/types"
+  ]
+}
+```
+
+This will also ensure you have autocompletion 😉 .