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 64c8178f4429f40fa522a6cd45d117983647e38b..d0a19c8afed374d1c96c7caf76e164e80007fd00 100644 (file)
--- 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.