\n \u003Cp class=\"text-sm font-medium\">\n {{ namesData.length === 0 ? 'No names loaded' : 'No names found' }}\n \u003C/p>\n \u003Cp class=\"text-xs text-neutral-500 mt-1\">\n {{ namesData.length === 0 ? 'Click \"Load Names\" to fetch data' : 'Try adjusting your search query' }}\n \u003C/p>\n \u003C/div>\n \u003C/template>\n \u003C/UTable>\n```\n\u003C/details>\n\nThe problem:\nHeight of row get bigger when more items added and get smaller while scrolling down, here is the example with 100 Row:\n\nFirst item height:\n\u003Cimg width=\"1217\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/d74589f7-a6b3-45ea-afe9-6f7f9ef7ba2d\" />\n\nat middle:\n\u003Cimg width=\"1219\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/653a9f5d-1702-401f-a437-4f61c6c4776e\" />\n\nat end:\n\u003Cimg width=\"1214\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b081a95c-5ffe-4d8e-ab57-64f978cebeea\" />\n\ni tired to play with `UTable.ui` object but that break the style no mater what i do, sometime head col not align with row cells",[3019,3022],{"name":3020,"color":3021},"question","d876e3",{"name":3023,"color":3024},"v3","49DCB8",4563,"nuxt","ui","open","`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.6779527,{"description":3034,"labels":3035,"number":3043,"owner":3026,"repository":3027,"state":3028,"title":3044,"updated_at":3045,"url":3046,"score":3047},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.8\n- Package Manager: yarn@4.8.1\n- Builder: -\n- User Config: compatibilityDate, imports, components, devtools, modules, css, fonts, ui\n- Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/fonts@0.11.0, @nuxt/image@1.10.0, @nuxt/test-utils@3.17.2, @nuxt/ui@3.0.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/blob/v3/src/theme/button.ts\n\n### Description\n\nI want to customize a button variant by `size`, `trailing` and `square` params. It works, but the types are broken.\n\nThe line in the `compoundVariants`:\n`{ size: 'md', trailing: true, square: false, class: { trailingIcon: '-mr-1' } }`\n\nErrors:\n`Type '{ trailingIcon: string; }' is not assignable to type 'string'`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3036,3039,3040],{"name":3037,"color":3038},"bug","d73a4a",{"name":3023,"color":3024},{"name":3041,"color":3042},"triage","ffffff",3738,"Incorrect compound button variants types","2025-03-30T14:32:49Z","https://github.com/nuxt/ui/issues/3738",0.7297736,{"description":3049,"labels":3050,"number":3058,"owner":3026,"repository":3027,"state":3059,"title":3060,"updated_at":3061,"url":3062,"score":3063},"### Description\n\nThe UPageCard component supports highlight and spotlight modes, but there’s no way to change its color dynamically. It just uses the primary color. It would be nice to be able to change this by a color prop.\n\n### Additional context\n\n_No response_",[3051,3054,3055],{"name":3052,"color":3053},"enhancement","a2eeef",{"name":3023,"color":3024},{"name":3056,"color":3057},"pro","5BD3CB",3389,"closed","UPageCard: Allow setting color","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3389",0.7045516,{"description":3065,"labels":3066,"number":3073,"owner":3026,"repository":3026,"state":3059,"title":3074,"updated_at":3075,"url":3076,"score":3077},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.3.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@9.15.4\n- Builder: -\n- User Config: compatibilityDate, devtools, future, vite, modules, css, runtimeConfig\n- Runtime Modules: @nuxt/ui@3.1.3, nuxt-svgo@4.2.2, @nuxt/image@1.10.0\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\n```ts\n\u003Cscript setup lang=\"ts\">\nconst page = useState('movie-page', () => 1)\nconst data = useState\u003CMovie[]>('movie-data', () => [])\n\nconst { pending, execute } = await useFetch\u003CListResponse\u003CMovie>>('/api/tmdb/discover/movie', {\n query: {\n page,\n },\n async onResponse({ response }) {\n data.value.push(...response._data.results)\n },\n immediate: false,\n})\n\nif (data.value.length === 0)\n execute()\n\nconst pageContainer = useTemplateRef('pageContainer')\n\nonMounted(() => {\n const scrollContainer = document.getElementById('scrollContainer')\n scrollContainer?.addEventListener('scroll', () => {\n if (!pending.value && pageContainer.value && window.innerHeight + 1000 > pageContainer.value?.getBoundingClientRect().bottom) {\n page.value++\n }\n })\n})\n\u003C/script>\n```\n\n### Describe the bug\n\nI want to create an infinite scrollable page. To do so, I need to store the received data of `useFetch` in an array.\nSince I want to be able to navigate to another page and go back, without refetching all data, I use `useState`.\n\nHowever, when navigating back, `useFetch` would trigger again (with previous page value) if I use `immediate: true.` Therefore `immediate: false` is set and we manually call execute to fetch data on first page load.\n\nin the scroll listener, `page++` is called. The strange thing is:\n* On first page load, this is enough to retrigger fetching data. Not needing to call `execute()` manually.\n* Once navigated away and returning to the page, the `page` value is increased by the event listener (so still working), but `useFetch` does not trigger anymore.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3067,3070],{"name":3068,"color":3069},"pending triage","E99695",{"name":3071,"color":3072},"needs reproduction","FBCA04",32467,"inconsistent behaviour useFetch","2025-06-24T21:21:12Z","https://github.com/nuxt/nuxt/issues/32467",0.7148797,{"description":3079,"labels":3080,"number":3085,"owner":3026,"repository":3026,"state":3059,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### Describe the feature\r\n\r\nThe cache for the data fetching mechanism is already accessible via `useNuxtApp().payload.data`, I'm suggesting exposing it with a separate composable (`useNuxtData` or `getNuxtData`). it can introduce some interesting data-fetching patterns such as optimistic updates.\r\n\r\n### Examples\r\n- Showing stale data instead of a loading spinner (reading from cache): \r\n\r\n```ts\r\ninterface Post {\r\n userId: number;\r\n title: string;\r\n body: string;\r\n id: number\r\n}\r\n\r\nconst id = useRoute().params.id\r\n\r\nconst { data } = useLazyFetch(`/api/post/${id}`, {\r\n key: `post-${id}`,\r\n server: false,\r\n default: () => {\r\n return (useNuxtData().posts as Post[]).find(d => d.id === +id)\r\n }\r\n})\r\n```\r\n\r\n- Update the UI while the query is being invalidated in the background (writing to cache): \r\n\r\n```ts\r\n// in List.vue\r\nconst { data } = useLazyFetch('/api/notes', {\r\n key: 'notes'\r\n})\r\n\r\n// In Form.vue\r\nconst text = ref('')\r\n\r\nconst add = () => {\r\n (useNuxtData().notes as string[]).push(text.value)\r\n // ... Some mutation\r\n refreshNuxtData('notes')\r\n}\r\n```\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://v3.nuxtjs.org/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[3081,3084],{"name":3082,"color":3083},"3.x","29bc7f",{"name":3068,"color":3069},15582,"Accessing async data cache object with a new composable","2023-01-19T17:56:33Z","https://github.com/nuxt/nuxt/issues/15582",0.71712357,{"description":3091,"labels":3092,"number":3096,"owner":3026,"repository":3097,"state":3059,"title":3098,"updated_at":3099,"url":3100,"score":3101},"",[3093],{"name":3094,"color":3095},"design","00bd6f",1209,"nuxt.com","[Workshop] Workshop single page ","2023-10-10T14:45:09Z","https://github.com/nuxt/nuxt.com/issues/1209",0.7258045,{"description":3103,"labels":3104,"number":3096,"owner":3026,"repository":3027,"state":3059,"title":3109,"updated_at":3110,"url":3111,"score":3101},"### Description\n\nAllow sorting by multiple columns by holding a modifier modifier key and clicking multiple columns.\r\n\r\nAs an example:\r\nhttps://primevue.org/datatable/#multiple_sort\n\n### Additional context\n\n_No response_",[3105,3106,3108],{"name":3052,"color":3053},{"name":3107,"color":3042},"wontfix-v2",{"name":3023,"color":3024},"`UTable` sort by multiple columns","2025-03-24T14:57:22Z","https://github.com/nuxt/ui/issues/1209",{"description":3113,"labels":3114,"number":3117,"owner":3026,"repository":3097,"state":3059,"title":3118,"updated_at":3119,"url":3120,"score":3121},"**General**\n- [x] On both logo sliders, it shouldn't move while mouse over\n- [ ] Slide-in apparitions on scroll for images & texts in sections\n\n- [x] pb-10 is enough spacing between title of section & content\n- [x] I don't know if it's intended but every bold text in sections is \"Focus on the big picture\"\n\n**Hero**\n\n- [ ] Description should be => line-height: 170%\n\n- [x] [Lightmode] Gem aspect should be better\n- [x] @R-mooon => Increase mesh subdivision in blender in order to make gem angles even smoother + try compress hdr even more \n- [ ] [Mobile] @R-mooon will make a specific design [Edit : @Flosciante => see comments]\n\n**Sections**\n\n- [ ] [Darkmode] Description text should be one gray lighter\n\n**Framework**\n- [x] Play icon is missing over the video\n- [ ] [Darkmode] Overlay is too bright when modal is open\n\n**Projects**\n\n- [x] Cursor should be at end of content\n\n- [ ] Is it possible to make the animation in revert also ? I mean make \"droe\" & \"atinux\" deleting the content in order to make the animation infinite\n\n\n- [ ] [Darkmode] \"Read more\" on the card is too light \n\n**Community**\n\n- [x] See the nuxters have to look like the links in sections\n\n**Partners**\n\n- [ ] @R-mooon needs to rework some partners logo to make them display well\n\n**Newsletter**\n\n- [x] Less margin-top & more margin-bottom (should have nearly the same space up & down)\n\n- [ ] Update background gradient [Edit : Flo is gonna make a mouse interaction instead]\n\n**Suggestions**\n\n- [ ] Make this \"My account\" button follow content width (and the actual width being the max-w)\n- [ ] Why not making account name white and have a background color on hover, at the moment i find the right part of header very grey-ish, i feel like the name is disabled\n\n\n- [x] Try make logo banner fit inside container to see if it looks more consistent [Edit : Cancelled, tested and it looks worse than before]\n\n",[3115],{"name":3052,"color":3116},"1ad6ff",712,"[Home] Design feedbacks","2023-09-05T08:18:34Z","https://github.com/nuxt/nuxt.com/issues/712",0.7336934,{"description":3123,"labels":3124,"number":3131,"owner":3026,"repository":3026,"state":3059,"title":3132,"updated_at":3133,"url":3134,"score":3135},"RFC: https://github.com/nuxt/nuxt/discussions/16831\n\nThe solution the community voted the most is the following:\n\n```ts\nconst { data: user } = await useFetch('/api/user/100', {\n pick: [ 'name', 'info.url', 'info.like.status' ]\n})\n```\n\nAlso a note regarding the data returned as Array, we shall be able to smartly identify if it is an array of objects to apply the pick on each item.\n\nTo note, a potential improvement if `pick` is a string: #19545 ",[3125,3127,3130],{"name":3052,"color":3126},"8DEF37",{"name":3128,"color":3129},"discussion","538de2",{"name":3082,"color":3083},19844,"Improved `pick` API for `useAsyncData` and `useFetch`","2023-04-13T16:43:11Z","https://github.com/nuxt/nuxt/issues/19844",0.7384131,{"description":3137,"labels":3138,"number":3142,"owner":3026,"repository":3027,"state":3059,"title":3143,"updated_at":3144,"url":3145,"score":3146},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nDoesn't it make more sense to render a `section` element on [LandingSection](https://ui.nuxt.com/pro/components/landing-section)?\n\nIf no, can I change it natively (aka without need to rewrite all the component or create my own component)?",[3139,3140,3141],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3056,"color":3057},2437,"[Pro] Why LandingSection component render a `div` instead of a `section` element?","2024-10-22T21:02:07Z","https://github.com/nuxt/ui/issues/2437",0.73879766,["Reactive",3148],{},["Set"],["ShallowReactive",3151],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fkBf7noS6B5M0dYqz3CX4EAj_PatP37w7ci1uvQProWA":-1},"/nuxt/ui/2286"]