\n \u003CNuxtPage /> \u003C!-- renders children like index.vue, favorite.vue -->\n \u003C/div>\n\u003C/template>\n```\n\nThis improves clarity by:\n\n* Explicitly distinguishing **nested layout files** from **page files**.\n* Avoiding the overloaded role of `parent.vue`.\n* Making folder structures self-explanatory.\n\n### Benefits\n\n* More intuitive project structure for large apps.\n* Easier onboarding for new developers (clear separation of layouts vs. pages).\n* Cleaner, scalable convention that aligns with the mental model of “global layouts” vs. “section layouts.”\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).",[3139],{"name":3140,"color":3141},"pending triage","E99695",33073,"nuxt","open","[Enhancement] Better Syntax/Convention for Nested Layouts in Nuxt","2025-08-27T05:51:23Z","https://github.com/nuxt/nuxt/issues/33073",0.68929017,{"description":3150,"labels":3151,"number":3153,"owner":3143,"repository":3143,"state":3144,"title":3154,"updated_at":3155,"url":3156,"score":3157},"### Describe the feature\n\nAdd documentation for Nuxt Components \n\n\n\n\nComparison between Vue template Component and Nuxt Layout Component, there is no documentation for hovering over the element unlike others\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).",[3152],{"name":3140,"color":3141},32330,"Better IDE Docs","2025-06-08T03:26:08Z","https://github.com/nuxt/nuxt/issues/32330",0.7142753,{"description":3159,"labels":3160,"number":3170,"owner":3143,"repository":3171,"state":3144,"title":3172,"updated_at":3173,"url":3174,"score":3175},"### Description\n\n**Title**: Add Descriptions component\n\n**Description**\nThanks to the Nuxt UI team for the great work 🙏. Currently, the library does not provide a component similar to [Descriptions](https://ant.design/components/descriptions-cn).\n\nThis type of component is very common in real-world applications, often used to display descriptive information in pairs, such as user profiles, order details, or configuration parameters. Ant Design’s Descriptions component provides a clean and convenient way to present such data.\n\n**Use Case**\n\n* Add a `Descriptions` component to display data in “label–content” pairs.\n* Support horizontal and vertical layouts.\n* Support configurable column count with automatic wrapping.\n* Allow customization of label and content styles.\n\n**Expected Behavior**\nDevelopers should be able to easily use a Descriptions component, similar to Ant Design, to quickly build data presentation pages.\n\ne.g:\n\n\u003Cimg width=\"1421\" height=\"478\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3f460119-101d-4dea-bb41-055ca77679af\" />\n\n### Additional context\n\n_No response_",[3161,3164,3167],{"name":3162,"color":3163},"enhancement","a2eeef",{"name":3165,"color":3166},"v3","49DCB8",{"name":3168,"color":3169},"triage","ffffff",4788,"ui","[Feature Request] Add Descriptions component","2025-08-19T03:39:55Z","https://github.com/nuxt/ui/issues/4788",0.71663713,{"description":3177,"labels":3178,"number":3182,"owner":3143,"repository":3143,"state":3144,"title":3183,"updated_at":3184,"url":3185,"score":3186},"### Describe the feature\r\n\r\nI'd like to see more rules for documentation contributions (https://nuxt.com/docs/community/contribution#writing-documentation).\r\n\r\nFor instance while reviewing https://github.com/nuxt/nuxt/pull/21525, I asked myself several questions:\r\n- What words to capitalize in headings? First one, all, or only meaningful (how to define meaningful ones)?\r\n- When to put words in code tags? Only paths, packages, filenames? Or also properties like `css` in the nuxt config?\r\n- Should we write packages as their display version (e.g. PostCSS) or npm name (e.g. postcss)?\r\n\r\nI probably forget more of them but such rules would help people contribute to the nuxt docs.\r\n\r\nIf this is adopted, we could also add the link to this section to PR templates\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).\n```[tasklist]\n### Tasks\n```\n",[3179],{"name":3180,"color":3181},"documentation","5319e7",21530,"Docs: writing guidelines","2024-06-30T11:08:36Z","https://github.com/nuxt/nuxt/issues/21530",0.7173859,{"description":3188,"labels":3189,"number":3190,"owner":3143,"repository":3171,"state":3144,"title":3191,"updated_at":3192,"url":3193,"score":3194},"### Describe the feature\n\nIt would be great if Nuxt UI could provide a built-in, customizable **feature tour / onboarding guide** component. This would allow developers to guide users through key parts of an application with step-by-step tooltips and highlighted elements.\n\n**Motivation**\n\n* Helps improve user onboarding and product discovery.\n* Provides a consistent and reusable UI pattern for walkthroughs across Nuxt projects.\n* Currently, developers must rely on external libraries (e.g., Driver.js, Shepherd.js) or build a custom solution. A Nuxt UI-native solution would integrate seamlessly with existing components and theming.\n\n**Proposed Features**\n\n* Ability to define **steps** with `selector`, `title`, `description`, and `position`.\n* Configurable **highlight styles** (border, shadow, spotlight cut-out).\n* Built-in **navigation controls** (Next, Previous, Finish).\n* Option to scroll to target elements automatically.\n* Theming support with Nuxt UI tokens.\n* Accessibility support (keyboard navigation, ARIA roles).\n\n**Example API (pseudo-code)**\n\n```vue\n\u003CUTour :steps=\"steps\" v-model=\"active\" />\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).",[],4874,"Interactive Feature Tour Component","2025-09-02T12:21:11Z","https://github.com/nuxt/ui/issues/4874",0.7197431,{"description":3196,"labels":3197,"number":3201,"owner":3143,"repository":3171,"state":3144,"title":3202,"updated_at":3203,"url":3204,"score":3205},"### Description\n\nIdeally, I would like to be able to use NuxtUI/NuxtUI Pro without having to install Vue Router. Sometimes there is only one page.\n\nWithout the use of any ULink, the UHeader and Dashboard components fail to mount because they watch the route URL.\n\n### Additional context\n\nFor certain use cases, such as those involving custom elements (https://vuejs.org/api/custom-elements.html#custom-elements-api), it would be useful to be able to use layout components.",[3198,3199,3200],{"name":3162,"color":3163},{"name":3165,"color":3166},{"name":3168,"color":3169},4233,"Nuxt UI (vue) without `vue-router`","2025-05-27T14:01:35Z","https://github.com/nuxt/ui/issues/4233",0.72626096,{"description":3188,"labels":3207,"number":3209,"owner":3143,"repository":3143,"state":3144,"title":3191,"updated_at":3210,"url":3211,"score":3212},[3208],{"name":3140,"color":3141},33111,"2025-09-02T09:15:22Z","https://github.com/nuxt/nuxt/issues/33111",0.72634965,{"description":3214,"labels":3215,"number":3218,"owner":3143,"repository":3171,"state":3144,"title":3219,"updated_at":3220,"url":3221,"score":3222},"As announced in the [NuxtLabs blog post](https://nuxtlabs.com/) and [Vercel's announcement](https://vercel.com/blog/nuxtlabs-joins-vercel), NuxtLabs is joining Vercel! 🎉 This is a big step forward for the Nuxt ecosystem and we're excited to be part of it.\n\n### Overview\n\nAs part of this transition, we're making Nuxt UI more accessible to everyone. **In September, we'll release Nuxt UI v4**: a free, open-source library that unifies Nuxt UI and Nuxt UI Pro, offering 100+ components and a complete free Figma Kit for everyone.\n\n### Tasks\n\n- [x] Import Nuxt UI Pro components: https://github.com/nuxt/ui/pull/4675\n- [x] Migrate to AI SDK v5: https://github.com/nuxt/ui/pull/4698\n- [x] Publish Figma Kit v4: https://www.figma.com/community/file/1544369209862884086 \n- [ ] Docs\n - [x] Remove `/pro` pages\n - [x] Subnavbar with sections (`Get Started` / `Components` / `Composables` / `Typography`)\n - [x] Restructure `Get Started` with `Overview` / `Theme` / `Integrations` categories\n - [x] Move `Typography` into own section with page for each prose component: #4742\n - [x] Split `Theme` into multiple pages (`Design System` / `CSS Variables` / `Components`) #4939\n - [x] Write `Migration to v4` page: #4802\n - [x] Rewrite `Introduction` page\n - [x] Write `Llms.txt` page: #4799\n - [ ] Remove pricing from v3 & v2 docs\n- [x] Migrate Nuxt UI Templates to v4\n - [x] https://github.com/nuxt-ui-templates/starter/pull/151\n - [x] https://github.com/nuxt-ui-templates/starter-vue/pull/44\n - [x] https://github.com/nuxt-ui-templates/landing/pull/175\n - [x] https://github.com/nuxt-ui-templates/docs/pull/237\n - [x] https://github.com/nuxt-ui-templates/saas/pull/201\n - [x] https://github.com/nuxt-ui-templates/dashboard/pull/209\n - [x] https://github.com/nuxt-ui-templates/dashboard-vue/pull/44\n - [x] https://github.com/nuxt-ui-templates/chat/pull/50\n - [x] https://github.com/nuxt-ui-templates/portfolio/pull/38\n- [ ] Codemod\n\n### Migration\n\nWe released a `@nuxt/ui@4.0.0-alpha` package already, you can check the newest migration guide:\nhttps://ui4.nuxt.com/docs/getting-started/migration/v4\n\n- https://github.com/nuxt/ui/releases/tag/v4.0.0-alpha.1\n- https://github.com/nuxt/ui/releases/tag/v4.0.0-alpha.0\n\n### Feedback\n\nWe'll be actively working on [v4 branch](https://github.com/nuxt/ui/tree/v4) and would love to hear from the community! Feel free to share your thoughts, suggestions, and feedback in this thread.\n\n---\n\nThis v4 release represents our commitment to making powerful UI components accessible to everyone while building a stronger, more sustainable ecosystem. We're incredibly excited to work with the community to make this the best version of Nuxt UI yet! 🎉\n\n*Thank you for being part of this journey. None of this would be possible without your support.* 💚\n",[3216],{"name":3217,"color":3166},"release",4488,"v4","2025-09-11T10:51:58Z","https://github.com/nuxt/ui/issues/4488",0.72653115,{"description":3224,"labels":3225,"number":3229,"owner":3143,"repository":3171,"state":3230,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### 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>",[3226,3227,3228],{"name":3162,"color":3163},{"name":3168,"color":3169},{"name":3219,"color":3166},4932,"closed","[Component Request] Add QRCode component (support customization & accessibility)","2025-09-09T15:06:36Z","https://github.com/nuxt/ui/issues/4932",0.7093558,{"description":3236,"labels":3237,"number":3247,"owner":3143,"repository":3171,"state":3230,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### 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_",[3238,3240,3243,3244],{"name":3239,"color":3169},"wontfix-v2",{"name":3241,"color":3242},"feature","A27AF6",{"name":3165,"color":3166},{"name":3245,"color":3246},"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.7141388,["Reactive",3253],{},["Set"],["ShallowReactive",3256],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fjIQjUZVDTA7mkjvZ3hqtDDK6fcUNui4cwl7VAK93nSo":-1},"/nuxt/ui/4875"]