Nuxt.js #

Using Pinia with Nuxt.js 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.

Installation #

Make sure to install @nuxtjs/composition-api alongside pinia:

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:

// 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',
  ],
}

And that's it, use your store as usual!

Using the store outside of setup() #

If you want to use a store outside of setup(), remember to pass the pinia object to useStore(). We added it to the context so you have access to it in asyncData() and fetch():

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

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

Using the Nuxt context in stores #

You can also use the context in any store by using the injected property $nuxt:

import { useUserStore } from '~/stores/userStore'

defineStore('cart', {
  actions: {
    purchase() {
      const user = useUserStore()
      if (!user.isAuthenticated()) {
        this.$nuxt.redirect('/login')
      }
    },
  },
})

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:

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

TypeScript #

If you are using TypeScript or have a jsconfig.json, you should also add the types for context.pinia:

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

This will also ensure you have autocompletion 😉 .