How to use Pinia with Nuxt3? Complete Guide And Configuration

In this article, we will be discussing how to use Pinia with Nuxt3. So, if you are facing this or any similar issue, we recommend you read this article till the end.

We will see how you can integrate Pinia as the state management library for the development of Nuxt 3 applications.

Pinia is a new and modern state management library that is designed to be easy to use and integrate with Nuxt 3. While Nuxt 3 is a great library, Pinia offers a simpler and more efficient way to manage the state of your application.

Additionally, Pinia is designed to be extensible and can be easily adapted to suit your specific needs. Ultimately, Pinia and Nuxt 3 work together to make state management easier and more efficient.

By following this article, you will be able to get your Nuxt 3 application up and running with Pinia quickly and easily.

See What the Creator of Vue has to Say

According to Evan You, who is the creator of Vue stated in a tweet that “Pinia is de facto Vuex 5!” He also mentioned that at this point it is really just a naming/branding issue.

In the meantime, it would be best to focus on Pinia content rather than Vuex. We recommend you read VueJS’s official post in this regard to have a better knowledge of why Pinia > Vuex.

Start Installing Pinia in Nuxt 3

To begin with, you will be required to install two packages as Pinia comes with first-class support for Nuxt 3. See the commands below to proceed.

npm add pinia 

npm add @pinia/nuxt

yarn add pinia 

yarn add @pinia/nuxt

Adding Pinia to Nuxt.config file

Once you are done with installing Punia in Nuxt 3. Now in the next step, you are required to add ‘@pinia/nuxt’ in your modules array.

// nuxt.config.ts

export default defineNuxtConfig({

  modules: ['@pinia/nuxt'],

})

Building Your Pinia Store

In the next step, you have to start building a named store. In our use case, we are required to manage the state regarding filters. Therefore, the skeleton of our store looks something like this:

// store/filters.ts

import { defineStore } from 'pinia'

export const useFiltersStore = defineStore({

  id: 'filter-store',

  state: () => {

return {

  filtersList: ['youtube', 'twitch'],

}

  },

  actions: {

addValueToFilterList(value: string) {

   this.filtersList.push(value)

},

  },

  getters: {

filtersList: state => state.filtersList,

  },

})

The code above shows the general structure of our store. However, the key here is to defineStore and ensure you include an id. In the current scenario, we are using ‘filter-store’ as the id, but it can be anything that you prefer.

If you want to have a better knowledge of how you can use Pinia properly you can read Pinia’s Docs.

Pinia Store Syntax Alternative

The one mentioned above is a valid example of the Pinia store utilizing a pattern that is similar to Vue’s Options API. However, you can also define the store by using a syntax that is similar to the Composition API.

To see how to build the above example in a composable way, See the code mentioned below

// store/filters.ts

import { defineStore } from 'pinia'

export const useFiltersStore = defineStore('filterStore', () => {

  const filtersList = ref(['youtube', 'twitch'])

  function addValueToFilterList(value: string) {

filtersList.value.push(value)

  }

  return { addValueToFilterList, filtersList }

})

Isn’t this amazing to know that we have managed to reduce the lines of code significantly? We prefer using the composition.

Instead of depending on the action, getter boilerplate, and state, we are using Vue’s computed, ref, and traditional JavaScript functions in order to manage our state.

Pro Tip: Are you a developer and want to create amazing web apps using Nuxt3? If yes then we have a perfect solution for you. You can create Nuxt3 web apps without writing code from scratch if you use pre-built templates like “Modernize Nuxt Js Admin Dashboard”. You can download it right now from Adminmart and get started.

Bringing Pinia in Vue Component

Now that our store is in place, we simply need to import it into the component where you require to use it.

// components/FilterMenu.vue

<script setup>

import { useFiltersStore } from '~/store/filters'

import { storeToRefs } from 'pinia'

const inputVal = ref('')

const filtersStore = useFiltersStore()

const { addValueToFilterList } = filtersStore

const { filtersList } = storeToRefs(filtersStore)

</script>

<template>

  <div>

{{ filtersList }}

<input v-model="inputVal" />

<button @click="addValueToFilterList(inputVal)">+</button>

  </div>

</template>

The line of code import { storeToRefs } from ‘pinia’ enables us to maintain a reactive getter. In our case, we are destructuring the filterList getter from our filtersStore. If you are interested in seeing a fully functional project, then here is the repo.