Learn how to use Composeable to call Pinia store in Nuxt 3

Question

Since nuxt 3.4.0 update, pinia store cannot be used in composeables.

//Example composeable
import { useAuthStore } from '~/store/auth-store';
const authStore = useAuthStore();

export function doSomethingWithStore() {
  return authStore.checkAuthUser;
}

You will receive the following error

getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production. 

View stackblitz example https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables/thisBreaks.js,nuxt.config.ts

Answer 1

You installed the @pinia/nuxt module incorrectly in nuxt.config.ts. In Nuxt 3, the buildModules attribute no longer exists and you need to use modules instead (you can tell by the TypeScript error):

// nuxt.config.ts
export default defineNuxtConfig({
  // replace buildModules by modules
  modules: ['@pinia/nuxt'],
});

Second point, you also need to call useAuthStore inside the combiner function, otherwise it will try to load the store before pinia actually loads. It is called when the file is imported, not when the combiner function is used.

import { useAuthStore } from '~/store/auth-store';

export function doSomethingWithStore() {
  const authStore = useAuthStore();
  return authStore.checkAuthUser;
}

Please refer to this working stackblitz

Answer 2

This is because declaring const authStore = useAuthStore(); outside of any function like you did will be called at some early stage of application startup, and correctly within the Vue instance Before initializing the Pinia instance.

This will work:

import { useAuthStore } from '~/store/auth-store';

export function doSomethingWithStore() {
  const authStore = useAuthStore();
  return authStore.checkAuthUser;
}

Places where it is safe to make Pinia calls (may not be a complete list):

• Inside<script setup>Internal
• Inline in <template> section
• In defineNuxtMiddlewareInternal