\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n\n\n```vue\n\u003Ctemplate>\n\t\u003CUInput v-model=\"keyword\" />\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n### Logs\n\n```shell-script\n\n```",[1997,2000],{"name":1998,"color":1999},"bug","d73a4a",{"name":2001,"color":2002},"triage","ffffff",2713,"ui","UInput Component Lacks Proper Handling of compositionstart and compositionend","2024-11-21T06:40:46Z","https://github.com/nuxt/ui/issues/2713",0.7658141,{"description":2010,"labels":2011,"number":2015,"owner":1988,"repository":1988,"state":1989,"title":2016,"updated_at":2017,"url":2018,"score":2019},"### 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).",[2012],{"name":2013,"color":2014},"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.76693076,{"description":2021,"labels":2022,"number":2024,"owner":1988,"repository":2025,"state":1989,"title":2026,"updated_at":2027,"url":2028,"score":2029},"### 🐛 The bug\n\nHi, I found this specific bug that occurs using layouts and having `pageTransition` and `layoutTransition` enabled in nuxt config. Then, you navigate between layouts and the last page has a video and is fetching something with `useFetch`, then, you try to play the video. The script loads, but the video doesn't play.\n\n\n\n- Steps to reproduce: _(It is recommended to open the preview in a new tab)_\n1. Start the reproduction\n2. You must be on the index page `/`\n3. Click `Go to Layout`\n4. Try to play the video\n5. The script loads, but the video doesn't play\n6. Inspect the console and you must see the error\n\n\n### 🛠️ To reproduce\n\nhttps://stackblitz.com/edit/nuxt-starter-aqvq3n\n\n### 🌈 Expected behavior\n\nThe video in /video should be played after clicking it\n\n### ℹ️ Additional context\n\nnuxt: 3.13.2\n@nuxt/scripts: 0.9.4\n\nBtw: this error doesn't occur if you enclose the script with `\u003CClientOnly>`",[2023],{"name":1998,"color":1999},297,"scripts","ScriptYouTubePlayer: Weird specific bug related to layouts, transitions and useFetch","2024-10-22T08:53:32Z","https://github.com/nuxt/scripts/issues/297",0.76730126,{"description":2031,"labels":2032,"number":2033,"owner":1988,"repository":2034,"state":1989,"title":2035,"updated_at":2036,"url":2037,"score":2038},"Dear Nuxt.js Showcase Team,\r\n\r\nI am writing to request the inclusion of my website, bittopup.com, in the Nuxt.js Showcase. Built using the innovative features of Nuxt.js, bittopup.com offers a seamless and efficient platform for purchasing gift cards.\r\n\r\nKey Highlights of [bittopup.com](http://bittopup.com/):\r\n1. **Advanced Implementation of Nuxt.js**: Our website leverages the latest Nuxt.js features, including server-side rendering, static site generation, and a modular architecture. This ensures a fast, scalable, and SEO-friendly user experience.\r\n2. **High User Engagement**: With a significant user base, bittopup.com demonstrates the robustness and scalability of Nuxt.js in handling high traffic and complex transactions.\r\n3. **Innovative Use of Technology**: We've integrated various cutting-edge web technologies alongside Nuxt.js, showcasing the framework's versatility and compatibility.\r\n\r\nOur journey with Nuxt.js has been instrumental in the success of bittopup.com, and we believe that our inclusion in the Showcase will not only exemplify the potential of Nuxt.js but also inspire other developers in the community.\r\n\r\nThank you for considering our request. We are excited about the possibility of sharing our work with the Nuxt.js community and contributing to its growth.\r\n\r\nBest Regards,\r\nFounder, bittopup.com\r\n\n```[tasklist]\n### Tasks\n```\n",[],1480,"nuxt.com","Request to Include bittopup.com in Nuxt.js Showcase","2024-01-13T02:59:12Z","https://github.com/nuxt/nuxt.com/issues/1480",0.76923984,{"description":2040,"labels":2041,"number":2045,"owner":1988,"repository":2046,"state":2047,"title":2048,"updated_at":2049,"url":2050,"score":2051},"Any usage of NuxtLink lead to an error \r\n\r\n```\r\n[Vue warn]: Failed to resolve component: RouterLink\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. \r\n at \u003CNuxtLink to= { name: 'index', params: { userId: '123' } } class=\"text-neutral-501\" onClick=fn\u003ConLinkClick> > \r\n at \u003CUserLink userId=\"123\" ref=\"VTU_COMPONENT\" > \r\n at \u003CVTUROOT>\r\n```\r\n\r\n[Reproduction](https://stackblitz.com/edit/nuxt-vitest-rgzrs9?file=components%2FUserLink.vue)\r\n\r\n",[2042],{"name":2043,"color":2044},"vitest-environment","b60205",590,"test-utils","closed","Failed to resolve component: RouterLink","2023-12-02T00:37:12Z","https://github.com/nuxt/test-utils/issues/590",0.7202517,{"labels":2053,"number":2066,"owner":1988,"repository":1988,"state":2047,"title":2067,"updated_at":2068,"url":2069,"score":2070},[2054,2057,2060,2063],{"name":2055,"color":2056},"enhancement","8DEF37",{"name":2058,"color":2059},"discussion","538de2",{"name":2061,"color":2062},"3.x","29bc7f",{"name":2064,"color":2065},"❌ won't do","705B27",14583,"support computed keys for data fetching composables","2023-03-13T10:11:38Z","https://github.com/nuxt/nuxt/issues/14583",0.7388867,{"description":2072,"labels":2073,"number":2082,"owner":1988,"repository":1988,"state":2047,"title":2083,"updated_at":2084,"url":2085,"score":2086},"### Describe the feature\n\nSeveral composable functions ( `useState`, `useFetch`, `useAsyncData`, `useLazyAsyncData`, `useLazyFetch`) provide auto-key generation that is unique to the file name and line number of the instance of function call. However, this makes it impossible to create your own wrappers around these functions, because then the auto-generated key will always be the same for any wrapper-function call.\r\n\r\n```ts\r\n// composables/useAsyncSpecifiedData.ts\r\nexport function useAsyncSpecifiedData(params) {\r\n\t// ... do some work\r\n\tconst handler = createHandler( params )\r\n\tconst options = createOptions( params )\r\n\treturn useAsyncData(handler, options) // \u003C- the unique key always generated exactly for this file+line\r\n}\r\n```\r\nI would like to have oportynity to somehow expand keyed functions with myown\r\nhttps://github.com/nuxt/framework/blob/51bc6e44fef6e4a249946ba910a497089b089a64/packages/vite/src/plugins/composable-keys.ts#L15-L17\r\n\r\nSo that nuxt will generates a unique key directly for the wrapper function call, which will be passed down in `useAsyncData`. Since it is work for `useLazyAsyncData`\r\nhttps://github.com/nuxt/framework/blob/51bc6e44fef6e4a249946ba910a497089b089a64/packages/nuxt/src/app/composables/asyncData.ts#L263-L274\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://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2074,2075,2078,2079],{"name":2055,"color":2056},{"name":2076,"color":2077},"good first issue","fbca04",{"name":2061,"color":2062},{"name":2080,"color":2081},"🍰 p2-nice-to-have","0E8A16",12369,"Ability to add your own keyed functions ","2023-03-07T21:06:18Z","https://github.com/nuxt/nuxt/issues/12369",0.73929614,{"description":2088,"labels":2089,"number":2090,"owner":1988,"repository":2091,"state":2047,"title":2092,"updated_at":2093,"url":2094,"score":2095},"help users spot potential size issues\n\nsuggest subsetting if font is used sparingly",[],460,"fonts","display loaded/injected font size (in Mb)","2025-01-24T14:43:53Z","https://github.com/nuxt/fonts/issues/460",0.74026585,{"labels":2097,"number":2103,"owner":1988,"repository":1988,"state":2047,"title":2104,"updated_at":2105,"url":2106,"score":2107},[2098,2099,2100],{"name":2055,"color":2056},{"name":2061,"color":2062},{"name":2101,"color":2102},"dx","C39D69",13963,"automatically generate unique keys for keyed composables","2023-01-19T17:11:03Z","https://github.com/nuxt/nuxt/issues/13963",0.74277395,["Reactive",2109],{},["Set"],["ShallowReactive",2112],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"lxv8nnwL7_5aSNrNuwXq_ZEhJR5cBtAd5u2eiUTUZgc":-1},"/nuxt/ui/3256"]