N
Nuxt•3d ago
Kissle

How to use imports in Layers

I'm trying to understand layers and how to best develop them. I followed https://nuxt.com/docs/guide/going-further/layers#named-layer-aliases to start my layer resulting in a monorepo structure like this: 
.
├─ app
│  ├─ nuxt.config.ts
│  ├─ tsconfig.ts // extends .nuxt/tsconfig.ts
│  └─ .nuxt
│     └─ tsconfig.ts
├─ base
│  ├─ nuxt.config.ts
│  ├─ tsconfig.ts // extends .playground/.nuxt/tsconfig.ts
│  ├─ folderA
│  │  └─ myFile.ts
│  ├─ folderB
│  │  └─ myOtherFile.ts
│  └─ .playground
│     └─ .nuxt
│        └─ tsconfig.ts
.
├─ app
│  ├─ nuxt.config.ts
│  ├─ tsconfig.ts // extends .nuxt/tsconfig.ts
│  └─ .nuxt
│     └─ tsconfig.ts
├─ base
│  ├─ nuxt.config.ts
│  ├─ tsconfig.ts // extends .playground/.nuxt/tsconfig.ts
│  ├─ folderA
│  │  └─ myFile.ts
│  ├─ folderB
│  │  └─ myOtherFile.ts
│  └─ .playground
│     └─ .nuxt
│        └─ tsconfig.ts
Let's assume I want to import foo in folderA/myFile from folderB/myOtherFile. With out of the box setup the import path is starting from the .playground folder as root and imports would complain if I would use - import { foo } from '~/folderB/myOtherFile when running the playground app. It rather expects - import { foo } from '~/../folderB/myOtherFile. But using later import strategy my code would break when running the actual app since the relative path is not correct anymore. Does someone have a solid strategy for this path resolution when using the template for layers?
Nuxt
Authoring Nuxt Layers · Nuxt Advanced
Nuxt provides a powerful system that allows you to extend the default files, configs, and much more.
3 Replies
kapa.ai
kapa.ai•3d ago
Hi @Kissle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When working with Nuxt Layers, path resolution for imports inside a layer can be tricky because the standard Nuxt aliases like ~/ and @/ always resolve relative to the consuming (user) project, not the layer itself. This means that if you use these aliases inside your layer, they may not point to the files you expect when the layer is used in different contexts (e.g., in a playground vs. in the actual app). Key points from the documentation: - Global aliases (~/, @/) in layers: These always resolve to the user's project root, not the layer's root. So, using import { foo } from '~/folderB/myOtherFile' inside your layer will look for folderB/myOtherFile in the user's project, not in your layer. This is why your imports break depending on where the layer is used. - Relative paths: Using relative imports (e.g., ../folderB/myOtherFile) works, but can be fragile if your directory structure changes. - Workaround for config files: For things like nuxt.config.ts inside a layer, you should use fully resolved paths (using import.meta.url and Node's path utilities) to ensure correctness regardless of where the layer is used. - Named layer aliases: You can define named aliases for your layers, which allows you to import files from your layer using a stable alias like #layers/base/folderB/myOtherFile, regardless of the consuming project's structure. This is the most robust solution for cross-folder imports within a layer. Recommended strategy: 1. Use named layer aliases for internal imports within your layer. This ensures your imports are always correct, no matter where the layer is used. With recent Nuxt versions, auto-scanned layers get aliases like #layers/base. You can also explicitly name your layer in its nuxt.config.ts: 
   // base/nuxt.config.ts
   export default defineNuxtConfig({
     $meta: {
       name: 'base',
     },
   })
   
   // base/nuxt.config.ts
   export default defineNuxtConfig({
     $meta: {
       name: 'base',
     },
   })
Then, in your layer files, import like this: 
   import { foo } from '#layers/base/folderB/myOtherFile'
   
   import { foo } from '#layers/base/folderB/myOtherFile'
This will work consistently whether you're running the playground or the actual app, as the alias always points to your layer's root. See: Nuxt PR for named layer aliases 2. Avoid using ~/ or @/ for internal layer imports, as these resolve to the user's project, not your layer. See: Nuxt docs on relative paths and aliases 3. For config files, use fully resolved paths with import.meta.url and path.join if you need to reference files within your layer. See: Nuxt docs example Summary:
For robust and portable code in Nuxt layers, use named layer aliases (e.g., #layers/base/...) for all internal imports. This avoids the pitfalls of global aliases and relative paths, ensuring your layer works in any context. If you need more details or examples, check the Nuxt documentation on layers and aliases and the PR introducing named layer aliases. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@1346129433404117074> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Kissle
KissleOP•3d ago
This really solved my problem. First it was not intuitive to keep reference the layer while working on the layer, but this solved also my problem with prisma where the client was not found when running the final app.

Did you find this page helpful?