",[3137,3140],{"name":3138,"color":3139},"enhancement","a2eeef",{"name":3141,"color":3142},"triage","ffffff",4578,"nuxt","ui","open","Table header cant be sticky on body scroll / Allow removal of root-div or root-div classes","2025-07-23T13:42:26Z","https://github.com/nuxt/ui/issues/4578",0.781953,{"description":3152,"labels":3153,"number":3159,"owner":3144,"repository":3145,"state":3146,"title":3160,"updated_at":3161,"url":3162,"score":3163},"### Package\n\nv3.x\n\n### Description\n\nRequest: Being able to add the month's name at the top of each UCalendar month display\n\nIssue: Vertical scrolling on mobile (which you yourself apply with flex-col) ends up being lost in the void if 2 or more months are displayed: [https://i.imgur.com/KfGjVxZ.png](https://i.imgur.com/KfGjVxZ.png)\n\nHydrating many different UCalendar doesn't solve the issue as it gets messy when selecting a range over 2 different months (v-model to the same variable on different components actually works for a single date selection though)\n\n### Additional context\n\n_No response_",[3154,3155,3158],{"name":3138,"color":3139},{"name":3156,"color":3157},"v3","49DCB8",{"name":3141,"color":3142},4842,"Calendar and Month titles","2025-08-29T08:03:43Z","https://github.com/nuxt/ui/issues/4842",0.78905326,{"description":3165,"labels":3166,"number":3172,"owner":3144,"repository":3145,"state":3146,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### Environment\n\n\"nuxt\": \"^3.17.5\",\n\"@nuxt/ui\": \"^3.1.3\",\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nFollowing is my `components/AppHeader.vue`:\n\n```\n\u003Ctemplate>\n \u003Cheader class=\"bg-white sticky top-0 z-50\">\n \u003Cnav class=\"hidden lg:flex flex-1 justify-center\">\n \u003CUNavigationMenu\n v-model=\"activeSection\"\n :items=\"navItems\"\n class=\"space-x-2\"\n highlight\n highlight-color=\"primary\"\n >\n \u003Ctemplate #item=\"{ item, active }\">\n \u003CULink\n as-child\n :to=\"{ path: '', hash: `#${item.to}` }\"\n exact-hash\n class=\"px-4 py-2 rounded-md transition\"\n aria-label=\"Go to {{ item.label }}\"\n >\n \u003Cspan class=\"inline-flex items-center\">\n \u003CUIcon v-if=\"item.icon\" :name=\"item.icon\" class=\"size-5 mr-2\" />\n \u003Cspan>{{ item.label }}\u003C/span>\n \u003C/span>\n \u003C/ULink>\n \u003C/template>\n \u003C/UNavigationMenu>\n \u003C/nav>\n \u003C/header>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, watch, onMounted } from \"vue\";\nimport { useRoute } from \"vue-router\";\nimport type { NavigationMenuItem } from \"@nuxt/ui\";\n\nconst route = useRoute();\nconst activeSection = ref(\"\");\n\n// Define your nav data (to = hash without leading '#')\nconst navItems = ref\u003CNavigationMenuItem[]>([\n { label: \"Home\", icon: \"i-lucide-home\", value: \"\", to: \"\" },\n {\n label: \"About Us\",\n icon: \"i-lucide-user-circle\",\n value: \"about\",\n to: \"about\",\n },\n {\n label: \"Products\",\n icon: \"i-lucide-package\",\n value: \"products\",\n to: \"products\",\n },\n {\n label: \"Technologies\",\n icon: \"i-lucide-cpu\",\n value: \"technologies\",\n to: \"technologies\",\n },\n {\n label: \"News\",\n icon: \"i-lucide-newspaper\",\n value: \"news\",\n to: \"news\",\n },\n]);\n\n// On load, seed activeSection from the current hash\nonMounted(() => {\n activeSection.value = route.hash.replace(/^#/, \"\");\n});\n\n// Update when the hash changes\nwatch(\n () => route.hash,\n (h) => {\n activeSection.value = h.replace(/^#/, \"\");\n }\n);\n\u003C/script>\n```\n\n### Description\n\n\nI’m using the Nuxt UI `\u003CUNavigationMenu>` component in my Nuxt 3 app to render a header nav that scrolls to sections via hash links within my `pages/index.vue` (`#about`, `#products`, `#news`, etc.). Clicking works fine, and the correct menu item highlights and scrolls to that section.\n\nHowever, if I reload the page while viewing, for example,`/#products` or any other section like `#news, #about`, etc., the page scrolls to the respective `products/news/about` section, but the navigation menu always highlights `“Home”` (the first item) instead of `Products/News/About`.\n\nHow can I get `\u003CUNavigationMenu>` to pick up the current `route.hash` on load so that the correct item is active?\n\n\n\nFollowing is the documentation I am refeering to:\n\u003CUNavigationMenu> API: [https://ui.nuxt.com/components/navigation-menu][1]\n\n\n [1]: https://ui.nuxt.com/components/navigation-menu\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3167,3170,3171],{"name":3168,"color":3169},"bug","d73a4a",{"name":3156,"color":3157},{"name":3141,"color":3142},4416,"Nuxt 3/Nuxt UI UNavigationMenu won’t highlight hash‐based section on page reload","2025-06-28T10:47:43Z","https://github.com/nuxt/ui/issues/4416",0.79508454,{"description":3178,"labels":3179,"number":3183,"owner":3144,"repository":3145,"state":3146,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### Description\n\nWhilst working with snap points, (direction bottom) and the drawer **IS NOT** dismissible, If i'd dragged the drawer all the way up, then went to drag the drawer down again, it would stop at the 2nd to last stop (the first stop going back down) and would just jump to the next stop instead of dragging. It was only after scrolling through the vaul repo that I found [this was the issue](https://github.com/emilkowalski/vaul/blob/54b099cfeed77905f3b06d553c728b3102b15b40/src/use-snap-points.ts#L176) `const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1` \n`fadeFromIndex` should be a prop (and made clear), as it prevents the dragging functionality, I had to manually amend this value and if i'd have known it was a prop, it would have saved me a lot of time.\n\n### Additional context\n\n_No response_",[3180,3181,3182],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},4546,"Drawer prop amendment - snap point support","2025-07-18T13:40:39Z","https://github.com/nuxt/ui/issues/4546",0.7966672,{"description":3189,"labels":3190,"number":3195,"owner":3144,"repository":3145,"state":3146,"title":3196,"updated_at":3197,"url":3198,"score":3199},"### Description\n\nWhen pinning multiple columns in Nuxt UI Table, only the first pinned column maintains sticky positioning while scrolling. This differs from TanStack Table's behavior where all pinned columns remain sticky.\n\n\u003Cimg width=\"1465\" height=\"1249\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2faa0cd2-0c76-4881-9892-39e1c9610a35\" />\n\n\u003Cimg width=\"1315\" height=\"541\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e12e8c0c-9e43-45ee-8e81-5ee9ff1e8c50\" />",[3191,3194],{"name":3192,"color":3193},"question","d876e3",{"name":3156,"color":3157},4721,"Multi-column pinning behavior differs from TanStack Table - only first pinned column remains sticky","2025-08-12T14:56:56Z","https://github.com/nuxt/ui/issues/4721",0.7982442,{"description":3201,"labels":3202,"number":3206,"owner":3144,"repository":3207,"state":3146,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### 📚 Is your documentation request related to a problem?\n\n📚 Is your documentation request related to a problem?\n\nI couldn't find in the docs how to display in the devtools so that I can know which one is which.\n\n```ts\n useScript(\n {\n src: \"xxx\",\n id: \"super-script-src\",\n },\n {\n devtools: {\n registryKey: \"SuperScript\", // Key used to map to the registry script for Nuxt DevTools. as per JS Docs ( It's not the name \n registryMeta: {\n name: \"SuperScript\", // We can include here for example the name\n },\n },\n },\n );\n```\n\nExample after I included that meta data in the devtools\n\n\n\n\n\n### 🔍 Where should you find it?\n\nI would say a tab with devtools in the sidebar with this and more information on how useful the devtools is, would be really important\n\n### ℹ️ Additional context\n\n_No response_",[3203],{"name":3204,"color":3205},"documentation","0075ca",332,"scripts","How to display in the devtools name of the scripts","2024-12-06T09:14:08Z","https://github.com/nuxt/scripts/issues/332",0.80058116,{"description":3213,"labels":3214,"number":3215,"owner":3144,"repository":3216,"state":3217,"title":3218,"updated_at":3219,"url":3220,"score":3221},"### Environment\n\nhttps://nuxt.com/\n\n### Reproduction\n\nUse Google and Firefox to open https://nuxt.com/, and you can find that the automatic recognition on Firefox is wrong, showing the dark mode\r\n\r\n\r\n\n\n### Describe the bug\n\nfirefox Developer Edition 131.0b5\r\nAnd how to turn off dark mode?\r\nI tried but it didn't work\r\ncolorMode: {\r\n preference: 'light'\r\n},\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[],1663,"nuxt.com","closed","Dark mode does not work properly on Firefox Developer Edition","2024-11-21T01:08:22Z","https://github.com/nuxt/nuxt.com/issues/1663",0.7705436,{"description":3223,"labels":3224,"number":3231,"owner":3144,"repository":3145,"state":3217,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### Description\n\nHi Team,\r\n\r\nI hope you're doing well.\r\n\r\nI have a feature request for the pagination component. I'm using pagination for a series, and some series don't start at season 1. For example, some might start at season 4.\r\n\r\nIt would be incredibly useful to have a min prop that allows specifying a minimum page so that everything below this minimum is automatically disabled or hidden.\r\n\r\nHere's an example of how it might be implemented:\r\n\r\n```\r\n\u003CUPagination\r\n v-model=\"selectedSeason\"\r\n :min=\"selectedSeason \u003C seasonRange.minSeason\"\r\n :max=\"5\"\r\n size=\"sm\"\r\n :page-count=\"1\"\r\n :total=\"seasonRange.maxSeason\"\r\n :active-button=\"{ variant: 'outline' }\"\r\n :ui=\"{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }\"\r\n show-last\r\n show-first\r\n>\r\n\u003C/UPagination>\r\n```\r\n\n\n### Additional context\n\nIn this example, :min=\"selectedSeason \u003C seasonRange.minSeason\" would ensure that seasons below the minimum are disabled or hidden.\r\n\r\nThank you for considering this feature request. It would greatly enhance the usability of the pagination component for series with non-sequential seasons.",[3225,3226,3229],{"name":3138,"color":3139},{"name":3227,"color":3228},"closed-by-bot","ededed",{"name":3230,"color":3228},"stale",1804,"Feature Request: Allow min-page Property in Pagination Component","2025-06-19T02:12:27Z","https://github.com/nuxt/ui/issues/1804",0.77725613,{"description":3237,"labels":3238,"number":3241,"owner":3144,"repository":3145,"state":3217,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.1`\n- Nuxt Version: `3.15.4`\n- CLI Version: `3.22.2`\n- Nitro Version: `2.10.4`\n- Package Manager: `bun@1.2.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `ssr`, `extends`, `modules`, `css`, `components`, `ui`, `app`, `dayjs`, `icon`\n- Runtime Modules: `@nuxt/ui-pro@3.0.0-beta.2`, `dayjs-nuxt@2.1.11`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-beta.2\n\n### Reproduction\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n violet: 'violet',\n },\n },\n});\n```\n\n```ts\nexport default defineNuxtConfig({\n ui: {\n theme: {\n colors: [\n 'primary', 'secondary', 'tertiary',\n 'info', 'success', 'warning',\n 'error', 'violet'\n ]\n }\n },\n});\n\n```\n\n### Description\n\nSetting a custom color with the same name as the color causes some kind of cylical referernce in the css vars between NuxtUIv3 and TWv4.\n\n\n\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3239,3240],{"name":3168,"color":3169},{"name":3156,"color":3157},3426,"Setting custom color alias the same name as the color does not work","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3426",0.79759353,{"description":3247,"labels":3248,"number":3252,"owner":3144,"repository":3145,"state":3217,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### Description\n\nhttps://ui.nuxt.com/components/carousel#with-thumbnails\n\nThere are a couple of issues with the current implementation:\n\n1. Swiping via gestures isn't tracked — when switching slides this way, the active thumb doesn't update.\n2. The thumbs list can have more items, so scrolling needs to be handled properly.\n\nHere's my take on fixing both:\n```vue\n\u003Cscript setup lang=\"ts\">\nconst items = [\n 'https://picsum.photos/640/640?random=1',\n 'https://picsum.photos/640/640?random=2',\n 'https://picsum.photos/640/640?random=3',\n 'https://picsum.photos/640/640?random=4',\n 'https://picsum.photos/640/640?random=5',\n 'https://picsum.photos/640/640?random=6',\n 'https://picsum.photos/640/640?random=7',\n 'https://picsum.photos/640/640?random=8',\n 'https://picsum.photos/640/640?random=9',\n 'https://picsum.photos/640/640?random=10',\n]\n\nconst carousel = useTemplateRef('carousel')\nconst thumbCarousel = useTemplateRef('thumbCarousel')\nconst activeIndex = ref(0)\n\nfunction onClickPrev() {\n activeIndex.value--\n}\nfunction onClickNext() {\n activeIndex.value++\n}\n\nfunction onSelect(index: number) {\n activeIndex.value = index\n\n thumbCarousel.value?.emblaApi?.scrollTo(index)\n}\n\nfunction onThumbClick(index: number) {\n carousel.value?.emblaApi?.scrollTo(index)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex-1 w-full\">\n \u003CUCarousel\n ref=\"carousel\"\n v-slot=\"{ item }\"\n arrows\n :items=\"items\"\n :prev=\"{ onClick: onClickPrev }\"\n :next=\"{ onClick: onClickNext }\"\n class=\"w-full max-w-xs mx-auto\"\n >\n \u003Cimg :src=\"item\" width=\"320\" height=\"320\" class=\"rounded-lg\">\n \u003C/UCarousel>\n\n \u003Cdiv class=\"pt-4 max-w-xs mx-auto\">\n \u003CUCarousel\n ref=\"thumbCarousel\"\n v-slot=\"{ item, index }\"\n :items=\"items\"\n class=\"w-full\"\n contain-scroll=\"keepSnaps\"\n drag-free\n :ui=\"{ item: 'basis-auto' }\"\n >\n \u003Cimg\n :src=\"item\"\n width=\"44\"\n height=\"44\"\n class=\"size-11 opacity-25 hover:opacity-100 transition-opacity rounded-lg\"\n :class=\"{ 'opacity-100': activeIndex === index }\"\n alt=\"\"\n @click=\"onThumbClick(index)\"\n >\n \u003C/UCarousel>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\n_No response_",[3249,3250,3251],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},4032,"[Carousel] improve thumb example","2025-05-02T09:58:58Z","https://github.com/nuxt/ui/issues/4032",0.79793334,["Reactive",3258],{},["Set"],["ShallowReactive",3261],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZnUOfrfYU5_8-G5Ifz5zBt99kn7S9UZI6MkRtEa0paY":-1},"/nuxt/ui/2353"]