Home / Blog / Global State Management with Pinia In Nuxt 3
Global State Management with Pinia In Nuxt 3

Global State Management with Pinia In Nuxt 3

Daniel Kelly
Daniel Kelly
September 13th 2022

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.

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Latest Vue School Articles

Secure Your Vue.js 3 App: Laravel 11 Middleware with Pinia and Vue Router

Secure Your Vue.js 3 App: Laravel 11 Middleware with Pinia and Vue Router

Learn how to secure your Vue.js 3 app by creating custom Laravel 11 middleware, utilizing Pinia for state management, and implementing Vue Router guards for enhanced protection.
Mostafa Said
Mostafa Said
What is a Race Condition in Vue.js?

What is a Race Condition in Vue.js?

A race condition is where an app’s proper behavior is dependent on the sequence or timing of other uncontrollable events. In this lesson, learn how to fix a race condition in a Vue.js Composable.
Daniel Kelly
Daniel Kelly

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.

More than 120.000 users have already joined us. You are welcome too!

Follow us on Social

© All rights reserved. Made with ❤️ by BitterBrains, Inc.