can i ask something about nuxt local layer ?
i have 2 nuxt local layer (base,awesome) and awesome extends base layer
i try to call composables in awesome from base layer it can. but syntax error "Cannot find name XXX"
how i fix that
14 Replies
Hi @PskCluB. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, you can use multiple local Nuxt layers, and have one layer (e.g., awesome) extend another (e.g., base). However, when you try to use composables from the awesome layer inside the base layer, you may encounter TypeScript errors like "Cannot find name XXX". This is because, in a layered setup, the base layer should not depend on the layers that extend it—dependencies should flow from base to awesome, not the other way around.
Key points:
- In Nuxt layers, the extending layer (awesome) can use anything from the base layer, but the base layer cannot access files (like composables) from the extending layer (awesome), because it does not know about them at build time.
- If you try to import or auto-import a composable from awesome inside base, TypeScript (and the Nuxt auto-import system) will not be able to resolve it, resulting in the "Cannot find name XXX" error.
How to fix:
- Move any shared composables that need to be used by both layers into the base layer, so both base and awesome can access them.
- Only use composables from base in awesome, not the other way around.
Reference from the docs:
The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain. ... You can extend a default Nuxt application to reuse components, utils, and configuration. ... By default, any layers within your project in theAuthoring Nuxt Layers If you need to share code between both layers, always place it in the lowest (base) layer in your hierarchy. This will resolve the TypeScript error and ensure proper code organization. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------~~/layersdirectory will be automatically registered as layers in your project. ... The extending layer can use anything from the base layer, but not vice versa.
<@184870094063534080> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Let me check the knowledge base for you again. One moment! :books:
----------------------
In Nuxt's layer system, the base layer should not call composables (or any code) from a layer that extends it (like your awesome layer). The dependency direction is always from the extending layer (awesome) to the base layer, not the other way around. This is why you get a TypeScript error like "Cannot find name XXX" when trying to use a composable from awesome in base.
From the official documentation:
You cannot call composables from the awesome layer in the base layer. Only the other way around is supported. Move shared code to the base layer to resolve this issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
The extending layer can use anything from the base layer, but not vice versa.Authoring Nuxt Layers To fix this, you should move any shared composables that need to be used by both layers into the base layer. The base layer cannot and should not import or use code from the awesome layer, as this breaks the intended layer hierarchy and will not work with Nuxt's auto-import system or TypeScript. Summary:
You cannot call composables from the awesome layer in the base layer. Only the other way around is supported. Move shared code to the base layer to resolve this issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@184870094063534080> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai Your problem is a TypeScript/VSCode IntelliSense issue rather than a runtime problem with Nuxt layers.
The Issue:
You have two Nuxt layers: base and awesome (where awesome extends base). You're trying to call a function that exists in the base layer from within the awesome layer. The function call works perfectly at runtime - your application runs without any errors and the function executes as expected.
However, VSCode is showing a "Cannot find name XXX" error in the editor, creating a frustrating development experience where you see red squiggly lines and error messages even though your code is functioning correctly.
What's Happening:
Runtime level: Nuxt's auto-import system successfully resolves the function from the base layer when the application runs
Development/Editor level: VSCode's TypeScript language server cannot locate the type definitions for the function, so it assumes the function doesn't exist
Type resolution gap: There's a disconnect between what Nuxt knows about at runtime and what the TypeScript compiler can see during development
Let me check the knowledge base for you again. One moment! :books:
----------------------
You're correct in identifying the distinction between Nuxt's runtime auto-import system and TypeScript's type resolution in the context of layers. According to the Nuxt documentation, the extending layer (awesome) can use anything from the base layer, but not the other way around. If you are calling a composable from the base layer inside the awesome layer, this should work both at runtime and with TypeScript, provided your project is set up correctly and the composable is in a location that Nuxt's auto-import system recognizes (e.g., in the top level of the
- This is a type generation/editor issue, not a runtime problem. - Regenerate types with
composables/ directory in the base layer) composables auto-imports.
However, if you are seeing "Cannot find name XXX" in VSCode, it usually means that the TypeScript declaration files for auto-imports have not been generated or are not being picked up by your editor. The Nuxt docs specify that you must run nuxt prepare, nuxt dev, or nuxt build to generate the .nuxt/imports.d.ts file, which declares the types for auto-imported composables. If you create or move composables without the dev server running, TypeScript will not recognize them until the types are regenerated composables types.
How to fix:
1. Make sure your composable is in the correct directory (e.g., base/composables/useFoo.ts).
2. Run nuxi prepare or start the dev server (nuxi dev) to regenerate type declarations.
3. Ensure your editor is using the correct TypeScript version and is not caching old type information.
4. If you have nested composables, ensure your nuxt.config.ts includes the correct imports.dirs configuration to scan all relevant directories nested composables.
If you follow these steps and still see the error, it may be due to a limitation or bug in the current Nuxt 4 layer/type system. The knowledge sources do not mention a workaround for cases where the editor fails to pick up types even though runtime works, but ensuring type generation and correct directory structure usually resolves these issues.
Summary:- This is a type generation/editor issue, not a runtime problem. - Regenerate types with
nuxi prepare or nuxi dev.
- Ensure composables are in the correct directory and scanned by Nuxt.
- The base layer can be used by awesome, and this should work with proper type generation.
If the problem persists after these steps, the knowledge sources do not provide a more specific solution.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@184870094063534080> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I believe you have to run nuxt prepare in the layer dir
my layer is simple like this
Without a package.json?
I alway do local package personally
Ping me/remind me in 5hours how i did, not on computer and going to take the road right now 🚗
Tldr https://nuxt.com/docs/4.x/guide/going-further/layers#npm-package + install it like
pnpm i ../path/to/folder/of/package.jsonNuxt
Authoring Nuxt Layers · Nuxt Advanced v4
Nuxt provides a powerful system that allows you to extend the default files, configs, and much more.
Then extends: ["the name used in layer package json"]
Not the only way but the most fiable imho
@flapili.fr i use bun
You can probably install a local package