\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst flip = ref(false);\r\n\u003C/script>\r\n```\r\n\r\nWhile this works fine with nuxt-icon during development, it breaks in a Prod build. The transformations no longer get applied.\r\n\r\nIt would be great if nuxt-icon could also support these props, if possible. I'm open to help with this issue if someone could give me some pointers where to start.",[],138,"icon","[Feature Request] Support Iconify Transformations","2024-03-15T09:15:14Z","https://github.com/nuxt/icon/issues/138",0.76305455,{"description":3041,"labels":3042,"number":3043,"owner":3024,"repository":3025,"state":3026,"title":3044,"updated_at":3045,"url":3046,"score":3047},"As mentioned, I just ran into this issue—using inline styles to specify fonts cost me a lot of time debugging.\n\n!! not work:\n```\n\u003Cdiv style=\"{font-family: 'xxx'}\">\n```\n\nas a reminder.\n\n",[],649,"[DOC]: It is recommended to add a usage note: Inline styles will not work.","2025-06-10T06:25:32Z","https://github.com/nuxt/fonts/issues/649",0.76402617,{"description":3049,"labels":3050,"number":3057,"owner":3024,"repository":3058,"state":3026,"title":3059,"updated_at":3060,"url":3061,"score":3062},"### Description\n\n## No Clear Documentation for Targeting Active Styles in `NavigationMenu` Component\n\n### Description\n\nI'm trying to apply custom styles to the active state of a menu item in the `NavigationMenu` component, but there doesn't seem to be any clear documentation on how to do this.\n\nThe [theming docs](https://ui.nuxt.com/getting-started/theme#props) mention using the `:ui` attribute to target internal parts of a component, and the [theme structure for `NavigationMenu`](https://ui.nuxt.com/components/navigation-menu#theme) shows a large theme object. However, attempting to follow that structure often results in unexpected behavior—like rendering `[object Object]`, which suggests that it doesn't expect an object or the nested configuration isn’t being parsed correctly.\n\nEven large language models get tripped up when referencing the documentation. Some approaches I've tried (unsuccessfully) include:\n\n```js\nlink: {\n base: 'px-3 py-2 rounded-md',\n active: 'bg-primary text-white font-medium'\n},\nvariants: {\n active: {\n true: {\n item: 'bg-primary text-white font-medium'\n }\n }\n}\n```\n\nThe only working solution so far is using data-* attributes like this:\n```js\nlink: 'text-md data-active:bg-primary data-active:text-white'\n```\nWhile this works, it’s undocumented and feels fragile—it could easily break with a future update if it’s not the intended method.\n\n### Question\nWhat is the official and supported way to apply styles based on active state for subcomponents like link in NavigationMenu?",[3051,3054],{"name":3052,"color":3053},"question","d876e3",{"name":3055,"color":3056},"v3","49DCB8",4279,"ui","Targeting active menu styles","2025-06-02T10:32:24Z","https://github.com/nuxt/ui/issues/4279",0.769206,{"description":3064,"labels":3065,"number":3073,"owner":3024,"repository":3058,"state":3026,"title":3074,"updated_at":3075,"url":3076,"score":3077},"### Description\n\nFont family, colors and used icons can be customized globally in app.config.ts which is great! Unfortunately the used font-weights cant. Instead every component that uses a specific font-weight needs to be identified and then overwritten manually per component.\n\nE.g. when we want `font-medium` everywhere instead of `font-semibold`, we have to do:\n\n```ts\nui: {\n table: {\n slots: {\n th: 'font-medium',\n },\n },\n modal: {\n slots: {\n title: 'font-medium'\n },\n },\n}\n```\n\nFeature request:\n\n```ts\nui: {\n font-weights: {\n normal: 'font-normal',\n medium: 'font-medium',\n semi-bold: 'font-medium'\n }\n}\n```\n\n### Additional context\n\n_No response_",[3066,3069,3070],{"name":3067,"color":3068},"enhancement","a2eeef",{"name":3055,"color":3056},{"name":3071,"color":3072},"triage","ffffff",4506,"Customize font-weights globally","2025-07-11T15:43:11Z","https://github.com/nuxt/ui/issues/4506",0.7708,{"description":3079,"labels":3080,"number":3081,"owner":3024,"repository":3025,"state":3026,"title":3082,"updated_at":3083,"url":3084,"score":3085},"Not sure if this is a bug or just me, but I found that when I used local fonts (put inside /public/fonts directory), and have this in my main.css\n\n```\n@theme inline {\n --font-sans: \"Roboto\", sans-serif;\n}\n```\n\nIt's not loaded. But if I do this:\n\n```\n@theme {\n --font-sans: \"Roboto\", sans-serif;\n}\n```\n\nIt works.",[],638,"Local fonts with TailwindCSS v4 not loaded if using @theme inline","2025-05-27T07:25:13Z","https://github.com/nuxt/fonts/issues/638",0.7733241,{"description":3087,"labels":3088,"number":3089,"owner":3024,"repository":3090,"state":3091,"title":3092,"updated_at":3093,"url":3094,"score":3095},"- [ ] Roobert font looses it's \"modern\" look on bold weights, I'd use max Semi Bold weight for it in every heading (add more font size instead)\n- [ ] Roobert font has lot's of stylistic set options, like this, compare \"y\" (font-feature-settings: \"ss03\")\n\n\u003Cimg width=\"641\" alt=\"Screenshot 2022-04-05 at 18 07 38\" src=\"https://user-images.githubusercontent.com/45076741/161789876-797bcaa2-a13d-464c-915f-78ecc265f282.png\">\n\n\u003Cimg width=\"641\" alt=\"Screenshot 2022-04-05 at 18 07 24\" src=\"https://user-images.githubusercontent.com/45076741/161789900-aee7f3d2-bc4c-44de-a229-cb6d024ad237.png\">\n\n- [ ] show dropdown on header navigation links on hover, instead of click (#285)\n- [x] dropdown surface looks blurred with background and header, especially on small screens (border/shadow/background/positioning to show it's floating surface could fix this)\n\n\u003Cimg width=\"1019\" alt=\"Screenshot 2022-04-05 at 18 29 57\" src=\"https://user-images.githubusercontent.com/45076741/161790191-27f36aaf-9b76-438a-a981-7d8fb75450d5.png\">\n\n- [ ] white/black contrast button in header looks like it has broken color mode styling (I think primary color is better for CTA)\n- [x] hamburger menu icon is boring and too small\n- [x] different container padding for header and overlaying mobile menu (open/close hamburger button sitting in different places)\n\nhttps://user-images.githubusercontent.com/45076741/161790407-db405256-5b76-4897-b582-aa4c83f8023d.mp4\n\n\n- [x] text size is too small in lot's of places (overlay navigation menu, ...). can hardly read it, also small tap area for touch screens\n\n\u003Cimg width=\"432\" alt=\"Screenshot 2022-04-05 at 18 33 03\" src=\"https://user-images.githubusercontent.com/45076741/161790852-2b8a4087-828e-40b3-b0b1-aaa8372d2d85.png\">\n\n- [x] overlay scrim background is too light in dark mode\n\n\u003Cimg width=\"718\" alt=\"Screenshot 2022-04-05 at 18 34 21\" src=\"https://user-images.githubusercontent.com/45076741/161791059-dfd5a3c8-8054-4ad7-be65-267efe6b206a.png\">\n\n- [ ] native scrollbars looks bad in dark mode (nuxtlabs/nuxt.com#287)\n- [ ] nested navigation in mobile overlay menu looks crowded because of vertical line effect (nuxtlabs/nuxt.com#297)\n\n\u003Cimg width=\"718\" alt=\"Screenshot 2022-04-05 at 18 35 04\" src=\"https://user-images.githubusercontent.com/45076741/161791303-b529765d-8eaf-476e-ac25-3149779166b3.png\">\n\n- [x] ToC is missing on mobile view\n- [x] ToC scrollspy doesn't work\n- [x] not sure about putting Prev/Next in ToC\n- [x] what Play button in ToC means?\n\n\u003Cimg width=\"267\" alt=\"Screenshot 2022-04-05 at 18 36 22\" src=\"https://user-images.githubusercontent.com/45076741/161791589-031ea821-a949-4155-9a72-3c7bcfb0c8a5.png\">\n\n- [ ] nested ToC items has unreadable text size\n- [x] scroll to top on click on ToC items (and text headings) is broken\n- [x] right aligning and truncating of ToC items looks weird\n\n\u003Cimg width=\"214\" alt=\"Screenshot 2022-04-05 at 18 23 22\" src=\"https://user-images.githubusercontent.com/45076741/161791724-2bd0e03e-8d17-4c11-a3c0-a85419b6f3fd.png\">\n\n- [ ] prose text font size is too small\n- [ ] prose underlines in headings interfere reading (maybe adding some space will fix, but I'd remove it completely)\n- [ ] prose no hover effect on clickable headings\n- [ ] prose code snippets highlightning doesn't feel like a part of whole design\n\nMore general suggestions:\n- [ ] full screen container, without max-width\n- [ ] much bigger font sizes almost everywhere, including buttons\n- [ ] do not use very bold Roobert\n",[],272,"nuxt.com","closed","Visual/UX review","2022-07-04T13:36:44Z","https://github.com/nuxt/nuxt.com/issues/272",0.47315222,{"description":3097,"labels":3098,"number":3104,"owner":3024,"repository":3090,"state":3091,"title":3105,"updated_at":3106,"url":3107,"score":3108},"- [x] We never use \"Roobert Bold\" you should replace all the \"font-bold\" by the semi bold version\n\n\n- [x] Prose base color must be gray-600 in light mode \n\n\n- [x] Cards have 12px border radius\n- [x] Buttons have 8px border radius",[3099,3101],{"name":3067,"color":3100},"1ad6ff",{"name":3102,"color":3103},"design","00bd6f",515,"[UI] Improvements","2022-05-20T13:20:47Z","https://github.com/nuxt/nuxt.com/issues/515",0.69882065,{"description":3110,"labels":3111,"number":3116,"owner":3024,"repository":3058,"state":3091,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v18.20.4\n- Nuxt Version: 3.13.2\n- CLI Version: 3.15.0\n- Nitro Version: 2.9.7\n- Package Manager: pnpm@9.12.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.7\n- Build Modules: -\n------------------------------\n\n### Version\n\nv3.0.0-alpha.7\n\n### Reproduction\n\nThe `:ui` prop is not handled by the component ButtonGroup ?\n\n### Description\n\nI tried to add somme classes to the ButtonGroup component, with `class=` attribute, with `:ui=` attribute, but it seems that nothing works.\n\n\n\n### Additional context\n\nI've tried to look into the code, but I don't understand all the magic you've done !\n\n### Logs\n\n_No response_",[3112,3115],{"name":3113,"color":3114},"bug","d73a4a",{"name":3055,"color":3056},2498,"[v3] ButtonGroup : class and ui attributes not handled ?","2024-10-31T09:25:42Z","https://github.com/nuxt/ui/issues/2498",0.7398392,{"description":3122,"labels":3123,"number":3128,"owner":3024,"repository":3058,"state":3091,"title":3129,"updated_at":3130,"url":3131,"score":3132},"### Description\r\n\r\nSometimes, I'd like to programmatically disable a form (e.g. until certain conditions on the page are met, or while the current submission request is pending). Currently, the form doesn't have such behavior\r\n\r\n### Additional context\r\n\r\n_No response_",[3124,3125,3127],{"name":3067,"color":3068},{"name":3126,"color":3072},"wontfix-v2",{"name":3055,"color":3056},2150,"Add `disabled` state to `UForm` component","2024-09-06T16:59:53Z","https://github.com/nuxt/ui/issues/2150",0.75558335,["Reactive",3134],{},["Set"],["ShallowReactive",3137],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fn171BIcOeuz7t3HvRzuwrEkqwo4L7NiyLZv-swN12Mw":-1},"/nuxt/scripts/272"]