Module pinia is disabled due to incompatibility issues: - [nuxt] Nuxt version ^2.0.0 || >=3.13.0 is
import { useUserStore } from '~/stores/user';
export default {
setup() {
const userStore = useUserStore(pinia);
return { userStore };
},
This is how i tried to use the code and i keep getting the same error
[🍍]: "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.
Pinia 🍍
Intuitive, type safe, light and flexible Store for Vue
14 Replies
Hi @Dapo-Thomas. 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 the knowledge sources, it appears that you're encountering an issue with Pinia in a Nuxt 3 project. Let's address this problem:
1. First, it's important to note that Pinia is the recommended state management solution for Nuxt 3, as mentioned in the Nuxt documentation on state management (https://nuxt.com/docs/getting-started/state-management).
2. The error you're seeing suggests that Pinia is not properly initialized in your Nuxt application. This could be due to a few reasons:
a. Pinia module might not be correctly added to your Nuxt configuration.
b. You might be trying to use Pinia outside of a component or in a place where it's not yet initialized.
3. To resolve this issue, make sure you have properly installed and configured Pinia in your Nuxt 3 project:
a. Install Pinia and its Nuxt module:
or
b. Add the Pinia module to your
nuxt.config.ts:
4. When using Pinia in a component, you don't need to pass the Pinia instance manually. Instead, you can use it like this:
5. If you're still encountering issues, make sure you're not trying to use Pinia outside of a component or in a place where Vue's Composition API is not available.
If you've followed these steps and are still experiencing problems, it might be helpful to check your Nuxt and Pinia versions to ensure compatibility. As mentioned in one of the knowledge sources, there was a recent update in Nuxt 3.14 that affected some modules, including Pinia. Ensure you're using the latest compatible versions of both Nuxt and Pinia.
For more detailed information on using Pinia with Nuxt 3, you can refer to the Nuxt documentation on state management (https://nuxt.com/docs/getting-started/state-management#usage-with-pinia).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1320787583453630598> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
ive done everything
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@fontsource/poppins": "^5.1.0",
"@headlessui/vue": "^1.7.23",
"@heroicons/vue": "^2.2.0",
"@nuxtjs/color-mode": "^3.5.2",
"@nuxtjs/fontawesome": "^1.1.2",
"@vesp/nuxt-fontawesome": "^1.1.0",
"nuxt": "^3.14.1592",
"pinia": "^2.3.0",
"vue": "latest",
"vue-router": "latest"
},
"devDependencies": {
"@nuxtjs/tailwindcss": "^6.12.2",
"@pinia/nuxt": "^0.9.0",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.17"
},
"overrides": {
"vue": "latest"
}
}
my package.json
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
app: {
head: {
title: 'Job Hub',
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap',
},
],
script: [ ],
},
},
compatibilityDate: '2024-11-01',
css: [ '~/assets/css/tailwind.css'],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
devtools: { enabled: true },
modules: ['@nuxtjs/color-mode', '@pinia/nuxt'],
colorMode: {
classSuffix: '',
},
})
my nuxt.config.ts file
Which package manager do you use @Dapo-Thomas?
For pnpm you can run
pnpm why nuxt
And see the version that is actually installed
npm
Then try
npx npm-why nuxt
okayy
Who required nuxt:
job-board > [email protected]
thats what i got
I'm also getting some weird errors with Pinia after using
npx nuxt upgrade
It was working fine on Nuxt 3.14.xx; but for whatever reason, the plugin for @pinia/nuxt isn't putting the pinia instance in the global
Is Nuxt installed globally somewher? @Dapo-Thomas @Steinerd
Ooooo, let me check
I can confirm that Nuxt was not installed globally.
I re-ran
npx nuxt upgrade on my project after dropping both my global cache and my project cache;
Interestingly it straight up deleted my @pinia/nuxt reference in my package.json file.
going to try the upgrade again with a copy of the code that works, with --no-force
nope, something about Nuxt 3.15 breaks its activePinia instance, and I've tried a plugin workaround, but even the useNuxtApp().$pinia is undefined.reproduction + issue would be great then!
Also seems different then the module compat warning @Dapo-Thomas experienced
Kk
I traced the issue. it stemmed from using an auth-guard in a way other then documentation instructed, created a racing condition with Pinia trying to load a store before it had setup its reference.
This works without issue now.
Totally unrelated to OP's original request on this thread.