Nuxt•2y ago

Nuxt Layers & dependencies

It is a bit confusing after reading the nuxt docs where to put layer dependencies.

Given a layer

myLayer

myLayer

(with pinia nuxt module) and a nuxt app with

extends: ["./myLayer"],

extends: ["./myLayer"],

where to put pinia (or any other) node module, in

myLayer/package.json

myLayer/package.json

app/package.json

app/package.json

is it required to run
```
npm install
```
```
npm install
```
from inside
```
myLayer
```
```
myLayer
```
?
if both layer and the app have the same package dependencies where to define it?

p.s. I tried different combinations, and have an issue when a basic setup with a pinia layer works fine in dev mode, but breaks component "reactivity" when run via preview

npm run preview

npm run preview

dmarr•7/29/24, 2:30 PM

Hi @engoyan I was running into issues using the pinia module with nuxt layers. The module tries to resolve pinia from the project (not the layer's) node_modules dir. Therefore, you would need to have pinia installed in the project for it to work.

dmarr•7/29/24, 2:33 PM

I'm working on improving the module when used with layers. https://github.com/vuejs/pinia/pull/2699 but I just realized that I'm not able to register the stores automatically that the layer might define. Since the module runs in the context of the project, we only have a reference to all layers that the project extends from. I don't think we want to register the stores directories in other layers.

GitHub

feat(nuxt): Support nuxt layers in a better way by marr · Pull Requ...

When using the pinia nuxt module with nuxt layers, there were some things that don't appear to work correctly.
I am trying to solve for a nuxt layer workflow, which adds the pinia module and re...

dmarr•7/29/24, 2:34 PM

usually though (outside of pinia module), only your layer needs the module installed. The project that extends the layer gets access to that layers node_modules

engoyanOP•8/1/24, 4:26 PM

Hi David,

Thanks for the PR! I was trying to figure out how to contact you about this, so I'm glad we're chatting.

After struggling with the issue for a few days without success, I finally resolved it by making the following changes:

Reorganized the layer setup I had
Changed how the app includes layers
Switched from to

I'm not entirely sure which of these fixes was the key to resolving the issue, but they all contributed to a working solution. It's possible that my problem wasn't related to the PR after all, although it did fix an extra Pinia package requirement.

Some quick notes on what I've discovered:

I'm not able to register the stores automatically that the layer might define.

This worked fine without the code in your PR. I have a Pinia-ORM model defined in one layer and another in my app.

The stores directory in the layer gets lost when the containing app tries to register its own stores.

This issue was resolved out of the box as well.

Initially, I had registered all the stores successfully, but components (pages) using app-level stores were losing reactivity. When there was an update in the state, the component wouldn't/didn't update the UI. With my new setup, this works fine now.

If I had to take a guess, I'd say that my issue was related to Pinia being initialized in more than one place (layer + app), but I don't have any proof of that.