\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```",[1984,1987],{"name":1985,"color":1986},"bug","d73a4a",{"name":1988,"color":1989},"triage","ffffff",2713,"nuxt","ui","open","UInput Component Lacks Proper Handling of compositionstart and compositionend","2024-11-21T06:40:46Z","https://github.com/nuxt/ui/issues/2713",0.6562636,{"description":1999,"labels":2000,"number":2007,"owner":1991,"repository":1992,"state":1993,"title":2008,"updated_at":2009,"url":2010,"score":2011},"- [x] Pagination\n- [ ] Row Pinning\n- [ ] Grouping\n- [ ] Virtualization\n- ...\n\n\n",[2001,2004],{"name":2002,"color":2003},"enhancement","a2eeef",{"name":2005,"color":2006},"v3","49DCB8",2441,"[Table] Implement more TanStack Table features","2025-03-15T10:42:13Z","https://github.com/nuxt/ui/issues/2441",0.6907374,{"description":2013,"labels":2014,"number":2015,"owner":1991,"repository":2016,"state":1993,"title":2017,"updated_at":2018,"url":2019,"score":2020},"Hi there. Is there any way we could add a feature that minifies the CSS generated by this plugin and/or then extracts the code to a single separate CSS file, rather than having it all output in the ```\u003Chead>``` element?\n\nEven with...\n```javascript\nvite: {\n\tbuild: {\n\t\t\tassetsInlineLimit: 0, // default is 4096 (4 KiB); threshold to inline assets as base64 URLs\n\t\t\tcssCodeSplit: false, // if false, all CSS in the entire project will be extracted into a single CSS file\n\t}\n}\n``` \n...in my ```nuxt.config.ts``` file, the icon-related CSS code from this plugin still gets output onto my pages un-minified *and* un-extracted.\n\nThanks. :-)\n",[],327,"icon","Don't force CSS to be inline","2024-12-22T00:14:16Z","https://github.com/nuxt/icon/issues/327",0.69204986,{"description":2022,"labels":2023,"number":2030,"owner":1991,"repository":1992,"state":1993,"title":2031,"updated_at":2032,"url":2033,"score":2034},"### Environment\n\n- Operating System: Linux\n- Bun Version: v1.1.29\n- Vue Version: v3.5.13\n- Vite Version: v5.4.11\n- Package Manager: bun@1.1.29\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.0.0-alpha.9\n\n### Reproduction\n\nUnable to run on \u003Chttps://stackblitz.com/edit/vitejs-vite-2s99rp> because of https://github.com/stackblitz/core/issues/1855 (I think) but I'll create a repo as soon as I can.\n\n### Description\n\nAfter following the setup tutorial for the installation of Nuxt UI in a Vue-only environment and running the project, I get an error (see logs). \nThe only different thing in the setup I had to do is that, as I am building a custom element, I did:\n```ts\nconst Widget = defineCustomElement(App, {\n\tconfigureApp(app) {\n\t\tapp.use(ui)\n\t\tapp.use(i18n)\n\t\tapp.provide(I18nInjectionKey, i18n)\n\t},\n})\n```\nInstead of the usual `createApp` method. Did I miss something?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n15:53:45 [vite] Internal server error: [postcss] postcss-import: /home/dany/Documenti/GitHub/chat-widget/node_modules/@nuxt/ui/dist/module.mjs:1:16: Unknown word\n Plugin: vite:css\n File: /home/dany/Documenti/GitHub/chat-widget/node_modules/@nuxt/ui/dist/module.mjs:1:15\n 1 | import defu, { defu as defu$1 } from 'defu';\n | ^\n 2 | import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, extendPages, hasNuxtModule, installModule } from '@nuxt/kit';\n 3 | import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates, c as buildTemplates } from './shared/ui.d52SSCwA.mjs';\n at Input.error (/home/dany/Documenti/GitHub/chat-widget/node_modules/postcss/lib/input.js:106:16)\n at Parser.unknownWord (/home/dany/Documenti/GitHub/chat-widget/node_modules/postcss/lib/parser.js:593:22)\n at Parser.other (/home/dany/Documenti/GitHub/chat-widget/node_modules/postcss/lib/parser.js:435:12)\n at Parser.parse (/home/dany/Documenti/GitHub/chat-widget/node_modules/postcss/lib/parser.js:470:16)\n at parse (/home/dany/Documenti/GitHub/chat-widget/node_modules/postcss/lib/parse.js:11:12)\n at get root [as root] (/home/dany/Documenti/GitHub/chat-widget/node_modules/postcss/lib/no-work-result.js:119:14)\n at Result.get [as root] (/home/dany/Documenti/GitHub/chat-widget/node_modules/postcss/lib/no-work-result.js:27:21)\n at loadImportContent (file:///home/dany/Documenti/GitHub/chat-widget/node_modules/vite/dist/node/chunks/dep-C6EFp3uH.js:867:33)\n at async Promise.all (index 0)\n at async resolveImportId (file:///home/dany/Documenti/GitHub/chat-widget/node_modules/vite/dist/node/chunks/dep-C6EFp3uH.js:800:27)\n15:53:45 [vite] Pre-transform error: [postcss] postcss-import: /home/dany/Documenti/GitHub/chat-widget/node_modules/@nuxt/ui/dist/module.mjs:1:16: Unknown word\n```",[2024,2025,2026,2027],{"name":1985,"color":1986},{"name":2005,"color":2006},{"name":1988,"color":1989},{"name":2028,"color":2029},"vue","42b883",2827,"Internal server error: [postcss] postcss-import: Unknown word","2025-03-15T05:10:43Z","https://github.com/nuxt/ui/issues/2827",0.71085835,{"description":2036,"labels":2037,"number":2043,"owner":1991,"repository":1991,"state":1993,"title":2044,"updated_at":2045,"url":2046,"score":2047},"### Describe the feature\r\n\r\nNow that I think I understand composables better, especially useFetch, I see myself using it everytime I communicate to my api. Even when posting a form, because I like the out of the box reactive properties it provides.\r\n\r\nAnd now that Nuxt 3.11 adds `clear()` I feel its complete.\r\n\r\nI often end up doing this:\r\n\r\n```js\r\nconst formData = reactive({\r\n firstName: 'Peter',\r\n lastName: 'Griffin',\r\n ...\r\n});\r\n\r\nconst { status, execute: submit, clear, error } = useFetch('...', {\r\n watch: false,\r\n immediate: false,\r\n \r\n body: formData,\r\n method: 'POST',\r\n});\r\n\r\nonBeforeMount(clear); // maybe theres an even better way to automatically clear things up?\r\n```\r\n\r\nI propose to add a new composable, analog to `useLazyFetch`.\r\n\r\nIt could be named `useManualFetch`, `usePostFetch` (`usePost`?) or `useSubmitFetch` (`useSubmit`?)\r\n\r\nAnd it could be used like this:\r\n\r\n```\r\nconst formData = reactive({ ... });\r\nconst { status, error, execute: submit } = useSubmit('...', formData);\r\n```\r\n\r\nMaybe `lazy: true` and `server: false` is also a good default here? I'm not at all familiar enough with SSR and nitro at this point–\r\n\r\nI know I could make (and have made) that composable myself, but I think this is a good thing to offer out of the box to everybody.\r\n\r\nWhat do you think?\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [x] 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).",[2038,2040],{"name":2002,"color":2039},"8DEF37",{"name":2041,"color":2042},"discussion","538de2",26306,"adding useManualFetch / usePostFetch / useSubmitFetch composable","2024-06-30T11:05:09Z","https://github.com/nuxt/nuxt/issues/26306",0.7116289,{"description":2049,"labels":2050,"number":2054,"owner":1991,"repository":1991,"state":1993,"title":2055,"updated_at":2056,"url":2057,"score":2058},"### Describe the feature\r\n\r\nAs by default each time you update reactive data that is being used in usefetch - a fetch is called, often one may only want fetch to happen on change after a set amount of time. \r\n\r\nFor example, if you have a todo list per day and have arrows on the top to navigate between the days, you wouldn’t want the fetch to happen every time navigate happens rather only after a set amount of milliseconds which would indicate that user is not just scrolling lists rather wishes to view list/day?\r\n\r\nThoughts?\r\n### Additional information\r\n\r\n- [X] 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).",[2051],{"name":2052,"color":2053},"pending triage","E99695",26686,"[useFetch] add delay for default watch","2024-06-30T11:04:43Z","https://github.com/nuxt/nuxt/issues/26686",0.72090733,{"description":2060,"labels":2061,"number":2064,"owner":1991,"repository":1992,"state":1993,"title":2065,"updated_at":2066,"url":2067,"score":2068},"### Description\n\nHow can I assign an ID to a tab so that I can scroll directly to it?\nCurrently, I’m working around this by giving the div inside the slot (i.e. the tab content) an ID. When the tab is opened, I scroll to that ID manually.\n\n```\n\u003Ctemplate>\n \u003CUAccordion\n v-model=\"currentOpen\"\n :ui=\"accordionStyle\"\n :items=\"items\"\n >\n \u003Ctemplate #component=\"{ item }\">\n \u003Ccomponent\n :is=\"getComponent((item as CustomAccordionItem).componentName)\"\n :id=\"(item as CustomAccordionItem).sectionKey\"\n :section-key=\"(item as CustomAccordionItem).sectionKey\"\n @section-mounted=\"sectionMounted\"\n />\n \u003C/template>\n \u003C/UAccordion>\n\u003C/template>\n```\n\ndid i miss something?\n\n### Additional context\n\n_No response_",[2062,2063],{"name":2002,"color":2003},{"name":1988,"color":1989},3868,"Allow assigning IDs to Nuxt UI Tab panels for scroll targeting","2025-04-12T08:35:52Z","https://github.com/nuxt/ui/issues/3868",0.7276847,{"description":2070,"labels":2071,"number":2077,"owner":1991,"repository":1991,"state":1993,"title":2078,"updated_at":2079,"url":2080,"score":2081},"### Describe the feature\r\n\r\nI propose to add a new option called `resetAfter` to the `useFetch` composable in Nuxt 3. This option would take a number (in milliseconds) and automatically reset the state of the `useFetch` instance after the specified amount of time has passed since the last fetch.\r\n\r\nThis `resetAfter` mainly will set the `status` back to `idle` after the given milliseconds.\r\n\r\nThis feature is particularly useful when you need to fetch data not immediately, but after a certain delay, and possibly several times during the lifecycle of a component. By automatically resetting the state, it reduces the need for manual state management, making it easier to work with time-dependent fetch operations.\r\n\r\n#### Suggested changes:\r\n- Add a new `resetAfter` parameter to the `useFetch` composable.\r\n- Automatically clear and reset the state after the specified milliseconds.\r\n- Optionally allow the reset timer to restart on each new fetch.\r\n\r\n### Example use case\r\nHere's an example of a Vue 3 component using the `resetAfter` option:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cp>Data: {{ data }}\u003C/p>\r\n \u003Cp>Error: {{ error }}\u003C/p>\r\n \u003Cp>Status: {{ pending ? 'Loading...' : 'Fetched' }}\u003C/p>\r\n \u003Cbutton @click=\"refetch\">Refetch Data\u003C/button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport { ref } from 'vue'\r\nimport { useFetch } from '#imports'\r\n\r\nconst url = ref('https://api.example.com/data')\r\nconst { data, error, pending, refresh } = useFetch(url, {\r\n resetAfter: 5000, // Reset state 5 seconds after the last fetch\r\n lazy: true,\r\n immediate: false\r\n})\r\n\r\nconst refetch = () => {\r\n refresh()\r\n}\r\n\u003C/script>\r\n```\r\n\r\nIn this example, the data is automatically reset after 5 seconds, making the component ready for a new fetch if required.\r\n\r\n### Additional information\r\n\r\n- [X] 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).",[2072,2073,2074],{"name":2002,"color":2039},{"name":2041,"color":2042},{"name":2075,"color":2076},"workaround available","11376d",28792,"Add a `resetAfter` option to `useFetch` to automatically reset the state after a specified time.","2024-09-03T13:43:57Z","https://github.com/nuxt/nuxt/issues/28792",0.72873425,{"description":2083,"labels":2084,"number":2087,"owner":1991,"repository":1992,"state":2088,"title":2089,"updated_at":2090,"url":2091,"score":2092},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.14.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: app, compatibilityDate, sourcemap, devtools, nitro, experimental, runtimeConfig, routeRules, typescript, css, viewport, i18n, icon, hub, devServer, vite, $development, $production, auth, ui, vue, modules\n- Runtime Modules: @nuxtjs/i18n@9.3.1, @nuxt/ui@3.0.0, @pinia/nuxt@0.10.1, nuxt-viewport@2.2.0, @nuxthub/core@0.8.18, nuxt-auth-utils@0.5.16, @nuxt/eslint@1.2.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nInstall nuxt ui and i18n module (to switch to current loacale)\n\nin app.vue: \n```vue\ntemplate>\n \u003CUApp \n :toaster=\"{ position: $viewport.isLessThan('md') ? 'bottom-center' : 'top-center' }\"\n :locale=\"locales[locale as 'fr' | 'en']\" class=\"\"\n >\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/UApp>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nimport { fr, en } from '@nuxt/ui/locale';\nconst locales = { fr, en };\nconst { t, locale } = useI18n();\n\u003C/script>\n```\nAnalyze your bundle:\n`npx nuxi analyze`\n\n### Description\n\nAs you can see, unused locales are still included in the bundle, while only Fr and En have been imported\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2085,2086],{"name":1985,"color":1986},{"name":2005,"color":2006},3602,"closed","i18n, Unused locales are included in the bundle","2025-03-18T14:19:38Z","https://github.com/nuxt/ui/issues/3602",0.70688677,{"description":2094,"labels":2095,"number":2098,"owner":1991,"repository":2099,"state":2088,"title":2100,"updated_at":2101,"url":2102,"score":2103},"",[2096],{"name":2002,"color":2097},"1ad6ff",611,"nuxt.com","[Resources] Refactor showcases into a composable","2023-02-15T12:32:38Z","https://github.com/nuxt/nuxt.com/issues/611",0.7141178,["Reactive",2105],{},["Set"],["ShallowReactive",2108],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"rA3hvzT6RkBHzlIiz04IclbTPzkD-viQT_dBAyQ7w58":-1},"/nuxt/test-utils/449"]