\n\n\u003Cscript setup lang=\"ts\">\nconst steps = [\n { selector: '#step1', title: 'Welcome', description: 'This is the first step', position: 'bottom' },\n { selector: '#step2', title: 'Next Feature', description: 'Learn about this one too', position: 'right' }\n]\n\u003C/script>\n```\n\n**Alternatives Considered**\n\n* External libraries like Driver.js or Shepherd.js, but they don’t fit Nuxt UI’s design system and require additional integration effort.\n\n**Additional Context**\nThis would help Nuxt developers deliver a polished onboarding experience without reinventing the wheel.\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3151],{"name":3152,"color":3153},"pending triage","E99695",33111,"Interactive Feature Tour Component","2025-09-02T09:15:22Z","https://github.com/nuxt/nuxt/issues/33111",0.7077639,{"description":3149,"labels":3160,"number":3161,"owner":3141,"repository":3142,"state":3143,"title":3155,"updated_at":3162,"url":3163,"score":3164},[],4874,"2025-09-02T12:21:11Z","https://github.com/nuxt/ui/issues/4874",0.7098978,{"description":3166,"labels":3167,"number":3173,"owner":3141,"repository":3142,"state":3143,"title":3174,"updated_at":3175,"url":3176,"score":3177},"### Description\n\nThinking through the complexities of form management, and the current implementation in Nuxt UI, I'm wondering, would it make sense to defer the \"heavy lifting\" to external form libraries?\n\nForms can get pretty complicated as the data model becomes more complex. That is where established form libraries shine.\n\nThese are some libraries that I've used with NuxtUi myself, (granted with various levels of boilerplate that is required).\n\n**Formwerk**\nhttps://formwerk.dev/\n- I'm involved in this project\n- Its intended, primarily, to be incorporated in UI libraries.\n- I've worked with its creator @logaretm and I'm sure he'd be willing to support any integration challenges. \n- Very well written code and highly tested.\n\n**Reagle**\nhttps://github.com/victorgarciaesgi/regle\n- Fairly new, but it takes an interesting headless approach.\n- Could potentially be the easiest to integrate\n- Because its fairly new, It may not be as well documented or battle tested with complex forms\n\nNon-vue specific libraries\n**Tanstack Forms**\nhttps://tanstack.com/form/latest\n- We already use tanstack table, so this could make sense\n- Its still relatively new -- it may not be as polished for the vue ecosystem.\n \n...possibly more?\n\n@romhml since you made significant contributions to the form implementation in Nuxt UI, I would love to hear your thoughts. Do you envision the current implementation to be expanded?",[3168,3171],{"name":3169,"color":3170},"question","d876e3",{"name":3172,"color":3139},"v3",4724,"Defer form functionality to third party","2025-08-14T15:14:08Z","https://github.com/nuxt/ui/issues/4724",0.710314,{"description":3179,"labels":3180,"number":3187,"owner":3141,"repository":3141,"state":3143,"title":3188,"updated_at":3189,"url":3190,"score":3191},"### Describe the feature\n\nHey I am currently moving a big project from standard vue3 to nuxt, and have to rewrite most of my options api code to composition api..\r\n\r\nThe issue mostly is that some features are not there in composition api and when one is missing i can't \"link\" it to options api and then i got to go down the rabbit hole of changing my code to use composition api although it's already completely valid options api code.\r\n\r\nFor real, props, it is an awesome framework and it's very impressive etc.\r\n\r\nBUT.... in my opinion, it is kind of weird that it does not fully support vue (from my pov) as i do have to use so much \"special\" vue code instead of easily porting my app.\r\n\r\nI am still continuing to use nuxt for now but if you were able to make the transition a bit easier, i think a lot of people would use nuxt instead of plain old vue 3.\r\n\r\nI am willing to help with the adoption by saying what needs to happen (for a project like mine) to be easily portable to nuxt, if that is helpful.\r\n\r\nLmk what u think :) \n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3181,3184],{"name":3182,"color":3183},"enhancement","8DEF37",{"name":3185,"color":3186},"🍰 p2-nice-to-have","0E8A16",21670,"Missing Support (Or documentation of) Options API with Nuxt","2024-06-30T11:08:29Z","https://github.com/nuxt/nuxt/issues/21670",0.7204649,{"description":3193,"labels":3194,"number":3196,"owner":3141,"repository":3142,"state":3197,"title":3172,"updated_at":3198,"url":3199,"score":3200},"The development is ongoing on the default branch of this repository: https://github.com/nuxt/ui.\n\n---\n\nA lot has changed since `@nuxt/ui` was made open-source (May 2023), so the plan here is to rewrite every component from scratch alongside their config.\n\nI'll post regular updates on this issue and on https://twitter.com/benjamincanac.\n\n## Documentation\n\nhttps://ui3.nuxt.dev\n\n## Roadmap (Nov 20, 2024)\n\n- [x] Finish the migration to `reka-ui@alpha` on `@nuxt/ui` & `@nuxt/ui-pro` #2448\n- [x] Write the docs for implemented `@nuxt/ui-pro` components\n- [x] Finish `@nuxt/ui-pro` components\n- [x] Make Nuxt UI Pro v3 work with Vue like Nuxt UI https://github.com/nuxt/ui-pro/pull/742\n- [ ] Implement new components in `@nuxt/ui` like\n - [x] `Calendar` #2618\n - [ ] `InputDate` #2524\n - [x] `Tree` #3180\n - [x] `Stepper` #2733\n- [x] Migrate all the Nuxt UI Pro templates\n - [x] Starter\n - [x] Landing\n - [x] Docs\n - [x] SaaS https://github.com/nuxt-ui-pro/saas/pull/86\n - [x] Dashboard https://github.com/nuxt-ui-pro/dashboard/pull/86\n- [ ] Build the Nuxt UI docs marketing pages\n - [x] Landing\n - [x] Figma\n - [x] Pro -> Landing\n - [x] Pro -> Pricing\n - [x] Pro -> Templates\n - [x] Pro -> Activate\n - [ ] Releases\n- [x] Write migration guide https://ui3.nuxt.dev/getting-started/migration\n- [x] Release `@nuxt/ui` & `@nuxt/ui-pro` officially once `tailwindcss` and `reka-ui` are released\n- [x] Migrate all the Nuxt apps (nuxt.com, image.nuxt.com, eslint.nuxt.com, devtools.nuxt.com, fonts.nuxt.com, hub.nuxt.com, nuxt.studio, etc.)\n- [ ] Implement new `@nuxt/ui` & `@nuxt/ui-pro` components\n- [ ] Create new templates like Changelog, Portfolio, etc. \n\n## Breaking Changes\n\nThe biggest change is the switch to `tailwind-variants`, this will cause lots of breaking changes if you've used the `ui` prop or `app.config.ts` to override the config. I apologize in advance for this but I strongly believe this will be beneficial and will bring consistency across all components.\n\n> At the beginning the config was split in many keys for the same div to give more flexibility, but since then we introduced `tailwind-merge` which now allows us to group those keys together, this is a good opportunity to clean the whole thing. \n\nThe config will now have a `slots` amongst other keys that will specifically target dom nodes. The `ui` prop will only allow you to target those slots.\n\nThese changes alongside the refactor of all components will also improve the types, the `app.config.ts` and `ui` props are now perfectly typed, as well as all components `props`, `slots`, `emits` and `expose`.\n\n> Feel free to comment on this if you have any ideas for the next major.\n\n```[tasklist]\n### Components\n- [x] Accordion\n- [x] Alert\n- [x] Avatar\n- [x] AvatarGroup\n- [x] Badge\n- [x] Breadcrumb\n- [x] Button\n- [x] ButtonGroup\n- [x] Card\n- [x] Carousel\n- [x] Checkbox\n- [x] Chip\n- [x] Collapsible\n- [x] CommandPalette\n- [x] Container\n- [x] ContextMenu\n- [x] Drawer\n- [x] DropdownMenu (Dropdown)\n- [x] Form\n- [x] FormField (FormGroup)\n- [x] Icon\n- [x] Input\n- [x] InputMenu\n- [x] Kbd\n- [x] Link\n- [x] Modal\n- [x] NavigationMenu (HorizontalNavigation/VerticalNavigation)\n- [x] Pagination\n- [x] Popover\n- [x] Progress\n- [x] Provider\n- [x] RadioGroup\n- [x] Select\n- [x] SelectMenu\n- [x] Separator (Divider)\n- [x] Skeleton\n- [x] Slideover\n- [x] Slider (Range)\n- [x] Table\n- [x] Tabs\n- [x] Textarea\n- [x] Toast (Notification)\n- [x] Switch (Toggle)\n- [x] Tooltip\n```\n",[3195],{"name":3138,"color":3139},1289,"closed","2025-07-17T12:55:11Z","https://github.com/nuxt/ui/issues/1289",0.64629394,{"description":3202,"labels":3203,"number":3210,"owner":3141,"repository":3142,"state":3197,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### 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>",[3204,3206,3209],{"name":3182,"color":3205},"a2eeef",{"name":3207,"color":3208},"triage","ffffff",{"name":3144,"color":3139},4932,"[Component Request] Add QRCode component (support customization & accessibility)","2025-09-09T15:06:36Z","https://github.com/nuxt/ui/issues/4932",0.673398,{"description":3216,"labels":3217,"number":3227,"owner":3141,"repository":3142,"state":3197,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\n### Feature Request: Rich Text Editor Component\n\n#### Description\nI would like to request a Rich Text Editor component to be added to Nuxt UI. This component will allow users to input and format rich text content easily, with support for common formatting options such as bold, italic, headers, lists, and more.\n\n#### Benefits\n- Streamlined development for users who need rich text editing features.\n- Consistency in design and functionality with other Nuxt UI components.\n\n#### Proposed Solution\nIntegrate a rich text editor library (e.g., Quill.js, TipTap) as a Nuxt UI component. The component should provide flexibility for customization and ease of use.\n\n#### Alternatives\nFor now, users can manually integrate third-party editors, but having a built-in component would significantly improve the development experience.\n\n\n### Additional context\n\n_No response_",[3218,3220,3223,3224],{"name":3219,"color":3208},"wontfix-v2",{"name":3221,"color":3222},"feature","A27AF6",{"name":3172,"color":3139},{"name":3225,"color":3226},"pro","5BD3CB",2698,"Proposal: Add a Built-in Rich Text Editor Component to Nuxt UI","2025-04-08T17:13:28Z","https://github.com/nuxt/ui/issues/2698",0.6845292,{"description":3233,"labels":3234,"number":3244,"owner":3141,"repository":3141,"state":3197,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### Describe the feature\r\n\r\nThere is a lot of great experimental features that can be enabled in the `nuxt.config.ts`. Unfortunately, most people won't be aware of them, as they are either un-documented or not easily accessible (in the docs or @nuxt/schema source).\r\n\r\nIt would be great if we could have an up to date list, as more people would be aware of them, and it would create a nice feedback loop. \r\n\r\nWe could write a small sub-section for each of them, similar to what we can find in the blog posts (see here for [typed pages](https://nuxt.com/blog/v3-5)).\r\n\r\n(The up-to-date list can always be found at the source, currently in [@nuxt/schema/src/config/experimental](https://github.com/nuxt/nuxt/blob/main/packages/schema/src/config/experimental.ts))\r\n\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3235,3238,3241],{"name":3236,"color":3237},"documentation","5319e7",{"name":3239,"color":3240},"good first issue","fbca04",{"name":3242,"color":3243},"3.x","29bc7f",21492,"[Documentation Request] Document Experimental Features","2023-06-20T18:17:09Z","https://github.com/nuxt/nuxt/issues/21492",0.68949777,{"labels":3250,"number":3257,"owner":3141,"repository":3141,"state":3197,"title":3258,"updated_at":3259,"url":3260,"score":3261},[3251,3253,3254],{"name":3252,"color":3208},"stale",{"name":3152,"color":3153},{"name":3255,"color":3256},"2.x","d4c5f9",6130,"create a component library","2023-01-22T15:34:44Z","https://github.com/nuxt/nuxt/issues/6130",0.7013152,["Reactive",3263],{},["Set"],["ShallowReactive",3266],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f1cUwnd1ca6CpPhCzDSkXE75gJm1MBwsZ9XRXCLVPjMk":-1},"/nuxt/ui/3094"]