Nuxt.js

Usar Pinia con Nuxt.js es más fácil debido a que Nuxt tiene en cuenta muchas cosas cuando hablamos de renderizado del lado del servidor. Por ejemplo, no necesitas preocuparte sobre serialización ni ataques XSS. Pinia soporta Nuxt Bridge y Nuxt 3. Para soporte directo con Nuxt 2, mira más abajo.

Instalación

bash

yarn add pinia @pinia/nuxt
# o con npm
npm install pinia @pinia/nuxt

yarn add pinia @pinia/nuxt
# o con npm
npm install pinia @pinia/nuxt

TIP

Si estás usando npm puede que te encuentres con el error ERESOLVE unable to resolve dependency tree. En ese caso, añade lo siguiente a tu package.json:

"overrides": { 
  "vue": "latest"
}

"overrides": { 
  "vue": "latest"
}

Proporcionamos un módulo para manejar todo por ti, solo necesitas añadirlo a modules en tu archivo nuxt.config.js:

// nuxt.config.js
export default defineNuxtConfig({
  // ... otras opciones
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

// nuxt.config.js
export default defineNuxtConfig({
  // ... otras opciones
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

Y eso es todo, ¡usa tu almacén como siempre!

Usar el almacén fuera de `setup()`

Si quieres usar un almacén fuera de setup(), recuerda pasar el objeto de pinia a useStore(). Lo hemos añadido al contexto para que tengas acceso a el en asyncData() y fetch():

import { useStore } from '~/stores/myStore'

export default {
  asyncData({ $pinia }) {
    const store = useStore($pinia)
  },
}

import { useStore } from '~/stores/myStore'

export default {
  asyncData({ $pinia }) {
    const store = useStore($pinia)
  },
}

Como con onServerPrefetch(), no necesitas hacer nada especial si quieres llamar a una acción de un almacén en asyncData():

vue

<script setup>
const store = useStore()
const { data } = await useAsyncData('user', () => store.fetchUser())
</script>

<script setup>
const store = useStore()
const { data } = await useAsyncData('user', () => store.fetchUser())
</script>

Importaciones automáticas

Por defecto @pinia/nuxt expone una sola importación automática: usePinia(), que es similar a getActivePinia() pero funciona mejor con Nuxt. Puedes añadir importaciones automáticas para facilitarte la vida:

// nuxt.config.js
export default defineNuxtConfig({
  // ... otras opciones
  modules: [
    // ...
    [
      '@pinia/nuxt',
      {
        autoImports: [
          // importa automáticamente `defineStore`
          'defineStore', // import { defineStore } from 'pinia'
          // importa automáticamente `defineStore` como `definePiniaStore`
          ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
        ],
      },
    ],
  ],
})

// nuxt.config.js
export default defineNuxtConfig({
  // ... otras opciones
  modules: [
    // ...
    [
      '@pinia/nuxt',
      {
        autoImports: [
          // importa automáticamente `defineStore`
          'defineStore', // import { defineStore } from 'pinia'
          // importa automáticamente `defineStore` como `definePiniaStore`
          ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
        ],
      },
    ],
  ],
})

Nuxt 2 sin bridge

Pinia soporta Nuxt 2 hasta @pinia/nuxt v0.2.1. Asegúrate de instalar también @nuxtjs/composition-api junto con pinia:

bash

yarn add pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api
# o con npm
npm install pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api

yarn add pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api
# o con npm
npm install pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api

Suministramos un módulo para manejar todo por ti, solo necesitas añadirlo a buildModules en tu archivo nuxt.config.js:

// nuxt.config.js
export default {
  // ... otras opciones
  buildModules: [
    // solo Nuxt 2:
    // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
    '@nuxtjs/composition-api/module',
    '@pinia/nuxt',
  ],
}

// nuxt.config.js
export default {
  // ... otras opciones
  buildModules: [
    // solo Nuxt 2:
    // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
    '@nuxtjs/composition-api/module',
    '@pinia/nuxt',
  ],
}

TypeScript

Si estás usando Nuxt 2 (@pinia/nuxt < 0.3.0) con TypeScript o tienes un jsconfig.json, deberás añadir también los tipos para context.pinia:

json

{
  "types": [
    // ...
    "@pinia/nuxt"
  ]
}

{
  "types": [
    // ...
    "@pinia/nuxt"
  ]
}

Esto también asegurará que tengas autocompletado 😉 .

Usar Pinia junto con Vuex

Es recomendable evitar usar Pinia y Vuex a la vez, pero si necesitas usar ambos tendrás que decirle a pinia que no lo deshabilite:

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/composition-api/module',
    ['@pinia/nuxt', { disableVuex: false }],
  ],
  // ... otras opciones
}

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/composition-api/module',
    ['@pinia/nuxt', { disableVuex: false }],
  ],
  // ... otras opciones
}

Nuxt.js #

Instalación #

Usar el almacén fuera de setup() #

Importaciones automáticas #

Nuxt 2 sin bridge #

TypeScript #

Usar Pinia junto con Vuex #