N
Nuxt•2w ago
Jovan Kočić

Pinia store with Nuxt layers

We have an issue with the Pinia store when it is used in the Nuxt layers. The error is: 
[nuxt] error caught during app initialization Error: [🍍]: "getActivePinia()" was called but there was no active Pinia.
[nuxt] error caught during app initialization Error: [🍍]: "getActivePinia()" was called but there was no active Pinia.
The layer is part of the monorepo, and when used within the monorepo, it works. It also works when it is used in the other project, by extending it via Github like: 
  extends: [
    ['github:repo/Layer#master'],
  ],
  extends: [
    ['github:repo/Layer#master'],
  ],
but when we try to use it locally, it fails 
  extends: [
    ['/some/local/path/repo/Layer'],
  ],
  extends: [
    ['/some/local/path/repo/Layer'],
  ],
Here is the GH discussion: https://github.com/vuejs/pinia/discussions/2378#discussioncomment-12096928
GitHub
Nuxt Layer support · vuejs pinia · Discussion #2378
What problem is this solving Allow the possibility to use pinia with nuxt layers. Proposed solution It would be awesome to have Nuxt layer support similar to nuxt/i18n, where the default stores are...
3 Replies
kapa.ai
kapa.ai•2w ago
Hi @Jovan Kočić. 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, I can offer some insights into your issue with Pinia store in Nuxt layers. The error you're encountering suggests that Pinia is not being properly initialized when using the layer locally. This is likely related to how dependencies are handled when extending from local sources versus remote sources. According to the Nuxt documentation on publishing layers, when using a git repository or remote source to extend your Nuxt configuration, you can specify install: true to install the layer's dependencies: 
export default defineNuxtConfig({
  extends: [
    ['github:username/repoName', { install: true }]
  ]
})
export default defineNuxtConfig({
  extends: [
    ['github:username/repoName', { install: true }]
  ]
})
However, when using a local path, this mechanism doesn't work the same way. As mentioned in a GitHub issue comment, the layer should be able to use its own dependencies, but it doesn't expose them to the final project when using a local path. To resolve this issue, you have a few options: 1. Use a monorepo setup, which you mentioned works in your case. 2. Publish your layer as an npm package and use it according to the Nuxt documentation on npm packages as layers. 3. Ensure that the Pinia dependency is explicitly added to your main project's package.json, not just in the layer. 4. As a workaround, you could try adding Pinia as a module in your main Nuxt config file, even if it's already included in the layer: 
export default defineNuxtConfig({
  extends: [
    ['/some/local/path/repo/Layer'],
  ],
  modules: ['@pinia/nuxt']
})
export default defineNuxtConfig({
  extends: [
    ['/some/local/path/repo/Layer'],
  ],
  modules: ['@pinia/nuxt']
})
It's worth noting that this behavior difference between local and remote sources for layers is a known limitation, and the Nuxt team is aware of it. For the most reliable development experience, using a monorepo setup or publishing your layer as an npm package might be the best approaches. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@714826882587295806> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
dmarr
dmarr•2w ago
in your layer, you have to set the storesDirs using a resolver esp if you are using a custom srcDir pinia: { storesDirs: [resolve('./src/stores')], }, 
import { createResolver } from '@nuxt/kit';

const { resolve } = createResolver(import.meta.url);
import { createResolver } from '@nuxt/kit';

const { resolve } = createResolver(import.meta.url);
^ in your layer's nuxt.config

Did you find this page helpful?