",[3139],{"name":3140,"color":3141},"pending triage","E99695",32714,"nuxt","open","fix(types): v4 auto-import in shared directory","2025-07-21T23:23:54Z","https://github.com/nuxt/nuxt/issues/32714",0.64249486,{"description":3150,"labels":3151,"number":3153,"owner":3143,"repository":3143,"state":3144,"title":3154,"updated_at":3155,"url":3156,"score":3157},"### Environment\n\n## Issue Description\n\n### Problem\nNuxt 4's auto-import system has a limitation where functions exported from shared directories (e.g., `shared/utils/`) are globally auto-imported for Vue components, but TypeScript/editors don't recognize these functions when used within the same directory. This causes \"Cannot find name\" errors in development despite the code working correctly at runtime.\n\n### Example\nIn a typical setup with shared utilities:\n\n```typescript\n// shared/utils/typeGuards.ts\nexport const isArray = (value: any): value is any[] => Array.isArray(value)\n\n// shared/utils/numberHelpers.ts\nexport const toNumber = (v: unknown) => \n isArray(v) ? v.map(item => toNumber(item)) : Number(v) // ❌ Cannot find name 'isArray'\n```\n\nThe `isArray` function is available globally in Vue components but not recognized within the same `shared/utils/` directory.\n\n### Root Cause\nThe auto-import scanning in `packages/nuxt/src/imports/module.ts` only makes exports globally available but doesn't handle intra-directory imports. The `scanDirExports` function creates imports that work globally but not within the same directory scope.\n\n### Solution\nEnhanced the import scanning logic to create duplicate import entries for shared directories:\n\n1. **Identify shared directories**: Filter `composablesDirs` for paths containing `/shared/`\n2. **Create duplicate imports**: Generate additional import entries with special metadata for intra-directory access\n3. **Maintain compatibility**: Preserve existing global auto-import functionality\n\n### Implementation Details\nThe fix adds this logic to the `regenerateImports` function:\n\n```typescript\n// Add intra-directory imports for shared directories\nconst intraDirectoryImports: Import[] = []\nconst sharedDirs = composablesDirs.filter(dir => dir.includes('/shared/'))\nfor (const sharedDir of sharedDirs) {\n const dirImports = scannedImports.filter(imp => imp.from.startsWith(sharedDir))\n for (const imp of dirImports) {\n intraDirectoryImports.push({\n ...imp,\n meta: { ...imp.meta, intraDirectory: sharedDir }\n })\n }\n}\nimports.push(...scannedImports, ...intraDirectoryImports)\n```\n\n### Benefits\n- ✅ **TypeScript Support**: Eliminates \"Cannot find name\" errors in editors\n- ✅ **No Breaking Changes**: Maintains existing global auto-import behavior \n- ✅ **Better DX**: Enables seamless cross-file usage within shared directories\n- ✅ **Performance**: Minimal overhead, only affects shared directories\n",[3152],{"name":3140,"color":3141},32646,"fix(imports): enable intra-directory auto-imports for shared utilities","2025-07-16T20:09:35Z","https://github.com/nuxt/nuxt/issues/32646",0.65164113,{"description":3159,"labels":3160,"number":3164,"owner":3143,"repository":3143,"state":3165,"title":3166,"updated_at":3167,"url":3168,"score":3169},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: -\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: default\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-9548wjk1?file=app.vue\n\n### Describe the bug\n\nThe [documentation](https://nuxt.com/docs/guide/directory-structure/shared#auto-imports) says: _\"...files in the shared/utils/ and shared/types/ directories will be auto-imported.\"_\n\nHowever, in fact, files in the `shared/utils/` are not being auto imported unless `compatibilityVersion: 4` is enabled. This is not covered in the documentation (only something about `app/` is).\n\nEither the documentation should make it clear that shared utils is for Nuxt 4 layout only, or auto import should be fixed.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3161],{"name":3162,"color":3163},"documentation","5319e7",30286,"closed","shared/utils/ auto import documentation is misleading","2025-02-08T21:22:19Z","https://github.com/nuxt/nuxt/issues/30286",0.5951373,{"description":3171,"labels":3172,"number":3177,"owner":3143,"repository":3143,"state":3165,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.5\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.1.34\n- Builder: -\n- User Config: default\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nWhen defining `shared/types/test.ts` with:\n```ts\nexport type Test = string;\n```\nI have, from `app.vue`:\n\nAnd if I press `\u003Ctab>`, vscode inserts:\n```ts\nimport type { Test } from '~~/shared/types/test';\n```\nWhich defeats the point of autoimports.\n\n### Describe the bug\n\nAlso the behavior is not always the same, sometimes (although not often) I see the alias instead and it doesn't insert the extra line.\n\nWhat's wrong?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3173,3174],{"name":3140,"color":3141},{"name":3175,"color":3176},"needs reproduction","FBCA04",29963,"Shared folder - Autoimports not working","2025-03-24T23:00:22Z","https://github.com/nuxt/nuxt/issues/29963",0.625817,{"description":3183,"labels":3184,"number":3189,"owner":3143,"repository":3143,"state":3165,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### Environment\n\nNuxt project info: 10:36:49 AM\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.14.0\r\n- Nuxt Version: 3.12.3-28642550.8578e2bd\r\n- CLI Version: 3.11.2-1718100309.03d4a54\r\n- Nitro Version: 2.9.6\r\n- Package Manager: bun@1.1.13\r\n- Builder: -\r\n- User Config: app, typescript, imports, modules, runtimeConfig, devtools, future, compatibilityDate\r\n- Runtime Modules: @nuxt/fonts@0.7.0, @nuxt/image@1.7.0, @nuxt/test-utils@3.13.1, @nuxtjs/html-validator@1.8.2, @vueuse/nuxt@10.11.0, dayjs-nuxt@2.1.9, nuxt-aos@1.2.4, @pinia/nuxt@0.5.1, vuetify-nuxt-module@0.14.1\r\n- Build Modules: -\r\n------------------------------\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jwxut5?file=app%2Fapp.vue\n\n### Describe the bug\n\nTrying to use `~/utils/rootTest.ts` or `~/utils/services/test.ts` is not working in script tag, only in template.\r\n\r\n```html\r\n\u003Cscript setup lang=\"ts\">\r\n\r\n//These will throw a 500 Error.\r\n//can't access lexical declaration [CONST_NAME] before initialization\r\nconst test = test();\r\nconst rootTest = rootTest();\r\n\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003C!--This works!-->\r\n \u003Cp>{{ test() }}\u003C/p>\r\n\r\n \u003C!--This works!-->\r\n \u003Cp>{{ rootTest() }}\u003C/p>\r\n \u003C/div>\r\n\u003C/template>\r\n```\n\n### Additional context\n\nUsing Nuxt in compatibilityMode 4\n\n### Logs\n\n```shell-script\nERROR [nitro] [unhandledRejection] $setup.test is not a function\r\n\r\n renderComponentSubTree@node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:693:18\r\n renderComponentVNode@node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:637:12\r\n ssrRenderComponent@node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:84:10\r\n default@node_modules/nuxt/dist/app/components/nuxt-root.vue:102:38\r\n ssrRenderSuspense@node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:466:5\r\n _sfc_ssrRender@node_modules/nuxt/dist/app/components/nuxt-root.vue:91:26\r\n renderComponentSubTree@node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:693:18\r\n renderComponentVNode@node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:637:12\r\n renderToString@node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:911:24\r\n renderToString$1@.nuxt/dev/index.mjs:1134:101\r\n renderToString@node_modules/vue-bundle-renderer/dist/runtime.mjs:200:40\r\n```\n```\n",[3185,3188],{"name":3186,"color":3187},"3.x","29bc7f",{"name":3140,"color":3141},27763,"Utils Dir in compatibility Mode not auto-imported","2024-06-23T13:58:02Z","https://github.com/nuxt/nuxt/issues/27763",0.6355209,{"description":3195,"labels":3196,"number":3198,"owner":3143,"repository":3143,"state":3165,"title":3199,"updated_at":3200,"url":3201,"score":3202},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: future, compatibilityDate, devtools, srcDir, serverDir, dir\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-c3zbe4c6-cpg2sv8f\n\n### Describe the bug\n\nIntended Directory Structure:\n\n```\n.\n├── nuxt.config.ts\n└── src\n ├── app ✅ works\n │ ├── app.vue\n │ └── utils ✅ auto-import works\n │ └── app-utils.ts\n ├── public ✅ works\n │ └── public.txt\n ├── server ✅ works\n │ └── utils ✅ auto-import works\n │ └── server-utils.ts\n └── shared 🚫 auto-import fail\n └── shared-utils.ts\n```\n\nNuxt Config:\n\n```typescript\nexport default defineNuxtConfig({\n future: { compatibilityVersion: 4 },\n compatibilityDate: '2024-11-01',\n devtools: { enabled: true },\n\n srcDir: 'src/app',\n serverDir: 'src/server',\n dir: {\n public: 'src/public',\n shared: 'src/shared', // 🚫 this got ignored\n },\n});\n```\n\nThere is no viable workarounds (i.e. imports.dir works for `srcDir` but not `serverDir`), other than doing manual imports.\n\n### Additional context\n\nInspecting the generated types in .nuxt suggests `options.dir.shared` is ignored during auto-import.\n\nFrom reproduction\n\napp.vue\n\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cul>\n \u003Cli>Function from app/utils: {{ appUtilsFunction() }}\u003C/li>\n \u003Cli>\n Function from shared/utils: {{ catchWrapper(sharedUtilsFunction) }}\n \u003C/li>\n \u003C/ul>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nconst catchWrapper = (fn) => {\n try {\n return fn();\n } catch {\n return 'Unable to access this function';\n }\n};\n\u003C/script>\n```\n\nshows\n```\nFunction from app/utils: This works!\nFunction from shared/utils: Unable to access this function\n```\n\nroutes/server.js\n\n```javascript\nexport default defineEventHandler(() => {\n const outputFromServerUtils = serverUtilsFunction();\n\n let outputFromSharedUtils;\n try {\n outputFromSharedUtils = sharedUtilsFunction();\n } catch {}\n\n return {\n serverUtilsFunction: outputFromServerUtils,\n sharedUtilsFunction: outputFromSharedUtils ?? '',\n };\n});\n```\n\nshows\n\n```json\n{\n \"serverUtilsFunction\": \"This works!\",\n \"sharedUtilsFunction\": \"\"\n}\n```\n\n### Logs\n\n```shell-script\n\n```",[3197],{"name":3140,"color":3141},31082,"Nuxt config's `dir.shared` is ignored in auto-imports","2025-02-23T09:31:41Z","https://github.com/nuxt/nuxt/issues/31082",0.6373069,{"description":3204,"labels":3205,"number":3208,"owner":3143,"repository":3143,"state":3165,"title":3209,"updated_at":3210,"url":3211,"score":3212},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.12.1`\r\n- Nuxt Version: `3.0.0-rc.11`\r\n- Nitro Version: `0.5.4`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\n1. Create a file named `general.ts` in `utils/` directory.\r\n2. Not being auto-imported for usage in components. \r\n\r\n\n\n### Describe the bug\n\nAuto-import is enabled for `utils/` directory - as mentioned in the documentation: https://v3.nuxtjs.org/guide/directory-structure/utils . Still, it isn't working. Please let me know where am I going wrong.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3206,3207],{"name":3186,"color":3187},{"name":3140,"color":3141},15477,"`utils/` are not being auto-imported","2023-01-19T17:51:29Z","https://github.com/nuxt/nuxt/issues/15477",0.64158654,{"description":3214,"labels":3215,"number":3220,"owner":3143,"repository":3143,"state":3165,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### Environment\n\n```\nWorking directory: /app nuxi 9:14:31 PM\nNuxt project info: nuxi 9:14:31 PM\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.15.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.27.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: app, compatibilityDate, devtools, modules, devServer, runtimeConfig, vite\n- Runtime Modules: @nuxt/eslint@1.5.2, @nuxt/test-utils/module@3.19.2\n- Build Modules: -\n------------------------------\n\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read documentation: https://nuxt.com\n```\n\n### Reproduction\n\nReproduced with a simple Nuxt config, shown below.\n\n### Describe the bug\n\nIn Nuxt v3, it was possible to auto-import from a `types` folder using something like the following:\n\n```\nimport { defineNuxtConfig } from 'nuxt/config'\n\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: '2024-11-01',\n imports: {\n dirs: [\n 'types/*.ts',\n ],\n },\n})\n```\n\nIn this case, the types declared in `types/*.ts` would automatically get added to `src/.nuxt/imports.d.ts`, and then auto-imported in components and such. After upgrading to v4, this fails: the types in `types/*.ts` are no longer added to `imports.d.ts`.\n\nOne solution, mentioned in the Discord server ([here](https://discord.com/channels/473401852243869706/1401602660838412348)) is to add types in `shared/types`. That's an okay solution, but it's not documented anywhere, and the Discord bot gave the typical AI-generated wrong answer (use `declare global`...).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3216,3217],{"name":3140,"color":3141},{"name":3218,"color":3219},"possible regression","B90A42",32870,"Auto-import types from \"types\" directory breaks when upgrading from v3 to v4","2025-08-06T11:25:54Z","https://github.com/nuxt/nuxt/issues/32870",0.64493215,{"description":3226,"labels":3227,"number":3229,"owner":3143,"repository":3143,"state":3165,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Environment\n\nwhen I try to use functionality in utils folders of a nuxt project in tests, they don't get auto-imported\n\n\n``` ❯ test/auto.test.ts (1 test | 1 failed) 4052ms\n × auto test > test import 1ms\n → serverUtilsTest is not defined\n\n⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯\n\n FAIL test/auto.test.ts > auto test > test import\nReferenceError: serverUtilsTest is not defined\n ❯ test/auto.test.ts:8:20\n 6|\n 7| it('test import', () => {\n 8| const result = serverUtilsTest()\n | ^\n 9| expect(result).toBe('serverUtilsTest')\n 10| })\n```\n\nhere is my `server/utils/test.ts` file\n```ts\nexport function serverUtilsTest() {\n return 'serverUtilsTest'\n}\n```\n\nand here is my `test/auto.test.ts` file\n```ts\nimport { describe, it, expect } from 'vitest'\nimport { setup } from '@nuxt/test-utils'\n\ndescribe('auto test', async () => {\n await setup({ dev: true })\n\n it('test import', () => {\n const result = serverUtilsTest()\n expect(result).toBe('serverUtilsTest')\n })\n})\n```\n\nrepo for reproduction https://github.com/acidjazz/auto-import-test\n\n### Reproduction\n\nrun `pnpm run test` in repo https://github.com/acidjazz/auto-import-test\n\n### Describe the bug\n\n@nuxt/test-utils setup() should take care of all auto-imports in utils folders\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3228],{"name":3140,"color":3141},30699,"auto-imports of utils folders not working in tests using @nuxt/test-utils","2025-01-22T17:53:23Z","https://github.com/nuxt/nuxt/issues/30699",0.6480394,{"description":3235,"labels":3236,"number":3240,"owner":3143,"repository":3143,"state":3165,"title":3241,"updated_at":3242,"url":3243,"score":3244},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v18.17.1\r\n- Nuxt Version: 3.10.2\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@1.22.21\r\n- Builder: -\r\n- User Config: ssr, runtimeConfig, build, devtools, routeRules, modules, vite, \r\ncss, sourcemap\r\n- Runtime Modules: (), @pinia/nuxt@0.5.1\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n.\r\n\n\n### Describe the bug\n\ncustom components inside components directory are imported automatically but not fuctions in utils directory.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nReferenceError: XXX is not defined\n```\n",[3237,3238,3239],{"name":3186,"color":3187},{"name":3140,"color":3141},{"name":3175,"color":3176},27257,"autoImport for utils directory doesn't work correctly.","2024-05-24T13:28:33Z","https://github.com/nuxt/nuxt/issues/27257",0.6530089,["Reactive",3246],{},["Set"],["ShallowReactive",3249],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fd6RIR6MYT7n4MV7nZlnlzNqEF-G4SpW5PTkO7Q5xpA0":-1},"/nuxt/nuxt/30482"]