# 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_. For instance, **you don't need to care about serialization nor XSS attacks**.
+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_. For instance, **you don't need to care about serialization nor XSS attacks**. Pinia supports Nuxt Bridge and Nuxt 3, for bare Nuxt 2 support, [See below](#nuxt-2-without-bridge).
## Installation
-Make sure to install [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/) alongside `pinia`:
-
```bash
-yarn add pinia @pinia/nuxt @nuxtjs/composition-api
+yarn add @pinia/nuxt
# or with npm
-npm install pinia @pinia/nuxt @nuxtjs/composition-api
+npm install @pinia/nuxt
```
We supply a _module_ to handle everything for you, you only need to add it to `buildModules` in your `nuxt.config.js` file:
export default {
// ... other options
buildModules: [
- // Nuxt 2 only:
- // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
- '@nuxtjs/composition-api/module',
+ // ...
'@pinia/nuxt',
],
}
}
```
-## Using Pinia alongside Vuex
+## Auto imports
-It is recommended to **avoid using both Pinia and Vuex** but if you need to use both, you need to tell pinia to not disable it:
+By default `@pinia/nuxt` exposes one single auto import: `usePinia()`, which is similar to `getActivePinia()` but works better with Nuxt. You can add auto imports to make your life easier:
```js
// nuxt.config.js
export default {
+ // ... other options
buildModules: [
- '@nuxtjs/composition-api/module',
- ['@pinia/nuxt', { disableVuex: false }],
+ // ...
+ [
+ '@pinia/nuxt',
+ {
+ autoImports: [
+ // automatically imports `usePinia()`
+ 'defineStore',
+ // automatically imports `usePinia()` as `usePiniaStore()`
+ ['defineStore', 'definePiniaStore'],
+ ],
+ },
+ ],
],
- // ... other options
}
```
```
This will also ensure you have autocompletion 😉 .
+
+## Nuxt 2 without bridge
+
+Pinia supports Nuxt 2 until `@pinia/nuxt` v0.1.9. Make sure to also install [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/) alongside `pinia`:
+
+```bash
+yarn add pinia @pinia/nuxt @nuxtjs/composition-api
+# or with npm
+npm install pinia @pinia/nuxt @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: [
+ // Nuxt 2 only:
+ // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
+ '@nuxtjs/composition-api/module',
+ '@pinia/nuxt',
+ ],
+}
+```
+
+### Using Pinia alongside Vuex
+
+It is recommended to **avoid using both Pinia and Vuex** but if you need to use both, you need to tell pinia to not disable it:
+
+```js
+// nuxt.config.js
+export default {
+ buildModules: [
+ '@nuxtjs/composition-api/module',
+ ['@pinia/nuxt', { disableVuex: false }],
+ ],
+ // ... other options
+}
+```