Since the nuxt 3.4.0 update the pinia store can no longer be used in poseables.

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

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

you will now receive the below 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.

see stackblitz example .js,nuxt.config.ts

Since the nuxt 3.4.0 update the pinia store can no longer be used in poseables.

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

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

you will now receive the below 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.

see stackblitz example https://stackblitz./edit/broken-pinia-store-in-poseables?file=posables%2FthisBreaks.js,nuxt.config.ts

• javascript
• vue.js
• nuxt.js
• pinia
• nuxt-plugin

Share Improve this question Follow asked Apr 21, 2023 at 15:11 Jean-Pierre EngelbrechtJean-Pierre Engelbrecht 27411 gold badge55 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

It is because const authStore = useAuthStore(); declared outside any function like you did is called at some early point of application startup and definitely before Pinia instance is properly initialized inside Vue instance.

Like this it will work:

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

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

Safe places to do Pinia calls (might not be a plete list):

• from within <script setup>
• inline in <template> section
• inside defineNuxtMiddleware

You wrongly installed the @pinia/nuxt module in nuxt.config.ts. The buildModules property no longer exists in Nuxt 3, you have to use modules instead. (And you can tell by the Typescript error you get):

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

Second point, you also need to call the useAuthStore from within the posable function, otherwise it's trying to load the store before pinia actually loaded. It's gonna get called when the file is imported, not when the posable is used.

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

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

See a working stackblitz

If you're new to Nuxt or its dev tools, you may have only installed @pinia/nuxt if you have used the dev tools for installation. It's important to remember that you also need to install pinia itself. In case you overlooked this step, make sure to install both pinia and @pinia/nuxt.

You can do this by running one of the following mands:

pnpm install -D pinia @pinia/nuxt
# or
yarn add -D pinia @pinia/nuxt
# or
npm install -D pinia @pinia/nuxt

link to Pinia docs: https://pinia.vuejs/ssr/nuxt.html#Installation