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