\n\t\u003C/div>\n\u003C/template>\n\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2945,2948,2951],{"name":2946,"color":2947},"types","2875C3",{"name":2949,"color":2950},"bug","d73a4a",{"name":2952,"color":2953},"❗ p4-important","D93F0B",30213,"Shared folder types and extending interface in Vue component setup error","2024-12-11T14:19:11Z","https://github.com/nuxt/nuxt/issues/30213",0.6483858,{"description":2960,"labels":2961,"number":2963,"owner":2936,"repository":2936,"state":2937,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### Environment\n\nAffected Nuxt versions:\n* 3.15.4\n* 3.16.0\n\n\n\n### Reproduction\n\nLayer repository: https://github.com/Gwynerva/bugged-layer\nLayer test repository: https://github.com/Gwynerva/bugged-layer-test\n\nSteps to reproduce:\n1. Copy `bugged-layer-test` repository on device\n2. Run `npm install`\n3. Run `npm run dev`\n\n*Stackblitz reproduction won't work as it does not support `giget` package and Nuxt uses it to install Layer.*\n\n### Describe the bug\n\nWhen Layer is installed as dependency (located in `node_modules` folder), it's aliases are not resolved and produce different errors:\n\n1. Vite treats imports with aliases as unresolvable external dependencies.\n2. `@vue/compiler-sfc` is unable to resolve imports with aliases.\n\n\n\n**All custom aliases affected (created with `alias` in config) and also layer alias provided by Nuxt 3.16.**\n\n@danielroe pointed out that this can be related to `c12` not properly handling layer aliases. He also provided a workaround to fix the first problem of Vite treating aliases as external dependencies:\n\n```ts\nexport default defineNuxtConfig({\n future: { compatibilityVersion: 4 },\n extends: [\"github:Gwynerva/bugged-layer\"],\n vite: {\n optimizeDeps: {\n noDiscovery: true\n }\n }\n});\n```\n\n⚠️ **However, this workaround does not solve the second problem!**\n\nAlso, this is not related to layer being located in auto-created `.c12` folder.\nYou can create any folder in `node_modules`, place layer files there, set `extends: ['./node_modules/bugged-layer']` and the problem will still occur.\n\n### Additional context\n\nI decided to recreate the issue because the [old one](https://github.com/nuxt/nuxt/issues/30978) is quite a mess: lots of distracting and irrelevant information.\n",[2962],{"name":2933,"color":2934},31298,"Layer aliases not resolving, when it is installed as dependency","2025-03-09T11:59:59Z","https://github.com/nuxt/nuxt/issues/31298",0.65698135,{"description":2969,"labels":2970,"number":2975,"owner":2936,"repository":2936,"state":2976,"title":2977,"updated_at":2978,"url":2979,"score":2980},"Hi,\n\nI have a nuxt layer which works when imported locally as a sibling directory to the main project.\n\nHowever, when using the layer via a remote source (github or npm) Im getting this Vite / Vue error:\n\n\n\nThe code from the Button comp:\n\n```ts\nexport interface ButtonProps extends ThemeProps\u003CButtonTheme> {\n type?: ButtonHTMLAttributes['type'];\n color?: Colors;\n size?: Sizes;\n variant?: ButtonVariants['variant'];\n icon?: string;\n leadingIcon?: string;\n trailingIcon?: string;\n loadingIcon?: string;\n disabled?: boolean;\n loading?: boolean;\n}\nexport type ThemeSlotKeys\u003CT> = T extends { slots: infer S }\n ? { [K in keyof S]: string | undefined }\n : never;\nexport interface ThemeProps\u003CT> {\n theme?: string;\n themeClasses?: ThemeSlotKeys\u003CT>;\n themeOverride?: T;\n}\n```\n\nI don't understand why this would work importing locally but fail when importing remotely.\n\nWhat is the difference between how the layers are used between local and remote usage?\n\nThanks\nLee",[2971,2972],{"name":2933,"color":2934},{"name":2973,"color":2974},"needs reproduction","FBCA04",30894,"closed","Nuxt layer - issues with extending type when using nuxt alias and using remote layer source","2025-02-06T19:47:21Z","https://github.com/nuxt/nuxt/issues/30894",0.5498273,{"description":2982,"labels":2983,"number":2994,"owner":2936,"repository":2936,"state":2976,"title":2995,"updated_at":2996,"url":2997,"score":2998},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.17.0`\r\n- Nuxt Version: `3.8.2`\r\n- CLI Version: `3.10.0`\r\n- Nitro Version: `2.8.1`\r\n- Package Manager: `pnpm@8.3.1`\r\n- Builder: `-`\r\n- User Config: `devtools`, `extends`, `runtimeConfig`, `experimental`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-dhni1d?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nI created a Nuxt layer in `./my-layer` and I import `message` from `~/constants/foo` inside the `my-layer`.\r\n\r\nAlthough I know that official [document](https://nuxt.com/docs/guide/going-further/layers#relative-paths-and-aliases) mention that use relative instead of path aliases in layer components, I can successfully execute the `dev` and `build` commands in the root package, and the outcome is fine, seems Nuxt is able to resolve the correct path.\r\n\r\nHowever, I am unable to successfully pass the type checking with the following error.\r\n\r\n```\r\nmy-layer/components/HelloWorld.vue:2:25 - error TS2307: Cannot find module '~/constants/foo' or its corresponding type declarations.\r\n\r\n2 import { message } from '~/constants/foo';\r\n ~~~~~~~~~~~~~~~~~\r\n```\r\n\r\n### Additional context\r\n\r\nI know there are some workaround such as:\r\n- using auto-import\r\n- importing relative path\r\n- custom path alias like `~my-layer/`\r\n\r\nbut sometimes I really want to import by explicit path with only `~/` and pass the type checking to make sure no other type errors in project.\r\n\r\nShould this be resolved from the `tsc` (maybe make a new plugin of top of it to make `tsc` resolve the correct path), or is there another approach I should consider?\r\n\r\n### Logs\r\n\r\n_No response_",[2984,2985,2988,2991],{"name":2946,"color":2947},{"name":2986,"color":2987},"workaround available","11376d",{"name":2989,"color":2990},"🍰 p2-nice-to-have","0E8A16",{"name":2992,"color":2993},"layers","006B75",24705,"Typecheck fail when import path aliases in Nuxt layer","2025-06-04T07:13:55Z","https://github.com/nuxt/nuxt/issues/24705",0.6238762,{"description":3000,"labels":3001,"number":3009,"owner":2936,"repository":2936,"state":2976,"title":3010,"updated_at":3011,"url":3012,"score":3013},"### Environment\n\n```\nWorking directory: /home/projects/github-upm6owvq nuxi 19:24:52\nNuxt project info: nuxi 19:24:52\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.19.1\n- Nuxt Version: 4.0.0-rc.0\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-upm6owvq\n\n### Describe the bug\n\nHello,\nI am currently trying out the v4.0.0 RC.0 and noticed an issue when using the new tsconfig.json structure (using references as described [here](https://nuxt.com/docs/4.x/guide/directory-structure/tsconfig)).\n\n### Setup\n- Define a component in a Nuxt layer folder\n- Import a type from another file of that layer via the autogenerated layer alias (e.g. `#layers/my-layer/composables/my-composable`)\n- Use that type as the type for the props of that component\n\nIf I now use that component (see `TestLayerComponent3` in the Stackblitz Repro) in my app, Nuxt breaks with:\n```\n[@vue/compiler-sfc] Failed to resolve import source \"#layers/test-layer/composables/sub-folder/use-test-props\"\n/home/projects/github-upm6owvq/layers/test-layer/components/TestLayerComponent3.vue\nimport type { TestProps } from '#layers/test-layer/composables/sub-folder/use-test-props';\ndefineProps\u003CTestProps>();\n^^^^^^^^^ \n\u003C/script>\nat new H3Error (/home/projects/github-upm6owvq/node_modules/h3/dist/index.mjs:170:5) at Module.createError (/home/projects/github-upm6owvq/node_modules/h3/dist/index.mjs:196:15) at eval (/home/projects/github-upm6owvq/node_modules/@nuxt/vite-builder/dist/index.mjs:420:25) at async processMessage (/home/projects/github-upm6owvq/node_modules/@nuxt/vite-builder/dist/index.mjs:403:30)\n```\n\n### Further Info\nIt only breaks in this exact setup. The following similar cases all work for me:\n- Importing the props type from that layer in a component of the main /app folder (see `TestComponent`)\n- Using a relative import path to import the type inside the layer (see `TestLayerComponent1`)\n- Importing something else - e.g. a composable - via the layer alias inside the layer (see `TestLayerComponent2`)\n\nUsing the old tsconfig.json structure with `\"extends\": \"./.nuxt/tsconfig.json\"` also fixes the problem.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3002,3003,3006],{"name":2933,"color":2934},{"name":3004,"color":3005},"upstream","E8A36D",{"name":3007,"color":3008},"possible regression","B90A42",32590,"[v4] New tsconfig.json style: Importing props type in layer component via layer alias fails in [@vue/compiler-sfc]","2025-07-11T22:29:06Z","https://github.com/nuxt/nuxt/issues/32590",0.62725544,{"description":3015,"labels":3016,"number":3025,"owner":2936,"repository":2936,"state":2976,"title":3026,"updated_at":3027,"url":3028,"score":3029},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.17.0`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `modules`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\n[CodeSandbox](https://codesandbox.io/p/sandbox/wispy-pond-uq22j9)\r\n\r\n### Describe the bug\r\n\r\nWe are trying to create a layer with shared components, but are having troubles when it comes to extending – **from a github repository** – components with a module import. This happens regardless of the import being explicit (in the example, using `import { useToggle } from '@vueuse/core'`) or auto-imported by a nuxt module (e.g, including `modules: ['@vueuse/nuxt']` inside NuxtConfig)\r\n\r\n### Additional context\r\n\r\n**Note:** the same dependencies have been installed in the target project.\r\n**Note:** extending the same layer from a local folder works flawlessly\r\n\r\n### Logs\r\n\r\n```shell-script\r\nFailed to resolve import \"@vueuse/core\" from \"../../.cache/c12/github_luigigorlero_private-test/components/TestButton.vue\". Does the file exist?\r\n```\r\n",[3017,3020,3023,3024],{"name":3018,"color":3019},"enhancement","8DEF37",{"name":3021,"color":3022},"3.x","29bc7f",{"name":2949,"color":2950},{"name":2992,"color":2993},18448,"Module import using extends from remote source","2024-01-25T13:06:37Z","https://github.com/nuxt/nuxt/issues/18448",0.6341012,{"description":3031,"labels":3032,"number":3034,"owner":2936,"repository":2936,"state":2976,"title":3035,"updated_at":3036,"url":3037,"score":3038},"------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.18.3\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: npm@11.1.0\n- Builder: -\n- User Config: components, css, devtools, modules, vite\n- Runtime Modules: @nuxt/fonts@0.10.3, @nuxt/icon@1.10.3, @vueuse/nuxt@12.7.0\n- Build Modules: -\n------------------------------\n\nI have 2 projects:\n\n```\nnuxt-projects/\n\tapp/\n\tui/\n```\n\nThere is package.json in each project and I did npm install.\n\nIn **app** project, I want to extends **ui**\n\n_ui nuxt.config.ts_\n```typescript\nimport tailwindcss from \"@tailwindcss/vite\";\n\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n // compatibilityDate: '2024-11-01',\n components: [\n {\n path: '~/components',\n pathPrefix: false,\n global: true, // useless for important components\n },\n ],\n css: [\"~/assets/css/main.css\"],\n devtools: { enabled: true },\n modules: [\n \"@nuxt/fonts\",\n \"@nuxt/icon\",\n \"@vueuse/nuxt\",\n ], \n vite: {\n plugins: [\n tailwindcss(),\n ],\n },\n})\n```\n\n_app nuxt.config.ts_\n\n```typescript\nimport tailwindcss from \"@tailwindcss/vite\";\n\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n // compatibilityDate: '2024-11-01',\n components: [\n {\n path: '../ui/components', // required for import components\n pathPrefix: false,\n },\n {\n path: '~/components',\n pathPrefix: false,\n },\n ],\n\n css: [\"~/assets/css/main.css\"],\n devtools: { enabled: true },\n extends: [\"../ui\"], // useless for import components\n modules: [\n \"@nuxt/fonts\",\n \"@nuxt/icon\",\n \"@nuxt/content\",\n \"@vueuse/nuxt\",\n ],\n\n vite: {\n plugins: [\n tailwindcss(),\n ],\n },\n\n compatibilityDate: \"2025-03-05\",\n})\n```\n\nIf I add only \n\n```typescript\nextends: [\"../ui\"], \n```\n\nextends doesn't work. Ui componenets are not imported. \n\nIf I add \n\n```typescript\ncomponents: [\n {\n path: '../ui/components',\n pathPrefix: false,\n },\n```\n\nIt works but then extends is useless.\n\nCould you explain how to make works extends ?\nThere is a lack of documentation about extends.\n\n\n",[3033],{"name":2933,"color":2934},31221,"Question / Issue with nuxt extends for import components","2025-03-07T21:44:41Z","https://github.com/nuxt/nuxt/issues/31221",0.6427523,{"description":3040,"labels":3041,"number":3048,"owner":2936,"repository":2936,"state":2976,"title":3049,"updated_at":3050,"url":3051,"score":3052},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.16.0\r\n- Nuxt Version: 3.5.3\r\n- Nitro Version: 2.4.1\r\n- Package Manager: pnpm@8.6.1\r\n- Builder: vite\r\n- User Config: devtools, modules, css, eslint\r\n- Runtime Modules: @vueuse/nuxt@10.1.2, @nuxtjs/supabase@0.3.6, @nuxtjs/tailwindcss@6.7.0, @nuxtjs/eslint-module@4.1.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nYou can check a minimal reproduction in this repository: https://github.com/mitjans/nuxt-server-types\r\n\r\nTypescript complains that it cannot find the module `\"~/types/database\"`.\r\n\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nIt seems that with the new tsconfig file introduced in version 3.5.2, global nuxt import aliases do not work inside the server folder. Autocompletion suggests importing relative paths.\r\n\r\nAlso, other Nuxt modules imports stopped working. See [@nuxtjs/supabase issue 191](https://github.com/nuxt-modules/supabase/issues/191).",[3042,3043,3044,3047],{"name":2946,"color":2947},{"name":3021,"color":3022},{"name":3045,"color":3046},"dx","C39D69",{"name":3004,"color":3005},21484,"Server tsconfig import aliases","2023-06-22T10:49:17Z","https://github.com/nuxt/nuxt/issues/21484",0.64433235,{"description":3054,"labels":3055,"number":3058,"owner":2936,"repository":2936,"state":2976,"title":3059,"updated_at":3060,"url":3061,"score":3062},"### Environment\r\n\r\napp:\r\n```\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `npm@9.5.1`\r\n- Builder: `vite`\r\n- User Config: `extends`, `typescript`, `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n```\r\n\r\nnuxt-layer:\r\n```\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `npm@9.5.1`\r\n- Builder: `vite`\r\n- User Config: `typescript`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n```\r\n\r\n### Reproduction\r\n\r\n1. clone repo https://github.com/DawidKopys/nuxt-schema-error-repro\r\n2. run `npm i` in nuxt-layer directory\r\n3. run `npm i` in app directory\r\n4. run `npx nuxi typecheck` / `npm run dev` / `npx vue-tsc --noEmit` inside `app` directory. You should get below error:\r\n\r\n```\r\n../nuxt-layer/app.config.ts:7:16 - error TS2664: Invalid module name in augmentation, module '@nuxt/schema' cannot be found.\r\n\r\n7 declare module '@nuxt/schema' {\r\n ~~~~~~~~~~~~~~\r\n\r\n\r\nFound 1 error in ../nuxt-layer/app.config.ts:7\r\n```\r\n\r\n\r\n### Describe the bug\r\n\r\n- the app directory was created by running `npx nuxi@latest init app` from [the docs](https://nuxt.com/docs/getting-started/installation#new-project)\r\n- the nuxt-layer directory was created with nuxt layer template - by running `npx nuxi init --template layer nuxt-layer` command from [the docs](https://nuxt.com/docs/guide/going-further/layers#starter-template)\r\n- type checking was enabled in both directories by simply running `npm install --save-dev typescript vue-tsc` and turning type checking inside `nuxt.config.ts` for both directories\r\n\r\nSo, basically, I have just used the starters for app and layer, turned type checking for them, and I am getting this ts error straight away.\r\n\r\nThis error is very confusing to me as using `@nuxt/schema` was a [solution to my previous (similar) issue](https://github.com/nuxt/nuxt/issues/22282#issuecomment-1647911273) and it works just fine if I use it in the repo linked in the issue - https://github.com/DawidKopys/nuxt-layers. But for some reason it doesn't work in above simple setup.\r\n\r\n### Additional context\r\n\r\nUsing `@nuxt/schema` was a [solution to my previous (similar) issue](https://github.com/nuxt/nuxt/issues/22282#issuecomment-1647911273) and it works just fine if I use it in the repo linked in the issue - https://github.com/DawidKopys/nuxt-layers. But for some reason it doesn't work in above simple setup.\r\n\r\n### Logs\r\n\r\n_No response_",[3056,3057],{"name":2946,"color":2947},{"name":2933,"color":2934},22701,"Getting typescript error \"module '@nuxt/schema' cannot be found\" when extending layer template","2024-06-30T11:11:55Z","https://github.com/nuxt/nuxt/issues/22701",0.64878064,["Reactive",3064],{},["Set"],["ShallowReactive",3067],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQzZbOIfzuH9HR2gb9kEe4TLdx6zMfwd7MdW5u6OGQBU":-1},"/nuxt/nuxt/30896"]