Setup Pinia in Nuxt 3

May be you are already learned about global state and the Vuex store in Vue and Nuxt projects. Is there any other store for Vue3. Yes, Pinia

A minimal app is required to try Pinia store, let's create a nuxt3 app.

Setup Pinia store in a Nuxt3 app

A minimal app is required to try Pinia store, let's create a nuxt3 app.

npx nuxi init nuxt3-app

To setup Pinia store add the Nuxt build module configuration, in nuxt-config, may be the yarn installation will already add it for you,lol.

yarn add pinia @pinia/nuxt

The nuxt config will look like this

// nuxt.config.js
export default {
  // ... other options
  buildModules: [
    '@pinia/nuxt',
  ],
}

Create the store

Go ahead and create store.ts in the src folder. Pinia uses same philosophy of Vuex, the official Vue store.

//store.ts
import { defineStore, acceptHMRUpdate} from 'pinia'

export const useStore = defineStore('storeId', {
  // arrow function recommended for full type inference
  state: () => {
    return {
      // all these properties will have their type inferred automatically
      counter: 10,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
  actions:{
     hit(){
       this.counter++;
     }
  },

  getters:{
    getCount:(state)=>state.counter,
    getUser: (state)=> {
      state.name
    }
  }
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useStore, import.meta.hot))
}

Accessing the state

Accessing the state / getters / actions in a component by using the useStore. Sorry about mutation they are gone for ever.

//in some component
<script>
import { useStore } from '@/store'
export default {  
  data() {
    return {
      store: useStore()
    }
  },
}
</script>

In the template we can use the reactive store to access actions/ getter/ state.

State

A single state can be accessed as follows

<template>   
   <div>
    {{store.name}}
......

`

Getters

Getters are functions which return the read only state for stores, which can be also accessed with store object and insert in template with my favorite double mustache.


<template>
{{store.getCount}}
......


Actions

Actions are for making something happen, like increasing a count, or validating a user etc.

<v-btn @click="store.hit()">Hit me</v-btn>

Read more Nuxt3 guides

Comments

[Goran Spasojevic]

How do you hydrate for SSR?

[Lucas Reis]

Did you find a solutions for this?
I am creating some object instances but I alwasy get an error on client side saying the function I am trying to call from the object does not exist.

Although I have a "new MyObject()", it seems to handle the instance as a Object therefore it can't find any method I create in the object class.

[Pradeep Kumar]

Getting following error

 ERROR  [worker] __vite_ssr_import_0__.useStore is not a function 

[MANOJ AP]

here is full working example

github.com/manojap/nuxt3-pinia-sto...

[Anatoly Ktitarov]

Thanks for your article 👍 I just wanted to add some recent updates related to nuxt v3. buildModules property is now deprecated, you should consider using module instead 🙂 More info could be found here: github.com/nuxt/framework/blob/643...