\n\u003C!-- OR -->\n\u003CIcon name=\"my-icon:a\" v-if=\"flag\" />\n\u003CIcon name=\"my-icon:b\" v-else />\n```\nin `nuxt.config.ts`\n```ts\nicon: {\n provider: 'server',\n customCollections: [\n {\n prefix: 'my-icon',\n dir: './assets/icon/svg',\n },\n ],\n},\n// ...\nnitro: {\n preset: 'static',\n},\n```\n\nIf toggle value of `flag`, \neverything works well in development, \nbut it throws 404 error for `my-icon:b` after building and generating.\n(it works well with `v-show`) \n\nProject info:\n```\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v22.8.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@9.9.0\n- Builder: -\n- User Config: modules, icon, colorMode, shadcn, fonts, googleSignIn, app, imports, css, vite, nitro, compatibilityDate, telemetry\n- Runtime Modules: @nuxtjs/tailwindcss@6.13.2, @nuxt/icon@1.11.0, @nuxt/fonts@0.11.0, @nuxt/image@1.9.0, @nuxt/eslint@1.2.0, @pinia/nuxt@0.10.1, pinia-plugin-persistedstate/nuxt@4.2.0, @nuxt/test-utils/module@3.17.2, @nuxtjs/color-mode@3.5.2, shadcn-nuxt@1.0.3, @vueuse/nuxt@13.0.0, nuxt-vue3-google-signin@0.0.11\n- Build Modules: -\n------------------------------\n```\n",[],380,"nuxt","icon","open","Local icon 404 after `nuxi generating` if with `:name=\"flag?'my-icon:icon-a':'my-icon:icon-b'\"`","2025-03-26T15:31:52Z","https://github.com/nuxt/icon/issues/380",0.73785317,{"description":3160,"labels":3161,"number":3165,"owner":3152,"repository":3152,"state":3166,"title":3167,"updated_at":3168,"url":3169,"score":3170},"Hello friends\r\nI have problems with this example\r\nhttps://nuxtjs.org/examples/testing\r\nerror occurred when index.vue import a components\r\n\r\nIn component header.vue, I used i18n\r\n\r\nWhen it runs, an error occurs\r\n\r\n\r\nPlease help me!\r\nMany thanks\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9284\">#c9284\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3162],{"name":3163,"color":3164},"2.x","d4c5f9",5836,"closed","Ava testing issue","2023-01-18T20:25:36Z","https://github.com/nuxt/nuxt/issues/5836",0.7190751,{"description":3172,"labels":3173,"number":3177,"owner":3152,"repository":3152,"state":3166,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### Describe the feature\n\nI just tried to import a value from my server endpoints and was met with a 500 error on the page:\r\n\r\n\r\nThis error is a bit misleading and it took me a while to track down that it's happening because I'm importing a value from `~/server`:\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { myArray } from \"~/server/api/index\";\r\ntype MyArrayTypes = (typeof myArray)[number];\r\n\r\ndefineProps\u003C{ option: MyArrayTypes }>();\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n {{ option }}\r\n \u003Cpre>\r\n {{ myArray }}\r\n \u003C/pre\r\n >\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nAfter restarting the app a couple of times, I now see that I'm getting this error message on startup: `Importing from server is not allowed in the Vue part of your app. [importing server/api/index from components/TestComponent.vue]`.\r\n\r\nHowever this error message only shows up once when starting the app so it's quite easy to overlook. Especially on a larger app, where there might be many warnings/error/logs on startup.\r\n\r\nSo in conclusion, it would be nice if either/both:\r\n1. The import error shows up continuously. Maybe removing this check? https://github.com/nuxt/nuxt/blob/3c1582b6ff668fa331f61ad535e395276792cee2/packages/nuxt/src/core/plugins/import-protection.ts#L79-L80\r\n2. The error message on the page was more accurate.\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3174],{"name":3175,"color":3176},"pending triage","E99695",28717,"More visible error messages when getting restricted due to import protection","2024-08-29T19:50:02Z","https://github.com/nuxt/nuxt/issues/28717",0.7232081,{"description":3183,"labels":3184,"number":3189,"owner":3152,"repository":3152,"state":3166,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### Environment\r\n\r\nENV\r\nos: Darwin\r\nnodejs: 20.9.0\r\nnuxt: 3.8.1\r\n@nuxt/test-utils: 3.8.1\r\nvitest: 1.1.1\r\nyarn: 1.15.2\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-rx4vx2?file=package.json,testUtils.js,testUtils.test.js\r\n\r\nyou can run test command below.\r\n```\r\nnpm test\r\n``` \r\n\r\n### Describe the bug\r\n\r\nHello, I am using Vitest for testing on Nuxt3, vite env.\r\nDue to our team's convention, the configuration uses 'autoImport: false'.(For an explicit declaration) So when importing Nuxt's built-in items (useRoute, nextTick, computed, etc.) we use import '#imports'.\r\n\r\nWhen I run Vitest, the following error occurs:\r\n\r\nError: Failed to resolve import \"#imports\" from \"[file path]\". Does the file exist?\r\nHow do I solve this? help.\r\nIs this something that needs to be fixed in vitest?\r\n(I registered an issue on vitest. https://github.com/vitest-dev/vitest/issues/4853)\r\n(https://github.com/nuxt/nuxt/discussions/24719)\r\n\r\nBelow is my vitest.config.js\r\n```javascript\r\nimport path from 'path';\r\nimport vue from '@vitejs/plugin-vue';\r\n\r\nexport default {\r\n plugins: [vue()],\r\n test: {\r\n globals: true,\r\n environment: 'jsdom'\r\n },\r\n resolve: {\r\n alias: {\r\n '@': path.resolve(__dirname, './src')\r\n }\r\n }\r\n};\r\n``` \r\n\r\nThanks.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3185,3188],{"name":3186,"color":3187},"3.x","29bc7f",{"name":3175,"color":3176},25021,"Vitest can't resolve import '#imports'(Nuxt3, vitest)","2024-06-21T04:50:44Z","https://github.com/nuxt/nuxt/issues/25021",0.72733754,{"description":3195,"labels":3196,"number":3200,"owner":3152,"repository":3201,"state":3166,"title":3202,"updated_at":3203,"url":3204,"score":3205},"### Description\n\nI want to use a UVerticalNavigation component however I want to manage my self who should be active since:\n\n- I don't have any to params\n- I want to stay on the same page but triggering my function on click\n\n\nEg:\n\n```\n \u003CUVerticalNavigation :links=\"links\" >\n \u003C/UVerticalNavigation>\n\n\n const links = [\n {\n label: 'Inbox',\n icon: 'i-heroicons-home',\n click: () => selectFolder('inbox'),\n active: activeFolder.value == 'inbox',\n }, {\n label: 'Drafts',\n icon: 'i-heroicons-pencil',\n click: () => selectFolder('drafts'),\n active: activeFolder.value == 'drafts'\n }, {\n label: 'Outbox',\n icon: 'i-heroicons-envelope',\n click: () => selectFolder('outbox'),\n active: activeFolder.value == 'outbox'\n }, {\n label: 'Sent',\n icon: 'i-heroicons-paper-airplane',\n click: () => selectFolder('sent'),\n active: activeFolder.value == 'sent'\n }, {\n label: 'Spam',\n icon: 'i-heroicons-exclamation-triangle',\n click: () => selectFolder('spam'),\n active: activeFolder.value == 'spam'\n }, {\n label: 'All mails',\n icon: 'i-heroicons-inbox-stack',\n click: () => selectFolder('all'),\n active: activeFolder.value == 'all'\n }\n ]\n\n```\n\nI tried using the activeFOlder.value but it's not updating upon the value change\n\nThank you!\n",[3197],{"name":3198,"color":3199},"question","d876e3",3351,"ui","UVerticalNavigation Active","2025-02-19T05:51:40Z","https://github.com/nuxt/ui/issues/3351",0.7359789,{"description":3207,"labels":3208,"number":3209,"owner":3152,"repository":3210,"state":3166,"title":3211,"updated_at":3212,"url":3213,"score":3214},"So far I can only reproduce this on the https://nuxt.com/docs/guide/going-further/modules page, adding a trailing slash results in a hydration mismatch + 404 not found error page.\n\n* works - https://nuxt.com/docs/guide/going-further/modules\n* broken - https://nuxt.com/docs/guide/going-further/modules/\n\nMost pages do remove the trailing slash / navigate to the same page without slash, which work as expected. I figured this may be handled somewhere in a middleware or plugin but I couldn't find any so expect no PR with a fix from me 🙇",[],1841,"nuxt.com","Trailing slash route results in hydration mismatch with 404 error on specific routes (going-further/modules/... maybe more?)","2025-03-27T21:43:15Z","https://github.com/nuxt/nuxt.com/issues/1841",0.7364792,{"description":3216,"labels":3217,"number":3221,"owner":3152,"repository":3222,"state":3166,"title":3223,"updated_at":3224,"url":3225,"score":3226},"Hey guys, today I upgraded `vitest` and `nuxt-vitest` to version [0.29.2](https://github.com/vitest-dev/vitest/releases/tag/v0.29.2) and [0.6.8](https://github.com/danielroe/nuxt-vitest/releases/tag/0.6.8), respectively.\r\n\r\nI upgraded `nuxt-vitest` because I upgraded `vitest` and installed `c8` for test coverage and I started getting the following error message on test runs:\r\n```\r\nError: Cannot find module 'vitest-environment-nuxt/module'\r\n```\r\n\r\nAnd after the `nuxt-vitest` upgrade, I started getting the following error:\r\n```\r\nError: Cannot find import \"useI18n\" to mock\r\n```\r\n\r\nAnd this happens when I try to mock `useI18n` (from `@nuxtjs/i18n`), which exists globally in my application:\r\n```javascript\r\nimport { mockNuxtImport } from 'nuxt-vitest/utils'\r\n\r\nmockNuxtImport('useI18n', () => {\r\n return () => {\r\n return {\r\n t: vi.fn()\r\n }\r\n }\r\n})\r\n```\r\n\r\nBefore all these upgrades, the mock was working properly.\r\nAnyone else with a similar problem?\r\n\r\n*EXTRA INFORMATION*\r\nOn the other hand...\r\nMy original approach to mock i18n started to work (didn't work before):\r\n```javascript\r\nimport { useI18n } from 'vue-i18n'\r\nimport { vi } from 'vitest'\r\n\r\nvi.mock('vue-i18n')\r\n\r\nuseI18n.mockReturnValue({\r\n t: (tKey) => tKey\r\n})\r\n```\r\nAnd I using this approach for now. And why it didn't work before is a mystery...",[3218],{"name":3219,"color":3220},"vitest-environment","b60205",508,"test-utils","`mockNuxtImport` failing to mock Nuxt auto imports","2023-12-02T00:22:09Z","https://github.com/nuxt/test-utils/issues/508",0.73700523,{"description":3228,"labels":3229,"number":3230,"owner":3152,"repository":3222,"state":3166,"title":3231,"updated_at":3232,"url":3233,"score":3158},"Example in https://test-utils.nuxtjs.org/api-reference/app-testing not working. \r\nAfter run test get error:\r\n\r\n```\r\n/firsttest.spec.js:1\r\n({\"Object.\u003Canonymous>\":function(module,exports,require,__dirname,__filename,global,jest){import { get, setupTest } from '@nuxt/test-utils';\r\n\r\nSyntaxError: Cannot use import statement outside a module\r\n```\r\nmy setup:\r\n\r\nin jest.config.js\r\n```\r\nmodule.exports = {\r\n clearMocks: true,\r\n testMatch: [\r\n '*/__tests__/**/*.[jt]s?(x)',\r\n '**/?(*.)+(spec|test).[tj]s?(x)',\r\n '**/test/(*.)+(spec|test).js'],\r\n moduleNameMapper: {\r\n '^@/(.*)$': '\u003CrootDir>/$1',\r\n '^~/(.*)$': '\u003CrootDir>/$1',\r\n },\r\n moduleFileExtensions: ['js', 'vue', 'json'],\r\n testEnvironment: 'jsdom',\r\n transform: {\r\n '^.+\\\\.js$': 'babel-jest',\r\n '.*\\\\.(vue)$': 'vue-jest',\r\n },\r\n preset: '@nuxt/test-utils',\r\n}\r\n```\r\nin package.json\r\n```\r\n{\r\n \"name\": \"\",\r\n \"version\": \"1.0.0\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"node_modules/.bin/jest\"\r\n },\r\n \"author\": \"\",\r\n \"license\": \"\",\r\n \"dependencies\": {\r\n \"bootstrap\": \"^4.5.3\",\r\n \"bootstrap-vue\": \"^2.20.1\",\r\n \"nuxt\": \"^2.15.2\",\r\n\r\n },\r\n \"devDependencies\": {\r\n \"@babel/plugin-transform-modules-commonjs\": \"^7.12.1\",\r\n \"@nuxt/test-utils\": \"^0.2.0\",\r\n \"@vue/test-utils\": \"^1.1.1\",\r\n \"babel-jest\": \"^26.6.3\",\r\n \"jest\": \"^26.6.3\",\r\n \"vue-jest\": \"^3.0.7\"\r\n }\r\n}\r\n\r\n```\r\n\r\n\r\n",[],267,"Example in https://test-utils.nuxtjs.org/api-reference/app-testing not working","2023-12-02T00:28:12Z","https://github.com/nuxt/test-utils/issues/267",{"description":3228,"labels":3235,"number":3151,"owner":3152,"repository":3222,"state":3166,"title":3231,"updated_at":3236,"url":3237,"score":3158},[],"2023-12-02T00:13:09Z","https://github.com/nuxt/test-utils/issues/380",{"description":3228,"labels":3239,"number":3240,"owner":3152,"repository":3222,"state":3166,"title":3231,"updated_at":3241,"url":3242,"score":3158},[],481,"2023-12-02T00:13:13Z","https://github.com/nuxt/test-utils/issues/481",["Reactive",3244],{},["Set"],["ShallowReactive",3247],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8qnzBQ5tlQIeJrIwHqXtlDeWyXcUnuSHWPoc1-7Trak":-1},"/nuxt/ui/2964"]