` component that shows the loading bar at the top but I think if we combine that with this native loading indicator feature we can really make great UX.\r\n\r\nYes, this is bleeding edge feature not currently supported everywhere but I think it would be nice to still give users the option to use this new feature _**IF their browser supports it.**_\r\n\r\nDocs: \r\nhttps://developer.chrome.com/docs/web-platform/navigation-api/\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/Navigation_API\r\n\r\nDemo:\r\nhttps://gigantic-honored-octagon.glitch.me/\r\n\r\n_(In the demo, you can activate the `Add an artificial two-second delay to all navigations (should impact the loading spinner/scroll restoration/focus reset/accessibility announcements).` checkbox to see the native loader appearing on the tab when navigating)_\r\n\r\n\r\n\r\n\r\n### Additional information\r\n\r\n- [ ] 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).",[2906,2909,2912,2915],{"name":2907,"color":2908},"enhancement","8DEF37",{"name":2910,"color":2911},"good first issue","fbca04",{"name":2913,"color":2914},"upstream","E8A36D",{"name":2916,"color":2917},"🍰 p2-nice-to-have","0E8A16",24553,"nuxt","open","[Feature Request] Use the new browser Navigation API to show a native loading indicator when navigating","2025-02-22T19:58:43Z","https://github.com/nuxt/nuxt/issues/24553",0.80477136,{"description":2926,"labels":2927,"number":2933,"owner":2919,"repository":2919,"state":2920,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### Describe the feature\n\nIt would be nice if you could show something like an animated image when reloading the code like Next js does. \r\n\r\nUnfortunately, the device from which you'd be working on is the one that gets its view refreshed and not the other devices like Next js. Please add these features. \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).",[2928,2929,2932],{"name":2907,"color":2908},{"name":2930,"color":2931},"dx","C39D69",{"name":2916,"color":2917},21422,"HMR Spinner & Devices ","2024-06-30T11:08:38Z","https://github.com/nuxt/nuxt/issues/21422",0.8101745,{"description":2939,"labels":2940,"number":2949,"owner":2919,"repository":2950,"state":2951,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Description\n\nI want to place it on the side or on the top like tabs component",[2941,2944,2947],{"name":2942,"color":2943},"question","d876e3",{"name":2945,"color":2946},"closed-by-bot","ededed",{"name":2948,"color":2946},"stale",1410,"ui","closed","Can carousel indicator be located elsewhere beside on bottom of parent?","2025-06-19T02:12:52Z","https://github.com/nuxt/ui/issues/1410",0.77269703,{"description":2957,"labels":2958,"number":2964,"owner":2919,"repository":2950,"state":2951,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### For what version of Nuxt UI are you suggesting this?\n\nv3-alpha\n\n### Description\n\nI was browsing through the v3 carousel docs at https://ui.nuxt.com/components/carousel#props, to see whether the v3 version will have callback events for onPrev and onNext, but didn't find it.\n\nIs this something that would be considered to implement?\n\nAlternatively, the ability to bind to the active item in the carousel, could also work.\n\nWe would use it to display an info text next to the image, and change it depending on which image is active in the carousel.\n\nIf this is something that is already possible, then please let me know how :)",[2959,2961],{"name":2907,"color":2960},"a2eeef",{"name":2962,"color":2963},"v3","49DCB8",2475,"[v3] `Carousel` feature request: callback methods onPrev & onNext","2024-11-07T14:11:43Z","https://github.com/nuxt/ui/issues/2475",0.7753478,{"description":2970,"labels":2971,"number":2977,"owner":2919,"repository":2950,"state":2951,"title":2978,"updated_at":2979,"url":2980,"score":2981},"### 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_",[2972,2973,2974],{"name":2907,"color":2960},{"name":2962,"color":2963},{"name":2975,"color":2976},"triage","ffffff",4032,"[Carousel] improve thumb example","2025-05-02T09:58:58Z","https://github.com/nuxt/ui/issues/4032",0.7758491,{"description":2983,"labels":2984,"number":2991,"owner":2919,"repository":2919,"state":2951,"title":2992,"updated_at":2993,"url":2994,"score":2995},"### Describe the feature\n\nThe current iteration of UCarousel primarily supports a slide transition effect for navigating through images in an autoplay mode. While this functionality serves its purpose for linear transitions, the introduction of a fade-out/in effect could significantly enhance the visual appeal and user experience. This feature request proposes the addition of an option within UCarousel to enable images to smoothly fade out and then fade in when transitioning, instead of the default slide mechanism.\r\n\r\nThe fade transition effect should be customizable, allowing developers to adjust the duration of both the fade-out and fade-in phases according to their specific needs. This feature would be optional and can be toggled based on the developer's preference, ensuring that UCarousel remains versatile for various use cases. Implementing this feature would provide a more dynamic and visually appealing way to showcase images, making UCarousel a more attractive option for developers looking to incorporate carousels in their web applications.\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).",[2985,2988],{"name":2986,"color":2987},"3.x","29bc7f",{"name":2989,"color":2990},"pending triage","E99695",26143,"Implement Fade-Out/In Transition Effect for UCarousel","2024-03-07T22:09:13Z","https://github.com/nuxt/nuxt/issues/26143",0.7775135,{"description":2997,"labels":2998,"number":2999,"owner":2919,"repository":3000,"state":2951,"title":3001,"updated_at":3002,"url":3003,"score":3004},"I setup the Module on newest releases and I could not bring up my font with tailwindcss.\n\nAfter seeing this discussion\nhttps://github.com/tailwindlabs/tailwindcss/discussions/13890\n\n```\n@theme {\n --font-sans: \"Nunito\", sans-serif;\n}\n```\n\nfont-sans seems the way to go and not font-display.\n\nIs that true? i am not into that. If so, we need to change the docs: https://fonts.nuxt.com/get-started/usage#v4 ",[],593,"fonts","Docs may be outdated","2025-04-11T08:37:30Z","https://github.com/nuxt/fonts/issues/593",0.80419594,{"description":3006,"labels":3007,"number":2999,"owner":2919,"repository":3011,"state":2951,"title":3012,"updated_at":3013,"url":3014,"score":3004},"Carousel should be bigger",[3008],{"name":3009,"color":3010},"bug","ff281a","nuxt.com","[Docs] Framework v2 improve carousel","2023-02-15T12:30:49Z","https://github.com/nuxt/nuxt.com/issues/593",{"description":3016,"labels":3017,"number":2999,"owner":2919,"repository":3021,"state":2951,"title":3022,"updated_at":3023,"url":3024,"score":3004},"Hello there - I've just been trying out the new version - thanks again for the work gone into this!\r\n\r\nI was trying to get a POC with https://github.com/sidebase/nuxt-auth and `mockNuxtImport` but the actual composable seems to override my mock. \r\nI can't pinpoint whether it's an issue with `nust-vitest` or `sidebase/nuxt-auth` - if with them lemme know and I'll raise it!\r\n\r\n\r\nHere's a minimum repro https://stackblitz.com/edit/nuxt-vitest-wjddxq?file=test%2Fapp.nuxt.spec.ts \r\n\r\nThanks!",[3018],{"name":3019,"color":3020},"vitest-environment","b60205","test-utils","using mockNuxtImport with sidebase/nuxt-auth ","2023-12-05T11:11:32Z","https://github.com/nuxt/test-utils/issues/593",{"description":3026,"labels":3027,"number":3031,"owner":2919,"repository":2950,"state":2951,"title":3032,"updated_at":3033,"url":3034,"score":3035},"### Description\n\nHello!\r\n\r\nI think it would be nice to allow multiple notifications containers, so that we could have different placements for toasts based on the container they are sent to.\r\n\r\nAfter digging in the components i think this changes wouldn't be heavy and i could contribute for this if you agree with this feature request.\r\n\r\nMy idea would be to allow to pass a custom key for the the useToast and the notifications state and therefore they would have their own references:\r\n```\r\nNotifications.vue\r\nconst toast = useToast(aCustomKey)\r\nconst notifications = useState\u003CNotification[]>(aCustomKey, () => [])\r\n```\r\n\r\n----\r\n\r\nSo now we could have:\r\n```\r\nApp.vue\r\n\u003CUNotifications :ui=\"{position:'bottom-auto top-0' }\"/>\r\n\u003CUNotifications state-key=\"aCustomKey\" :ui=\"{position:'bottom-0 top-auto' }\"/>\r\n```\r\n\r\nAnd then within your app we could call the toast handler we want:\r\n```\r\nRandom.vue\r\nconst toast = useToast(aCustomKey)\r\n```\r\n\r\nLet me know what you think and if you'll be interested on this knowing that i could contribute fully to it.\r\n\r\nThanks!\n\n### Additional context\n\n_No response_",[3028,3029,3030],{"name":2907,"color":2960},{"name":2945,"color":2946},{"name":2948,"color":2946},1706,"Allow multiple notifications containers","2025-06-19T02:12:39Z","https://github.com/nuxt/ui/issues/1706",0.8049618,["Reactive",3037],{},["Set"],["ShallowReactive",3040],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fObjDAMJ8h5Zlodta7ilVY0jzaT5faU_ITWZ0bW6vT1A":-1},"/nuxt/ui/1918"]