Pinia store with Nuxt layers

[blazing flume]

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.

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'],
  ],

but when we try to use it locally, it fails

  extends: [
    ['/some/local/path/repo/Layer'],
  ],

Here is the GH discussion:
https://github.com/vuejs/pinia/discussions/2378#discussioncomment-12096928

[oak current]

Hi @blazing flume. 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 }]
  ]
})

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']
})

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:

@blazing flume Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[stiff bolt]

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);