\n\nI'm also using UModal, UCard elsewhere in the app itself, they do work there.\nSo what do I need to do to get these files parsed my vite/vue/nuxt ui?",[3137],{"name":3138,"color":3139},"question","d876e3",4892,"nuxt","ui","open","Using Nuxt UI in components from a npm package, in Vue","2025-09-05T08:48:22Z","https://github.com/nuxt/ui/issues/4892",0.7093931,{"description":3149,"labels":3150,"number":3160,"owner":3141,"repository":3142,"state":3143,"title":3161,"updated_at":3162,"url":3163,"score":3164},"### Environment\n\n- Browser: Safari 18.3\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\n## Nuxt UI Website\nhttps://github.com/user-attachments/assets/cba84f65-4c8f-4398-ae34-d2844b2ad767\n\n## My Project\nhttps://github.com/user-attachments/assets/7a88b397-14dc-4150-b396-7e1fbd1a0b7e\n\nThis by the way is not happening with the `UTabs` Example shown in the documentation.\n\n## Documentation\nhttps://github.com/user-attachments/assets/9432385f-141b-4d58-bf28-af2a68833dae\n\n### Description\n\nOn Safari (tested with 18.3) `UTabs` is flickering when switching tabs. Since this also happens on the Nuxt UI Webpage I have not created a minimal reproduction.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3151,3154,3157],{"name":3152,"color":3153},"bug","d73a4a",{"name":3155,"color":3156},"v3","49DCB8",{"name":3158,"color":3159},"triage","ffffff",4280,"`UTabs` trigger flickers when switching tabs (Safari-only)","2025-06-02T13:28:06Z","https://github.com/nuxt/ui/issues/4280",0.71265876,{"description":3166,"labels":3167,"number":3170,"owner":3141,"repository":3142,"state":3171,"title":3172,"updated_at":3173,"url":3174,"score":3175},"### Environment\n\n\"@vueuse/nuxt\": \"^13.1.0\"\n\"@nuxt/ui\": \"^3.1.2\"\nnode: lts/jod (22.11.0)\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\n\n\n\n\n### Description\n\nWhen using the UTab component with the variant=\"link\", applying custom CSS classes to enable horizontal scrolling (e.g., overflow-x: auto; or equivalent utility classes) causes the visual style indicating the currently active tab to be lost or overridden.\n\n```js\n{\n variant: 'link',\n ui: {\n list: 'bg-white overflow-x-auto overflow-y-hidden',\n trigger: 'min-w-auto'\n }\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3168,3169],{"name":3152,"color":3153},{"name":3155,"color":3156},4198,"closed","UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.67897844,{"description":3177,"labels":3178,"number":3184,"owner":3141,"repository":3142,"state":3171,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Environment\n\nNuxt project info: (copied to clipboard) nuxi 8:34:52 pm\n\nOperating System: Linux\nNode Version: v22.17.1\nNuxt Version: 4.0.0\nCLI Version: 3.26.2\nNitro Version: 2.12.0\nPackage Manager: bun@1.2.15\nBuilder: -\nUser Config: modules, runtimeConfig, devtools, ui, css, colorMode, compatibilityDate, eslint\nRuntime Modules: @nuxt/ui@3.2.0, @nuxt/ui-pro@3.2.0, @pinia/nuxt@0.5.5, @nuxt/eslint@1.6.0\nBuild Modules: -\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read documentation: https://nuxt.com/\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nSee Nuxt UI official docs page -\nhttps://ui.nuxt.com/components/dashboard-sidebar\n\n### Description\n\nUI is not rendering correctly on the web page or on my local machine.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3179,3180,3183],{"name":3152,"color":3153},{"name":3181,"color":3182},"documentation","0075ca",{"name":3155,"color":3156},4610,"UI not rendering for certain Dashboard components","2025-07-29T21:07:34Z","https://github.com/nuxt/ui/issues/4610",0.6870847,{"description":3190,"labels":3191,"number":3198,"owner":3141,"repository":3142,"state":3171,"title":3199,"updated_at":3200,"url":3201,"score":3202},"### 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>",[3192,3195,3196],{"name":3193,"color":3194},"enhancement","a2eeef",{"name":3158,"color":3159},{"name":3197,"color":3156},"v4",4932,"[Component Request] Add QRCode component (support customization & accessibility)","2025-09-09T15:06:36Z","https://github.com/nuxt/ui/issues/4932",0.6951697,{"description":3204,"labels":3205,"number":3208,"owner":3141,"repository":3142,"state":3171,"title":3209,"updated_at":3210,"url":3211,"score":3212},"### Environment\n\n- Nuxt Version: `3.17.6`\n- Nuxt UI Version: `3.2.0`\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\n- Visit the Tabs component documentation page\n- Observe the indicator animation on page load when change component page and going back to the tab page\n- Compare with the playground implementation\n- Notice the difference in initial positioning behavior\n\n### Description\n\nThe Tabs component's indicator animation behaves differently between the documentation site and the playground, causing a visual inconsistency in the user experience.\n\n**Expected Behavior**\nThe indicator should be properly positioned on the active tab from the initial render, as demonstrated in the playground.\n\n**Actual Behavior**\nIn the documentation, the indicator starts from position zero (left edge) and slides to the correct position, creating an unwanted animation on page load.\n\n### Additional context\n\nWe started to understand how it happens by logging `--reka-tabs-indicator-[variable]` where Tabs is used.\n\n```js\nonMounted(() => {\n const el = document.querySelector('[data-reka-collection-item][data-orientation]')?.previousElementSibling\n console.log(el.style.getPropertyValue('--reka-tabs-indicator-size'), el.style.getPropertyValue('--reka-tabs-indicator-position')) // 0px 0px \n})\n```",[3206,3207],{"name":3152,"color":3153},{"name":3155,"color":3156},4491,"[Tabs] Indicator animation inconsistency","2025-07-31T04:27:20Z","https://github.com/nuxt/ui/issues/4491",0.69592214,{"description":3214,"labels":3215,"number":3218,"owner":3141,"repository":3142,"state":3171,"title":3185,"updated_at":3219,"url":3220,"score":3221},"### Environment\n\nNuxt project info: (copied to clipboard) nuxi 8:34:52 pm\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.17.1\n- Nuxt Version: 4.0.0\n- CLI Version: 3.26.2\n- Nitro Version: 2.12.0\n- Package Manager: bun@1.2.15\n- Builder: -\n- User Config: modules, runtimeConfig, devtools, ui, css, colorMode, compatibilityDate, eslint\n- Runtime Modules: @nuxt/ui@3.2.0, @nuxt/ui-pro@3.2.0, @pinia/nuxt@0.5.5, @nuxt/eslint@1.6.0\n- Build Modules: -\n------------------------------\n\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read documentation: https://nuxt.com\n\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nSee Nuxt UI official docs page -\nhttps://ui.nuxt.com/components/dashboard-sidebar\n\n### Description\n\nUI is not rendering correctly on the page or on my local machine.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3216,3217],{"name":3152,"color":3153},{"name":3158,"color":3159},4609,"2025-07-26T15:12:50Z","https://github.com/nuxt/ui/issues/4609",0.7000709,{"description":3223,"labels":3224,"number":3227,"owner":3141,"repository":3142,"state":3171,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### Environment\n\n- node:V18.19.1\n- pnpm: V8.15.5\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.15.1\n\n### Reproduction\n\nhttps://github.com/Jevin0/nuxt-ui-no-style-demo/blob/master/app.vue\n\n### Description\n\n\n### step\n1. `pnpm dlx nuxi@latest init \u003Cproject-name>`\n2. `npx nuxi@latest module add ui`\n3. `pnpm install`\n4. `pnpm dev`\n\n### concern\nNormal use of `UButton` component, but no background color and Color\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3225,3226],{"name":3152,"color":3153},{"name":3155,"color":3156},3047,"No style","2025-02-24T22:33:59Z","https://github.com/nuxt/ui/issues/3047",0.70450133,{"description":3233,"labels":3234,"number":3243,"owner":3141,"repository":3142,"state":3171,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, modules, components, css, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.0, @pinia/nuxt@0.10.1, compodium@0.1.0-beta.5\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\n```vue\n\u003CUCard variant=\"subtle\">\n \u003CUTable \n :data=\"data\"\n :columns=\"columns\"\n />\n\u003C/UCard>\n```\n\n### Description\n\nIf using a UTable component on a background that isn't the default neutral color the bg-color of the thead is visible.\n\n\n\n\n\n_A little bit easier to see with white Background_\n\n\n\n\nMaybe this is a wanted behavior. So if so please ignore and close the issue.\nI know sometimes you want a background color in the headlines. But sometimes you don't want them.\nAnyways if this is a wanted behavior, then maybe this issue will help those who don't want a background color and are looking for a solution.\n\n### Additional context\n\nCould be fixed by adding:\n```vue\n:ui=\"{\n thead: 'bg-unset'\n}\"\n```\nto the `\u003CUTable>` tag\n\n\n\n### Logs\n\n```shell-script\n-\n```",[3235,3236,3237,3238,3241],{"name":3152,"color":3153},{"name":3155,"color":3156},{"name":3158,"color":3159},{"name":3239,"color":3240},"closed-by-bot","ededed",{"name":3242,"color":3240},"stale",3607,"Background-Color for UTable","2025-06-18T09:01:26Z","https://github.com/nuxt/ui/issues/3607",0.70776075,{"labels":3249,"number":3250,"owner":3141,"repository":3141,"state":3171,"title":3251,"updated_at":3252,"url":3253,"score":3254},[],12073,"docs: explain component name resolution","2023-01-19T15:54:17Z","https://github.com/nuxt/nuxt/issues/12073",0.7096765,["Reactive",3256],{},["Set"],["ShallowReactive",3259],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fOlAgMblDvYrl1-FSXH97Ke89b2H9_u8I_rbIJ-W1y5A":-1},"/nuxt/ui/2995"]