From c0b66a926ef774017278704e8ce99c22870ea88e Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Tue, 24 Aug 2021 09:31:36 +0200 Subject: [PATCH] docs: document pinia plugins for nuxt See #622 --- packages/docs/core-concepts/plugins.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) 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. -- 2.47.3