In a Nuxt layer, the tsconfig.json file extends to a non existing file inside .playground
When we create the layer with the command
npx nuxi init -t layer layers/my-layer-1, the created layer have the following in the tsconfig.json:
But the only files that are present inside the created .playground are app.config.ts and app.config.ts.
Edit:
Following the video from Alexander: https://youtu.be/fr5yo3aVkfA?si=koP_8_NXFOdzww6R&t=436
Starter template for layers: https://github.com/nuxt/starter/tree/layerAlexander Lichter
YouTube
How to use Nuxt Layers to encapsulate your code
🔗 Nuxt Layers are a powerful option to share code across applications or even encapsulate code by feature or DDD-style in projects. But how do they work and how to set them up? Learn all of thati n this video!
Key points:
🔧 How to set up layers
🧠 Understand use cases for them
👀 Building a simple layer architecture from scratch
---
...
GitHub
GitHub - nuxt/starter at layer
Create a new Nuxt project, module, layer or start from a theme with our collection of starters. - GitHub - nuxt/starter at layer
3 Replies
Hi @lkjimy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The knowledge sources do not explicitly mention the use of a
.playground/.nuxt/tsconfig.json file in the context of Nuxt layers or the npx nuxi init -t layer command. According to the official documentation, when working with TypeScript in Nuxt, the recommended approach is to have your root tsconfig.json extend from ./.nuxt/tsconfig.json, which is auto-generated by Nuxt during development or build. This file contains the necessary TypeScript configuration and aliases for your project. There is no mention of a .playground directory being involved in this process for standard Nuxt layers or projects.
If you create a layer using the official starter template or follow the documented process, your tsconfig.json should look like this:
If the generated tsconfig.json in your layer refers to ./.playground/.nuxt/tsconfig.json and that file does not exist, this may be an issue with the template or the initialization process, but it is not documented in the official sources. The documentation recommends extending from .nuxt/tsconfig.json and does not mention .playground as a standard part of the layer setup process. You may want to adjust the tsconfig.json to extend from the correct file or consult the template's README for further instructions if it is a custom or experimental feature.
For more details, see the official guidance on tsconfig.json in Nuxt and TypeScript support.
If you believe this is a bug or an issue with the template, consider reporting it to the Nuxt team or checking for updates in the template repository.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@126052960038944768> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Okay. To generate the contents of .playground, I had rename the
tsconfig.json, then, run the dev command
Considering that I'm trying the monorepo approach, while using npm workspaces, I have to run commands inside the layer from the root, so:
From root (after general configuration of the layer, names, package, dependencies...)
npm i then npm run dev -w @myorg/my-layer-1
Then, I brought the tsconfig.json back.
Update: Just run npm run dev:prepare -w @myorg/my-layer-1 and It will set up the playground. No need to modifiy the tsconfig.json file.