`\n\nUnable to use stroke-width does not take effect",[],364,"Unable to use stroke-width does not take effect","2025-03-04T02:48:19Z","https://github.com/nuxt/icon/issues/364",0.7549875,{"description":2001,"labels":2002,"number":2006,"owner":1985,"repository":1985,"state":1987,"title":2007,"updated_at":2008,"url":2009,"score":2010},"### 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).",[2003],{"name":2004,"color":2005},"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.75521636,{"description":2012,"labels":2013,"number":2022,"owner":1985,"repository":2023,"state":1987,"title":2024,"updated_at":2025,"url":2026,"score":2027},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v20.13.1\r\n- Nuxt Version: 3.12.2\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.5.2\r\n- Builder: -\r\n- User Config: devtools, srcDir, runtimeConfig, modules, typescript, vite\r\n- Runtime Modules: @pinia/nuxt@0.5.1, @nuxt/test-utils/module@3.13.1, @nuxt/image@1.7.0\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-kd86ew?file=app.nuxt.test.ts\r\n\r\nCommand: `npm run test`\n\n### Describe the bug\n\nI am using Nuxt's [page:start](https://nuxt.com/docs/api/advanced/hooks) lifecycle hook to trigger a ref boolean change\r\n\r\nWhen using the lifecycle hook/defining `const nuxtApp = useNuxtApp()` in my component, a unit test that mounts this component times out.\r\n\r\nThis happens regardless of which lifecycle hook is used (page:finish, page:loading:start, app:created).\r\n\r\n### Results in:\r\n```\r\n⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯\r\n\r\n FAIL app.nuxt.test.ts > App > calls page:start hook\r\nError: Test timed out in 5000ms.\r\nIf this is a long-running test, pass a timeout value as the last argument or configure it globally with \"testTimeout\".\r\n ❯ _0x44f3c3 ../../../blitz.70dbe416.js:40:517443\r\n ❯ ../../../blitz.70dbe416.js:40:517346\r\n\r\n⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯\r\n\r\n⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯\r\n\r\nVitest caught 1 unhandled error during the test run.\r\nThis might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.\r\n\r\n⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯\r\nTypeError: 'set' on proxy: trap returned falsish for property 'nuxtApp'\r\n ❯ clonedComponent.render node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:134:44\r\n 132| return render.call(this, renderContext, ...args);\r\n 133| } : void 0,\r\n 134| setup: setup ? (props2) => wrappedSetup(props2, setupContext) : void 0\r\n | ^\r\n 135| };\r\n 136| return () => h$1(clonedComponent, { ...defu(setProps, props), ...attrs }, slots);\r\n ❯ renderComponentRoot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:886:16\r\n ❯ ReactiveEffect.componentUpdateFn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5080: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:5211:16\r\n ❯ setupRenderEffect node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5221:5\r\n ❯ eval node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1639:9\r\n\r\nThis error originated in \"app.nuxt.test.ts\" 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 \"calls page:start hook\". 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\n\r\n Test Files 1 failed (1)\r\n Tests 1 failed (1)\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2014,2017,2020],{"name":2015,"color":2016},"bug","d73a4a",{"name":2018,"color":2019},"vitest-environment","b60205",{"name":2004,"color":2021},"5D08F5",883,"test-utils","Using Nuxt lifecycle hooks in component causes unit test to timeout","2024-07-04T08:53:55Z","https://github.com/nuxt/test-utils/issues/883",0.7610709,{"description":2029,"labels":2030,"number":2037,"owner":1985,"repository":2038,"state":1987,"title":2039,"updated_at":2040,"url":2041,"score":2042},"### Description\n\nHello everyone,\n\nI am using a drawer like this:\n\n```\nconst onViewDetails = () => {\n const drawer = overlay.create(TaskOverlay)\n\n drawer.open({\n project: props.project\n })\n}\n```\n\nNow the problem is that I am using an event bus that is being used inside the onMounted() method: \n\n```\nonMounted(() => {\n $listen('task:updated', (taskId: string) => {\n console.log(\"Test\")\n refresh()\n })\n})\n```\n\nNow the question is: How can I unmount the drawer if it is closed? Once opened, the refresh event will be triggered, event if the drawer has been closed already.\n\nAny idea how I could handle this?",[2031,2034],{"name":2032,"color":2033},"question","d876e3",{"name":2035,"color":2036},"v3","49DCB8",3828,"ui","Drawer is not unmounted when closed","2025-04-08T12:37:33Z","https://github.com/nuxt/ui/issues/3828",0.7672492,{"description":2044,"labels":2045,"number":2049,"owner":1985,"repository":2050,"state":2051,"title":2052,"updated_at":2053,"url":2054,"score":2055},"Blocked by #639 \n\n- [ ] Clean animations should happen on click instead of being automatic\n- [ ] Video on hero (#628)\n",[2046],{"name":2047,"color":2048},"enhancement","1ad6ff",638,"nuxt.com","closed","[Docs] Framework v3 landing page improvements","2022-06-16T11:33:23Z","https://github.com/nuxt/nuxt.com/issues/638",0.69340676,{"description":2057,"labels":2058,"number":2062,"owner":1985,"repository":2050,"state":2051,"title":2063,"updated_at":2064,"url":2065,"score":2066},"",[2059],{"name":2060,"color":2061},"roadmap","ff7a1a",636,"`nuxt.dev` -> `nuxt.com/modules`","2022-11-17T11:41:03Z","https://github.com/nuxt/nuxt.com/issues/636",0.7023759,{"description":2068,"labels":2069,"number":2071,"owner":1985,"repository":2072,"state":2051,"title":2073,"updated_at":2074,"url":2075,"score":2076},"### 🐛 The bug\n\nWhen running the project using the Nuxt Scripts Module, I encounter several TypeScript errors during compilation. The errors appear in multiple components of the module (namely, `ScriptCrisp.vue`, `ScriptIntercom.vue`, and `ScriptLemonSqueezy.vue`) regarding implicit `any` types for parameters (e.g. `instance` and `event`). This occurs despite the fact that my project does not use LemonSqueezy.\n\n### 🛠️ To reproduce\n\nhttps://github.com/JonathanXDR/Application-Website-Frontend/tree/develop\n\n### 🌈 Expected behavior\n\nI expect that the Nuxt Scripts Module should not throw type errors for components that are not in use. In particular, if LemonSqueezy is not being utilized, its corresponding component should either be excluded from compilation or should have proper type definitions so that no implicit any errors occur.\n\n### ℹ️ Additional context\n#### Logs:\n```\ntaarujo6@UM01479 Application-Website-Frontend % nr dev\n$ nuxt dev --dotenv .env.local\nNuxt 3.16.0 with Nitro 2.11.6 nuxi 10:56:40\n 10:56:40\n ➜ Local: http://localhost:3000/\n ➜ Network: use --host to expose\n\nℹ Using Tailwind CSS from ~/assets/css/tailwind.css nuxt:tailwindcss 10:56:41\nℹ Nuxt Icon server bundle mode is set to local 10:56:41\n✔ Nuxt Icon discovered local-installed 4 collections: fa6-brands, fa6-solid, logos, simple-icons 10:56:42\n✔ Nuxt Icon loaded local collection simple-icons-extended with 3 icons 10:56:42\n✔ Nuxt Icon loaded local collection sf-symbols-medium with 6404 icons 10:56:43\n✔ Nuxt Icon loaded local collection sf-symbols-small with 6404 icons 10:56:43\n✔ Nuxt Icon loaded local collection sf-symbols-large with 6404 icons 10:56:43\nℹ Running with compatibility version 4 nuxt 10:56:43\nℹ Tailwind Viewer: http://localhost:3000/_tailwind/ nuxt:tailwindcss 10:56:43\n✔ Vite client built in 531ms 10:56:45\n✔ Vite server built in 838ms 10:56:46\n\n ERROR 10:56:52\n ERROR(vue-tsc) Parameter 'instance' implicitly has an 'any' type.\n FILE /Users/taarujo6/Developer/Git/GitHub/Application-Website-Frontend/node_modules/@nuxt/scripts/dist/runtime/components/ScriptCrisp.vue:45:13\n\n 43 | const { onLoaded, status } = crisp\n 44 | if (props.trigger === 'click') {\n > 45 | onLoaded((instance) => {\n | ^^^^^^^^\n 46 | instance.do('chat:open')\n 47 | })\n 48 | }\n\n ERROR(vue-tsc) Parameter 'instance' implicitly has an 'any' type.\n FILE /Users/taarujo6/Developer/Git/GitHub/Application-Website-Frontend/node_modules/@nuxt/scripts/dist/runtime/components/ScriptIntercom.vue:51:13\n\n 49 | const { status, onLoaded } = intercom\n 50 | if (props.trigger === 'click') {\n > 51 | onLoaded((instance) => {\n | ^^^^^^^^\n 52 | instance.Intercom('show')\n 53 | })\n 54 | }\n\n ERROR(vue-tsc) Binding element 'Setup' implicitly has an 'any' type.\n FILE /Users/taarujo6/Developer/Git/GitHub/Application-Website-Frontend/node_modules/@nuxt/scripts/dist/runtime/components/ScriptLemonSqueezy.vue:30:24\n\n 28 | a.classList.add('lemonsqueezy-button')\n 29 | })\n > 30 | instance.onLoaded(({ Setup, Refresh }) => {\n | ^^^^^\n 31 | Setup({\n 32 | eventHandler(event) {\n 33 | emits('lemonSqueezyEvent', event)\n\n ERROR(vue-tsc) Binding element 'Refresh' implicitly has an 'any' type.\n FILE /Users/taarujo6/Developer/Git/GitHub/Application-Website-Frontend/node_modules/@nuxt/scripts/dist/runtime/components/ScriptLemonSqueezy.vue:30:31\n\n 28 | a.classList.add('lemonsqueezy-button')\n 29 | })\n > 30 | instance.onLoaded(({ Setup, Refresh }) => {\n | ^^^^^^^\n 31 | Setup({\n 32 | eventHandler(event) {\n 33 | emits('lemonSqueezyEvent', event)\n\n ERROR(vue-tsc) Parameter 'event' implicitly has an 'any' type.\n FILE /Users/taarujo6/Developer/Git/GitHub/Application-Website-Frontend/node_modules/@nuxt/scripts/dist/runtime/components/ScriptLemonSqueezy.vue:32:20\n\n 30 | instance.onLoaded(({ Setup, Refresh }) => {\n 31 | Setup({\n > 32 | eventHandler(event) {\n | ^^^^^\n 33 | emits('lemonSqueezyEvent', event)\n 34 | },\n 35 | })\n\n[vue-tsc] Found 5 errors. Watching for file changes.\n\n✔ Nuxt Nitro server built in 4059ms nitro 10:56:52\nℹ Vite client warmed up in 2ms 10:56:52\nℹ Vite server warmed up in 1037ms 10:56:53\n```\n\n#### Environment:\n- Operating System: `Darwin`\n- Node Version: `v23.9.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.23.0`\n- Nitro Version: `2.11.6`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `modules`, `$development`, `$production`, `ssr`, `components`, `devtools`, `app`, `css`, `router`, `site`, `colorMode`, `runtimeConfig`, `ignore`, `routeRules`, `future`, `compatibilityDate`, `typescript`, `eslint`, `fonts`, `i18n`, `icon`, `image`, `robots`, `schemaOrg`, `scripts`, `security`, `sitemap`, `viewport`\n- Runtime Modules: `@nuxt/scripts@0.11.1`, `@nuxt/eslint@1.2.0`, `@nuxt/image@1.9.0`, `@nuxt/icon@1.11.0`, `@nuxt/fonts@0.11.0`, `@nuxtjs/color-mode@3.5.2`, `@nuxtjs/i18n@9.3.1`, `@nuxtjs/seo@3.0.0-beta.3`, `@nuxtjs/tailwindcss@6.13.2`, `@vueuse/nuxt@13.0.0`, `nuxt-security@2.2.0`, `nuxt-viewport@2.2.0`\n- Build Modules: `-`",[2070],{"name":2015,"color":2016},432,"scripts","Implicit any type errors","2025-03-13T10:53:36Z","https://github.com/nuxt/scripts/issues/432",0.7337203,{"description":2057,"labels":2078,"number":2080,"owner":1985,"repository":2050,"state":2051,"title":2081,"updated_at":2082,"url":2083,"score":2084},[2079],{"name":2047,"color":2048},635,"[Docs] Remove `framework` from url","2022-06-20T19:44:36Z","https://github.com/nuxt/nuxt.com/issues/635",0.7352603,{"description":2086,"labels":2087,"number":2095,"owner":1985,"repository":1985,"state":2051,"title":2096,"updated_at":2097,"url":2098,"score":2099},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.11.0`\r\n- Nuxt Version: `3.0.0-rc.13`\r\n- Nitro Version: `0.6.1`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `ssr`, `runtimeConfig`, `nitro`, `modules`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.1.3`, `@vueuse/nuxt@9.4.0`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nDoes not works as expected, the API call does not reflect a change in the ref. When `rfid` changes, the API call fired keeps using the old value.\r\n\r\n```\r\nconst rfid = ref(\"Value1\")\r\nrfid.value = \"Value2\"\r\n\r\nconst { data, refresh } = await useFetch\u003CIOrderPopulated[]>(\r\n `/api/orders/find?rfid=${rfid.value}`,\r\n { watch: [rfid] }\r\n)\r\n```\r\n\r\nThe same setup works with useAsynchData, the API call does reflect a change in the ref. \r\n```\r\nconst rfid = ref(\"Value1\")\r\nrfid.value = \"Value2\"\r\n\r\nconst { data, refresh } = await useAsyncData\u003CIOrderPopulated[]>(\r\n () => $fetch(`/api/orders/find?rfid=${rfid.value}`),\r\n { watch: [rfid] } \r\n)\r\n```\n\n### Describe the bug\n\nThe ref value is not updating in useFetch. The request url keeps using the same value, not reflecting the updated value from the ref. The same ref value does work when using useAsynchData. I'm not sure if I'm using useFetch in a wrong way, but since useAsynchData works fine, I'm suspecting a bug in useFetch. The problem is occurring also when not using `watch` and manually triggering the refresh.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2088,2091,2092],{"name":2089,"color":2090},"3.x","29bc7f",{"name":2004,"color":2005},{"name":2093,"color":2094},"needs reproduction","FBCA04",15359,"useFetch is not using new value from reactive object","2025-01-21T09:52:15Z","https://github.com/nuxt/nuxt/issues/15359",0.74586254,["Reactive",2101],{},["Set"],["ShallowReactive",2104],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"kqoWJEayq4--AaXF5YmppOyJ958S1vfqtLJdVsy4xBg":-1},"/nuxt/nuxt.com/1208"]