\r\n\u003C/template>`)\r\n```\r\n- 2 components\r\n\r\nthe first of which is:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CIcon name=\"heroicons:information-circle\"/>\r\n\u003C/template>\r\n```\r\n\r\nthe second component is:\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cp>Different component here\u003C/p>\r\n \u003Cdiv>\r\n \u003Cslot/>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n- 1 single simple content markdown page using the two components:\r\n```md\r\n# Issue reproduction\r\n\r\nFirst component (icon):\r\n::ComponentWithIcon\r\n::\r\n\r\n::SecondComponent\r\nWe have some more content here\r\n- nsetetur sadipscing elitr,\r\n::\r\n```\r\n\r\n### Describe the bug\r\n\r\nWhen the page is visited (in dev mode with `bun dev`), it completely freezes up (both Firefox and Chrome), \r\nwith no text being selectable, developer console not opening if it hasn't already been opened or opening blank, browser not even closing properly, and this warning is printed hundreds of times repeatedly in the console:\r\n```\r\nAvoid app logic that relies on enumerating keys on a component instance.\r\nThe keys will be empty in production mode to avoid performance overhead.\r\n```\r\n(the reproduction does not have a single \u003Cscript> tag in the whole repository)\r\n\r\nHowever, this issue does not occur when a production build is being done with `bun run build`.\r\n**When the first component (the nuxt-icon) is removed, the issue does not occur.**\r\n\r\n### Logs\r\n\r\nNo warnings / errors are outputted in the terminal where `nuxt dev` is run.\r\n",[],150,"Freezes up in Nuxt Content","2024-06-26T21:21:31Z","https://github.com/nuxt/icon/issues/150",0.73772544,{"description":2066,"labels":2067,"number":2070,"owner":1991,"repository":1992,"state":2035,"title":2071,"updated_at":2072,"url":2073,"score":2074},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-svgo@4.0.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.9\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\">\n/* Types */\nimport type { NavigationMenuItem } from \"#ui/types\";\n\nconst items = ref\u003CNavigationMenuItem[][]>([\n [\n {\n label: \"Menu\",\n defaultOpen: true,\n children: [\n {\n label: \"Submenu\",\n badge: {\n label: \"latest\",\n color: \"secondary\",\n },\n to: \"https://www.example.com\",\n target: \"_blank\",\n },\n ],\n },\n ],\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-full\">\n \u003CUNavigationMenu orientation=\"vertical\" :items=\"items\" />\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\nAfter upgrading from `alpha.8` to `alpha.9`, the border radius is wrong (different from the rest of the application) when using badge in the [NavigationMenu](https://ui3.nuxt.dev/components/navigation-menu). When inspecting HTML, this is the class (related to border radius) applied to the badge: `rounded-[calc(var(--ui-radius)]`.\n\nI also tried passing the [class](https://ui3.nuxt.dev/components/badge#class-prop) to `BadgeProps` but it doesn't work:\n```vue\n```vue\n\u003Cscript setup lang=\"ts\">\n/* Types */\nimport type { NavigationMenuItem } from \"#ui/types\";\n\nconst items = ref\u003CNavigationMenuItem[][]>([\n [\n {\n label: \"Menu\",\n defaultOpen: true,\n children: [\n {\n label: \"Submenu\",\n badge: {\n label: \"latest\",\n color: \"secondary\",\n class: \"rounded-full\", // ! NOT WORKING\n },\n to: \"https://www.example.com\",\n target: \"_blank\",\n },\n ],\n },\n ],\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-full\">\n \u003CUNavigationMenu orientation=\"vertical\" :items=\"items\" />\n \u003C/div>\n\u003C/template>\n```\nHowever, IMO the border radius should be inherited (no need to pass `class`).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2068,2069],{"name":2002,"color":2003},{"name":1988,"color":1989},2766,"Badge border radius is wrong (NavigationMenu)","2024-11-26T11:23:27Z","https://github.com/nuxt/ui/issues/2766",0.7393194,{"labels":2076,"number":2083,"owner":1991,"repository":1991,"state":2035,"title":2084,"updated_at":2085,"url":2086,"score":2087},[2077,2080],{"name":2078,"color":2079},"3.x","29bc7f",{"name":2081,"color":2082},"pending triage","E99695",26483,"Hydration style mismatch on header when using veutify and or not vuetify-nuxt-module","2024-03-26T18:06:36Z","https://github.com/nuxt/nuxt/issues/26483",0.7643611,{"description":2089,"labels":2090,"number":2094,"owner":1991,"repository":1991,"state":2035,"title":2095,"updated_at":2096,"url":2097,"score":2098},"So I have followed the guide [here](https://buefy.github.io/#/documentation/customization) but with no luck getting the customization to work. I have installed `sass-loader` and `node-sass`. \r\n\r\n**Navbar.vue** (a component in the components folder)\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cnav class=\"navbar has-shadow is-light\">\r\n \u003Cdiv class=\"container\">\r\n \u003Cdiv class=\"navbar-brand\">\r\n \u003Cnuxt-link to=\"/\" class=\"nav-item\">\r\n \u003Cimg src=\"~/assets/logo.png\">\r\n \u003C/nuxt-link>\r\n \u003C/div>\r\n \u003Cdiv class=\"navbar-menu\">\r\n \u003Cdiv class=\"navbar-start\">\r\n \u003Cnuxt-link to=\"/\" class=\"nav-item is-tab\" exact>Home\u003C/nuxt-link>\r\n \u003Cnuxt-link to=\"/about\" class=\"nav-item is-tab\" exact>About\u003C/nuxt-link>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/nav>\r\n\u003C/template>\r\n\r\n\u003Cstyle lang=\"scss\">\r\n @import \"~bulma/sass/utilities/_all\";\r\n\r\n $primary: blue;\r\n $navbar-tab-active-border-bottom-color: red;\r\n\r\n @import \"~bulma\";\r\n @import \"~buefy/src/scss/buefy\";\r\n\u003C/style>\r\n\r\n```\r\n\r\n**nuxt.config.js**\r\n\r\n```\r\nmodule.exports = {\r\n /*\r\n ** Headers of the page\r\n */\r\n head: {\r\n title: 'test',\r\n meta: [\r\n { charset: 'utf-8' },\r\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\r\n { hid: 'description', name: 'description', content: 'Nuxt.js project' }\r\n ],\r\n link: [\r\n { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }\r\n ]\r\n },\r\n /*\r\n ** Customize the progress bar color\r\n */\r\n loading: { color: '#3B8070' },\r\n /*\r\n ** Build configuration\r\n */\r\n build: {\r\n /*\r\n ** Run ESLint on save\r\n */\r\n extend (config, ctx) {\r\n if (ctx.dev && ctx.isClient) {\r\n config.module.rules.push({\r\n enforce: 'pre',\r\n test: /\\.(js|vue)$/,\r\n loader: 'eslint-loader',\r\n exclude: /(node_modules)/\r\n })\r\n }\r\n }\r\n },\r\n mode: 'spa',\r\n plugins: ['~plugins/buefy'],\r\n router: {\r\n linkActiveClass: 'is-active'\r\n }\r\n}\r\n```\r\n\r\n`$primary` and `$navbar-tab-active-border-bottom-color` are not **blue** or **red**.\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/c1802\">#c1802\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2091],{"name":2092,"color":2093},"2.x","d4c5f9",2028,"Customizing Buefy in nuxt.js","2023-01-18T15:42:55Z","https://github.com/nuxt/nuxt/issues/2028",0.76659244,["Reactive",2100],{},["Set"],["ShallowReactive",2103],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"xz1vbJlEMQdrAZngqUSnPiYmoUY93TMuZ4ePTtpZDmU":-1},"/nuxt/icon/138"]