`\n\nUnable to use stroke-width does not take effect",[],364,"nuxt","icon","open","Unable to use stroke-width does not take effect","2025-03-04T02:48:19Z","https://github.com/nuxt/icon/issues/364",0.71987927,{"description":1993,"labels":1994,"number":1998,"owner":1985,"repository":1985,"state":1987,"title":1999,"updated_at":2000,"url":2001,"score":2002},"### Describe the feature\n\nI was wondering about the different behavior of `ref()` in a composables file outside of composable function versus the usage in vue component, composable function or pinia for example.\r\n\r\nThe best practice documented here https://nuxt.com/docs/getting-started/state-management which describes `const ref = () => useState(\"key\", () => \"initValue\")` is nice but could be smarter without the additional step to execute this function if i want to use the underlaying ref value.\r\n\r\nuseUseStateSampleComposable.ts - Showcase for the laborious usage of `useState()`\r\n```js\r\nconst useStateFn = () => useState(\"key\", () => \"initValue\");\r\n\r\nexport function useRefSampleComposable(newRefValue: string) {\r\n const refValue = useStateFn() // i hate this additional call\r\n refValue.value = newRefValue;\r\n \r\n return {\r\n refValue\r\n };\r\n}\r\n```\r\n\r\nSo i've built something like this to get an easy workaround where i do not have to execute a function to get the underlaying ref value.\r\n\r\nuseBetterRef.ts - Example solution for doing a \"better ref\".\r\n```js\r\nconst counter = useState(\"useRefCounter\", () => 0); // just for having a unqiue counter id\r\n\r\nexport function useBetterRef(value: string) {\r\n const key = `useRef:${counter.value++}`;\r\n return computed({\r\n get: () => (() => useState(key, () => value))().value,\r\n set: (value) => (useState(key).value = value),\r\n });\r\n}\r\n```\r\n\r\nuseBetterRefSampleComposable.ts - Showcase for the usage of useBetterRef\r\n```js\r\nconst refValue = useBetterRef(\"initValue\");\r\n\r\nexport function useBetterRefSampleComposable(newRefValue: string) {\r\n refValue.value = newRefValue;\r\n \r\n return {\r\n refValue\r\n };\r\n}\r\n```\n\n### Additional information\n\n- [ ] 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).",[1995],{"name":1996,"color":1997},"pending triage","E99695",25911,"ref vs. useState in composables file outside of composable function","2024-06-30T11:05:40Z","https://github.com/nuxt/nuxt/issues/25911",0.7293005,{"description":2004,"labels":2005,"number":2006,"owner":1985,"repository":2007,"state":1987,"title":2008,"updated_at":2009,"url":2010,"score":2011},"I've been having an issue with this module, where the fetching of font files sometimes fails during the production build. I haven't been able to create a reliable reproduction yet—it seems to happen at random.\n\nThe build is done in GitHub CI, where a Docker image is built, using Node version 18.\n\nThis is the error log from the problematic deployment:\n```\n#25 20.31 [@nuxt/fonts] ERROR Could not fetch metadata for Red Hat Display from google. fetch failed\n#25 20.31 \n#25 20.31 at Object.fetch (node:internal/deps/undici/undici:11372:11)\n#25 20.31 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n#25 20.31 at async getFontDetails$5 (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:550:12)\n#25 20.31 at async cachedData (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:474:20)\n#25 20.31 at async Object.resolveFontFaces (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:511:14)\n#25 20.31 at async resolveFontFaceWithOverride (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:1395:26)\n#25 20.31 at async addFontFaceDeclaration (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:940:22)\n#25 20.31 at async Promise.all (index 0)\n#25 20.31 at async transformCSS (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:1013:5)\n#25 20.31 at async Object.transform (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:1025:17)\n#25 20.31 \n#25 20.31 \n#25 20.31 [@nuxt/fonts] WARN Could not produce font face declaration from google for font family Red Hat Display.\n#25 20.31 \n#25 42.48 ℹ ✓ 1387 modules transformed.\n```\n\nHas anyone else come across this issue? Wouldn't it be better to exit rather than continue with the build if the font fetch fails?",[],356,"fonts","Fonts sometimes missing in production build","2024-12-05T16:49:07Z","https://github.com/nuxt/fonts/issues/356",0.7337389,{"description":2013,"labels":2014,"number":2021,"owner":1985,"repository":2022,"state":1987,"title":2023,"updated_at":2024,"url":2025,"score":2026},"### Description\n\nCurrently, when I use `UAvatar` and the user's photo returns a 404, it generates an `\u003Cimg>` with the broken image icon:\n\n\nIs there a way to make the image that returns 404 display text from the alt instead?\nIn the documentation it says:\n>When no icon or text is provided, the initials of the `alt` prop are used as fallback\n\nCan `alt` also be used as a fallback when the image is broken?\n\n\n\nExample:\n\n",[2015,2018],{"name":2016,"color":2017},"question","d876e3",{"name":2019,"color":2020},"v3","49DCB8",3809,"ui","[UAvatar] If the image does not exist, return text","2025-04-06T16:07:33Z","https://github.com/nuxt/ui/issues/3809",0.7337638,{"description":2028,"labels":2029,"number":2033,"owner":1985,"repository":2034,"state":2035,"title":2036,"updated_at":2037,"url":2038,"score":2039},"",[2030],{"name":2031,"color":2032},"design","00bd6f",1208,"nuxt.com","closed","[Workshop] Workshop single page ","2023-10-10T14:45:09Z","https://github.com/nuxt/nuxt.com/issues/1208",0.6782364,{"description":2041,"labels":2042,"number":2046,"owner":1985,"repository":1985,"state":2035,"title":2047,"updated_at":2048,"url":2049,"score":2050},"Fisrtly, Forgive my English is not very good.\r\n\r\nI use keep-alive tag in default.vue, but it doesn't work.\r\n`default.vue:`\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ckeep-alive>\r\n \u003Cnuxt>\u003C/nuxt>\r\n \u003C/keep-alive>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nAt last, I find it can work after add a code in nuxt-child.js line65.\r\n`nuxt/lib/app/components/nuxt-child.js:`\r\n```\r\nreturn h('transition', {\r\n props: transitionProps,\r\n on: listeners\r\n }, [\r\n h('keep-alive', [\r\n h('router-view', data)\r\n ])\r\n])\r\n```\r\nYou can judge keep-alive based on the configuration of nuxt.config.js.\r\n `result`\r\n\r\n\r\nIf you doesn't need `keep-alive`, you can add `deactivated` in this components.\r\n ```\r\ndeactivated () {\r\n this.$destroy()\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://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1531\">#c1531\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2043],{"name":2044,"color":2045},"2.x","d4c5f9",1706,"About how to use keep-alive in Nuxt.js","2023-01-18T15:42:10Z","https://github.com/nuxt/nuxt/issues/1706",0.7004789,{"description":2052,"labels":2053,"number":2066,"owner":1985,"repository":1985,"state":2035,"title":2067,"updated_at":2068,"url":2069,"score":2070},"### Describe the feature\r\n\r\nIt is easy to make a mistake and use `setInterval` in a Vue component without wrapping it into `onMounted()`.\r\n\r\nThis will let of memory leaks and `nuxt generate` being stuck.\r\n\r\nI suggest to mock `setInterval` for the application part to throw an error and suggest using it inside `onBeforeMount` or `onMounted` Vue hooks.\r\n\r\nExample of reproduction:\r\n\r\n```vue\r\n\u003Cscript setup>\r\nconst index = ref(1);\r\n\r\nsetInterval(() => {\r\n if (index.value === 8) index.value = 1\r\n else index.value = index.value + 1;\r\n}, 1000)\r\n\u003C/script>\r\n```\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2054,2057,2060,2063],{"name":2055,"color":2056},"enhancement","8DEF37",{"name":2058,"color":2059},"good first issue","fbca04",{"name":2061,"color":2062},"3.x","29bc7f",{"name":2064,"color":2065},"🍰 p2-nice-to-have","0E8A16",25256,"DX: warn or throw error when using `setInterval` during SSR","2024-09-04T04:39:20Z","https://github.com/nuxt/nuxt/issues/25256",0.7066486,{"description":2072,"labels":2073,"number":2079,"owner":1985,"repository":1985,"state":2035,"title":2080,"updated_at":2081,"url":2082,"score":2083},"### Environment\r\n\r\nNuxt project info: 17:40:50\r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.16.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: `telemetry`, `runtimeConfig`, `css`, `build`, `vite`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nuse useFetch then watch, in watch affet a boolean in a useState command, then in a component try to use the value in v-if statement => note working\r\n\r\nindex.vue (or any name)\r\n\r\n```\r\n\u003Ctemplate>\r\n\t\u003Cdiv>\r\n\t\t\u003Cbutton @click='onSubmit'>CLICK\u003C/button>\r\n\t\u003C/div>\r\n\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\" setup>\r\n\r\n\tfunction onSubmit() {\r\n\r\n\t\tconst {data: status} = useFetch('https://httpbin.org/get')\r\n\r\n\t\twatch(status, (newStatus) => {\r\n\r\n\t\t\tconsole.log('call ok')\r\n\r\n\t\t\t\tif(newStatus){\r\n\t\t\t\t\tuseState('test', ()=>'test');\r\n useState('isConnected', ()=>true);\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\t},{\r\n\t\t\t\tdeep: true,\r\n\t\t\t\timmediate:true\r\n\t\t\t}\r\n\t\t)\r\n\r\n}\r\n\r\n\u003C/script>\r\n```\r\nin component (Menu.vue)\r\n\r\n```\r\n\u003Ctemplate>\r\n\t\u003Cdiv>\r\n\t\t\t\t\u003CNuxtLink to=\"/\" src>\r\n\t\t\t\t\tHOME\r\n\t\t\t\t\u003C/NuxtLink>\r\n\u003Cdiv>\r\n\t\t\t{{test}} {{isConnected}} Application des commandes\r\n\r\n\u003C/div>\r\n\r\n\t\t\t\t\u003Cbutton v-if=\"isConnected\" @onclick=\"logout()\">LOGOUT\u003C/button>\r\n\t\t\t\t\u003Cbutton v-else href=\"/login\">LOGIN\u003C/button>\r\n\r\n\t\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript script=\"ts\" setup>\r\n\r\nconst isConnected = useState('isConnected');\r\nconst test = useState( 'test' );\r\nconsole.log( isConnected );\r\n\r\n\u003C/script>\r\n\r\n```\r\n\r\nthen just create a default layout pu menu into and \r\n\r\n### Describe the bug\r\n\r\nWhen we click on button , on the menu in the vif part nothing happen, if we delete the watch part, it will work\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n```shell\r\nno error only my log write the object\r\n\r\nisConnected? 12:47:30\r\nObjectRefImpl { 12:47:30\r\n _object: {},\r\n _key: '$sisConnected',\r\n _defaultValue: undefined,\r\n __v_isRef: true\r\n}\r\n```\r\n",[2074,2075,2076],{"name":2061,"color":2062},{"name":1996,"color":1997},{"name":2077,"color":2078},"needs reproduction","FBCA04",15575,"useState not working with v-if when value set in watch statement","2023-01-19T17:55:43Z","https://github.com/nuxt/nuxt/issues/15575",0.7084227,{"description":2085,"labels":2086,"number":2088,"owner":1985,"repository":1985,"state":2035,"title":2089,"updated_at":2090,"url":2091,"score":2092},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\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: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-ftrxnd?file=pages%2Ffetch.vue\r\n\r\n### Describe the bug\r\n\r\nWhile playing around using `useRouteQuery` composable fromVueUse library, I have noticed different behaviour watching the `ref` retrieved from `useRouteQuery` when using it with `useFetch` vs `useAsyncData`.\r\nWhenever `useAsyncData` is used to call the API and `ref` from `useRouteQuery` is listed inside `watch` array, API is being called only once whenever ref value changes. As expected.\r\nBut it is different with `useFetch`, where whenever `ref` value updates, there are two API calls made where one is cancelled by dedupe.\r\n\r\nI have prepared reproduction with two different pages, each for different implementation where behaviour can be observed.\r\nI would assume it has to do with `ref` being updated twice because URL query sync, but I am not sure why it differs.\r\n\r\nAlso I am aware of https://github.com/nuxt/nuxt/issues/24788 but trying to use vueuse implementation as of now.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2087],{"name":1996,"color":1997},25852,"`useAsyncData` watch vs `useFetch` watch with `useRouteQuery` ref","2025-04-02T12:46:45Z","https://github.com/nuxt/nuxt/issues/25852",0.7204919,{"description":2094,"labels":2095,"number":2098,"owner":1985,"repository":2099,"state":2035,"title":2100,"updated_at":2101,"url":2102,"score":2103},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: modules, devtools\r\n- Runtime Modules: @pinia/nuxt@0.5.1, @nuxt/test-utils/module@3.10.0\r\n- Build Modules: -\n\n### Reproduction\n\n[Minimal reproduction](https://stackblitz.com/edit/github-ftohct?file=app.nuxt.test.ts)\n\n### Describe the bug\n\nHi all! Do I understand correctly that on the current version of `@nuxt/test-utils` there is no way to pre-fill a store using this instruction from the [Pinia](https://pinia.vuejs.org/cookbook/testing.html#Initial-State) documentation.\r\n\r\n```\r\nimport { describe, test, expect, vi } from 'vitest';\r\nimport { createTestingPinia } from '@pinia/testing';\r\nimport { mountSuspended } from '@nuxt/test-utils/runtime';\r\nimport App from './app.vue';\r\n\r\nconst siteInfoMock = {\r\n title: 'Nuxt 3',\r\n url: 'https://nuxt.com',\r\n};\r\n\r\ndescribe('App link', async () => {\r\n const wrapper = await mountSuspended(App, {\r\n global: {\r\n plugins: [\r\n createTestingPinia({\r\n initialState: {\r\n Site: {\r\n siteInfo: siteInfoMock,\r\n },\r\n },\r\n createSpy: vi.fn,\r\n }),\r\n ],\r\n },\r\n });\r\n\r\n test('Should render the link with a substitute title', () => {\r\n expect(wrapper.get('[data-test-id=\"link\"]').text()).toBe(\r\n siteInfoMock.title\r\n );\r\n\r\n // The test passes because the data in the \"Site\" store has not been changed.\r\n // expect(wrapper.get('[data-test-id=\"link\"]').text()).toBe('Example.com');\r\n });\r\n\r\n test('Should render the link with the spoofed link', () => {\r\n expect(wrapper.get('[data-test-id=\"link\"]').attributes().href).toBe(\r\n siteInfoMock.url\r\n );\r\n\r\n // The test passes because the data in the \"Site\" store has not been changed.\r\n // expect(wrapper.get('[data-test-id=\"link\"]').attributes().href).toBe('https://example.com');\r\n });\r\n});\r\n```\r\nThe component is also rendered, receiving default data from the store. In turn, I expect replacement data in the store.\r\n\r\nI tried to look for information about a similar case in local chats and here in different threads, but I just didn’t receive any information. Several users have raised a similar issue.\r\n\r\n* https://discordapp.com/channels/473401852243869706/1199858451833168004/1199858605831241820\r\n* https://discordapp.com/channels/473401852243869706/496371343542059011/1195669478403489862\r\n* https://discordapp.com/channels/473401852243869706/496371343542059011/1153407426087886942\r\n\r\nIt seems like `@pinia/nuxt` & `@nuxt/test-utils` are not fully compatible, namely the `createTestingPinia` & `mountSuspended` methods.\r\n\r\nPlease tell me, someone was able to solve the problem of how to create a test instance of Pinia.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nstdout | createSuspenseBoundary (/home/projects/rlmilwjxk.github/node_modules/.pnpm/@vue+runtime-core@3.4.15/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1439:43)\r\n\u003CSuspense> is an experimental feature and its API will likely change.\r\n\r\nstderr | warn$1 (/home/projects/rlmilwjxk.github/node_modules/.pnpm/@vue+runtime-core@3.4.15/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:46:13)\r\n[Vue warn]: App already provides property with key \"Symbol(pinia)\". It will be overwritten with the new value.\n```\n",[2096],{"name":1996,"color":2097},"5D08F5",737,"test-utils","mountSuspended & createTestingPinia","2024-11-28T08:58:33Z","https://github.com/nuxt/test-utils/issues/737",0.720571,["Reactive",2105],{},["Set"],["ShallowReactive",2108],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"gVTeIz_wMmkOn52Qp9KGpkA0a7sBOtOZlWdyU__C9Xo":-1},"/nuxt/nuxt.com/638"]