Global State Management with Pinia In Nuxt 3

Pinia is the officially recommended state management solution for Vue.js. Nuxt 3 is the awesome meta framework built on top of Vue that includes out of the box support for SSR and a huge number of time-saving conventions. In this article, let’s take a look at how and why to use them together.

Why to Use Pinia with Nuxt

Yes, Nuxt does provide the useState composable as part of it’s core package for managing global state. You can read more about it in the Nuxt 3 docs. However, it’s still advisable to consider installing Pinia IMHO for a few reasons:

1. Pinia is not just raw state but also includes concepts like getters and actions
2. Pinia is the officially recommended state management solution for Vue (see official Vue docs)
3. Pinia has great support in the Vue.js devtools for debugging your global state
4. There are a number of existing Pinia plugins that you can plug-and-play for your global state
5. Pinia also supports SSR.
6. Pinia is available outside of Nuxt as well and so team members who haven’t used Nuxt will be more likely to be familiar with Pinia than with useState
7. Not to mention Pinia has an adorably cute pineapple logo!

How to Use Pinia with Nuxt

Ok, so you want to use Pinia with Nuxt as your global state management solution? Sweet! How do you do it?

Install and Register the Pinia Module

First, in order to use Pinia with Nuxt, you can install the official @pinia/nuxt package.

$ npm install @pinia/nuxt

Then you’ll need to register the module in nuxt.config.ts.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({

  modules: ['@pinia/nuxt'],
});

After that you should be ready to start creating and using your first Pinia store! (If you aren’t familiar with the basics of Pinia, checkout our popular course on the topic!)

Configuring Auto-Imports

Besides the core functionality of Pinia, it’s nice to take advantage of the auto-importing features of Nuxt 3.

In order to auto-import helpful functions used when defining your stores from Pinia, you can define the autoImports option on the Nuxt Pinia module.

// nuxt.config.ts
// ...
modules: [
    [
      '@pinia/nuxt',
      {
        autoImports: ['defineStore', 'acceptHMRUpdate'],
      },
    ],
  ],

This means you no longer have to manually import these from pinia whenever your defining your stores.

// stores/CountStore.ts
// no need to import defineStore and acceptHMRUpdate
export const useCountStore = defineStore('CountStore', {
  //...
});

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

While these auto imports are helpful, what would make the development experience top-notch is auto-imports of my stores themselves. I like to put all my pinia stores in a directory called stores and Nuxt doesn’t look to auto-import anything from this directory by default. The fix is simple enough. We just have to let Nuxt know to look there with the imports.dirs option.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  imports: {
    dirs: ['stores'],
  },
  //...
});

Now you can use the store without having to manually import it inside the consuming component.

<script setup lang="ts">
const countStore = useCountStore();
</script>

Conclusion

Checkout this stackbliz project to see a demo of Nuxt + Pinia in action. While you’re at it, if you’d like to learn more about Nuxt 3 then checkout the upcoming Mastering Nuxt 3 course. Or if you’d like to dive deeper into Pinia for both basics and more advanced topics checkout our course: Pinia, the Enjoyable Vue Store.