feat(nuxt): Support nuxt layers in a better way

[marr]

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 registers some stores in the base layer. I want those stores to be available to my containing app, as well as stores that the containing app defines.

The issues I found with the current state of the module include:

1. The pinia module tries to resolve pinia/dist/pinia.mjs from the containing app. This is problematic, because the layer is the one bringing the pinia dependency in. It should be using the distributable that the layer depends on.
2. The stores directory in the layer gets lost when the containing app tries to register its own stores.
3. Extending the layer should bring in the stores from the layer, and allow adding stores from the containing app.

I believe this PR solves those three problems. We remove some use of a deprecated API as well.

To add tests to this, I think I'd need to create a new "playground-layer" directory and extend from that in a new nuxt spec pertaining to layer functionality. If you agree with these changes, we can discuss if you'd like that as part of this.

Note: This may break nuxt 2 compatibility. I can try to add back support if this is a decent enough approach to fixing layer support.

[netlify]

✅ Deploy Preview for pinia-playground ready!

Name	Link
🔨 Latest commit	e5a9139
🔍 Latest deploy log	https://app.netlify.com/sites/pinia-playground/deploys/67488a433ba2750008304d49
😎 Deploy Preview	https://deploy-preview-2699--pinia-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for pinia-official canceled.

Name	Link
🔨 Latest commit	e5a9139
🔍 Latest deploy log	https://app.netlify.com/sites/pinia-official/deploys/67488a43e51d8e00083717b7

[posva]

Thanks for the PR!
Adding the test would be a nice next step.
Regarding Nuxt 2, it should still work with nuxt bridge

[posva]

This doesn't seem necessary

[marr]

I think this was added so that apps that extend layers using this module can still provide storesDirs that would be auto-imported. For example, if myapp had stores in a mystores directory, it could add those, while still importing stores the layer defines in its own context.

[posva]

If the layer adds options, I suppose they should appear in the options object. If not, it might be an intentional design for layers in Nuxt. Or are you referring to something else?

[marr]

Yes, thank you for correcting. I added tests and used explicit storesDirs in the layer config now to ensure that its stores get added.

[marr]

@posva is this still something you might consider?

[posva]

Yes! I will check it in my next pass

[marr]

Thank you! If you are trying to reproduce the error you can follow these steps. Its also reproducible using a layer but you can also do it using a module like so:

npx nuxi create my-module -t module
// tweak package.json to add overrides: { vue: “latest” } — super annoying!!
npm install pinia @pinia/nuxt
// edit src/module.ts and simply `installModule(‘@pinia/nuxt’)` within the setup function
npm pack

// now to reproduce the error you can create a new nuxt project
npx nuxi init my-app
cd my-app
npm install ../my-module/my-module-1.0.0.tgz
// add `my-module` to the `modules` array in your app's nuxt.config.ts file.
npx nuxi prepare

 — see error below:

$ npx nuxi prepare

 ERROR  [unhandledRejection] Cannot find module 'pinia/dist/pinia.mjs'                                                                                                    1:52:52 PM
Require stack:
- /Path/to/my/index.js

  Require stack:
  - index.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
  at Function.resolve (node:internal/modules/helpers:145:19)
  at Function._resolve [as resolve] (node_modules/jiti/dist/jiti.js:1:241814)
  at resolveModule (node_modules/@nuxt/kit/dist/index.mjs:2234:29)
  at setup (node_modules/@pinia/nuxt/dist/module.mjs:23:5)
  at normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:2136:37)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:2478:95)

✔ Types generated in .nuxt

Also note that this doesn't seem to happen using pnpm, so make sure to use npm for the reproduction.

[posva]

The line that was problematic for layers has been removed. Could you confirm there is no need for something now?

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/@pinia/nuxt@2699

npm i https://pkg.pr.new/pinia@2699

npm i https://pkg.pr.new/@pinia/testing@2699

commit: e5a9139