`\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.64624846,{"description":1993,"labels":1994,"number":1998,"owner":1985,"repository":1985,"state":1987,"title":1999,"updated_at":2000,"url":2001,"score":2002},"Hello,\n\nI found a Nuxt app example using GSAP that attempts to implement a hook after a page transition, with a shared ref across the whole application.\nThe idea is to have something like a lifecycle hook similar to 'page:transition:finish' (onAfterLeave event) but instead with 'page:transition:after' (onAfterEnter event).\nGSAP Page Transitions example: https://stackblitz.com/edit/nuxt-starter-bthjlg?file=composables%2Ftransition-composable.js\n\nThe GSAP dev implemented a composable like this:\n```\nconst transitionState = reactive({\n transitionComplete: false,\n});\n\nexport const useTransitionComposable = () => {\n const toggleTransitionComplete = (value) => {\n transitionState.transitionComplete = value;\n };\n\n return {\n transitionState,\n toggleTransitionComplete,\n };\n}\n```\n\nIf I understand the Nuxt documentation correctly (https://nuxt.com/docs/getting-started/state-management), this approach should be avoided.\n\nFirst question:\nIs this behavior the same across all rendering modes? (SWR, ISR, SSR, SSG, SPA)\n\nSecond question:\nFollowing the documentation, I ended up with a composable like this:\n\n```\nconst useTransitionCompleteState = () => useState\u003Cboolean>('isTransitionComplete', () => shallowRef(false))\nexport default = () => {\n const isTransitionComplete = useTransitionCompleteState()\n const toggleTransitionComplete = (value: boolean) => {\n isTransitionComplete.value = value\n };\n\n return {\n transitionState: readonly(isTransitionComplete),\n toggleTransitionComplete,\n }\n}\n```\n\nLast question:\nThe following implementation is more concise and works on my end. Is it a good approach, or does it introduce issues? What’s the difference?\n\n```\nexport default = () => {\n const isTransitionComplete = useState\u003Cboolean>('isTransitionComplete', () => shallowRef(false))\n const toggleTransitionComplete = (value: boolean) => {\n isTransitionComplete.value = value\n }\n\n return {\n transitionState: readonly(isTransitionComplete),\n toggleTransitionComplete,\n }\n}\n```\n\nThanks in advance for your help! :)",[1995],{"name":1996,"color":1997},"pending triage","E99695",30968,"Managing page transition state in Nuxt","2025-02-12T16:18:41Z","https://github.com/nuxt/nuxt/issues/30968",0.7114292,{"description":2004,"labels":2005,"number":2018,"owner":1985,"repository":2019,"state":1987,"title":2020,"updated_at":2021,"url":2022,"score":2023},"### 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```",[2006,2009,2012,2015],{"name":2007,"color":2008},"bug","d73a4a",{"name":2010,"color":2011},"v3","49DCB8",{"name":2013,"color":2014},"triage","ffffff",{"name":2016,"color":2017},"vue","42b883",2827,"ui","Internal server error: [postcss] postcss-import: Unknown word","2025-03-15T05:10:43Z","https://github.com/nuxt/ui/issues/2827",0.7316792,{"description":2025,"labels":2026,"number":2029,"owner":1985,"repository":2019,"state":1987,"title":2030,"updated_at":2031,"url":2032,"score":2033},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.15.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.13.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/eslint@0.4.0, @vueuse/nuxt@10.11.1, @nuxt/ui@2.19.2, @pinia/nuxt@0.5.5, nuxt-echarts@0.2.4\n- Build Modules: -\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-8d9s2j?file=app.vue\n\n### Description\n\nThe UInput component does not handle compositionstart and compositionend events, resulting in issues for languages that rely on input composition, such as Chinese (e.g., Pinyin input). Vue’s default behavior for v-model on native input elements ensures that updates are delayed until the composition ends, preventing intermediate values from triggering updates. However, the UInput component currently lacks this mechanism, causing inconsistencies with Vue’s default form handling and leading to unexpected behavior during text composition.\n\n### Additional context\n\n\n\n```vue\n\u003Ctemplate>\n\t\u003Cinput 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\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```",[2027,2028],{"name":2007,"color":2008},{"name":2013,"color":2014},2713,"UInput Component Lacks Proper Handling of compositionstart and compositionend","2024-11-21T06:40:46Z","https://github.com/nuxt/ui/issues/2713",0.7413028,{"description":2035,"labels":2036,"number":2037,"owner":1985,"repository":1986,"state":2038,"title":2039,"updated_at":2040,"url":2041,"score":2042},"Ok, so I've followed the instructions here: https://nuxt.com/modules/icon#custom-local-collections\n\nI have my folder in \"assets\", with some icons to test:\n\n\n\nThen I have this in my nuxt.config.ts:\n\n```\nicon: {\n aliases: aliases,\n clientBundle: {\n // list of icons to include in the client bundle\n icons: iconsToBundle,\n\n // scan all components in the project and include icons\n scan: true,\n\n // guard for uncompressed bundle size, will fail the build if exceeds\n sizeLimitKb: 256\n },\n customCollections: [\n {\n prefix: 'nemus',\n dir: './assets/icons'\n }\n ]\n },\n```\n\nAnd it seems to be correctly configured, as I get this message when I run the app:\n\n```\n[1:21:18 PM] ✔ Nuxt Icon loaded local collection nemus with 10 icons\n```\n\nBut when I use one of the icons in a component like this:\n```\n\u003CIcon\n name=\"nemus:trucker-blue\"\n :class=\"['size-4 min-w-4', props.isFav ? 'text-fav ' : 'text-secondary-300']\"\n />\n```\n\nI get this error on the console:\n```\n WARN [Icon] failed to load icon nemus:trucker-blue (repeated 5 times)\n\n\n WARN [nuxt] Failed to stringify dev server logs. Received DevalueError: Cannot stringify arbitrary non-POJOs. You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.\n```\n\nI'm guessing the problem is that I didn't understand this line in the docs:\n```\nNote that custom local collections require you to have a server to serve the API. \n```\n\nIf anyone could shed some light, I'd appreciate it a lot :)",[],355,"closed","Help: can't figure out the server part for custom collections","2025-02-11T13:00:52Z","https://github.com/nuxt/icon/issues/355",0.6288078,{"description":2044,"labels":2045,"number":2050,"owner":1985,"repository":2019,"state":2038,"title":2051,"updated_at":2052,"url":2053,"score":2054},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.8\n\n### Description\n\n```vue\n\u003Cscript setup lang=\"ts\">\ntype Data = {\n id:number,\n name:string\n}\n\nconst defaultData = [\n {\n id: 1,\n name: \"a\"\n },\n {\n id: 2,\n name: \"b\"\n }\n]\n\nconst data = ref\u003CData[]>([])\nconst rerender = () => {\n if (!data.value?.length) {\n data.value = defaultData\n } else {\n data.value = []\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUButton label=\"rerender\" @click=\"rerender()\" />\n \u003CUTable :data=\"data\">\n \u003Ctemplate #empty>\n no data\n \u003C/template>\n \u003C/UTable>\n \u003C/div>\n\u003C/template>\n\n````\nIn this example, if the table's data is initially empty and then updated (by clicking the \"rerender\" button), you will notice that the content in the empty slot disappears. This indicates that the table's data is no longer empty, yet nothing is rendered in the table. The reason is that the table's columns are not reactive. I believe this limitation is caused by TanStack.\n\n### Potential Solution\n```vue\nwatch(columns, (newColumns) => {\n tableApi.setOptions((prevOpt) => ({\n ...prevOpt,\n columns: newColumns \n }))\n}) \n```\n\n\n\n\n### Additional context\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { watch } from 'vue'\nimport { getCoreRowModel, useVueTable } from '@tanstack/vue-table'\ntype Data = {\n id: number,\n name: string\n}\n\nconst defaultData = [\n {\n id: 1,\n name: \"a\"\n },\n {\n id: 2,\n name: \"b\"\n }\n]\n\nconst data = ref\u003CData[]>([])\nconst columns = computed(() => Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: accessorKey })))\n\nconst tableApi = useVueTable({\n data,\n columns: columns.value,\n getCoreRowModel: getCoreRowModel()\n})\n\nconst rerender = () => {\n if (!data.value.length) {\n\n data.value = defaultData\n } else {\n data.value = []\n }\n}\n\n/* watch(columns, (newColumns) => {\n tableApi.setOptions((prevOpt) => ({\n ...prevOpt,\n columns: newColumns \n }))\n}) */\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUButton label=\"rerender\" @click=\"rerender()\" />\n \u003Cdiv>\n {{ columns }}\n \u003C/div>\n \u003Cbr>\n \u003Cdiv>\n {{ tableApi.options }}\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n```\n\nnoticed that tableApi's columns won't change along with updates to the data",[2046,2049],{"name":2047,"color":2048},"enhancement","a2eeef",{"name":2010,"color":2011},2689,"[Table] reactive columns for auto-generated UTable columns","2024-11-21T13:11:03Z","https://github.com/nuxt/ui/issues/2689",0.6496389,{"description":2056,"labels":2057,"number":2062,"owner":1985,"repository":2063,"state":2038,"title":2064,"updated_at":2065,"url":2066,"score":2067},"Hi guys,\r\n\r\nThis package seems just what my project needs! \r\n\r\nUnfortunately, adobe fonts do no load. \r\nN.B> Adobe doesn't load in the playground either...\r\n\r\nHope it will be sorted,\r\n\r\nkind regards,\r\n\r\nMarco",[2058,2059],{"name":2007,"color":2008},{"name":2060,"color":2061},"provider","1161A4",187,"fonts","Adobe doesn't load","2024-07-04T05:50:31Z","https://github.com/nuxt/fonts/issues/187",0.71087766,{"description":2069,"labels":2070,"number":2062,"owner":1985,"repository":2074,"state":2038,"title":2075,"updated_at":2076,"url":2077,"score":2067},"### 📚 What are you trying to do?\n\ni use ScriptGoogleMaps component and i want to use LatLng object for set marker in google maps .\r\ni tried to pass this object to options.center and query but its not working.\r\nAm I using it wrong ?\n\n### 🔍 What have you tried?\n\n_No response_\n\n### ℹ️ Additional context\n\n_No response_",[2071],{"name":2072,"color":2073},"help wanted","008672","scripts","googlemaps latlng","2024-08-22T09:11:49Z","https://github.com/nuxt/scripts/issues/187",{"description":2079,"labels":2080,"number":2090,"owner":1985,"repository":2091,"state":2038,"title":2092,"updated_at":2093,"url":2094,"score":2095},"- [ ] Add nuxt.new page in this page\n- [ ] Use new design made by @SarahM19 ",[2081,2084,2087],{"name":2082,"color":2083},"design","00bd6f",{"name":2085,"color":2086},"marketing","f5c828",{"name":2088,"color":2089},"dev","018415",1342,"nuxt.com","Templates Page","2023-10-10T14:44:52Z","https://github.com/nuxt/nuxt.com/issues/1342",0.7126641,{"description":2097,"labels":2098,"number":2101,"owner":1985,"repository":2091,"state":2038,"title":2102,"updated_at":2103,"url":2104,"score":2105},"",[2099],{"name":2007,"color":2100},"ff281a",490,"[Content] Fix blog articles sort by date","2022-05-13T16:00:22Z","https://github.com/nuxt/nuxt.com/issues/490",0.72285473,["Reactive",2107],{},["Set"],["ShallowReactive",2110],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"sHSjveyR_UIt2D9ovy8JwhhBi9_unbSIQwde1ColYcM":-1},"/nuxt/fonts/266"]