Resolve a path relative to layer?
I'm trying to troubleshoot the pinia module when used from a layer, and I think it's not resolving the 'stores' directory relative to the layer. How would I resolve "stores" for example that the layer defines?
I can do this in the layer:
const resolvedPath = await resolvePath("pinia/dist/pinia.mjs");
and the proper path is returned. it is basically <apps_dir>/node_modules/<layer_dir>/node_modules/pinia/dist/pinia.mjs
I'm getting hung up how I'd find the dir:
<apps_dir>/node_modules/<layer_dir>/stores
I've tried several things.. if I create a resolver like:
createResolver(imports.meta.url) within the layer/module, it gets resolved to the app dir using the layer. This may be due to the way I'm trying to develop but I don't know. I'm trying with published npm packages.16 Replies
is this a nuxt issue?
I believe so.. nuxt/kit
why are you trying to "resolve" pinia? Isn't that a module to be used like
I’m trying to fix the auto imports of stores from the pinia nuxt module when used in a layer
Also pinia itself doesn’t resolve properly when used in a layer. I believe I’ve fixed that
sorry idk much about nuxt/kit, but why are you using this vs. nuxt?
oh, is this your own module you're developing?
This is the @pinia/nuxt module which doesn’t work well when installed in a layer
The question is basically how can a module added via a layer get a path to the layer root?
ya i guess i'm trying to understand your reasoning behind using layers vs. nuxt itself
are you building a nuxt app, or are you building a module that would be used in a nuxt app? bc that's two difference scenarios
I’m building an app, and a layer to encapsulate some behavior.
I want the pinia stores defined in the layer to be available to the app.
why don't you just use a composable?
or a store?
So, don’t use pinia?
There is a lot of app state I’m trying to handle.
you can use pinia still, or create your own state
but how you're trying to implement pinia is off i think
have you looked into this by any chance? https://pinia.vuejs.org/ssr/nuxt.html
Pinia 🍍
Intuitive, type safe, light and flexible Store for Vue
Yes. However with layers, things don’t work so well. The stores that the layer defines are not available in the parent app.
then i'd suggest stop using layers, and start using composables, or stores
I’ve used a store from a layer in the parent app before, you just need to make sure the store directory is auto imported in the layer apps nuxt config. If you want to make a custom alias you can do something like this:
‘’’
// https://nuxt.com/docs/api/configuration/nuxt-config
import { fileURLToPath } from "url";
import { dirname, join } from "path";
const currentDir = dirname(fileURLToPath(import.meta.url));
export default defineNuxtConfig({
devtools: { enabled: true },
ssr: false,
css: [join(currentDir, "./assets/css/main.css")],
modules: [
"@nuxt/ui",
"@nuxt/content",
"@pinia/nuxt",
"@nuxtjs/i18n",
"@vueuse/nuxt",
],
ui: {
icons: ["mdi"],
},
alias: {
myFonts: join(currentDir, "./public/fonts/customSans"),
logoSmEn: join(
currentDir,
"./public/logo/logo_vert_en.png"
),
logoSmFr: join(
currentDir,
"./public/logo/logo_vert_fr.png"
),
logoLgEn: join(
currentDir,
"./public/logo/logo_horiz_en.png"
),
logoLgFr: join(
currentDir,
"./public/logo/logo_horiz_fr.png"
),
},
});
‘’’
This is for sharing images from the layer with a custom alias but the concept is the same for any other directory you want to share from
Share your layer and parent apps nuxt config