Nuxt Layer support

[marcelxpfeifer]

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 extended from the base project, but can be overwritten in the layer on top.

Describe alternatives you've considered

Currently all stores need to be copied into the extend layer as well.

[posva]

I really cant figure out what you mean. At first glance this looks like a project specific problem or at the very least like it could be hosted in another package so I’m moving this to a discussion for anybody who want to collaborate on it

[maxdzin]

I also faced the situation when it is required to use some Pinia store(s) in the Nuxt layer app for some base things, but then to reuse it in the Nuxt app that extends such layer.

[maxdzin]

@marcelxpfeifer Does Pinia store copying from the layer into another app work for you?

I tried as well, but it drops an error:
[nuxt] error caught during app initialization Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?

And, yes, I added '@pinia/nuxt' to modules in the app as well.

So, I'm still trying to find a solution.

[timelytree]

@marcelxpfeifer @maxdzin I was able to get this to work by using a relative path and forcing pinia to go up a directory.

Here's my directory structure (it's a monorepo):

repo
  site // my main nuxt3 site
  my-layer // the layer that's importing the store, for use in site
    nuxt.config.js // example below
    stores
      my-store.js

nuxt.config.js in my-layer

export default defineNuxtConfig({
  pinia: {
    storesDirs: [
      '../my-layer/stores/**' // the `../` is important here
    ]
  }
})

As seen here, since pinia imports stores relative to the project (which in my case, would be the site directory), you have to tell it to "go up a level and into my-layer" to find the store.

for (const storeDir of options.storesDirs) {
  addImportsDir(resolver.resolve(nuxt.options.rootDir, storeDir))
}

The Nuxt docs allude to using relative paths inside layers here but it's not always exactly clear when to do so. Seems to be best to almost always use relative paths if you need to import things from a layer.

[avxkim]

@timelytree if layer is published on npmjs, then we have to provide full path in "node_modules/layername/stores/**" ?

[timelytree]

Sorry @avxkim I haven't explored the publishing of a Layer to NPM so I can't say for sure how that flow would affect my solution above! 🙏

[ananthachetan]

I've found a reasonable workaround. As you can seen here the "@pinia/nuxt" module is just adding the stores directory to the importDirs of the Nuxt config.

You can do the same yourself in the nuxt.config.js of the layer project:

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

export default defineNuxtConfig({
...
modules: ["@pinia/nuxt"]
...
imports: {
dirs: [resolve("stores/**")],
},
});
`

You can do the same in your Site config as well. And the stores defined in both the places will be available in the site app.

resolve() is the key here.

[BlueBazze]

Yes, i had the auto imports problem aswell.
Looking into it, it seems nuxt.options.rootDir refers to the .playground folder - Meaning i would have to use the value ../stores/** if i wanted it to autoimport.
But would that also mean that in an app extending the shared nuxt layer also try to auto import from a folder outside the app - For instance if i have a nuxt app at app/my-nuxt-app and the shared layer at packages/my-nuxt-layer. The nuxt layer defined autoimports for ../stores/**. If it was autoimporting ../stores/** in each layer, then it would try to autoimport app/stores/**.
If does not take layers into account. Meaning that you wont have access to any stores in your layers from your top layer.

I have a few stores in my packages/my-nuxt-layer and i wont be able to access any stores from app/my-nuxt-app without using imports.dirs, but it is a difficult problem to solve otherwise.

[alexcroox]

Did anyone try vitest with layer pinia stores? I get a lot of [nuxt] instance unavailable and Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. after moving my stores from the main app to a layer.

[marr]

Keep us posted how you make out with this. I have had mixed luck with nuxt layers + pinia. There is a new version of the module as of yesterday though that may help with some things?

Also, did you do something like this in your nuxt config for your layer?

import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url));

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@pinia/nuxt'],
  pinia: {
    storesDirs: [join(currentDir, 'stores')]
  }
})

[dustin-we]

I am having the same issue.
Everything works If I have my layers in the project's layers directory.

When I want to extend from a relative or absolute path on my pc or a github repo in nuxt.config.ts it breaks.

I am getting the same error message: Error: [🍍]: "getActivePinia()" was called but there was no active Pinia.

My workaround for now is write a shell script that deletes the layers in the layers folder and clones them from github again until this is fixed.

[Kylyi]

Having the same issue.
Sadly the workarounds above seem to be targeted at a slightly different issue and didn't work in my case.

Somehow, in monorepo, this works perfectly fine:

Using it through github works also fine:

But using it like this while not in monorepo results in the Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. (doesn't matter if the path is relative or absolute)

Also tried to just put the layers into the layers folder as nuxt suggests, same issue.

[Kylyi]

For anyone coming across the same issue: in my case, the issue was that I had multiple installations of the pinia in the monorepo, ie. multiple node_modules. The versions in of pinia package.json were the same, so I think there is an actual issue somewhere...