\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.75153095,{"description":1993,"labels":1994,"number":2001,"owner":1985,"repository":1985,"state":2002,"title":2003,"updated_at":2004,"url":2005,"score":2006},"### What problem does this feature solve?\n\nI'm trying to find a way to read `props` from every .vue component in the project and write the result to a JSON file.\n\nIt should happen server side so I've tried creating a custom nuxt command and a module. The problem with these is I can't actually import a component, it's just a syntax error because components are not just JS. Even after a `nuxt build` when the components are reduced to being just JS in the `.nuxt` folder I still couldn't figure out how to read the props from that mess. I spent a few days on google, reading other modules, nuxt documentation and source code but couldn't find a way to extract details about components.\n\nWhat does work is a plugin in server only mode. I can read and write files, import components, read the props. Basically everything I wanted. But now the issue is that it's a plugin and that's not what plugins are for. This script should only run once during build but a plugin will run on every page load.\n\nSo I'd like to see a generally good way of messing with components from a command line script.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9773\">#c9773\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[1995,1998],{"name":1996,"color":1997},"enhancement","8DEF37",{"name":1999,"color":2000},"2.x","d4c5f9",6411,"closed","Using components in modules","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6411",0.71772045,{"description":2008,"labels":2009,"number":2016,"owner":1985,"repository":1985,"state":2002,"title":2017,"updated_at":2018,"url":2019,"score":2020},"### Environment\r\n\r\nnuxt latest\r\nnode 22\r\nhappy-dom\r\njest\r\n\r\n### Reproduction\r\n\r\nHard to reproduce something that isn't there but I can at least show you what I am trying to do, the error I get for context.\r\n\r\n```js\r\nimport { expect, test } from \"vitest\";\r\nimport { mountSuspended } from \"@nuxt/test-utils/runtime\";\r\nimport ToDo from \"~/components/ToDo.vue\";\r\n\r\nit('can mount todo component', async () => {\r\n const todo = await mountSuspended(ToDo, {\r\n data() {\r\n return {\r\n completed: true,\r\n title: \"Clean Walrus\"\r\n }\r\n }\r\n })\r\n expect(todo.html()).toEqual(\"\u003C>\u003C/>\")\r\n})\r\n```\r\n\r\n```bash\r\nTypeError: Cannot read properties of undefined (reading 'completed')\r\n ❯ Proxy._sfc_render components/ToDo.vue:2:28\r\n 1| \u003Ctemplate>\r\n 2| \u003Cdiv :class=\"`task ${task.completed ? 'is-complete' : ''}`\">\r\n | ^\r\n 3| \u003Cdiv class=\"content\">{{ task.title }}\u003C/div>\r\n 4| \u003Cdiv class=\"buttons\">\r\n ❯ Proxy.clonedComponent.render node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:142:37\r\n ❯ renderComponentRoot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6246:16\r\n ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4921:46\r\n ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:181:19\r\n ❯ instance.update node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5052:16\r\n ❯ setupRenderEffect node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5062:5\r\n ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4830:7\r\n ❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4784:9\r\n ❯ patch node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4313:11\r\n\r\nThis error originated in \"tests/components/ToDo.vue.test.js\" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.\r\nThe latest test that might've caused the error is \"can mount todo component\". It might mean one of the following:\r\n- The error was thrown, while Vitest was running this test.\r\n- If the error occurred after the test had been completed, this was the last documented test before it was thrown.\r\n```\r\nI have tried various things along this line of thought from various scraps of information I can find on blogs and stack overflow but at least 50% of it is for nuxt2 and out of date.\r\n\r\n### Describe the bug\r\n\r\nI would expect a mature framework to have better unit test examples and especially a simple unit test of a simple view component with a data prop\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2010,2013],{"name":2011,"color":2012},"documentation","5319e7",{"name":2014,"color":2015},"good first issue","fbca04",28346,"No documentation on how to unit test a simple component with data prop","2024-08-08T09:54:58Z","https://github.com/nuxt/nuxt/issues/28346",0.7202839,{"description":2022,"labels":2023,"number":2029,"owner":1985,"repository":1985,"state":2002,"title":2030,"updated_at":2031,"url":2032,"score":2033},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxt/test-utils/module@3.12.1\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-aygvkp?file=components%2Fcomponent.nuxt.test.ts\r\n\r\nOpen the stackblitz and notice that the editor complains:\r\n\r\n```\r\nCannot find name 'SomeComponent'. Did you mean 'component'?(2552)\r\ncomponent.nuxt.test.ts(10, 9): 'component' is declared here.\r\n```\r\n\r\nRun the test suite and notice that the tests fail with:\r\n\r\n```\r\nReferenceError: SomeComponent is not defined\r\n```\n\n### Describe the bug\n\nI have followed the instructions on https://nuxt.com/docs/getting-started/testing and the way I read [this section](https://nuxt.com/docs/getting-started/testing#%EF%B8%8F-helpers) `SomeComponent` should be auto-imported into that test.\r\n\r\nThe test suite runs successfully and all tests pass if I uncomment the SomeComponent import on line 4 but according to the example in the doc, that isn't necessary. Also, when I uncomment line 4, I get the following error:\r\n\r\n```\r\nCannot find module './SomeComponent' or its corresponding type declarations.(2307)\r\n```\r\n\r\nCompare this to a similar import in `SomeWrapperComponent.vue` which does not cause the error.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2024,2025,2026],{"name":2011,"color":2012},{"name":2014,"color":2015},{"name":2027,"color":2028},"3.x","29bc7f",27120,"docs: improve testing component example to avoid auto import misunderstanding","2024-05-11T09:00:34Z","https://github.com/nuxt/nuxt/issues/27120",0.73339725,{"description":2035,"labels":2036,"number":2040,"owner":1985,"repository":2041,"state":2002,"title":2042,"updated_at":2043,"url":2044,"score":2045},"I have a nuxt project here using typescript in components placed in .vue files\r\n\r\nGiven this test for a component\r\n\r\n```typescript\r\n\r\nimport { mount } from '@nuxt/test-utils'\r\nimport LoginForm from '@/components/auth/LoginForm'\r\ndescribe('LoginForm', () => {\r\n test('is a Vue instance', () => {\r\n const wrapper = mount(LoginForm)\r\n expect(wrapper.vm).toBeTruthy()\r\n })\r\n})\r\n\r\n```\r\n\r\nthis component makes the test pass: \r\n\r\n```vue\r\n\u003Ctemplate>\r\n\r\n\u003C/template>\r\n\u003Cscript>\r\n\r\n\u003C/script>\r\n```\r\n\r\nand this component breaks it \r\n\r\n```vue\r\n\u003Ctemplate>\r\n\r\n\u003C/template>\r\n\u003Cscript lang=\"ts\">\r\n\r\n\u003C/script>\r\n```\r\n\r\nwith a error: \r\n\r\n```\r\nTest suite failed to run\r\n\r\n Jest encountered an unexpected token\r\n\r\n Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.\r\n\r\n Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\r\n\r\n By default \"node_modules\" folder is ignored by transformers.\r\n\r\n Here's what you can do:\r\n • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.\r\n • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript\r\n • To have some of your \"node_modules\" files transformed, you can specify a custom \"transformIgnorePatterns\" in your config.\r\n • If you need a custom transformation specify a \"transform\" option in your config.\r\n • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the \"moduleNameMapper\" config option.\r\n\r\n You'll find more details and examples of these config options in the docs:\r\n https://jestjs.io/docs/configuration\r\n For information about custom transformations, see:\r\n https://jestjs.io/docs/code-transformation\r\n\r\n```\r\n\r\nAny hint of how to get typescript components to run in tests?\r\n\r\n\r\nnode: 17.0.1\r\n \"nuxt\": \"2.15.8\",\r\n \"@nuxt/test-utils\": \"^0.2.2\",",[2037],{"name":2038,"color":2039},"v0","4137F6",293,"test-utils","tests break for a component using typescript","2024-05-01T16:05:03Z","https://github.com/nuxt/test-utils/issues/293",0.73477453,{"description":2047,"labels":2048,"number":2050,"owner":1985,"repository":1985,"state":2002,"title":2051,"updated_at":2052,"url":2053,"score":2054},"Hello, \r\n\r\nI'm thinking about creating a module providing some testing configuration. The plugin would work with [Jest](https://facebook.github.io/jest), allowing to unit test components, vuex stores, plugins… The whole configuration will be already done, and developers would just have to include it.\r\n\r\nBut, before getting started, I'd like some information :\r\n\r\n1. Is such plugin welcome ? Or do you plan to support testing natively in Nuxt ?\r\n1. The plugin would provide a testing script, is it possible from a module to extend the Nuxt scripts (And provide `nuxt test` for exemple) ?\r\n\r\nFor now, I implemented some testing setup here : https://github.com/antoinerey/nuxt-jest\r\n\r\n**Edit**: The more I think about it, the more I feel like it'd be better to make a vue-cli plugin. What do you think ?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2610\">#c2610\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2049],{"name":1999,"color":2000},3013,"Testing module","2023-01-18T16:09:51Z","https://github.com/nuxt/nuxt/issues/3013",0.7364178,{"description":2056,"labels":2057,"number":2058,"owner":1985,"repository":2041,"state":2002,"title":2059,"updated_at":2060,"url":2061,"score":2062},"Right now the docs has a quite limitation and there is no guidance on integrating with a full Nuxt app which contains pages with may api calls, not just plugin or components let alone ts module import.\r\n\r\nIt would be much appreciated if you can expand the docs on for a more specific cases or may be some examples on this repo or say a fiddle, codepen, codesandbox ?",[],265,"more docs on how to mock test for a page","2023-12-02T00:18:11Z","https://github.com/nuxt/test-utils/issues/265",0.7410439,{"description":2056,"labels":2064,"number":2065,"owner":1985,"repository":2041,"state":2002,"title":2059,"updated_at":2066,"url":2067,"score":2062},[],355,"2023-12-02T00:13:09Z","https://github.com/nuxt/test-utils/issues/355",{"description":2069,"labels":2070,"number":2071,"owner":1985,"repository":2041,"state":2002,"title":2072,"updated_at":2073,"url":2074,"score":2075},"Hi there\r\nI am looking for a way to integration test my nuxt app with Jest, that is using both the nuxt/content and vuex.\r\nDo you happen to have any examples for how to test these, or can you point me in the right direction?\r\nBest\r\nAgata",[],478,"Testing the nuxt/content module?","2023-12-02T00:13:13Z","https://github.com/nuxt/test-utils/issues/478",0.74283767,{"description":2077,"labels":2078,"number":2086,"owner":1985,"repository":1985,"state":2002,"title":2087,"updated_at":2088,"url":2089,"score":2090},"Unit tests for components `scanComponents` ",[2079,2080,2083],{"name":2027,"color":2028},{"name":2081,"color":2082},"test","1DB6E0",{"name":2084,"color":2085},"components","05B979",11067,"unit tests for components","2023-01-19T14:50:26Z","https://github.com/nuxt/nuxt/issues/11067",0.7440723,["Reactive",2092],{},["Set"],["ShallowReactive",2095],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"MPgZjarYS0mZb8drVgsvO68lVOSgKOWPnjkg_s2dClU":-1},"/nuxt/test-utils/290"]