\n \u003C/template>\n \u003Ctemplate #content>\n \u003CPlaceholder class=\"size-48 m-4 inline-flex\" />\n \u003C/template>\n \u003C/UPopover>\n\u003C/UFormField>\n```\n\nMy use case is building an autocomplete for a text input. The `InputMenu` is not suitable because the dropdown is too intrusive.\n\n### Additional context\n\n_No response_",[3053,3054,3055],{"name":3037,"color":3038},{"name":3023,"color":3024},{"name":3056,"color":3057},"triage","ffffff",4013,"closed","Add ability to provide an anchor for the popover","2025-05-22T15:04:18Z","https://github.com/nuxt/ui/issues/4013",0.7043686,{"description":3065,"labels":3066,"number":3071,"owner":3026,"repository":3027,"state":3059,"title":3072,"updated_at":3073,"url":3074,"score":3075},"### Environment\n\n.\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.13\n\n### Reproduction\n\nGo to https://ui3.nuxt.dev/getting-started and change the theme to dark and the neutral color to neutral.\n\n### Description\n\nI just entered the site and had the preference to see the docs with neutral colors and in dark mode and now seems that the last update on the docs brokes the dark mode with neutral color. I tested it in multiple browsers and looks the same.\n\n### Additional context\n\nhttps://github.com/user-attachments/assets/f79b85ea-a40a-4f97-9c81-f36735d1eebb\n\n### Logs\n\n```shell-script\n\n```",[3067,3070],{"name":3068,"color":3069},"bug","d73a4a",{"name":3023,"color":3024},3399,"Dark mode with neutral color seems to be broken in the v3 UI docs","2025-03-22T15:51:05Z","https://github.com/nuxt/ui/issues/3399",0.73209625,{"description":3077,"labels":3078,"number":3082,"owner":3026,"repository":3027,"state":3059,"title":3083,"updated_at":3084,"url":3085,"score":3086},"### Environment\n\nWindows 11,\nNode v20.19.0\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.12\n\n### Reproduction\n\ntabs: {\n slots: {\n root: 'flex items-center gap-2',\n list: 'relative **flex-none** p-1 px-0 group',\n indicator: 'absolute transition-[translate,width] duration-200',\n trigger: [\n 'group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75',\n 'transition-colors'\n ],\n content: 'focus:outline-none w-full',\n leadingIcon: 'shrink-0',\n leadingAvatar: 'shrink-0',\n leadingAvatarSize: '',\n label: 'truncate'\n },\n\n### Description\n\nFor me it's working great with Nuxt UI to overwrite \"normal\" styles in the app.config.ts, but if I try to overwrite the component standard flex with flex-none it's not working, it is still flex. Any ideas how to solve or is it a bug?\n\nThanks\n\nChristoph \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3079,3080,3081],{"name":3068,"color":3069},{"name":3023,"color":3024},{"name":3056,"color":3057},4156,"UTabs cannot overwrite flex to flex-none","2025-05-15T15:32:49Z","https://github.com/nuxt/ui/issues/4156",0.7342158,{"description":3088,"labels":3089,"number":3092,"owner":3026,"repository":3027,"state":3059,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### Description\n\nI saw that some components (like `Modal` or `Slideover`) have the \"trigger\" fully replaceable, meanwhile others like `Select` and `SelectMenu` cannot be fully replaced. Because of that, introducing another slot to replace the entire trigger would be nice imho. But I would define it as the default slot, not a named one (like `trigger` or something else) to remain consistent with the modal/slideover one.\nThe problem is that it would introduce a breaking change, so I don't know what is the way you want to proceed.\nWhat do you think about this?\nMentioning @sandros94 as I talked about this with him on Discord.\n\n### Additional context\n\nTo have a look on this, I did some changes in a branch in my fork: \u003Chttps://github.com/nuxt/ui/compare/v3...zAlweNy26:nuxt-ui:feat/select-trigger>",[3090,3091],{"name":3037,"color":3038},{"name":3023,"color":3024},4009,"Standardize trigger slot in components","2025-05-10T17:57:56Z","https://github.com/nuxt/ui/issues/4009",0.734482,{"description":3098,"labels":3099,"number":3103,"owner":3026,"repository":3026,"state":3059,"title":3104,"updated_at":3105,"url":3106,"score":3107},"Tell me what I'm doing wrong. I want to trigger the event of one button, by clicking on another\r\n\r\n**logo.vue**\r\n```\r\n\u003Ctemplate>\r\n \u003Cb-button @click=\"trigger\">click\u003C/b-button>\r\n\u003C/template>\r\n```\r\n```\r\n\u003Cscript>\r\nexport default {\r\n data () {\r\n....\r\n },\r\n methods: {\r\n trigger () {\r\n \t this.$refs.click_template.click()\r\n }\r\n }\r\n}\r\n\u003C/script>\r\n```\r\n-------------------------------------------------------------------------\r\n**index.vue**\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"fullpage-container\">\r\n \u003Cdiv class=\"page-home\">\r\n \u003Cdiv class=\"button-group\">\r\n \u003Cb-button-group vertical>\r\n \u003Cb-button type=\"button\" v-bind:class=\"[{active:index ==0}]\" @click=\"moveTo(2)\" \r\nref=\"click_template\">\r\n button\r\n \u003C/b-button>\r\n \u003C/b-button-group>\r\n \u003C/div>\r\n \u003Cdiv class=\"fullpage-wp\" v-fullpage=\"opts\" ref=\"example\">\r\n ...\r\n \u003Cdiv class=\"page\">\r\n \u003Clogo v-animate=\"{value: 'bounceInLeft'}\">\u003C/logo>\r\n \u003C/div>\r\n \u003Cdiv class=\"page\">\r\n \u003Cpricelist v-animate=\"{value: 'bounceInTop'}\">\u003C/pricelist>\r\n \u003C/div>\r\n ...\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n```\r\n\u003Cscript>\r\nimport Logo from '~/components/Logo.vue'\r\nimport pricelist from '~/components/Pricelist.vue'\r\n\r\nexport default {\r\n data () {\r\n var that = this\r\n return {\r\n index: 0,\r\n opts: {\r\n start: 0,\r\n dir: 'v',\r\n duration: 500,\r\n beforeChange: function (prev, next) {\r\n that.index = next\r\n },\r\n afterChange: function (prev, next) {\r\n }\r\n }\r\n }\r\n },\r\n methods: {\r\n moveTo (index) {\r\n this.$refs.fullpage.$fullpage.moveTo(index, true)\r\n }\r\n },\r\n components: {\r\n Logo,\r\n pricelist,\r\n ...\r\n }\r\n}\r\n\u003C/script>\r\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1390\">#c1390\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3100],{"name":3101,"color":3102},"2.x","d4c5f9",1560," initiate a click in the plugin vue-fullpage","2023-01-18T15:41:58Z","https://github.com/nuxt/nuxt/issues/1560",0.74116987,{"description":3109,"labels":3110,"number":3114,"owner":3026,"repository":3027,"state":3059,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Description\r\n\r\n## Description\r\nI have a logic in my dropdown menu to hide certain item.\r\nBut I can't find a property in this component that can do this. And `v-if` and `v-show` do not solve the issue here. \r\n\r\nUsing `v-if` would make it rendered as a default item.\r\nWrapping the item in template with `v-show` would cause an empty item being shown.\r\n\r\nThe only solution I think of right now is to modify the items passed into the dropdown component.\r\nI want to know if there's a way to do this without touching the items being passed in.\r\n```vue\r\n\u003CUDropdown :items=\"items\">\r\n \u003C!-- item login would be rendered as 'Default items slot' if user is false` -->\r\n \u003Ctemplate #login>\r\n \u003Cdiv\r\n v-if=\"!user\"\r\n >\r\n Login\r\n \u003C/div>\r\n \u003C/template>\r\n \u003C!-- item user would be an empty item if user is false -->\r\n \u003Ctemplate #user>\r\n \u003Cdiv\r\n v-show=\"!user\"\r\n >\r\n Login\r\n \u003C/div>\r\n \u003C/template>\r\n \u003Ctemplate #item>\r\n Default items slot\r\n \u003C/template>\r\n\u003C/UDropdown>\r\n```",[3111,3112,3113],{"name":3020,"color":3021},{"name":3041,"color":3042},{"name":3044,"color":3042},1803,"Hide item in dropdown","2025-06-19T02:12:28Z","https://github.com/nuxt/ui/issues/1803",0.7428061,{"description":3120,"labels":3121,"number":3125,"owner":3026,"repository":3026,"state":3059,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.2\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxt/content@2.13.0\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-mzb2e5\r\n\r\nOpen the console and click on the \"Link\".\r\n\r\n### Describe the bug\r\n\r\nIf you create a composable with `useLazyAsyncData` and then call it inside `ClientOnly` component it will log the below warning when you want to navigate between pages:\r\n\r\n```\r\nchunk-2XHGWBZJ.js?v=008d553a:1512 [Vue warn]: Slot \"default\" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead. \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C Proxy(Object) {…} > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n```\r\n\r\n### Additional context\r\n\r\nUsing `useLazyAsyncData` directly inside the component is Okay and works without problem.\r\n\r\n### Logs\r\n\r\n_No response_",[3122],{"name":3123,"color":3124},"3.x","29bc7f",27752,"Slot \"default\" invoked outside of the render function when using a composable (contains useLazyAsyncData) inside ClientOnly component","2024-06-24T10:03:48Z","https://github.com/nuxt/nuxt/issues/27752",0.7429797,{"description":3131,"labels":3132,"number":3134,"owner":3026,"repository":3026,"state":3059,"title":3135,"updated_at":3136,"url":3137,"score":3138},"I was generating a simple project from nuxjs website. It works fine but when i added a button with v-on:click event.,in the generated one, the button doesn't work. It works with npm run dev.\r\nPlease help me out. Thanks\r\nBelow is my index.vue\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Csection class=\"container\">\r\n \u003Cdiv>\r\n \u003Clogo/>\r\n \u003Ch1 class=\"title\">\r\n NUXT\r\n \u003C/h1>\r\n \u003Ch2 class=\"subtitle\">\r\n Universal Vue.js Application\r\n \u003C/h2>\r\n \u003Cdiv class=\"links\">\r\n \u003Ca href=\"https://nuxtjs.org/\" target=\"_blank\" class=\"button--green\">Documentation\u003C/a>\r\n \u003Ca href=\"https://github.com/nuxt/nuxt.js\" target=\"_blank\" class=\"button--grey\">Github\u003C/a>\r\n \u003C/div>\r\n \u003Cbutton @click=\"test('1231')\"> testButton \u003C/button>\r\n \u003C/div>\r\n \u003C/section>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport Logo from '~components/Logo.vue'\r\n\r\nexport default {\r\n components: {\r\n Logo\r\n },\r\n methods: {\r\n test: function (val) {\r\n console.log(val)\r\n }\r\n }\r\n}\r\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c816\">#c816\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3133],{"name":3101,"color":3102},948,"`nuxt generate` with v-on:click","2023-01-18T15:40:37Z","https://github.com/nuxt/nuxt/issues/948",0.74379253,["Reactive",3140],{},["Set"],["ShallowReactive",3143],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fuNKK0eTVihII-eSY4nkzK0hSQD1VBmPua8OczZSVfRc":-1},"/nuxt/ui/3455"]