\n \u003CUButton\n variant=\"outline\"\n class=\"rounded\"\n label=\"Middle\"\n @click=\"open = false\"\n />\n \u003CUButton\n type=\"submit\"\n class=\"rounded\"\n label=\"Confirm\"\n color=\"primary\"\n @click=\"open = false\"\n />\n \u003C/div>\n \u003C/template>\n \u003C/UModal>\n \u003CUButton\n variant=\"outline\"\n color=\"neutral\"\n @click=\"\"\n >\n Other Button\n \u003C/UButton>\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\u003Cimg width=\"362\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/da66f0d8-fc42-45a5-b1e1-d7214468b24a\" />\n\n\u003Cbr>\n\n\u003Cimg width=\"543\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a50767ec-bea5-4c88-9b45-963f8e81e5df\" />\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2039,2040],{"name":2014,"color":2015},{"name":1988,"color":1989},2978,"The button styles in UModal body should not be affected by UButtonGroup.","2025-02-07T15:32:58Z","https://github.com/nuxt/ui/issues/2978",0.75713956,{"description":2047,"labels":2048,"number":2055,"owner":1991,"repository":1991,"state":2018,"title":2056,"updated_at":2057,"url":2058,"score":2059},"Hi. We have various issues reported for `scrollBehavior` not behaving as desired. Maybe use-cases differ but almost all of them are related to the same known issue and we are aware and plan to help fixing it. Please don't make/reopen duplicated issues as there is enough info about the problem.It just makes the process harder. As of always contributions and PRs are appreciated to both `vue-router` and `nuxt` for possible fixes.\r\n\r\n### vue-router\r\n- Handle scrollBehaviour with transitions (vuejs/vue-router#1263)\r\n- Another detail of scrollBehavior wrapped in transition(vuejs/vue-router#1373)\r\n- scrollBehavior doesn't work for initial route in Firefox (vuejs/vue-router#1585)\r\n- Need a way to set what scroll position is saved (vuejs/vue-router#1187)\r\n- Navigating back should retain the scroll position. (vuejs/vue-router#1669)\r\n- Support parent container for scroll behavior (vuejs/vue-router#1249)\r\n- Calcurated scroll position is incorrect in some browser with animation (vuejs/vue-router#1530)\r\n\r\n\r\n### Issues\r\n- Strange behavior in Firefox browser when page transition (#1373)\r\n- What causes a glitch when page transition in Firefox? (#1002)\r\n- Delayed scroll top possible? (#1355)\r\n- ScrollBehavior: Fires too early (#1036)\r\n- Navigating back should retain the scroll position. (#1182)\r\n\r\n### Reproductions\r\n\r\n- https://github.com/krestaino/scroll-position-nuxt (@krestaino, #1182)\r\n- http://jsfiddle.net/qw4hbgek (@posva, vuejs/vue-router#1263)\r\n- http://jsfiddle.net/xctnu8r3/2 (@nickforddesign , vuejs/vue-router#1373)\r\n- https://github.com/vuejs/vue-router/tree/dev/examples/scroll-behavior (@hworld, vuejs/vue-router#1585)\r\n- http://codepen.io/brad426/pen/pezRge (@brad426)\r\n\r\n\r\n### Misc\r\n- https://nuxtjs.org/faq/css-flash\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1219\">#c1219\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2049,2052],{"name":2050,"color":2051},"available soon","6de8b0",{"name":2053,"color":2054},"2.x","d4c5f9",1376,"scrollBehavior Glitches","2023-01-18T15:41:42Z","https://github.com/nuxt/nuxt/issues/1376",0.75720435,{"description":2061,"labels":2062,"number":2064,"owner":1991,"repository":1991,"state":2018,"title":2065,"updated_at":2066,"url":2067,"score":2068},"Hi I have an issue with having 403 if I access a url without going to / of the website.\r\n\r\nif You guys go to https://webuilder.co.uk/builder it will throw an error\r\nbut if you go to https://webuilder.co.uk/auth/login type:\r\ntest@gmail.com\r\ntesting123\r\n\r\nand login, it will work. I can't seem to replicate this issue locally, is this some kind of axios issue?\r\n\r\n```\r\n\u003Ctemplate>\r\n\u003Cdiv class=\"container-fluid h-100\">\r\n \u003Cdiv class=\"row justify-content-center h-100\">\r\n \u003Cdiv class=\"col bg-dark h-100 overflow-y-auto animated slideInLeft\">\r\n\r\n \u003Cvue-img-loader width=\"150\" height=\"100\" transition=\"fade\" center-type=\"contain\" v-for=\"template in templates\" :key=\"template.id\" :src=\"template.image \" :data=\"template.file \" :html=\"template.html \" :css=\"template.css \">\r\n \u003Cloader>\u003C/loader>\r\n \u003C/vue-img-loader>\r\n\r\n \u003C/div>\r\n \u003Cdiv class=\"col-lg-8 col-6\">\r\n\r\n \u003C/div>\r\n \u003Cdiv class=\"col bg-dark animated slideInRight\">\r\n \u003Cdiv id=\"color\" class=\"m-1\">\r\n \u003Cbutton v-on:click=\"colors = !colors\" class=\"btn btn-raised btn-primary m-1\">Manipulate colors\u003C/button>\r\n \u003Cdiv v-if=\"colors\">\r\n \u003Cbutton class=\"btn btn-raised btn-secondary m-1\">Background color\u003C/button>\r\n \u003Cbutton class=\"btn btn-raised btn-secondary m-1\">Font color\u003C/button>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003Cdiv id=\"upload\" class=\"m-1\">\r\n \u003Cbutton v-on:click=\"upload = !upload\" class=\"btn btn-raised btn-primary m-1\">Manipulate upload\u003C/button>\r\n \u003Cdiv v-if=\"upload\">\r\n \u003Cbutton class=\"btn btn-raised btn-secondary m-1\">Upload image\u003C/button>\r\n \u003Cbutton class=\"btn btn-raised btn-secondary m-1\">Upload file\u003C/button>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport VueImgLoader from '~/components/imgLoader/imgLoader';\r\nimport Circle from '~/components/circle'\r\nimport {\r\n mapGetters\r\n} from 'vuex'\r\nexport default {\r\n layout: 'builder',\r\n asyncData({\r\n store\r\n }) {\r\n return store.dispatch('fetchTemplates')\r\n },\r\n components: {\r\n 'vue-img-loader': VueImgLoader,\r\n 'loader': Circle\r\n },\r\n data() {\r\n return {\r\n colors: false,\r\n upload: false\r\n }\r\n },\r\n computed: {\r\n ...mapGetters({\r\n templates: 'templates'\r\n })\r\n }\r\n}\r\n\u003C/script>\r\n```\r\n\r\n```\r\n\u003Ctemplate>\r\n\u003Cnav style=\"margin-bottom: 0px;\" class=\"navbar navbar-expand-md navbar-static ms-navbar ms-navbar-primary\">\r\n \u003Cdiv class=\"container container-full\">\r\n \u003Cdiv class=\"navbar-header\">\r\n \u003Cnuxt-link class=\"navbar-brand\" to=\"/\">\r\n \u003Cimg class=\"ms-logo ms-logo-sm\" src=\"\" alt=\"Webuilder\">\r\n \u003Ch1 class=\"sm-title animated fadeInRight animation-delay-6\">\r\n Webuilder\r\n \u003C/h1>\r\n \u003C/nuxt-link>\r\n \u003Ca onclick=\"$('.ms-slidebar').toggleClass('open');\" href=\"#\" class=\"ms-toggle-left btn-navbar-menu\">\r\n \u003Ci class=\"zmdi zmdi-menu\">\u003C/i>\r\n \u003C/a>\r\n \u003C/div>\r\n \u003Cdiv class=\"collapse navbar-collapse\" id=\"ms-navbar\">\r\n \u003Cul class=\"navbar-nav\">\r\n \u003Cli class=\"nav-item active\">\r\n \u003Cnuxt-link id=\"login\" @click.native=\"activeItem($event)\" class=\"nav-link\" to=\"/auth/login\">Login\u003C/nuxt-link>\r\n \u003C/li>\r\n \u003Cli class=\"nav-item\">\r\n \u003Cnuxt-link id=\"register\" @click.native=\"activeItem($event)\" class=\"nav-link\" to=\"/auth/register\">Register\u003C/nuxt-link>\r\n \u003C/li>\r\n \u003Cli class=\"nav-item\">\r\n \u003Cnuxt-link id=\"home\" class=\"nav-link\" to=\"/\">Go back\u003C/nuxt-link>\r\n \u003C/li>\r\n \u003Cli class=\"nav-item\">\r\n \u003Cnuxt-link class=\"nav-link\" to=\"/profile\">{{ this.user.name }}\u003C/nuxt-link>\r\n \u003C/li>\r\n \u003C/ul>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/nav>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport {\r\n mapGetters\r\n} from 'vuex'\r\nexport default {\r\n data() {\r\n return {\r\n user: ''\r\n }\r\n },\r\n methods: {\r\n activeItem(event) {\r\n var element = $('.active');\r\n $(element).removeClass('active')\r\n element = this.$global.findElement(event.srcElement.id, 'li')\r\n $(element).addClass('active')\r\n }\r\n },\r\n computed: {\r\n ...mapGetters({\r\n user: 'user'\r\n })\r\n }\r\n}\r\n\u003C/script>\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/c2697\">#c2697\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2063],{"name":2053,"color":2054},3115,"403 - In a weird way?","2023-01-18T16:09:58Z","https://github.com/nuxt/nuxt/issues/3115",0.7621984,{"description":2070,"labels":2071,"number":2074,"owner":1991,"repository":1992,"state":2018,"title":2075,"updated_at":2076,"url":2077,"score":2078},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.13.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.8\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.8\n\n### Reproduction\n\n-\n\n### Description\n\nDefault classes of container in [docs](https://ui3.nuxt.dev/components/container#theme) is:\n```ts\nexport default defineAppConfig({\n ui: {\n container: {\n base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'\n }\n }\n})\n```\n**But no one of classes except `mx-auto` is not was created.**\nI change `--ui-container` variable like in [docs](https://ui3.nuxt.dev/getting-started/theme#container):\n```css\n/** app.css */\n\n@import 'tailwindcss';\n@import '@nuxt/ui';\n\n@theme {\n --container-xl: 1280px;\n}\n\n:root {\n --ui-container: var(--container-xl);\n}\n```\nAs result, container classes is `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` and still not was created, except `mx-auto`.\n\nBut if i create `app.config.ts`:\n```ts\nexport default defineAppConfig({\n ui: {\n container: {\n base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'\n }\n }\n})\n```\nAll is ok, width and other classes are created and applying.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2072,2073],{"name":2014,"color":2015},{"name":1988,"color":1989},2655,"Classes of container component are not working properly","2024-11-16T13:13:33Z","https://github.com/nuxt/ui/issues/2655",0.7629622,{"description":2080,"labels":2081,"number":2083,"owner":1991,"repository":1992,"state":2018,"title":2084,"updated_at":2085,"url":2086,"score":2087},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.11.0\n- Nuxt Version: 3.14.0\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.2\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/eslint@0.5.7, @nuxt/fonts@0.7.2, @nuxt/ui@2.19.0, @vueuse/nuxt@10.11.1, @pinia/nuxt@0.5.5, @pinia-plugin-persistedstate/nuxt@1.2.1, @nuxtjs/i18n@8.5.6, @nuxtjs/tailwindcss@6.12.2, @vite-pwa/nuxt@0.10.6\n- Build Modules: -\n------------------------------\n\n### Version\n\nv.2.19.0\n\n### Reproduction\n\nUpgrade nuxt/ui to latest 2.19.0 version\n\n### Description\n\nSelectMenu component is broken from what it seems to be a mistake in the a merge conflict.\n\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2082],{"name":2014,"color":2015},2534,"Critical bug in SelectMenu.vue","2024-11-05T16:58:09Z","https://github.com/nuxt/ui/issues/2534",0.7655328,{"description":2089,"labels":2090,"number":2093,"owner":1991,"repository":1992,"state":2018,"title":2094,"updated_at":2095,"url":2096,"score":2097},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: bun@1.1.33\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv3.0.0-alpha.7\n\n### Reproduction\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Description\n\nHi :) I am getting type errors when using `compoundVariant`. \n\nFor example, here is my `app.config.ts`:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\nI am getting the following type error for `compoundVariants`:\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2091,2092],{"name":2014,"color":2015},{"name":1988,"color":1989},2481,"Type error on `compoundVariants`","2024-10-28T21:43:49Z","https://github.com/nuxt/ui/issues/2481",0.7660331,["Reactive",2099],{},["Set"],["ShallowReactive",2102],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"gL_K-eRdDvl7LBl2trE-vGpsk-zzDHpcCwdCnuHQBXk":-1},"/nuxt/ui/2523"]