From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Tue, 24 Aug 2021 07:31:36 +0000 (+0200)
Subject: docs: document pinia plugins for nuxt
X-Git-Tag: @pinia/nuxt@0.0.2~38
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=c0b66a926ef774017278704e8ce99c22870ea88e;p=thirdparty%2Fvuejs%2Fpinia.git

docs: document pinia plugins for nuxt

See #622
---

diff --git a/packages/docs/core-concepts/plugins.md b/packages/docs/core-concepts/plugins.md
index 64c8178f..d0a19c8a 100644
--- a/packages/docs/core-concepts/plugins.md
+++ b/packages/docs/core-concepts/plugins.md
@@ -350,3 +350,29 @@ declare module 'pinia' {
   }
 }
 ```
+
+## Nuxt.js
+
+When [using pinia alongside Nuxt](../ssr/nuxt.md), you will have to create a [Nuxt plugin](https://nuxtjs.org/docs/2.x/directory-structure/plugins) first. This will give you access to the `pinia` instance:
+
+```ts
+// plugins/myPiniaPlugin.js
+import { PiniaPluginContext } from 'pinia'
+import { Plugin } from '@nuxt/types'
+
+function MyPiniaPlugin({ store }: PiniaPluginContext) {
+  store.$subscribe((mutation) => {
+    // react to store changes
+    console.log(`[🍍 ${mutation.storeId}]: ${mutation.type}.`)
+  })
+
+  return { creationTime: new Date() }
+}
+
+const myPlugin: Plugin = ({ pinia }) {
+  pinia.use(MyPiniaPlugin);
+}
+export default myPlugin
+```
+
+Note the above example is using TypeScript, you have to remove the type annotations `PiniaPluginContext` and `Plugin` as well as their imports if you are using a `.js` file.