N
Nuxt•2mo ago
Rush

Pinia problem

Hi, I have a problem with the pinia in my nuxt project. I installed it according to the instructions in the documentation: https://pinia.vuejs.org/ssr/nuxt.html Specifically, I just ran this command: npx nuxi@latest module add pinia But I get an error when I want to use it. What can I do about it please? [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"? See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help. This will fail in production. 
// stores/errorStore.ts
import { defineStore } from 'pinia';

export const useErrorStore = defineStore('errorStore', {
  state: () => ({
    errorMessage: '' as string | null,
  }),
  actions: {
    setError(message: string) {
      this.errorMessage = message;
    },
    clearError() {
      this.errorMessage = null;
    },
  },
});
// stores/errorStore.ts
import { defineStore } from 'pinia';

export const useErrorStore = defineStore('errorStore', {
  state: () => ({
    errorMessage: '' as string | null,
  }),
  actions: {
    setError(message: string) {
      this.errorMessage = message;
    },
    clearError() {
      this.errorMessage = null;
    },
  },
});
components/error.vue: 
<template>
  <div v-if="errorMessage">
    {{ errorMessage }}
    <button type="button" @click="clearError">
      Clear error
    </button>
  </div>
</template>

<script lang="ts" setup>
const errorStore = useErrorStore();

const errorMessage = computed(() => errorStore.errorMessage);
const clearError = () => errorStore.clearError();
</script>
<template>
  <div v-if="errorMessage">
    {{ errorMessage }}
    <button type="button" @click="clearError">
      Clear error
    </button>
  </div>
</template>

<script lang="ts" setup>
const errorStore = useErrorStore();

const errorMessage = computed(() => errorStore.errorMessage);
const clearError = () => errorStore.clearError();
</script>
7 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Rush. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it appears you're encountering a common issue with Pinia initialization in Nuxt 3. Let's address this problem step by step. 1. Installation: You've correctly installed Pinia using the command npx nuxi@latest module add pinia. This is the recommended way to add Pinia to a Nuxt 3 project as mentioned in the Nuxt documentation (https://nuxt.com/docs/getting-started/state-management#usage-with-pinia). 2. Error message: The error you're seeing suggests that Pinia is not being properly initialized before you try to use a store. This is a common issue, especially when trying to use stores outside of components or in certain server-side contexts. 3. Possible solutions: a. Ensure Pinia is properly added to your nuxt.config.ts: Make sure your nuxt.config.ts file includes Pinia in the modules array: 
export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
  ],
  // ... other configurations
})
export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
  ],
  // ... other configurations
})
b. Use defineStore with the setup syntax: Instead of using the options API for defining your store, try using the setup syntax. This can sometimes resolve initialization issues: 
// stores/errorStore.ts
import { defineStore } from 'pinia'

export const useErrorStore = defineStore('errorStore', () => {
  const errorMessage = ref(null)

  function setError(message) {
    errorMessage.value = message
  }

  function clearError() {
    errorMessage.value = null
  }

  return { errorMessage, setError, clearError }
})
// stores/errorStore.ts
import { defineStore } from 'pinia'

export const useErrorStore = defineStore('errorStore', () => {
  const errorMessage = ref(null)

  function setError(message) {
    errorMessage.value = message
  }

  function clearError() {
    errorMessage.value = null
  }

  return { errorMessage, setError, clearError }
})
c. Wrap store usage in onMounted or useAsyncData: If you're using the store in a component, try wrapping the store initialization in onMounted or useAsyncData to ensure it's only called on the client side: 
<script setup>
import { onMounted } from 'vue'
import { useErrorStore } from '~/stores/errorStore'

let errorStore

onMounted(() => {
  errorStore = useErrorStore()
})

// ... rest of your component logic
</script>
<script setup>
import { onMounted } from 'vue'
import { useErrorStore } from '~/stores/errorStore'

let errorStore

onMounted(() => {
  errorStore = useErrorStore()
})

// ... rest of your component logic
</script>
d. Check for SSR issues: If you're using the store in server-side rendered context, you might need to use useNuxtApp().$pinia to access the Pinia instance, as mentioned in a Stack Overflow answer (https://stackoverflow.com/questions/77594888): 
const pinia = useNuxtApp().$pinia
// Use pinia here
const pinia = useNuxtApp().$pinia
// Use pinia here
4. Additional considerations: - Make sure you're not trying to use the store outside of the Vue application lifecycle. - Double-check that you're not accidentally importing or using Vuex, as Nuxt 3 no longer provides built-in Vuex support (https://nuxt.com/docs/migration/configuration#vuex). If these solutions don't resolve your issue, you might want to create a minimal reproduction of the problem and share it for further debugging. The Nuxt and Pinia communities are usually very helpful in resolving such issues. Remember, when working with Pinia in Nuxt 3, it's important to follow the official Pinia Nuxt module documentation (https://pinia.vuejs.org/ssr/nuxt.html) for the most up-to-date information on usage and best practices. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@993771550669021265> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Rush
RushOP•2mo ago
that didn't help me
manniL
manniL•2mo ago
Do you have a running reproduction?
Rush
RushOP•2mo ago
No, how can I do that? I have already tried to use pinia this way in several clean nuxt projects and I always had this problem don't I also need to install pinia and not just @pinia nuxt?
vr1
vr1•2mo ago
You need to install both packages with npm i pinia @pinia/nuxt and add the following to your package.json: "overrides": { "vue": "latest" }
Rush
RushOP•2mo ago
thank you, that solved my problem
Want results from more Discord servers?
Add your server