Kissle
Kissle
PostsComments
NNuxt
Created by Kissle on 4/27/2025 in #❓・help
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?
6 replies