\n```\n\n### Description\n\nThe issue occurs both when I run the app in development mode and when I build it for production. I tested it on Safari (Mac and iPhone) and Chrome (iPhone only). On the first page load, the animation works fine, but when I reload the page, the animation stops. However, when the component where it is used updates, the icon state changes (still without animation). \n\nHere I placed some icons randomly in the pages to show the problem and when it occurs:\n\nhttps://github.com/user-attachments/assets/ca9772d8-61bb-47da-9b9e-38cbb8d5796c\n\n).",[],361,"nuxt","icon","open","Icon is not animating correctly","2025-02-23T14:06:29Z","https://github.com/nuxt/icon/issues/361",0.739251,{"description":3029,"labels":3030,"number":3031,"owner":3021,"repository":3022,"state":3023,"title":3032,"updated_at":3033,"url":3034,"score":3035},"OS: macOS latest\r\nBrowser: chrome latest\r\nNuxt version: 3.8.1\r\nnuxt-icon version: 0.6.6\r\n@nuxtjs/storybook version: 7.0.0\r\n\r\nhow can i do?\r\n\r\nI've tried many times to disable the vite plugin, but failed to clear the error\r\n\r\n\r\n\r\n\r\n",[],128,"[BUG REPORT] An error occurred when using with nuxt-storybook.","2024-07-25T13:03:23Z","https://github.com/nuxt/icon/issues/128",0.7400417,{"description":3037,"labels":3038,"number":3045,"owner":3021,"repository":3046,"state":3023,"title":3047,"updated_at":3048,"url":3049,"score":3050},"### Description\n\nCan you add an example of a custom sorting function like in the V2 version?\n",[3039,3042],{"name":3040,"color":3041},"question","d876e3",{"name":3043,"color":3044},"v3","49DCB8",3747,"ui","Add an example of using a custom sorting function in the Table documentation.","2025-03-31T02:53:16Z","https://github.com/nuxt/ui/issues/3747",0.7507397,{"description":3052,"labels":3053,"number":3060,"owner":3021,"repository":3021,"state":3023,"title":3061,"updated_at":3062,"url":3063,"score":3064},"### Describe the feature\n\nHey I am currently moving a big project from standard vue3 to nuxt, and have to rewrite most of my options api code to composition api..\r\n\r\nThe issue mostly is that some features are not there in composition api and when one is missing i can't \"link\" it to options api and then i got to go down the rabbit hole of changing my code to use composition api although it's already completely valid options api code.\r\n\r\nFor real, props, it is an awesome framework and it's very impressive etc.\r\n\r\nBUT.... in my opinion, it is kind of weird that it does not fully support vue (from my pov) as i do have to use so much \"special\" vue code instead of easily porting my app.\r\n\r\nI am still continuing to use nuxt for now but if you were able to make the transition a bit easier, i think a lot of people would use nuxt instead of plain old vue 3.\r\n\r\nI am willing to help with the adoption by saying what needs to happen (for a project like mine) to be easily portable to nuxt, if that is helpful.\r\n\r\nLmk what u think :) \n\n### Additional information\n\n- [X] 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).",[3054,3057],{"name":3055,"color":3056},"enhancement","8DEF37",{"name":3058,"color":3059},"🍰 p2-nice-to-have","0E8A16",21670,"Missing Support (Or documentation of) Options API with Nuxt","2024-06-30T11:08:29Z","https://github.com/nuxt/nuxt/issues/21670",0.7594028,{"description":3066,"labels":3067,"number":3074,"owner":3021,"repository":3046,"state":3075,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### Description\n\nI'm basically trying to display the week day full name in the Calendar header slot.\n\nInstead of having `S - M - T - W - T - F -S` as week day headers, I'd like to show `Sunday - Monday - Tuesday - Wednesday - ...`\n\nThe `#week-day` slot only provides the day's letter, so there's no way to reformat it.\n\n```\n\u003Ctemplate #week-day=\"item\">\n {{ item }}\n\u003C/template>\n```\n\nIt simply displays \n```\n{\n \"day\": \"M\"\n}\n```\nWhich is not super helpful\n\nWould it be possible to have, like, the weekday number (0 to 6) ? \n\nSuggestion:\n```\n{\n \"day\": \"M\",\n \"dayNumber\": \"1\",\n}\n```\n\n### Additional context\n\n_No response_",[3068,3070,3071],{"name":3055,"color":3069},"a2eeef",{"name":3043,"color":3044},{"name":3072,"color":3073},"triage","ffffff",3714,"closed","Pass more complete data to Calendar week-day slots","2025-04-01T11:52:50Z","https://github.com/nuxt/ui/issues/3714",0.6639018,{"description":3081,"labels":3082,"number":3087,"owner":3021,"repository":3046,"state":3075,"title":3088,"updated_at":3089,"url":3090,"score":3091},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nI know you guys are working hard on V3, but I really like to see this feature still in V2. We all know that not everybody will move over to V3 right away.\n\nI have to set my `strategy` to `override`, because tailwind-merge doesn't know about my custom tailwind extends. This is quite a pain in the ass, since this is causing other issues as well. Take the [Pro LandingGird](https://ui.nuxt.com/pro/components/landing-grid) as example. Classes are added to the grid items to set the right cols. By doing this with `strategy` set to `override`, all other classes will be overridden.\n\nI saw some sort of solution in [#925 ](https://github.com/nuxt/ui/issues/925#issuecomment-1857910586), but that didn't work. It's also not documented and can't find it in the module either.\n\nI know have to create my own merge config, but that will not work for Nuxt UI.\n\n\n### Additional context\n\nYou may wonder why I need this. Thats because I'm also using Tailwind Fluid, and try to replicate a design library that uses different spacings etc.\n\n",[3083,3086],{"name":3084,"color":3085},"duplicate","cfd3d7",{"name":3055,"color":3069},2893,"Extend tailwind-merge configuration","2024-12-13T15:04:57Z","https://github.com/nuxt/ui/issues/2893",0.68295705,{"description":3093,"labels":3094,"number":3095,"owner":3021,"repository":3096,"state":3075,"title":3097,"updated_at":3098,"url":3099,"score":3100},"",[],1126,"nuxt.com","[Refactor] Missing types","2023-02-15T12:31:09Z","https://github.com/nuxt/nuxt.com/issues/1126",0.71408117,{"description":3102,"labels":3103,"number":3111,"owner":3021,"repository":3046,"state":3075,"title":3112,"updated_at":3113,"url":3114,"score":3115},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.16.0\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.5.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/content@2.13.4, @nuxt/ui-pro@3.0.0-alpha.9, @pinia/nuxt@0.5.5, @nuxt/image@1.8.1, @nuxt/test-utils/module@3.14.4, @nuxtjs/i18n@9.1.0, @nuxtjs/seo@2.0.2, @nuxtjs/turnstile@0.9.11, nuxt-security@2.1.4, @nuxt/scripts@0.9.5\n- Build Modules: -\n------------------------------\n\n### Version\n\nv3.x\n\n### Reproduction\n\n```vue\n\u003CUButton v-show=\"true\" />\n```\n\n### Description\n\nAssuming it's because of the primitives, using v-show triggers a warning for every Nuxt UI (and Nuxt UI Pro) component, stating a runtime directive was used on a component with a non-element root node. This makes it impossible to apply conditional display unless using v-if, which doesn't cover the use cases that v-show does.\n\n### Additional context\n\n_No response_\n\n### Logs\n\nExample from my project of a button:\n```shell-script\n[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. \n at \u003CNuxtLink class=\"inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors gap-1.5 hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" raw=true custom=\"\" > \n at \u003CLink type=\"button\" disabled=false class=\"inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors gap-1.5 hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" ... > \n at \u003CButton type=\"button\" loading=false class=\"p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" ... > \n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \n at \u003CAnonymous key=\"/\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …} ... > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage> \n at \u003CDefault ref=Ref\u003C undefined > > \n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \n at \u003CNuxtLayout> \n at \u003CToastProvider swipe-direction=\"right\" duration=5000 > \n at \u003CToaster key=0 > \n at \u003CTooltipProvider> \n at \u003CConfigProvider use-id=fn\u003Cuse-id> dir=\"ltr\" > \n at \u003CApp> \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```",[3104,3107,3108],{"name":3105,"color":3106},"bug","d73a4a",{"name":3043,"color":3044},{"name":3109,"color":3110},"upstream","78bddb",2866,"[v3]: v-show causes a runtime warning and breaks","2025-03-24T17:58:14Z","https://github.com/nuxt/ui/issues/2866",0.72321683,{"labels":3117,"number":3125,"owner":3021,"repository":3021,"state":3075,"title":3126,"updated_at":3127,"url":3128,"score":3129},[3118,3119,3122],{"name":3055,"color":3056},{"name":3120,"color":3121},"3.x","29bc7f",{"name":3123,"color":3124},"2.x","d4c5f9",11647,"Feature Request asyncProps","2023-01-22T15:52:59Z","https://github.com/nuxt/nuxt/issues/11647",0.7261588,{"labels":3131,"number":3134,"owner":3021,"repository":3021,"state":3075,"title":3135,"updated_at":3136,"url":3137,"score":3138},[3132,3133],{"name":3055,"color":3056},{"name":3123,"color":3124},6517,"Add example on how to use with @vue/composition-api","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6517",0.73069406,["Reactive",3140],{},["Set"],["ShallowReactive",3143],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJ5zi75ffHGEN1cSYpEAtmpjhcdBzJIa6wPzRjsYhRlA":-1},"/nuxt/ui/3772"]