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/**" ?

[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.