How to auto import pinia stores in nuxt

Question

Currently I am doing something like this to import stores in components

import { useSomeStore } from "~/store/someStore";
const store = useSomeStore();

What I would like to achieve is skip the import and just use the store

What I have done is add

// nuxt.config.ts
modules: [
  [
    "@pinia/nuxt",
    {
      autoImports: ["defineStore", "acceptHMRUpdate"],
    },
  ],
],
imports: {
  dirs: ["stores"],
},

in my nuxt config but I'm still getting useSomeStore is undefined, what am I doing wrong in this case?

The store:

// store/someStore.ts
export const useSomeStore = defineStore("some-store", {
  state: () => ({ hello: "there" }),
});

Damnation

Having useSomeStore undefined is not the same as not having defineStore imported. You would have a TypeError defineStore is not a function at runtime if it was the case. Also, does the Typescript compiler complains about defineStore or not? – Preeminence

it doesn't but eslint does, do you know whats the best way to fix it? – Damnation

Answer 1

It looks like a typo to me. Your component import references location /store

import { useSomeStore } from "~/store/someStore";

but your config references /stores

imports: {
  dirs: ['stores']
}

so is your store folder called /store or /stores?

Assuming the former, your nuxt config should be:

export default defineNuxtConfig({
  modules: [
    [
      "@pinia/nuxt",
      {
        autoImports: ["defineStore", "acceptHMRUpdate"],
      },
    ],
  ],
  imports: {
    dirs: ['store']
  }
});

Web

Some clarification here. It's best practice to put Pinia stores in the folder storeS, vuex stores where put in the folder store without S.. – Oyler

Answer 2

https://pinia.vuejs.org/ssr/nuxt.html#Auto-imports https://github.com/vuejs/pinia/blob/9e8a8ef3c0eba5cf5634aa1f65825348ac467b06/packages/docs/ssr/nuxt.md?plain=1#L81

By default @pinia/nuxt exposes a few auto imports:

• usePinia(), which is similar to getActivePinia() but works better with Nuxt. You can add auto imports to make your life easier:
• defineStore() to define stores
• storeToRefs() when you need to extract individual refs from a store
• acceptHMRUpdate() for hot module replacement

It also automatically imports all stores defined within your stores folder. It doesn't lookup for nested stores though. You can customize this behavior by setting the storesDirs option:

// nuxt.config.ts
export default defineNuxtConfig({
  // ... other options
  modules: ['@pinia/nuxt'],
  pinia: {
    storesDirs: ['./stores/**', './custom-folder/stores/**'],
  },
})

Note the folders are relative to the root of your project. If you change the srcDir option, you need to adapt the paths accordingly.

Prodigious

Answer 3

I tried everything but none of them worked, the only way it worked for me was adding them as presets to nuxt.config file.

Here is an example

Add your stores like code below to nuxt.config.ts :

export default defineNuxtConfig({  
  imports: {
     presets: [
        {
          from: '~~/stores/aaa',
          imports: ['useAaaStore']
        },
        {
          from: '~~/stores/bbb',
          imports: ['useBbbStore']
        },
        {
          from: '~~/stores/ccc',
          imports: ['useCccStore']
        }
     ]      
  }
})

then you can use stores inside any .vue file without importing them.

Habitant