\n\n\u003Cimg width=\"912\" height=\"578\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/71fb37a4-3959-413f-9076-74f63eee0108\" />\n\nNormal button:\n```html\n\u003CUButton\n color=\"info\"\n variant=\"soft\"\n size=\"xl\"\n icon=\"i-heroicons-question-mark-circle\"\n class=\"rounded-full\"\n aria-label=\"Show keyboard shortcuts\"\n />\n```\n\nIm using Nuxt4 and NuxtUI 3",[],416,"nuxt","icon","open","NuxtUI icons forced to width and height 1em!","2025-07-22T16:50:58Z","https://github.com/nuxt/icon/issues/416",0.715507,{"description":3148,"labels":3149,"number":3150,"owner":3140,"repository":3141,"state":3151,"title":3152,"updated_at":3153,"url":3154,"score":3155},"\r\nHello, \r\nThanks for this wonderful module that makes it easier to use icons seamlessly in Nuxt.\r\nThere is need to fix the typo for **icon** under the _**attributes**_ section.",[],98,"closed","Typo in readme","2023-08-17T10:45:48Z","https://github.com/nuxt/icon/issues/98",0.7233617,{"description":3157,"labels":3158,"number":3150,"owner":3140,"repository":3159,"state":3151,"title":3160,"updated_at":3161,"url":3162,"score":3155},"I am using the new nuxt/scripts module and a little confused. I want to enable the lemonsqueezy script globally, I have multiple pages where this is needed. How should I do this? the [docs](https://scripts.nuxt.com/scripts/payments/lemon-squeezy#example) tell me to do the below and I added this in my `app.vue`\r\n\r\n```html\r\n\u003Cscript setup>\r\nconst { Setup } = useScriptLemonSqueezy();\r\nonMounted(() => {\r\n Setup();\r\n});\r\n\u003C/script>\r\n```\r\n\r\nWhats happening\r\n\r\n1. `index.vue` pages opens the checkout overlay\r\n2. `[...productId].vue` pages open the checkout overlay if I open the page directly, but not when I navigate to this page from a `\u003CNuxtLink />` \r\n\r\nI thought this was an issue with the lemon.js script, but when I navigate to the product page from a NuxtLink, I can see `window.LemonSqueezy` has a been initiated which is confusing me even further, everything is working from both parties yet the checkout wont open in the overlay.\r\n\r\nHere's a repro - https://stackblitz.com/edit/github-zk9jpe?file=pages%2Findex.vue",[],"scripts","Weird behaviour with lemonsqueezy script from registry","2024-07-06T11:13:23Z","https://github.com/nuxt/scripts/issues/98",{"description":3164,"labels":3165,"number":3166,"owner":3140,"repository":3141,"state":3151,"title":3167,"updated_at":3168,"url":3169,"score":3170},"url(\"data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M20 6c0-2.168-3.663-4-8-4S4 3.832 4 6v2c0 2.168 3.663 4 8 4s8-1.832 8-4V6zm-8 13c-4.337 0-8-1.832-8-4v3c0 2.168 3.663 4 8 4s8-1.832 8-4v-3c0 2.168-3.663 4-8 4z' fill='black'/%3E%3Cpath d='M20 10c0 2.168-3.663 4-8 4s-8-1.832-8-4v3c0 2.168 3.663 4 8 4s8-1.832 8-4v-3z' fill='black'/%3E%3C/svg%3E\")\r\n\r\nThe test environment is fine, but the production environment will not be able to display the icon. If I change the https in xmlns to http, it will display.\r\n\r\n\r\n\r\n",[],221,"[Bug] Icon cannot be displayed when used with nuxt-ui","2024-08-11T05:47:37Z","https://github.com/nuxt/icon/issues/221",0.7306655,{"description":3172,"labels":3173,"number":3183,"owner":3140,"repository":3184,"state":3151,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\n## Why?\nQR codes are widely used in scenarios such as \"sharing links\", \"payment codes\", \"event tickets\", and \"product information\" in enterprise projects (e.g., e-commerce, admin systems, marketing pages). \n\nCurrently, Nuxt UI users need to manually integrate third-party libraries (e.g., `qrcode.vue`, `vue-qrcode-reader`) to implement QR code functions, which has the following pain points:\n- Lack of consistency with Nuxt UI's design system (e.g., theme colors, rounded corners, responsive adaptation).\n- Need to handle compatibility issues between third-party libraries and Nuxt 3 (e.g., SSR support, tree-shaking).\n- No built-in accessibility support (e.g., screen reader prompts, keyboard navigation for QR code download).\n\nAdding an official QRCode component can reduce user development costs and ensure consistency with the Nuxt UI ecosystem.\n\n### Additional context\n\n## What?\n### Basic Features (Must-have)\n- [x] Support dynamic content binding (e.g., bind `value` prop to generate QR code for links/texts like `https://nuxt.com`).\n- [x] Support size customization (via `size` prop, e.g., `size=\"128\"` for 128x128px, default to `160`).\n- [x] Support color customization (via `foregroundColor`/`backgroundColor` props, default to Nuxt UI's `--color-primary` and `--color-background` to fit the theme).\n- [x] Support error correction level (via `errorCorrectionLevel` prop, options: `L`/`M`/`Q`/`H`, default to `M` for common scenarios).\n- [x] SSR compatibility (ensure no client-side only errors when rendering on the server).\n- [x] Basic accessibility (add `aria-label` to describe the QR code content, e.g., \"QR code for Nuxt official website: https://nuxt.com\").\n\n### Advanced Features (Nice-to-have)\n- [ ] Support logo embedding (via `logo` prop, accept image URL; `logoSize` prop to control logo ratio, default to 15% of QR code size).\n- [ ] Support QR code download (built-in `download` method or `showDownloadButton` prop to display a default button, consistent with Nuxt UI's Button component style).\n- [ ] Support border customization (via `borderSize`/`borderColor` props, default to `0` for no border).\n- [ ] Support dark/light mode adaptation (automatically switch `foregroundColor` when color mode changes, if not manually set).\n\n## How?\n### API Design (Proposed)\n| Prop | Type | Default | Description |\n|---------------------|-----------|---------------|----------------------------------------------|\n| `value` | `string` | `required` | The content to generate QR code (e.g., link, text). |\n| `size` | `number` | `160` | QR code size (width = height, unit: px). |\n| `foregroundColor` | `string` | `--color-primary` | QR code block color (supports Tailwind class or hex/rgb). |\n| `backgroundColor` | `string` | `--color-background` | QR code background color. |\n| `errorCorrectionLevel` | `string` | `M` | Error correction level: `L`(7%), `M`(15%), `Q`(25%), `H`(30%). |\n| `logo` | `string` | `undefined` | Logo image URL (if provided, embed in the center). |\n| `logoSize` | `number` | `15` | Logo size ratio (15 = 15% of QR code size). |\n| `showDownloadButton`| `boolean` | `false` | Whether to show a default download button. |\n| `downloadName` | `string` | `qrcode` | File name when downloading (without extension). |\n\n### Usage Example (Pseudo-code)\n```vue\n\u003Ctemplate>\n \u003C!-- Basic usage -->\n \u003CUQRCode \n value=\"https://nuxt.com/ui\" \n size=\"200\"\n aria-label=\"QR code for Nuxt UI official website: https://nuxt.com/ui\"\n />\n\n \u003C!-- With logo and download button -->\n \u003CUQRCode \n value=\"https://github.com/nuxt/ui\"\n logo=\"https://nuxt.com/favicon.ico\"\n logoSize=\"20\"\n showDownloadButton\n downloadName=\"nuxt-ui-qrcode\"\n />\n\u003C/template>",[3174,3177,3180],{"name":3175,"color":3176},"enhancement","a2eeef",{"name":3178,"color":3179},"triage","ffffff",{"name":3181,"color":3182},"v4","49DCB8",4932,"ui","[Component Request] Add QRCode component (support customization & accessibility)","2025-09-09T15:06:36Z","https://github.com/nuxt/ui/issues/4932",0.739253,{"labels":3190,"number":3199,"owner":3140,"repository":3140,"state":3151,"title":3200,"updated_at":3201,"url":3202,"score":3203},[3191,3193,3196],{"name":3175,"color":3192},"8DEF37",{"name":3194,"color":3195},"3.x","29bc7f",{"name":3197,"color":3198},"cli","09F665",12845,"`nuxi typecheck` shortcut","2023-01-19T16:37:30Z","https://github.com/nuxt/nuxt/issues/12845",0.74170595,{"description":3205,"labels":3206,"number":3207,"owner":3140,"repository":3141,"state":3151,"title":3208,"updated_at":3209,"url":3210,"score":3211},"When I used the latest [Nuxt UI Pro Docs Theme](https://github.com/nuxt-ui-pro/docs) and added Nuxt Scripts, I encountered some missing icons.\r\n\r\n**To reproduce:**\r\n\r\n- Clone \"Nuxt UI Pro Docs\"\r\n- Add Nuxt Scripts as dependency\r\n- Deploy to Vercel with `npx nuxi generate`\r\n- Find missing Icons \r\n\r\n\r\n**Missing Icons when Client Side Rendering:**\r\n\u003Cimg width=\"940\" alt=\"image\" src=\"https://github.com/user-attachments/assets/acdfa7df-ded1-4811-8305-320ca99303c2\">\r\n\r\n**Cannot Find icons:**\r\n\u003Cimg width=\"1179\" alt=\"image\" src=\"https://github.com/user-attachments/assets/fe1135ff-9ef2-4157-bd58-dc7e00f566c1\">\r\n\r\n**Server Rendered:** \r\n\u003Cimg width=\"810\" alt=\"image\" src=\"https://github.com/user-attachments/assets/4f5d37a0-b5f1-4521-b566-f0a74c034427\">\r\n\r\nMaybe this is also interesting for you @benjamincanac, @harlan-zw",[],220,"Issues when Prerender with `nuxt generate`","2024-07-30T17:48:07Z","https://github.com/nuxt/icon/issues/220",0.7432153,{"description":3213,"labels":3214,"number":3218,"owner":3140,"repository":3184,"state":3151,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### Description\n\nI'm making a voting system visualizer with Nuxt UI.\n\n\n\nHere, I need to add ❌ for unchecked items, which doesn't seem easy now.\n\n### Additional context\n\n_No response_",[3215,3216],{"name":3175,"color":3176},{"name":3217,"color":3182},"v3",4039,"Supports changing unchecked icon of `\u003CUCheckbox>` `\u003CUCheckboxGroup>`","2025-05-23T13:21:58Z","https://github.com/nuxt/ui/issues/4039",0.743229,{"description":3224,"labels":3225,"number":3231,"owner":3140,"repository":3184,"state":3151,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### Environment\n\nN/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/input#loading-icon\n\n### Description\n\nBoth icons, the one shown in the example `i-lucide-repeat-2` and the component's default prop, `i-lucide-refresh-cw` look bad when rotated. I think there's a lot of room for improvement, these icons aren't meant to be animated.\n\nLuckily, there are some Lucide icons which _are_ designed to be animated.\n\nHow about https://lucide.dev/icons/loader-circle?\n\nOr https://lucide.dev/icons/loader?\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3226,3229,3230],{"name":3227,"color":3228},"bug","d73a4a",{"name":3217,"color":3182},{"name":3178,"color":3179},4162,"`Input`'s default loading icon needs improvement","2025-05-16T16:06:11Z","https://github.com/nuxt/ui/issues/4162",0.7438412,{"description":3237,"labels":3238,"number":3246,"owner":3140,"repository":3140,"state":3151,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### Environment\r\n\r\nNo need.\r\n\r\n### Reproduction\r\n\r\nNo need.\r\n\r\n### Describe the bug\r\n\r\nhttps://nuxt.com/docs/api/configuration/nuxt-config#extractcss\r\n\r\nhttps://github.com/nuxt/nuxt/blob/a672cd7a4291eb812d76b9841ec516cd8609c680/packages/webpack/src/presets/style.ts#L30\r\n\r\nDuring my investigation of a type error within `@nuxt/bridge`'s `defineNuxtConfig`, I discovered that `extract-css-chunks-webpack-plugin` has been replaced with `mini-css-extract-plugin` in nuxt3. As a result, the documentation description requires an update.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3239,3242,3245],{"name":3240,"color":3241},"documentation","5319e7",{"name":3243,"color":3244},"good first issue","fbca04",{"name":3194,"color":3195},21058,"docs: wrong `extractcss` description","2023-05-25T14:17:24Z","https://github.com/nuxt/nuxt/issues/21058",0.7443481,["Reactive",3252],{},["Set"],["ShallowReactive",3255],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fGLYwQlGsUd46EFPlH-qAxycj8y4uac-6uJLhFxrFd9Y":-1},"/nuxt/ui/4940"]