\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```",[1984,1987],{"name":1985,"color":1986},"bug","d73a4a",{"name":1988,"color":1989},"v3","49DCB8",2766,"nuxt","ui","closed","Badge border radius is wrong (NavigationMenu)","2024-11-26T11:23:27Z","https://github.com/nuxt/ui/issues/2766",0.7155462,{"labels":1999,"number":2003,"owner":1991,"repository":1991,"state":1993,"title":2004,"updated_at":2005,"url":2006,"score":2007},[2000],{"name":2001,"color":2002},"3.x","29bc7f",11875,"TailwindCSS only works on client-side","2023-01-19T15:48:25Z","https://github.com/nuxt/nuxt/issues/11875",0.7272393,{"labels":2009,"number":2016,"owner":1991,"repository":1991,"state":1993,"title":2017,"updated_at":2018,"url":2019,"score":2020},[2010,2013],{"name":2011,"color":2012},"enhancement","8DEF37",{"name":2014,"color":2015},"2.x","d4c5f9",6580,"Update vue-router dependency to 3.1.x","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6580",0.73472893,{"description":2022,"labels":2023,"number":2025,"owner":1991,"repository":1991,"state":1993,"title":2026,"updated_at":2027,"url":2028,"score":2029},"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>",[2024],{"name":2014,"color":2015},2028,"Customizing Buefy in nuxt.js","2023-01-18T15:42:55Z","https://github.com/nuxt/nuxt/issues/2028",0.7424275,{"labels":2031,"number":2039,"owner":1991,"repository":1991,"state":1993,"title":2040,"updated_at":2041,"url":2042,"score":2043},[2032,2035,2038],{"name":2033,"color":2034},"stale","ffffff",{"name":2036,"color":2037},"pending triage","E99695",{"name":2014,"color":2015},9546,"With Tailwind: adding \u003Cstyle> to SFC breaks HMR","2024-05-01T09:34:47Z","https://github.com/nuxt/nuxt/issues/9546",0.74342585,{"labels":2045,"number":2054,"owner":1991,"repository":1991,"state":1993,"title":2055,"updated_at":2056,"url":2057,"score":2058},[2046,2047,2048,2051],{"name":2001,"color":2002},{"name":1985,"color":1986},{"name":2049,"color":2050},"components","05B979",{"name":2052,"color":2053},"❗ p4-important","D93F0B",13538,"Autoimport components dir","2023-10-06T09:49:35Z","https://github.com/nuxt/nuxt/issues/13538",0.74430543,{"description":2060,"labels":2061,"number":2064,"owner":1991,"repository":1991,"state":1993,"title":2065,"updated_at":2066,"url":2067,"score":2068},"### Versions\r\n\r\n- nuxt: v2.15.3\r\n- node: v16.0.0\r\n\r\n### Reproduction\r\n\r\nNo code, I have a question that is hopefully just a misunderstanding about NuxtJS.\r\n\r\n### Steps to reproduce\r\n\r\nWorking Example\r\n1. Go to https://lloydm.io\r\n2. Scroll and notice the CSS styling around the headers\r\n3. Click the menu in the top right, go to \"Publications\"\r\n4. Click my head to go back to the main page. Everything works fine.\r\n\r\nBroken Example\r\n1. Go directly to https://lloydm.io/career/research/publications\r\n2. Now click my head in the top left to go back to the home page\r\n3. Notice the styling is no longer correct\r\n4. Refresh the page, styling is fixed\r\n\r\n### What is Expected?\r\n\r\nI expect that the styling applied to each independent of how you got there. However, it appears that the styling is only properly applied if the user arrives at my site directly to the home page.\r\n\r\n### What is actually happening?\r\n\r\nStyling is not always applied correctly.\r\n\r\n### Additional Notes\r\n\r\n- I arrived at this current issue originally when my pages were not rending at all. It appeared to be some issue with fetch not being called in components. Issues #7799 and #7791 seem to discuss this, but the issue persists. I fixed that problem by moving all requests (to the Nuxt Content API) to asyncData methods in the pages above those components (not ideal, but works). However, now I still have this persistent css styling issue.\r\n- I am using TailwindCSS for the majority of my styling. Most of the time inline in the HTML, but also using `@apply` in the style tags of Vue. This could be the issue but due to the complexity of the Nuxt static site generator, I have no idea how to start looking into this.\r\n\r\nAny and all help is appreciated. I know I have not posted code or configs, but I think I am misunderstanding something basic about how NuxtJS works, and therefore hoping the issue can be resolve with a couple comments. Otherwise, I can look into making my code public in some way.\r\n\r\nLloyd",[2062,2063],{"name":2036,"color":2037},{"name":2014,"color":2015},9325,"Static Site Generation Issue: CSS Styles Applied Differently Depending on Site Navigation","2023-01-22T15:44:58Z","https://github.com/nuxt/nuxt/issues/9325",0.7455979,{"description":2070,"labels":2071,"number":2076,"owner":1991,"repository":1991,"state":1993,"title":2077,"updated_at":2078,"url":2079,"score":2080},"Hi, I am trying to get this awesome framework to work with [vue-awesome](https://github.com/Justineo/vue-awesome) but I can't manage to do it.\r\n\r\nI added this to my nuxt.config.js\r\n`build: {\r\n\t\tvendor: ['vue-awesome']\r\n\t}`\r\n\r\nI added this to my default.vue\r\n\r\n`import Icon from \"vue-awesome/components/Icon.vue\"; \r\n\timport \"vue-awesome/icons\"; `\r\n\r\n`\r\n\texport default {\r\n\t\tcomponents: {\r\n\t\t\tIcon\r\n\t\t}\r\n\t}`\r\n\r\nHowever when I put icon components in my pages, it does not show, but is visible in the chrome dev tools.\r\n\r\nIs there a proper way to do this?\r\n\r\nI am new to Nuxt.\r\nThanks for your help.\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/c147\">#c147\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2072,2075],{"name":2073,"color":2074},"question","cc317c",{"name":2014,"color":2015},174,"Work with vue-awesome","2023-01-18T15:38:32Z","https://github.com/nuxt/nuxt/issues/174",0.7457888,{"description":2082,"labels":2083,"number":2087,"owner":1991,"repository":1992,"state":1993,"title":2088,"updated_at":2089,"url":2090,"score":2091},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.11.0\n- Nuxt Version: 3.14.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/icon@1.10.3, @nuxt/content@2.13.4, @nuxt/ui@2.20.0, @dargmuesli/nuxt-cookie-control@8.4.20, @pinia/nuxt@0.9.0\n- Build Modules: -\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-dbszxsce?file=app.vue\n\n### Description\n\nWhen I ran chrome lighthouse, the results showed that the breadcrumb section was detected as not complying with the recommendation.\n\nI'm using `icon` only without label with defined `to` at first of Links array, to make it more descriptive as lighthouse said, i pass `'aria-label'` property and its value to object of `Links`, at first i thought it would work because as the documentation said about Breadcrumb:\n\n> You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as to, exact, etc. \n> Reference: https://ui.nuxt.com/components/breadcrumb#usage\n\nwell the attrbute is not rendered, but if i pass `ariaLabel` property, the attribute is rendered correctly (with `-` symbol) **Without reloading or HMR triggered,** , and if the page refreshed, it's broken (`-` symbol missing) \n\nNote: i always apply it to every NuxtLink though, aria-label is working as expected\n\nIs there any such way to apply aria-label without `'label'` on object of the links?\n\n### Additional context\n\nattribute rendered as expected (HMR trigger)\n\n\ndash symbol is missing after page reload\n",[2084,2085],{"name":1985,"color":1986},{"name":2086,"color":2034},"triage",3007,"UBreadcrumb wont render aria attribute","2025-03-24T17:55:54Z","https://github.com/nuxt/ui/issues/3007",0.74594694,{"labels":2093,"number":2094,"owner":1991,"repository":1991,"state":1993,"title":2055,"updated_at":2095,"url":2096,"score":2097},[],13657,"2023-01-19T17:02:40Z","https://github.com/nuxt/nuxt/issues/13657",0.74787,["Reactive",2099],{},["Set"],["ShallowReactive",2102],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"N43deAm0F8ZZj-aLECYdhpXRASf8GJgZNWrUoIvFlnk":-1},"/nuxt/ui/3683"]