[{"data":1,"prerenderedAt":5443},["ShallowReactive",2],{"navigation":3,"-docs-getting-started-migration-v3":959,"-docs-getting-started-migration-v3-description":5433},[4],{"title":5,"path":6,"stem":7,"children":8,"page":36},"Docs","\u002Fdocs","docs",[9,163,817,858],{"title":10,"path":11,"stem":12,"children":13,"framework":16,"category":16,"description":16,"icon":30},"Get Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started\u002F1.index",[14,19,37,47,53,76,141],{"title":15,"path":11,"stem":12,"framework":16,"category":16,"description":17,"icon":18},"Introduction",null,"Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.","i-lucide-house",{"title":20,"framework":16,"category":16,"description":16,"shadow":21,"path":22,"stem":23,"children":24,"page":36},"Installation",true,"\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",[25,31],{"title":20,"path":26,"stem":27,"framework":28,"category":16,"description":29,"icon":30},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fnuxt","docs\u002F1.getting-started\u002F2.installation\u002F1.nuxt","nuxt","Learn how to install and configure Nuxt UI in your Nuxt application.","i-lucide-square-play",{"title":20,"path":32,"stem":33,"framework":34,"category":16,"description":35,"icon":30},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fvue","docs\u002F1.getting-started\u002F2.installation\u002F2.vue","vue","Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.",false,{"title":38,"framework":16,"category":16,"description":16,"icon":39,"shadow":21,"path":40,"stem":41,"children":42,"page":36},"Migration","i-lucide-arrow-right-left","\u002Fdocs\u002Fgetting-started\u002Fmigration","docs\u002F1.getting-started\u002F3.migration",[43],{"title":38,"path":44,"stem":45,"framework":16,"category":16,"description":46,"icon":39},"\u002Fdocs\u002Fgetting-started\u002Fmigration\u002Fv4","docs\u002F1.getting-started\u002F3.migration\u002F1.v4","A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.",{"title":48,"path":49,"stem":50,"framework":16,"category":16,"description":51,"icon":52},"Contribution","\u002Fdocs\u002Fgetting-started\u002Fcontribution","docs\u002F1.getting-started\u002F4.contribution","A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.","i-lucide-handshake",{"title":54,"path":55,"stem":56,"children":57,"page":36},"Theme","\u002Fdocs\u002Fgetting-started\u002Ftheme","docs\u002F1.getting-started\u002F5.theme",[58,64,70],{"title":59,"path":60,"stem":61,"framework":16,"category":16,"description":62,"icon":63},"Design System","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fdesign-system","docs\u002F1.getting-started\u002F5.theme\u002F1.design-system","Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.","i-lucide-palette",{"title":65,"path":66,"stem":67,"framework":16,"category":16,"description":68,"icon":69},"CSS Variables","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcss-variables","docs\u002F1.getting-started\u002F5.theme\u002F2.css-variables","Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.","i-lucide-swatch-book",{"title":71,"path":72,"stem":73,"framework":16,"category":16,"description":74,"icon":75},"Components","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcomponents","docs\u002F1.getting-started\u002F5.theme\u002F3.components","Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.","i-lucide-layout-grid",{"title":77,"framework":16,"category":16,"description":16,"path":78,"stem":79,"children":80,"page":36},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002F1.getting-started\u002F6.integrations",[81,95,101,115,129,135],{"title":82,"framework":16,"category":16,"description":16,"shadow":21,"path":83,"stem":84,"children":85,"page":36},"Icons","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons",[86,91],{"title":82,"path":87,"stem":88,"framework":28,"category":16,"description":89,"icon":90},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F1.nuxt","Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.","i-lucide-smile",{"title":82,"path":92,"stem":93,"framework":34,"category":16,"description":94,"icon":90},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F2.vue","Nuxt UI integrates with Iconify to access over 200,000+ icons.",{"title":96,"path":97,"stem":98,"framework":28,"category":16,"description":99,"icon":100},"Fonts","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffonts","docs\u002F1.getting-started\u002F6.integrations\u002F2.fonts","Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.","i-lucide-a-large-small",{"title":102,"framework":16,"category":16,"description":16,"shadow":21,"path":103,"stem":104,"children":105,"page":36},"Color Mode","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode",[106,111],{"title":102,"path":107,"stem":108,"framework":28,"category":16,"description":109,"icon":110},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F1.nuxt","Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.","i-lucide-sun-moon",{"title":102,"path":112,"stem":113,"framework":34,"category":16,"description":114,"icon":110},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F2.vue","Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.",{"title":116,"framework":16,"category":16,"description":16,"shadow":21,"path":117,"stem":118,"children":119,"page":36},"I18n","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n",[120,126],{"title":121,"path":122,"stem":123,"framework":28,"category":16,"description":124,"icon":125},"Internationalization (i18n)","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F1.nuxt","Nuxt UI supports 50+ locales and multi-directional (LTR\u002FRTL) internationalization.","i-lucide-languages",{"title":121,"path":127,"stem":128,"framework":34,"category":16,"description":124,"icon":125},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F2.vue",{"title":130,"path":131,"stem":132,"framework":28,"category":16,"description":133,"icon":134},"Content","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcontent","docs\u002F1.getting-started\u002F6.integrations\u002F5.content","Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.","i-simple-icons-markdown",{"title":136,"path":137,"stem":138,"framework":34,"category":16,"description":139,"icon":140},"SSR","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fssr","docs\u002F1.getting-started\u002F6.integrations\u002F6.ssr","Nuxt UI has first-party support for Vue SSR. This guide will help you have it fully enabled.","i-lucide-server",{"title":142,"framework":16,"category":16,"description":16,"path":143,"stem":144,"children":145,"page":36},"Agents","\u002Fdocs\u002Fgetting-started\u002Fai","docs\u002F1.getting-started\u002F7.ai",[146,151,157],{"title":147,"path":148,"stem":149,"framework":16,"category":16,"description":150,"icon":140},"MCP Server","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fmcp","docs\u002F1.getting-started\u002F7.ai\u002F1.mcp","Use Nuxt UI components in your AI assistants with Model Context Protocol support.",{"title":152,"path":153,"stem":154,"framework":16,"category":16,"description":155,"icon":156},"LLMs.txt","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fllms-txt","docs\u002F1.getting-started\u002F7.ai\u002F2.llms-txt","How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt UI components, theming, and best practices.","i-lucide-bot",{"title":158,"path":159,"stem":160,"framework":16,"category":16,"description":161,"icon":162},"Skills","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fskills","docs\u002F1.getting-started\u002F7.ai\u002F3.skills","Install Nuxt UI skills to give AI coding agents deep knowledge of components, theming, and best practices.","i-lucide-sparkles",{"title":71,"framework":16,"category":16,"description":16,"icon":164,"path":165,"stem":166,"children":167,"page":36},"i-lucide-square-code","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[168,174,180,186,192,197,202,207,212,217,222,228,233,238,243,248,253,258,264,269,274,279,284,289,295,300,305,311,316,321,326,332,337,342,347,352,357,362,367,373,378,383,388,393,399,405,410,415,420,425,430,435,440,445,450,455,460,466,471,476,481,486,491,496,501,506,511,516,521,526,531,536,541,546,551,556,561,566,571,576,581,587,592,597,602,607,612,617,622,627,632,637,642,647,652,657,662,667,672,677,682,687,692,697,702,707,712,717,722,727,732,737,742,747,752,757,762,767,772,777,782,787,792,797,802,807,812],{"title":169,"path":170,"stem":171,"framework":16,"category":172,"description":173},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002Faccordion","data","A stacked set of collapsible panels.",{"title":175,"path":176,"stem":177,"framework":16,"category":178,"description":179},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002F2.components\u002Falert","element","A callout to draw user's attention.",{"title":181,"path":182,"stem":183,"framework":16,"category":184,"description":185},"App","\u002Fdocs\u002Fcomponents\u002Fapp","docs\u002F2.components\u002Fapp","layout","Wraps your app to provide global configurations and more.",{"title":187,"path":188,"stem":189,"framework":16,"category":190,"description":191},"AuthForm","\u002Fdocs\u002Fcomponents\u002Fauth-form","docs\u002F2.components\u002Fauth-form","page","A customizable Form to create login, register or password reset forms.",{"title":193,"path":194,"stem":195,"framework":16,"category":178,"description":196},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002Favatar","An img element with fallback and Nuxt Image support.",{"title":198,"path":199,"stem":200,"framework":16,"category":178,"description":201},"AvatarGroup","\u002Fdocs\u002Fcomponents\u002Favatar-group","docs\u002F2.components\u002Favatar-group","Stack multiple avatars in a group.",{"title":203,"path":204,"stem":205,"framework":16,"category":178,"description":206},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002Fbadge","A short text to represent a status or a category.",{"title":208,"path":209,"stem":210,"framework":16,"category":178,"description":211},"Banner","\u002Fdocs\u002Fcomponents\u002Fbanner","docs\u002F2.components\u002Fbanner","Display a banner at the top of your website to inform users about important information.",{"title":213,"path":214,"stem":215,"framework":16,"category":190,"description":216},"BlogPost","\u002Fdocs\u002Fcomponents\u002Fblog-post","docs\u002F2.components\u002Fblog-post","A customizable article to display in a blog page.",{"title":218,"path":219,"stem":220,"framework":16,"category":190,"description":221},"BlogPosts","\u002Fdocs\u002Fcomponents\u002Fblog-posts","docs\u002F2.components\u002Fblog-posts","Display a list of blog posts in a responsive grid layout.",{"title":223,"path":224,"stem":225,"framework":16,"category":226,"description":227},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002F2.components\u002Fbreadcrumb","navigation","A hierarchy of links to navigate through a website.",{"title":229,"path":230,"stem":231,"framework":16,"category":178,"description":232},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002Fbutton","A button element that can act as a link or trigger an action.",{"title":234,"path":235,"stem":236,"framework":16,"category":178,"description":237},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002F2.components\u002Fcalendar","A calendar component for selecting single dates, multiple dates or date ranges.",{"title":239,"path":240,"stem":241,"framework":16,"category":178,"description":242},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002Fcard","Display content in a card with a header, body and footer.",{"title":244,"path":245,"stem":246,"framework":16,"category":172,"description":247},"Carousel","\u002Fdocs\u002Fcomponents\u002Fcarousel","docs\u002F2.components\u002Fcarousel","A carousel with motion and swipe built using Embla.",{"title":249,"path":250,"stem":251,"framework":16,"category":190,"description":252},"ChangelogVersion","\u002Fdocs\u002Fcomponents\u002Fchangelog-version","docs\u002F2.components\u002Fchangelog-version","A customizable article to display in a changelog.",{"title":254,"path":255,"stem":256,"framework":16,"category":190,"description":257},"ChangelogVersions","\u002Fdocs\u002Fcomponents\u002Fchangelog-versions","docs\u002F2.components\u002Fchangelog-versions","Display a list of changelog versions in a timeline.",{"title":259,"path":260,"stem":261,"framework":16,"category":262,"description":263},"Chat","\u002Fdocs\u002Fcomponents\u002Fchat","docs\u002F2.components\u002Fchat","chat","Build AI chat interfaces with streaming, reasoning, and tool calling.",{"title":265,"path":266,"stem":267,"framework":16,"category":262,"description":268},"ChatMessage","\u002Fdocs\u002Fcomponents\u002Fchat-message","docs\u002F2.components\u002Fchat-message","Display a chat message with icon, avatar, and actions.",{"title":270,"path":271,"stem":272,"framework":16,"category":262,"description":273},"ChatMessages","\u002Fdocs\u002Fcomponents\u002Fchat-messages","docs\u002F2.components\u002Fchat-messages","Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.",{"title":275,"path":276,"stem":277,"framework":16,"category":262,"description":278},"ChatPalette","\u002Fdocs\u002Fcomponents\u002Fchat-palette","docs\u002F2.components\u002Fchat-palette","A chat palette to create a chatbot interface inside an overlay.",{"title":280,"path":281,"stem":282,"framework":16,"category":262,"description":283},"ChatPrompt","\u002Fdocs\u002Fcomponents\u002Fchat-prompt","docs\u002F2.components\u002Fchat-prompt","An enhanced Textarea for submitting prompts in AI chat interfaces.",{"title":285,"path":286,"stem":287,"framework":16,"category":262,"description":288},"ChatPromptSubmit","\u002Fdocs\u002Fcomponents\u002Fchat-prompt-submit","docs\u002F2.components\u002Fchat-prompt-submit","A Button for submitting chat prompts with automatic status handling.",{"title":290,"path":291,"stem":292,"framework":16,"category":262,"description":293,"badge":294},"ChatReasoning","\u002Fdocs\u002Fcomponents\u002Fchat-reasoning","docs\u002F2.components\u002Fchat-reasoning","Display a collapsible AI reasoning or thinking process.","Soon",{"title":296,"path":297,"stem":298,"framework":16,"category":262,"description":299,"badge":294},"ChatShimmer","\u002Fdocs\u002Fcomponents\u002Fchat-shimmer","docs\u002F2.components\u002Fchat-shimmer","Display a text shimmer animation effect.",{"title":301,"path":302,"stem":303,"framework":16,"category":262,"description":304,"badge":294},"ChatTool","\u002Fdocs\u002Fcomponents\u002Fchat-tool","docs\u002F2.components\u002Fchat-tool","Display a collapsible AI tool invocation status.",{"title":306,"path":307,"stem":308,"framework":16,"category":309,"description":310},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002Fcheckbox","form","An input element to toggle between checked and unchecked states.",{"title":312,"path":313,"stem":314,"framework":16,"category":309,"description":315},"CheckboxGroup","\u002Fdocs\u002Fcomponents\u002Fcheckbox-group","docs\u002F2.components\u002Fcheckbox-group","A set of checklist buttons to select multiple option from a list.",{"title":317,"path":318,"stem":319,"framework":16,"category":178,"description":320},"Chip","\u002Fdocs\u002Fcomponents\u002Fchip","docs\u002F2.components\u002Fchip","An indicator of a numeric value or a state.",{"title":322,"path":323,"stem":324,"framework":16,"category":178,"description":325},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002F2.components\u002Fcollapsible","A collapsible element to toggle visibility of its content.",{"title":327,"path":328,"stem":329,"framework":16,"category":330,"description":331},"ColorModeAvatar","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-avatar","docs\u002F2.components\u002Fcolor-mode-avatar","color-mode","An Avatar with a different source for light and dark mode.",{"title":333,"path":334,"stem":335,"framework":16,"category":330,"description":336},"ColorModeButton","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-button","docs\u002F2.components\u002Fcolor-mode-button","A Button to switch between light and dark mode.",{"title":338,"path":339,"stem":340,"framework":16,"category":330,"description":341},"ColorModeImage","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-image","docs\u002F2.components\u002Fcolor-mode-image","An image element with a different source for light and dark mode.",{"title":343,"path":344,"stem":345,"framework":16,"category":330,"description":346},"ColorModeSelect","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-select","docs\u002F2.components\u002Fcolor-mode-select","A Select to switch between system, dark & light mode.",{"title":348,"path":349,"stem":350,"framework":16,"category":330,"description":351},"ColorModeSwitch","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-switch","docs\u002F2.components\u002Fcolor-mode-switch","A switch to toggle between light and dark mode.",{"title":353,"path":354,"stem":355,"framework":16,"category":309,"description":356},"ColorPicker","\u002Fdocs\u002Fcomponents\u002Fcolor-picker","docs\u002F2.components\u002Fcolor-picker","A component to select a color.",{"title":358,"path":359,"stem":360,"framework":16,"category":226,"description":361},"CommandPalette","\u002Fdocs\u002Fcomponents\u002Fcommand-palette","docs\u002F2.components\u002Fcommand-palette","A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.",{"title":363,"path":364,"stem":365,"framework":16,"category":184,"description":366},"Container","\u002Fdocs\u002Fcomponents\u002Fcontainer","docs\u002F2.components\u002Fcontainer","A container lets you center and constrain the width of your content.",{"title":368,"path":369,"stem":370,"framework":28,"category":371,"description":372},"ContentNavigation","\u002Fdocs\u002Fcomponents\u002Fcontent-navigation","docs\u002F2.components\u002Fcontent-navigation","content","An accordion-style navigation component for organizing page links.",{"title":374,"path":375,"stem":376,"framework":28,"category":371,"description":377},"ContentSearch","\u002Fdocs\u002Fcomponents\u002Fcontent-search","docs\u002F2.components\u002Fcontent-search","A ready to use CommandPalette to add to your documentation.",{"title":379,"path":380,"stem":381,"framework":28,"category":371,"description":382},"ContentSearchButton","\u002Fdocs\u002Fcomponents\u002Fcontent-search-button","docs\u002F2.components\u002Fcontent-search-button","A pre-styled Button to open the ContentSearch modal.",{"title":384,"path":385,"stem":386,"framework":28,"category":371,"description":387},"ContentSurround","\u002Fdocs\u002Fcomponents\u002Fcontent-surround","docs\u002F2.components\u002Fcontent-surround","A pair of prev and next links to navigate between pages.",{"title":389,"path":390,"stem":391,"framework":28,"category":371,"description":392},"ContentToc","\u002Fdocs\u002Fcomponents\u002Fcontent-toc","docs\u002F2.components\u002Fcontent-toc","A sticky Table of Contents with automatic active anchor link highlighting.",{"title":394,"path":395,"stem":396,"framework":16,"category":397,"description":398},"ContextMenu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002Fcontext-menu","overlay","A menu to display actions when right-clicking on an element.",{"title":400,"path":401,"stem":402,"framework":16,"category":403,"description":404},"DashboardGroup","\u002Fdocs\u002Fcomponents\u002Fdashboard-group","docs\u002F2.components\u002Fdashboard-group","dashboard","A fixed layout component that provides context for dashboard components with sidebar state management and persistence.",{"title":406,"path":407,"stem":408,"framework":16,"category":403,"description":409},"DashboardNavbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-navbar","docs\u002F2.components\u002Fdashboard-navbar","A responsive navbar to display in a dashboard.",{"title":411,"path":412,"stem":413,"framework":16,"category":403,"description":414},"DashboardPanel","\u002Fdocs\u002Fcomponents\u002Fdashboard-panel","docs\u002F2.components\u002Fdashboard-panel","A resizable panel to display in a dashboard.",{"title":416,"path":417,"stem":418,"framework":16,"category":403,"description":419},"DashboardResizeHandle","\u002Fdocs\u002Fcomponents\u002Fdashboard-resize-handle","docs\u002F2.components\u002Fdashboard-resize-handle","A handle to resize a sidebar or panel.",{"title":421,"path":422,"stem":423,"framework":16,"category":403,"description":424},"DashboardSearch","\u002Fdocs\u002Fcomponents\u002Fdashboard-search","docs\u002F2.components\u002Fdashboard-search","A ready to use CommandPalette to add to your dashboard.",{"title":426,"path":427,"stem":428,"framework":16,"category":403,"description":429},"DashboardSearchButton","\u002Fdocs\u002Fcomponents\u002Fdashboard-search-button","docs\u002F2.components\u002Fdashboard-search-button","A pre-styled Button to open the DashboardSearch modal.",{"title":431,"path":432,"stem":433,"framework":16,"category":403,"description":434},"DashboardSidebar","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar","docs\u002F2.components\u002Fdashboard-sidebar","A resizable and collapsible sidebar to display in a dashboard.",{"title":436,"path":437,"stem":438,"framework":16,"category":403,"description":439},"DashboardSidebarCollapse","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-collapse","docs\u002F2.components\u002Fdashboard-sidebar-collapse","A Button to collapse the sidebar on desktop.",{"title":441,"path":442,"stem":443,"framework":16,"category":403,"description":444},"DashboardSidebarToggle","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-toggle","docs\u002F2.components\u002Fdashboard-sidebar-toggle","A Button to toggle the sidebar on mobile.",{"title":446,"path":447,"stem":448,"framework":16,"category":403,"description":449},"DashboardToolbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-toolbar","docs\u002F2.components\u002Fdashboard-toolbar","A toolbar to display under the navbar in a dashboard.",{"title":451,"path":452,"stem":453,"framework":16,"category":397,"description":454},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002Fdrawer","A drawer that smoothly slides in & out of the screen.",{"title":456,"path":457,"stem":458,"framework":16,"category":397,"description":459},"DropdownMenu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002Fdropdown-menu","A menu to display actions when clicking on an element.",{"title":461,"path":462,"stem":463,"framework":16,"category":464,"description":465},"Editor","\u002Fdocs\u002Fcomponents\u002Feditor","docs\u002F2.components\u002Feditor","editor","A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.",{"title":467,"path":468,"stem":469,"framework":16,"category":464,"description":470},"EditorDragHandle","\u002Fdocs\u002Fcomponents\u002Feditor-drag-handle","docs\u002F2.components\u002Feditor-drag-handle","A draggable handle for reordering and selecting blocks in the editor.",{"title":472,"path":473,"stem":474,"framework":16,"category":464,"description":475},"EditorEmojiMenu","\u002Fdocs\u002Fcomponents\u002Feditor-emoji-menu","docs\u002F2.components\u002Feditor-emoji-menu","An emoji picker menu that displays emoji suggestions when typing the : character in the editor.",{"title":477,"path":478,"stem":479,"framework":16,"category":464,"description":480},"EditorMentionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-mention-menu","docs\u002F2.components\u002Feditor-mention-menu","A mention menu that displays user suggestions when typing a trigger character in the editor.",{"title":482,"path":483,"stem":484,"framework":16,"category":464,"description":485},"EditorSuggestionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-suggestion-menu","docs\u002F2.components\u002Feditor-suggestion-menu","A command menu that displays formatting and action suggestions when typing the \u002F character in the editor.",{"title":487,"path":488,"stem":489,"framework":16,"category":464,"description":490},"EditorToolbar","\u002Fdocs\u002Fcomponents\u002Feditor-toolbar","docs\u002F2.components\u002Feditor-toolbar","A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.",{"title":492,"path":493,"stem":494,"framework":16,"category":172,"description":495},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002F2.components\u002Fempty","A component to display an empty state.",{"title":497,"path":498,"stem":499,"framework":16,"category":184,"description":500},"Error","\u002Fdocs\u002Fcomponents\u002Ferror","docs\u002F2.components\u002Ferror","A pre-built error component with NuxtError support.",{"title":502,"path":503,"stem":504,"framework":16,"category":178,"description":505},"FieldGroup","\u002Fdocs\u002Fcomponents\u002Ffield-group","docs\u002F2.components\u002Ffield-group","Group multiple button-like elements together.",{"title":507,"path":508,"stem":509,"framework":16,"category":309,"description":510},"FileUpload","\u002Fdocs\u002Fcomponents\u002Ffile-upload","docs\u002F2.components\u002Ffile-upload","An input element to upload files.",{"title":512,"path":513,"stem":514,"framework":16,"category":184,"description":515},"Footer","\u002Fdocs\u002Fcomponents\u002Ffooter","docs\u002F2.components\u002Ffooter","A responsive footer component.",{"title":517,"path":518,"stem":519,"framework":16,"category":226,"description":520},"FooterColumns","\u002Fdocs\u002Fcomponents\u002Ffooter-columns","docs\u002F2.components\u002Ffooter-columns","A list of links as columns to display in your Footer.",{"title":522,"path":523,"stem":524,"framework":16,"category":309,"description":525},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002F2.components\u002Fform","A form component with built-in validation and submission handling.",{"title":527,"path":528,"stem":529,"framework":16,"category":309,"description":530},"FormField","\u002Fdocs\u002Fcomponents\u002Fform-field","docs\u002F2.components\u002Fform-field","A wrapper for form elements that provides validation and error handling.",{"title":532,"path":533,"stem":534,"framework":16,"category":184,"description":535},"Header","\u002Fdocs\u002Fcomponents\u002Fheader","docs\u002F2.components\u002Fheader","A responsive header component.",{"title":537,"path":538,"stem":539,"framework":16,"category":178,"description":540},"Icon","\u002Fdocs\u002Fcomponents\u002Ficon","docs\u002F2.components\u002Ficon","A component to display any icon from Iconify or another component.",{"title":542,"path":543,"stem":544,"framework":16,"category":309,"description":545},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002Finput","An input element to enter text.",{"title":547,"path":548,"stem":549,"framework":16,"category":309,"description":550},"InputDate","\u002Fdocs\u002Fcomponents\u002Finput-date","docs\u002F2.components\u002Finput-date","An input component for date selection.",{"title":552,"path":553,"stem":554,"framework":16,"category":309,"description":555},"InputMenu","\u002Fdocs\u002Fcomponents\u002Finput-menu","docs\u002F2.components\u002Finput-menu","An autocomplete input with real-time suggestions.",{"title":557,"path":558,"stem":559,"framework":16,"category":309,"description":560},"InputNumber","\u002Fdocs\u002Fcomponents\u002Finput-number","docs\u002F2.components\u002Finput-number","An input for numerical values with a customizable range.",{"title":562,"path":563,"stem":564,"framework":16,"category":309,"description":565},"InputTags","\u002Fdocs\u002Fcomponents\u002Finput-tags","docs\u002F2.components\u002Finput-tags","An input element that displays interactive tags.",{"title":567,"path":568,"stem":569,"framework":16,"category":309,"description":570},"InputTime","\u002Fdocs\u002Fcomponents\u002Finput-time","docs\u002F2.components\u002Finput-time","An input for selecting a time.",{"title":572,"path":573,"stem":574,"framework":16,"category":178,"description":575},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002F2.components\u002Fkbd","A kbd element to display a keyboard key.",{"title":577,"path":578,"stem":579,"framework":16,"category":226,"description":580},"Link","\u002Fdocs\u002Fcomponents\u002Flink","docs\u002F2.components\u002Flink","A wrapper around \u003CNuxtLink> with extra props.",{"title":582,"path":583,"stem":584,"framework":16,"category":585,"description":586},"LocaleSelect","\u002Fdocs\u002Fcomponents\u002Flocale-select","docs\u002F2.components\u002Flocale-select","i18n","A Select to switch between locales.",{"title":588,"path":589,"stem":590,"framework":16,"category":184,"description":591},"Main","\u002Fdocs\u002Fcomponents\u002Fmain","docs\u002F2.components\u002Fmain","A main element that fills the available viewport height.",{"title":593,"path":594,"stem":595,"framework":16,"category":172,"description":596},"Marquee","\u002Fdocs\u002Fcomponents\u002Fmarquee","docs\u002F2.components\u002Fmarquee","A component to create infinite scrolling content.",{"title":598,"path":599,"stem":600,"framework":16,"category":397,"description":601},"Modal","\u002Fdocs\u002Fcomponents\u002Fmodal","docs\u002F2.components\u002Fmodal","A dialog window that can be used to display a message or request user input.",{"title":603,"path":604,"stem":605,"framework":16,"category":226,"description":606},"NavigationMenu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002F2.components\u002Fnavigation-menu","A list of links that can be displayed horizontally or vertically.",{"title":608,"path":609,"stem":610,"framework":16,"category":190,"description":611},"Page","\u002Fdocs\u002Fcomponents\u002Fpage","docs\u002F2.components\u002Fpage","A grid layout for your pages with left and right columns.",{"title":613,"path":614,"stem":615,"framework":16,"category":190,"description":616},"PageAnchors","\u002Fdocs\u002Fcomponents\u002Fpage-anchors","docs\u002F2.components\u002Fpage-anchors","A list of anchors to be displayed in the page.",{"title":618,"path":619,"stem":620,"framework":16,"category":190,"description":621},"PageAside","\u002Fdocs\u002Fcomponents\u002Fpage-aside","docs\u002F2.components\u002Fpage-aside","A sticky aside to display your page navigation.",{"title":623,"path":624,"stem":625,"framework":16,"category":190,"description":626},"PageBody","\u002Fdocs\u002Fcomponents\u002Fpage-body","docs\u002F2.components\u002Fpage-body","The main content of your page.",{"title":628,"path":629,"stem":630,"framework":16,"category":190,"description":631},"PageCard","\u002Fdocs\u002Fcomponents\u002Fpage-card","docs\u002F2.components\u002Fpage-card","A pre-styled card component that displays a title, description and optional link.",{"title":633,"path":634,"stem":635,"framework":16,"category":190,"description":636},"PageColumns","\u002Fdocs\u002Fcomponents\u002Fpage-columns","docs\u002F2.components\u002Fpage-columns","A responsive multi-column layout system for organizing content side-by-side.",{"title":638,"path":639,"stem":640,"framework":16,"category":190,"description":641},"PageCTA","\u002Fdocs\u002Fcomponents\u002Fpage-cta","docs\u002F2.components\u002Fpage-cta","A call to action section to display in your pages.",{"title":643,"path":644,"stem":645,"framework":16,"category":190,"description":646},"PageFeature","\u002Fdocs\u002Fcomponents\u002Fpage-feature","docs\u002F2.components\u002Fpage-feature","A component to showcase key features of your application.",{"title":648,"path":649,"stem":650,"framework":16,"category":190,"description":651},"PageGrid","\u002Fdocs\u002Fcomponents\u002Fpage-grid","docs\u002F2.components\u002Fpage-grid","A responsive grid system for displaying content in a flexible layout.",{"title":653,"path":654,"stem":655,"framework":16,"category":190,"description":656},"PageHeader","\u002Fdocs\u002Fcomponents\u002Fpage-header","docs\u002F2.components\u002Fpage-header","A responsive header for your pages.",{"title":658,"path":659,"stem":660,"framework":16,"category":190,"description":661},"PageHero","\u002Fdocs\u002Fcomponents\u002Fpage-hero","docs\u002F2.components\u002Fpage-hero","A responsive hero for your pages.",{"title":663,"path":664,"stem":665,"framework":16,"category":190,"description":666},"PageLinks","\u002Fdocs\u002Fcomponents\u002Fpage-links","docs\u002F2.components\u002Fpage-links","A list of links to be displayed in the page.",{"title":668,"path":669,"stem":670,"framework":16,"category":190,"description":671},"PageList","\u002Fdocs\u002Fcomponents\u002Fpage-list","docs\u002F2.components\u002Fpage-list","A vertical list layout for displaying content in a stacked format.",{"title":673,"path":674,"stem":675,"framework":16,"category":190,"description":676},"PageLogos","\u002Fdocs\u002Fcomponents\u002Fpage-logos","docs\u002F2.components\u002Fpage-logos","A list of logos or images to display on your pages.",{"title":678,"path":679,"stem":680,"framework":16,"category":190,"description":681},"PageSection","\u002Fdocs\u002Fcomponents\u002Fpage-section","docs\u002F2.components\u002Fpage-section","A responsive section for your pages.",{"title":683,"path":684,"stem":685,"framework":16,"category":226,"description":686},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002F2.components\u002Fpagination","A list of buttons or links to navigate through pages.",{"title":688,"path":689,"stem":690,"framework":16,"category":309,"description":691},"PinInput","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002F2.components\u002Fpin-input","An input element to enter a pin.",{"title":693,"path":694,"stem":695,"framework":16,"category":397,"description":696},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002Fpopover","A non-modal dialog that floats around a trigger element.",{"title":698,"path":699,"stem":700,"framework":16,"category":190,"description":701},"PricingPlan","\u002Fdocs\u002Fcomponents\u002Fpricing-plan","docs\u002F2.components\u002Fpricing-plan","A customizable pricing plan to display in a pricing page.",{"title":703,"path":704,"stem":705,"framework":16,"category":190,"description":706},"PricingPlans","\u002Fdocs\u002Fcomponents\u002Fpricing-plans","docs\u002F2.components\u002Fpricing-plans","Display a list of pricing plans in a responsive grid layout.",{"title":708,"path":709,"stem":710,"framework":16,"category":190,"description":711},"PricingTable","\u002Fdocs\u002Fcomponents\u002Fpricing-table","docs\u002F2.components\u002Fpricing-table","A responsive pricing table component that displays tiered pricing plans with feature comparisons.",{"title":713,"path":714,"stem":715,"framework":16,"category":178,"description":716},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002Fprogress","An indicator showing the progress of a task.",{"title":718,"path":719,"stem":720,"framework":16,"category":309,"description":721},"RadioGroup","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002Fradio-group","A set of radio buttons to select a single option from a list.",{"title":723,"path":724,"stem":725,"framework":16,"category":172,"description":726},"ScrollArea","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002F2.components\u002Fscroll-area","A flexible scroll container with virtualization support.",{"title":728,"path":729,"stem":730,"framework":16,"category":309,"description":731},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002Fselect","A select element to choose from a list of options.",{"title":733,"path":734,"stem":735,"framework":16,"category":309,"description":736},"SelectMenu","\u002Fdocs\u002Fcomponents\u002Fselect-menu","docs\u002F2.components\u002Fselect-menu","An advanced searchable select element.",{"title":738,"path":739,"stem":740,"framework":16,"category":178,"description":741},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002Fseparator","Separates content horizontally or vertically.",{"title":743,"path":744,"stem":745,"framework":16,"category":184,"description":746,"badge":294},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002Fsidebar","A collapsible sidebar with multiple visual variants.",{"title":748,"path":749,"stem":750,"framework":16,"category":178,"description":751},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002Fskeleton","A placeholder to show while content is loading.",{"title":753,"path":754,"stem":755,"framework":16,"category":397,"description":756},"Slideover","\u002Fdocs\u002Fcomponents\u002Fslideover","docs\u002F2.components\u002Fslideover","A dialog that slides in from any side of the screen.",{"title":758,"path":759,"stem":760,"framework":16,"category":309,"description":761},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002Fslider","An input to select a numeric value within a range.",{"title":763,"path":764,"stem":765,"framework":16,"category":226,"description":766},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002F2.components\u002Fstepper","A set of steps that are used to indicate progress through a multi-step process.",{"title":768,"path":769,"stem":770,"framework":16,"category":309,"description":771},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002Fswitch","A control that toggles between two states.",{"title":773,"path":774,"stem":775,"framework":16,"category":172,"description":776},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002F2.components\u002Ftable","A responsive table element to display data in rows and columns.",{"title":778,"path":779,"stem":780,"framework":16,"category":226,"description":781},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002Ftabs","A set of tab panels that are displayed one at a time.",{"title":783,"path":784,"stem":785,"framework":16,"category":309,"description":786},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002F2.components\u002Ftextarea","A textarea element to input multi-line text.",{"title":54,"path":788,"stem":789,"framework":16,"category":184,"description":790,"badge":791},"\u002Fdocs\u002Fcomponents\u002Ftheme","docs\u002F2.components\u002Ftheme","A headless component to theme child components.","New",{"title":793,"path":794,"stem":795,"framework":16,"category":172,"description":796},"Timeline","\u002Fdocs\u002Fcomponents\u002Ftimeline","docs\u002F2.components\u002Ftimeline","A component that displays a sequence of events with dates, titles, icons or avatars.",{"title":798,"path":799,"stem":800,"framework":16,"category":397,"description":801},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002F2.components\u002Ftoast","A succinct message to provide information or feedback to the user.",{"title":803,"path":804,"stem":805,"framework":16,"category":397,"description":806},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002Ftooltip","A popup that reveals information when hovering over an element.",{"title":808,"path":809,"stem":810,"framework":16,"category":172,"description":811},"Tree","\u002Fdocs\u002Fcomponents\u002Ftree","docs\u002F2.components\u002Ftree","A tree view component to display and interact with hierarchical data structures.",{"title":813,"path":814,"stem":815,"framework":16,"category":172,"description":816},"User","\u002Fdocs\u002Fcomponents\u002Fuser","docs\u002F2.components\u002Fuser","Display user information with name, description and avatar.",{"title":818,"framework":16,"category":16,"description":16,"icon":819,"path":820,"stem":821,"children":822,"page":36},"Composables","i-lucide-square-function","\u002Fdocs\u002Fcomposables","docs\u002F3.composables",[823,828,833,838,843,848,853],{"title":824,"path":825,"stem":826,"framework":16,"category":16,"description":827},"defineLocale","\u002Fdocs\u002Fcomposables\u002Fdefine-locale","docs\u002F3.composables\u002Fdefine-locale","A utility to create a custom locale for your app.",{"title":829,"path":830,"stem":831,"framework":16,"category":16,"description":832},"defineShortcuts","\u002Fdocs\u002Fcomposables\u002Fdefine-shortcuts","docs\u002F3.composables\u002Fdefine-shortcuts","A composable to define keyboard shortcuts in your app.",{"title":834,"path":835,"stem":836,"framework":16,"category":16,"description":837},"extendLocale","\u002Fdocs\u002Fcomposables\u002Fextend-locale","docs\u002F3.composables\u002Fextend-locale","A utility to extend an existing locale with custom translations.",{"title":839,"path":840,"stem":841,"framework":16,"category":16,"description":842},"extractShortcuts","\u002Fdocs\u002Fcomposables\u002Fextract-shortcuts","docs\u002F3.composables\u002Fextract-shortcuts","A utility to extract keyboard shortcuts from menu items.",{"title":844,"path":845,"stem":846,"framework":16,"category":16,"description":847},"useOverlay","\u002Fdocs\u002Fcomposables\u002Fuse-overlay","docs\u002F3.composables\u002Fuse-overlay","A composable to programmatically control overlays.",{"title":849,"path":850,"stem":851,"framework":16,"category":16,"description":852,"badge":294},"useScrollShadow","\u002Fdocs\u002Fcomposables\u002Fuse-scroll-shadow","docs\u002F3.composables\u002Fuse-scroll-shadow","A composable to apply scroll shadow effects on any scrollable element.",{"title":854,"path":855,"stem":856,"framework":16,"category":16,"description":857},"useToast","\u002Fdocs\u002Fcomposables\u002Fuse-toast","docs\u002F3.composables\u002Fuse-toast","A composable to display toast notifications in your app.",{"title":859,"path":860,"stem":861,"children":862,"framework":28,"category":16,"description":16,"icon":958},"Typography","\u002Fdocs\u002Ftypography","docs\u002F4.typography\u002F1.index",[863,865,870,875,880,885,890,894,899,903,908,913,918,923,928,932,937,941,945,949,954],{"title":15,"path":860,"stem":861,"framework":28,"category":16,"description":864},"Beautiful typography components and utilities to style your content with Nuxt UI.",{"title":866,"path":867,"stem":868,"framework":28,"category":16,"description":869},"Headers and text","\u002Fdocs\u002Ftypography\u002Fheaders-and-text","docs\u002F4.typography\u002F2.headers-and-text","Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.",{"title":871,"path":872,"stem":873,"framework":28,"category":16,"description":874},"Lists and tables","\u002Fdocs\u002Ftypography\u002Flists-and-tables","docs\u002F4.typography\u002F3.lists-and-tables","Organize information with styled lists and responsive tables for clear, consistent readability.",{"title":876,"path":877,"stem":878,"framework":28,"category":16,"description":879},"Images and embeds","\u002Fdocs\u002Ftypography\u002Fimages-and-embeds","docs\u002F4.typography\u002F4.images-and-embeds","Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.",{"title":881,"path":882,"stem":883,"framework":28,"category":16,"description":884},"Code","\u002Fdocs\u002Ftypography\u002Fcode","docs\u002F4.typography\u002F5.code","Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.",{"title":169,"path":886,"stem":887,"framework":28,"category":888,"description":889},"\u002Fdocs\u002Ftypography\u002Faccordion","docs\u002F4.typography\u002Faccordion","components","Create expandable content sections for better information organization.",{"title":203,"path":891,"stem":892,"framework":28,"category":888,"description":893},"\u002Fdocs\u002Ftypography\u002Fbadge","docs\u002F4.typography\u002Fbadge","Display version numbers, status labels, and tags within your content.",{"title":895,"path":896,"stem":897,"framework":28,"category":888,"description":898},"Callout","\u002Fdocs\u002Ftypography\u002Fcallout","docs\u002F4.typography\u002Fcallout","Highlight important information with eye-catching colored boxes and icons.",{"title":239,"path":900,"stem":901,"framework":28,"category":888,"description":902},"\u002Fdocs\u002Ftypography\u002Fcard","docs\u002F4.typography\u002Fcard","Create highlighted content blocks with optional links and navigation.",{"title":904,"path":905,"stem":906,"framework":28,"category":888,"description":907},"CardGroup","\u002Fdocs\u002Ftypography\u002Fcard-group","docs\u002F4.typography\u002Fcard-group","Organize multiple cards in responsive grid layouts for better content presentation.",{"title":909,"path":910,"stem":911,"framework":28,"category":888,"description":912},"CodeCollapse","\u002Fdocs\u002Ftypography\u002Fcode-collapse","docs\u002F4.typography\u002Fcode-collapse","Make long code blocks collapsible to save space and improve readability.",{"title":914,"path":915,"stem":916,"framework":28,"category":888,"description":917},"CodeGroup","\u002Fdocs\u002Ftypography\u002Fcode-group","docs\u002F4.typography\u002Fcode-group","Group multiple code examples in tabbed interfaces for easy comparison.",{"title":919,"path":920,"stem":921,"framework":28,"category":888,"description":922},"CodePreview","\u002Fdocs\u002Ftypography\u002Fcode-preview","docs\u002F4.typography\u002Fcode-preview","Display code examples with a preview and their source for clearer documentation.",{"title":924,"path":925,"stem":926,"framework":28,"category":888,"description":927},"CodeTree","\u002Fdocs\u002Ftypography\u002Fcode-tree","docs\u002F4.typography\u002Fcode-tree","Visualize file and folder structures with syntax-highlighted code.",{"title":322,"path":929,"stem":930,"framework":28,"category":888,"description":931},"\u002Fdocs\u002Ftypography\u002Fcollapsible","docs\u002F4.typography\u002Fcollapsible","Toggle content visibility with smooth expand and collapse animations.",{"title":933,"path":934,"stem":935,"framework":28,"category":888,"description":936},"Field","\u002Fdocs\u002Ftypography\u002Ffield","docs\u002F4.typography\u002Ffield","Document API parameters, props, and configuration options clearly.",{"title":502,"path":938,"stem":939,"framework":28,"category":888,"description":940},"\u002Fdocs\u002Ftypography\u002Ffield-group","docs\u002F4.typography\u002Ffield-group","Group related fields together for comprehensive API documentation.",{"title":537,"path":942,"stem":943,"framework":28,"category":888,"description":944},"\u002Fdocs\u002Ftypography\u002Ficon","docs\u002F4.typography\u002Ficon","Display icons from popular icon libraries to enhance your content.",{"title":572,"path":946,"stem":947,"framework":28,"category":888,"description":948},"\u002Fdocs\u002Ftypography\u002Fkbd","docs\u002F4.typography\u002Fkbd","Display keyboard shortcuts and key combinations with proper styling.",{"title":950,"path":951,"stem":952,"framework":28,"category":888,"description":953},"Steps","\u002Fdocs\u002Ftypography\u002Fsteps","docs\u002F4.typography\u002Fsteps","Transform headings into numbered step-by-step guides and tutorials.",{"title":778,"path":955,"stem":956,"framework":28,"category":888,"description":957},"\u002Fdocs\u002Ftypography\u002Ftabs","docs\u002F4.typography\u002Ftabs","Organize related content in interactive tabbed interfaces.","i-lucide-square-pilcrow",{"id":960,"title":961,"body":962,"category":16,"description":5423,"extension":5424,"framework":16,"index":36,"links":5425,"meta":5428,"navigation":36,"path":5429,"seo":5430,"stem":5431,"__hash__":5432},"docs\u002Fdocs\u002F1.getting-started\u002F3.migration\u002F2.v3.md","Migration to v3",{"type":963,"value":964,"toc":5409},"minimark",[965,969,992,995,1000,1334,1338,1341,1345,1363,1487,1490,1500,1533,1589,1609,1665,1673,1692,1698,1711,1780,1784,1798,1809,1930,1941,1968,1978,1982,1985,2135,2138,2530,2534,2537,2552,2597,2616,2628,2681,2699,2716,2771,2783,2810,2829,2841,2943,2955,2972,3034,3042,3054,3081,3089,3103,3130,3144,3171,3181,3199,3226,3245,3272,3296,3350,3364,3421,3435,3453,3480,3499,3526,3533,3583,3597,3624,3634,3659,3671,3698,3711,3738,3750,3777,3789,3816,3832,3914,3925,3952,3975,4167,4181,4192,4237,4253,4271,4298,4310,4365,4372,4413,4432,4459,4471,4498,4510,4521,4587,4595,4614,4641,4661,4688,4707,4734,4747,4774,4792,4838,4842,4856,4892,4906,4909,4938,4992,4995,5095,5105,5276,5280,5291,5397,5400,5405],[966,967,968],"p",{},"Nuxt UI v3 is a new major version rebuilt from the ground up, introducing a modern architecture with significant performance improvements and an enhanced developer experience. This major release includes several breaking changes alongside powerful new features and capabilities:",[970,971,972,980,986],"ul",{},[973,974,975,979],"li",{},[976,977,978],"strong",{},"Tailwind CSS v4",": Migration from JavaScript to CSS-based configuration",[973,981,982,985],{},[976,983,984],{},"Reka UI",": Replacing Headless UI as the underlying component library",[973,987,988,991],{},[976,989,990],{},"Tailwind Variants",": New styling API for component variants",[966,993,994],{},"This guide provides step by step instructions to migrate your application from v2 to v3.",[996,997,999],"h2",{"id":998},"migrate-your-project","Migrate your project",[1001,1002,1003,1008,1011,1023,1038,1133,1138,1154,1158,1163,1225,1231,1264,1274],"steps",{},[1004,1005,1007],"h3",{"id":1006},"update-tailwind-css","Update Tailwind CSS",[966,1009,1010],{},"Tailwind CSS v4 introduces significant changes to its configuration approach. The official Tailwind upgrade tool will help automate most of the migration process.",[1012,1013,1016],"note",{"to":1014,"target":1015},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fupgrade-guide#changes-from-v3","_blank",[966,1017,1018,1019,1022],{},"For a detailed walkthrough of all changes, refer to the official ",[976,1020,1021],{},"Tailwind CSS v4 upgrade guide",".",[1024,1025,1026],"ol",{},[973,1027,1028,1029,1033,1034,1037],{},"Create a ",[1030,1031,1032],"code",{},"main.css"," file and import it in your ",[1030,1035,1036],{},"nuxt.config.ts"," file:",[1039,1040,1041,1074],"code-group",{},[1042,1043,1049],"pre",{"className":1044,"code":1045,"filename":1046,"language":1047,"meta":1048,"style":1048},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@import \"tailwindcss\";\n","app\u002Fassets\u002Fcss\u002Fmain.css","css","",[1030,1050,1051],{"__ignoreMap":1048},[1052,1053,1056,1060,1064,1068,1071],"span",{"class":1054,"line":1055},"line",1,[1052,1057,1059],{"class":1058},"s7zQu","@import",[1052,1061,1063],{"class":1062},"sMK4o"," \"",[1052,1065,1067],{"class":1066},"sfazB","tailwindcss",[1052,1069,1070],{"class":1062},"\"",[1052,1072,1073],{"class":1062},";\n",[1042,1075,1079],{"className":1076,"code":1077,"filename":1036,"language":1078,"meta":1048,"style":1048},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  css: ['~\u002Fassets\u002Fcss\u002Fmain.css']\n})\n","ts",[1030,1080,1081,1100,1124],{"__ignoreMap":1048},[1052,1082,1083,1086,1089,1093,1097],{"class":1054,"line":1055},[1052,1084,1085],{"class":1058},"export",[1052,1087,1088],{"class":1058}," default",[1052,1090,1092],{"class":1091},"s2Zo4"," defineNuxtConfig",[1052,1094,1096],{"class":1095},"sTEyZ","(",[1052,1098,1099],{"class":1062},"{\n",[1052,1101,1103,1107,1110,1113,1116,1119,1121],{"class":1054,"line":1102},2,[1052,1104,1106],{"class":1105},"swJcz","  css",[1052,1108,1109],{"class":1062},":",[1052,1111,1112],{"class":1095}," [",[1052,1114,1115],{"class":1062},"'",[1052,1117,1118],{"class":1066},"~\u002Fassets\u002Fcss\u002Fmain.css",[1052,1120,1115],{"class":1062},[1052,1122,1123],{"class":1095},"]\n",[1052,1125,1127,1130],{"class":1054,"line":1126},3,[1052,1128,1129],{"class":1062},"}",[1052,1131,1132],{"class":1095},")\n",[1024,1134,1135],{"start":1102},[973,1136,1137],{},"Run the Tailwind CSS upgrade tool:",[1042,1139,1143],{"className":1140,"code":1141,"language":1142,"meta":1048,"style":1048},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx @tailwindcss\u002Fupgrade\n","bash",[1030,1144,1145],{"__ignoreMap":1048},[1052,1146,1147,1151],{"class":1054,"line":1055},[1052,1148,1150],{"class":1149},"sBMFI","npx",[1052,1152,1153],{"class":1066}," @tailwindcss\u002Fupgrade\n",[1004,1155,1157],{"id":1156},"update-nuxt-ui","Update Nuxt UI",[1024,1159,1160],{"start":1126},[973,1161,1162],{},"Install the latest version of the package:",[1039,1164,1166,1182,1196,1211],{"sync":1165},"pm",[1042,1167,1170],{"className":1140,"code":1168,"filename":1169,"language":1142,"meta":1048,"style":1048},"pnpm add @nuxt\u002Fui\n","pnpm",[1030,1171,1172],{"__ignoreMap":1048},[1052,1173,1174,1176,1179],{"class":1054,"line":1055},[1052,1175,1169],{"class":1149},[1052,1177,1178],{"class":1066}," add",[1052,1180,1181],{"class":1066}," @nuxt\u002Fui\n",[1042,1183,1186],{"className":1140,"code":1184,"filename":1185,"language":1142,"meta":1048,"style":1048},"yarn add @nuxt\u002Fui\n","yarn",[1030,1187,1188],{"__ignoreMap":1048},[1052,1189,1190,1192,1194],{"class":1054,"line":1055},[1052,1191,1185],{"class":1149},[1052,1193,1178],{"class":1066},[1052,1195,1181],{"class":1066},[1042,1197,1200],{"className":1140,"code":1198,"filename":1199,"language":1142,"meta":1048,"style":1048},"npm install @nuxt\u002Fui\n","npm",[1030,1201,1202],{"__ignoreMap":1048},[1052,1203,1204,1206,1209],{"class":1054,"line":1055},[1052,1205,1199],{"class":1149},[1052,1207,1208],{"class":1066}," install",[1052,1210,1181],{"class":1066},[1042,1212,1215],{"className":1140,"code":1213,"filename":1214,"language":1142,"meta":1048,"style":1048},"bun add @nuxt\u002Fui\n","bun",[1030,1216,1217],{"__ignoreMap":1048},[1052,1218,1219,1221,1223],{"class":1054,"line":1055},[1052,1220,1214],{"class":1149},[1052,1222,1178],{"class":1066},[1052,1224,1181],{"class":1066},[1024,1226,1228],{"start":1227},4,[973,1229,1230],{},"Import it in your CSS:",[1042,1232,1235],{"className":1044,"code":1233,"filename":1046,"highlights":1234,"language":1047,"meta":1048,"style":1048},"@import \"tailwindcss\";\n@import \"@nuxt\u002Fui\";\n",[1102],[1030,1236,1237,1249],{"__ignoreMap":1048},[1052,1238,1239,1241,1243,1245,1247],{"class":1054,"line":1055},[1052,1240,1059],{"class":1058},[1052,1242,1063],{"class":1062},[1052,1244,1067],{"class":1066},[1052,1246,1070],{"class":1062},[1052,1248,1073],{"class":1062},[1052,1250,1253,1255,1257,1260,1262],{"class":1251,"line":1102},[1054,1252],"highlight",[1052,1254,1059],{"class":1058},[1052,1256,1063],{"class":1062},[1052,1258,1259],{"class":1066},"@nuxt\u002Fui",[1052,1261,1070],{"class":1062},[1052,1263,1073],{"class":1062},[1024,1265,1267],{"start":1266},5,[973,1268,1269,1270,1273],{},"Wrap your app with the ",[1271,1272,181],"a",{"href":182}," component:",[1042,1275,1280],{"className":1276,"code":1277,"filename":1278,"highlights":1279,"language":34,"meta":1048,"style":1048},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUApp>\n    \u003CNuxtPage \u002F>\n  \u003C\u002FUApp>\n\u003C\u002Ftemplate>\n","app.vue",[1102,1227],[1030,1281,1282,1293,1304,1315,1325],{"__ignoreMap":1048},[1052,1283,1284,1287,1290],{"class":1054,"line":1055},[1052,1285,1286],{"class":1062},"\u003C",[1052,1288,1289],{"class":1105},"template",[1052,1291,1292],{"class":1062},">\n",[1052,1294,1296,1299,1302],{"class":1295,"line":1102},[1054,1252],[1052,1297,1298],{"class":1062},"  \u003C",[1052,1300,1301],{"class":1105},"UApp",[1052,1303,1292],{"class":1062},[1052,1305,1306,1309,1312],{"class":1054,"line":1126},[1052,1307,1308],{"class":1062},"    \u003C",[1052,1310,1311],{"class":1105},"NuxtPage",[1052,1313,1314],{"class":1062}," \u002F>\n",[1052,1316,1318,1321,1323],{"class":1317,"line":1227},[1054,1252],[1052,1319,1320],{"class":1062},"  \u003C\u002F",[1052,1322,1301],{"class":1105},[1052,1324,1292],{"class":1062},[1052,1326,1327,1330,1332],{"class":1054,"line":1266},[1052,1328,1329],{"class":1062},"\u003C\u002F",[1052,1331,1289],{"class":1105},[1052,1333,1292],{"class":1062},[996,1335,1337],{"id":1336},"changes-from-v2","Changes from v2",[966,1339,1340],{},"Now that you have updated your project, you can start migrating your code. Here's a comprehensive list of all the breaking changes in Nuxt UI v3.",[1004,1342,1344],{"id":1343},"updated-design-system","Updated design system",[966,1346,1347,1348,1351,1352,1351,1355,1358,1359,1362],{},"In Nuxt UI v2, we had a mix between a design system with ",[1030,1349,1350],{},"primary",", ",[1030,1353,1354],{},"gray",[1030,1356,1357],{},"error"," aliases and all the colors from Tailwind CSS. We've replaced it with a proper ",[1271,1360,1361],{"href":60},"design system"," with 7 color aliases:",[1364,1365,1366,1382],"table",{},[1367,1368,1369],"thead",{},[1370,1371,1372,1376,1379],"tr",{},[1373,1374,1375],"th",{},"Color",[1373,1377,1378],{},"Default",[1373,1380,1381],{},"Description",[1383,1384,1385,1400,1415,1429,1443,1458,1472],"tbody",{},[1370,1386,1387,1392,1397],{},[1388,1389,1390],"td",{},[1030,1391,1350],{"color":1350},[1388,1393,1394],{},[1030,1395,1396],{},"green",[1388,1398,1399],{},"Main brand color, used as the default color for components.",[1370,1401,1402,1407,1412],{},[1388,1403,1404],{},[1030,1405,1406],{"color":1406},"secondary",[1388,1408,1409],{},[1030,1410,1411],{},"blue",[1388,1413,1414],{},"Secondary color to complement the primary color.",[1370,1416,1417,1422,1426],{},[1388,1418,1419],{},[1030,1420,1421],{"color":1421},"success",[1388,1423,1424],{},[1030,1425,1396],{},[1388,1427,1428],{},"Used for success states.",[1370,1430,1431,1436,1440],{},[1388,1432,1433],{},[1030,1434,1435],{"color":1435},"info",[1388,1437,1438],{},[1030,1439,1411],{},[1388,1441,1442],{},"Used for informational states.",[1370,1444,1445,1450,1455],{},[1388,1446,1447],{},[1030,1448,1449],{"color":1449},"warning",[1388,1451,1452],{},[1030,1453,1454],{},"yellow",[1388,1456,1457],{},"Used for warning states.",[1370,1459,1460,1464,1469],{},[1388,1461,1462],{},[1030,1463,1357],{"color":1357},[1388,1465,1466],{},[1030,1467,1468],{},"red",[1388,1470,1471],{},"Used for form error validation states.",[1370,1473,1474,1479,1484],{},[1388,1475,1476],{},[1030,1477,1478],{},"neutral",[1388,1480,1481],{},[1030,1482,1483],{},"slate",[1388,1485,1486],{},"Neutral color for backgrounds, text, etc.",[966,1488,1489],{},"This change introduces several breaking changes that you need to be aware of:",[970,1491,1492],{},[973,1493,1494,1495,1497,1498],{},"The ",[1030,1496,1354],{}," color has been renamed to ",[1030,1499,1478],{},[1042,1501,1505],{"className":1502,"code":1503,"language":1504,"meta":1048,"style":1048},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n- \u003Cp class=\"text-gray-500 dark:text-gray-400\" \u002F>\n+ \u003Cp class=\"text-neutral-500 dark:text-neutral-400\" \u002F>\n\u003C\u002Ftemplate>\n","diff",[1030,1506,1507,1512,1520,1528],{"__ignoreMap":1048},[1052,1508,1509],{"class":1054,"line":1055},[1052,1510,1511],{"class":1095},"\u003Ctemplate>\n",[1052,1513,1514,1517],{"class":1054,"line":1102},[1052,1515,1516],{"class":1062},"-",[1052,1518,1519],{"class":1105}," \u003Cp class=\"text-gray-500 dark:text-gray-400\" \u002F>\n",[1052,1521,1522,1525],{"class":1054,"line":1126},[1052,1523,1524],{"class":1062},"+",[1052,1526,1527],{"class":1066}," \u003Cp class=\"text-neutral-500 dark:text-neutral-400\" \u002F>\n",[1052,1529,1530],{"class":1054,"line":1227},[1052,1531,1532],{"class":1095},"\u003C\u002Ftemplate>\n",[1012,1534,1535,1542],{},[966,1536,1537,1538,1541],{},"You can also use the new ",[1271,1539,1540],{"href":66},"design tokens"," to handle light and dark mode:",[1042,1543,1545],{"className":1502,"code":1544,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003Cp class=\"text-gray-500 dark:text-gray-400\" \u002F>\n+ \u003Cp class=\"text-muted\" \u002F>\n\n- \u003Cp class=\"text-gray-900 dark:text-white\" \u002F>\n+ \u003Cp class=\"text-highlighted\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,1546,1547,1551,1557,1564,1569,1576,1584],{"__ignoreMap":1048},[1052,1548,1549],{"class":1054,"line":1055},[1052,1550,1511],{"class":1095},[1052,1552,1553,1555],{"class":1054,"line":1102},[1052,1554,1516],{"class":1062},[1052,1556,1519],{"class":1105},[1052,1558,1559,1561],{"class":1054,"line":1126},[1052,1560,1524],{"class":1062},[1052,1562,1563],{"class":1066}," \u003Cp class=\"text-muted\" \u002F>\n",[1052,1565,1566],{"class":1054,"line":1227},[1052,1567,1568],{"emptyLinePlaceholder":21},"\n",[1052,1570,1571,1573],{"class":1054,"line":1266},[1052,1572,1516],{"class":1062},[1052,1574,1575],{"class":1105}," \u003Cp class=\"text-gray-900 dark:text-white\" \u002F>\n",[1052,1577,1579,1581],{"class":1054,"line":1578},6,[1052,1580,1524],{"class":1062},[1052,1582,1583],{"class":1066}," \u003Cp class=\"text-highlighted\" \u002F>\n",[1052,1585,1587],{"class":1054,"line":1586},7,[1052,1588,1532],{"class":1095},[970,1590,1591],{},[973,1592,1494,1593,1351,1595,1598,1599,1602,1603,1606,1607,1109],{},[1030,1594,1354],{},[1030,1596,1597],{},"black"," and ",[1030,1600,1601],{},"white"," in the ",[1030,1604,1605],{},"color"," props have been removed in favor of ",[1030,1608,1478],{},[1042,1610,1612],{"className":1502,"code":1611,"language":1504,"meta":1048,"style":1048},"- \u003CUButton color=\"black\" \u002F>\n+ \u003CUButton color=\"neutral\" \u002F>\n\n- \u003CUButton color=\"gray\" \u002F>\n+ \u003CUButton color=\"neutral\" variant=\"subtle\" \u002F>\n\n- \u003CUButton color=\"white\" \u002F>\n+ \u003CUButton color=\"neutral\" variant=\"outline\" \u002F>\n",[1030,1613,1614,1621,1628,1632,1639,1646,1650,1657],{"__ignoreMap":1048},[1052,1615,1616,1618],{"class":1054,"line":1055},[1052,1617,1516],{"class":1062},[1052,1619,1620],{"class":1105}," \u003CUButton color=\"black\" \u002F>\n",[1052,1622,1623,1625],{"class":1054,"line":1102},[1052,1624,1524],{"class":1062},[1052,1626,1627],{"class":1066}," \u003CUButton color=\"neutral\" \u002F>\n",[1052,1629,1630],{"class":1054,"line":1126},[1052,1631,1568],{"emptyLinePlaceholder":21},[1052,1633,1634,1636],{"class":1054,"line":1227},[1052,1635,1516],{"class":1062},[1052,1637,1638],{"class":1105}," \u003CUButton color=\"gray\" \u002F>\n",[1052,1640,1641,1643],{"class":1054,"line":1266},[1052,1642,1524],{"class":1062},[1052,1644,1645],{"class":1066}," \u003CUButton color=\"neutral\" variant=\"subtle\" \u002F>\n",[1052,1647,1648],{"class":1054,"line":1578},[1052,1649,1568],{"emptyLinePlaceholder":21},[1052,1651,1652,1654],{"class":1054,"line":1586},[1052,1653,1516],{"class":1062},[1052,1655,1656],{"class":1105}," \u003CUButton color=\"white\" \u002F>\n",[1052,1658,1660,1662],{"class":1054,"line":1659},8,[1052,1661,1524],{"class":1062},[1052,1663,1664],{"class":1066}," \u003CUButton color=\"neutral\" variant=\"outline\" \u002F>\n",[970,1666,1667],{},[973,1668,1669,1670,1672],{},"You can no longer use Tailwind CSS colors in the ",[1030,1671,1605],{}," props, use the new aliases instead:",[1042,1674,1676],{"className":1502,"code":1675,"language":1504,"meta":1048,"style":1048},"- \u003CUButton color=\"red\" \u002F>\n+ \u003CUButton color=\"error\" \u002F>\n",[1030,1677,1678,1685],{"__ignoreMap":1048},[1052,1679,1680,1682],{"class":1054,"line":1055},[1052,1681,1516],{"class":1062},[1052,1683,1684],{"class":1105}," \u003CUButton color=\"red\" \u002F>\n",[1052,1686,1687,1689],{"class":1054,"line":1102},[1052,1688,1524],{"class":1062},[1052,1690,1691],{"class":1066}," \u003CUButton color=\"error\" \u002F>\n",[1012,1693,1695],{"to":1694},"\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fdesign-system#colors",[966,1696,1697],{},"Learn how to extend the design system to add new color aliases.",[970,1699,1700],{},[973,1701,1702,1703,1706,1707,1710],{},"The color configuration in ",[1030,1704,1705],{},"app.config.ts"," has been moved into a ",[1030,1708,1709],{},"colors"," object:",[1042,1712,1714],{"className":1502,"code":1713,"language":1504,"meta":1048,"style":1048},"export default defineAppConfig({\n  ui: {\n-   primary: 'green',\n-   gray: 'cool'\n+   colors: {\n+     primary: 'green',\n+     neutral: 'slate'\n+   }\n  }\n})\n",[1030,1715,1716,1721,1726,1733,1740,1747,1754,1761,1768,1774],{"__ignoreMap":1048},[1052,1717,1718],{"class":1054,"line":1055},[1052,1719,1720],{"class":1095},"export default defineAppConfig({\n",[1052,1722,1723],{"class":1054,"line":1102},[1052,1724,1725],{"class":1095},"  ui: {\n",[1052,1727,1728,1730],{"class":1054,"line":1126},[1052,1729,1516],{"class":1062},[1052,1731,1732],{"class":1105},"   primary: 'green',\n",[1052,1734,1735,1737],{"class":1054,"line":1227},[1052,1736,1516],{"class":1062},[1052,1738,1739],{"class":1105},"   gray: 'cool'\n",[1052,1741,1742,1744],{"class":1054,"line":1266},[1052,1743,1524],{"class":1062},[1052,1745,1746],{"class":1066},"   colors: {\n",[1052,1748,1749,1751],{"class":1054,"line":1578},[1052,1750,1524],{"class":1062},[1052,1752,1753],{"class":1066},"     primary: 'green',\n",[1052,1755,1756,1758],{"class":1054,"line":1586},[1052,1757,1524],{"class":1062},[1052,1759,1760],{"class":1066},"     neutral: 'slate'\n",[1052,1762,1763,1765],{"class":1054,"line":1659},[1052,1764,1524],{"class":1062},[1052,1766,1767],{"class":1066},"   }\n",[1052,1769,1771],{"class":1054,"line":1770},9,[1052,1772,1773],{"class":1095},"  }\n",[1052,1775,1777],{"class":1054,"line":1776},10,[1052,1778,1779],{"class":1095},"})\n",[1004,1781,1783],{"id":1782},"updated-theming-system","Updated theming system",[966,1785,1786,1787,1790,1791,1793,1794,1797],{},"Nuxt UI components are now styled using the ",[1271,1788,1789],{"href":72},"Tailwind Variants API",", which makes all the overrides you made using the ",[1030,1792,1705],{}," and the ",[1030,1795,1796],{},"ui"," prop obsolete.",[970,1799,1800],{},[973,1801,1802,1803,1808],{},"Update your ",[1271,1804,1806],{"href":1805},"\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcomponents#global-config",[1030,1807,1705],{}," to override components with their new theme:",[1042,1810,1812],{"className":1502,"code":1811,"language":1504,"meta":1048,"style":1048},"export default defineAppConfig({\n   ui: {\n     button: {\n-       font: 'font-bold',\n-       default: {\n-         size: 'md',\n-         color: 'primary'\n-       }\n+       slots: {\n+         base: 'font-medium'\n+       },\n+       defaultVariants: {\n+         size: 'md',\n+         color: 'primary'\n+       }\n     }\n   }\n})\n",[1030,1813,1814,1818,1823,1828,1835,1842,1849,1856,1863,1870,1877,1885,1893,1900,1907,1914,1920,1925],{"__ignoreMap":1048},[1052,1815,1816],{"class":1054,"line":1055},[1052,1817,1720],{"class":1095},[1052,1819,1820],{"class":1054,"line":1102},[1052,1821,1822],{"class":1095},"   ui: {\n",[1052,1824,1825],{"class":1054,"line":1126},[1052,1826,1827],{"class":1095},"     button: {\n",[1052,1829,1830,1832],{"class":1054,"line":1227},[1052,1831,1516],{"class":1062},[1052,1833,1834],{"class":1105},"       font: 'font-bold',\n",[1052,1836,1837,1839],{"class":1054,"line":1266},[1052,1838,1516],{"class":1062},[1052,1840,1841],{"class":1105},"       default: {\n",[1052,1843,1844,1846],{"class":1054,"line":1578},[1052,1845,1516],{"class":1062},[1052,1847,1848],{"class":1105},"         size: 'md',\n",[1052,1850,1851,1853],{"class":1054,"line":1586},[1052,1852,1516],{"class":1062},[1052,1854,1855],{"class":1105},"         color: 'primary'\n",[1052,1857,1858,1860],{"class":1054,"line":1659},[1052,1859,1516],{"class":1062},[1052,1861,1862],{"class":1105},"       }\n",[1052,1864,1865,1867],{"class":1054,"line":1770},[1052,1866,1524],{"class":1062},[1052,1868,1869],{"class":1066},"       slots: {\n",[1052,1871,1872,1874],{"class":1054,"line":1776},[1052,1873,1524],{"class":1062},[1052,1875,1876],{"class":1066},"         base: 'font-medium'\n",[1052,1878,1880,1882],{"class":1054,"line":1879},11,[1052,1881,1524],{"class":1062},[1052,1883,1884],{"class":1066},"       },\n",[1052,1886,1888,1890],{"class":1054,"line":1887},12,[1052,1889,1524],{"class":1062},[1052,1891,1892],{"class":1066},"       defaultVariants: {\n",[1052,1894,1896,1898],{"class":1054,"line":1895},13,[1052,1897,1524],{"class":1062},[1052,1899,1848],{"class":1066},[1052,1901,1903,1905],{"class":1054,"line":1902},14,[1052,1904,1524],{"class":1062},[1052,1906,1855],{"class":1066},[1052,1908,1910,1912],{"class":1054,"line":1909},15,[1052,1911,1524],{"class":1062},[1052,1913,1862],{"class":1066},[1052,1915,1917],{"class":1054,"line":1916},16,[1052,1918,1919],{"class":1095},"     }\n",[1052,1921,1923],{"class":1054,"line":1922},17,[1052,1924,1767],{"class":1095},[1052,1926,1928],{"class":1054,"line":1927},18,[1052,1929,1779],{"class":1095},[970,1931,1932],{},[973,1933,1802,1934,1940],{},[1271,1935,1937,1939],{"href":1936},"\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcomponents#ui-prop",[1030,1938,1796],{}," props"," to override each component's slots using their new theme:",[1042,1942,1944],{"className":1502,"code":1943,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUButton :ui=\"{ font: 'font-bold' }\" \u002F>\n+ \u003CUButton :ui=\"{ base: 'font-bold' }\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,1945,1946,1950,1957,1964],{"__ignoreMap":1048},[1052,1947,1948],{"class":1054,"line":1055},[1052,1949,1511],{"class":1095},[1052,1951,1952,1954],{"class":1054,"line":1102},[1052,1953,1516],{"class":1062},[1052,1955,1956],{"class":1105}," \u003CUButton :ui=\"{ font: 'font-bold' }\" \u002F>\n",[1052,1958,1959,1961],{"class":1054,"line":1126},[1052,1960,1524],{"class":1062},[1052,1962,1963],{"class":1066}," \u003CUButton :ui=\"{ base: 'font-bold' }\" \u002F>\n",[1052,1965,1966],{"class":1054,"line":1227},[1052,1967,1532],{"class":1095},[1969,1970,1972],"tip",{"to":1971},"\u002Fdocs\u002Fcomponents\u002Fbutton#theme",[966,1973,1974,1975,1977],{},"We can't detail all the changes here but you can check each component's theme in the ",[976,1976,54],{}," section.",[1004,1979,1981],{"id":1980},"renamed-components","Renamed components",[966,1983,1984],{},"We've renamed some Nuxt UI components to align with the Reka UI naming convention:",[1364,1986,1987,1997],{},[1367,1988,1989],{},[1370,1990,1991,1994],{},[1373,1992,1993],{},"v2",[1373,1995,1996],{},"v3",[1383,1998,1999,2012,2025,2038,2051,2064,2074,2087,2102,2119],{},[1370,2000,2001,2006],{},[1388,2002,2003],{},[1030,2004,2005],{},"Divider",[1388,2007,2008],{},[1271,2009,2010],{"href":739},[1030,2011,738],{},[1370,2013,2014,2019],{},[1388,2015,2016],{},[1030,2017,2018],{},"Dropdown",[1388,2020,2021],{},[1271,2022,2023],{"href":457},[1030,2024,456],{},[1370,2026,2027,2032],{},[1388,2028,2029],{},[1030,2030,2031],{},"FormGroup",[1388,2033,2034],{},[1271,2035,2036],{"href":528},[1030,2037,527],{},[1370,2039,2040,2045],{},[1388,2041,2042],{},[1030,2043,2044],{},"Range",[1388,2046,2047],{},[1271,2048,2049],{"href":759},[1030,2050,758],{},[1370,2052,2053,2058],{},[1388,2054,2055],{},[1030,2056,2057],{},"Toggle",[1388,2059,2060],{},[1271,2061,2062],{"href":769},[1030,2063,768],{},[1370,2065,2066,2071],{},[1388,2067,2068],{},[1030,2069,2070],{},"Meter",[1388,2072,2073],{},"Removed",[1370,2075,2076,2081],{},[1388,2077,2078],{},[1030,2079,2080],{},"Notification",[1388,2082,2083],{},[1271,2084,2085],{"href":799},[1030,2086,798],{},[1370,2088,2089,2094],{},[1388,2090,2091],{},[1030,2092,2093],{},"Radio",[1388,2095,2096,2097,2101],{},"Removed (use ",[1271,2098,2099],{"href":719},[1030,2100,718],{}," instead)",[1370,2103,2104,2109],{},[1388,2105,2106],{},[1030,2107,2108],{},"VerticalNavigation",[1388,2110,2111,2115,2116],{},[1271,2112,2113],{"href":604},[1030,2114,603],{}," with ",[1030,2117,2118],{},"orientation=\"vertical\"",[1370,2120,2121,2126],{},[1388,2122,2123],{},[1030,2124,2125],{},"HorizontalNavigation",[1388,2127,2128,2115,2132],{},[1271,2129,2130],{"href":604},[1030,2131,603],{},[1030,2133,2134],{},"orientation=\"horizontal\"",[966,2136,2137],{},"Here are the Nuxt UI Pro components that have been renamed or removed:",[1364,2139,2140,2149],{},[1367,2141,2142],{},[1370,2143,2144,2147],{},[1373,2145,2146],{},"v1",[1373,2148,1996],{},[1383,2150,2151,2164,2177,2190,2203,2216,2229,2238,2251,2264,2277,2290,2303,2316,2329,2342,2355,2368,2381,2394,2407,2420,2434,2447,2460,2473,2486,2499,2512],{},[1370,2152,2153,2158],{},[1388,2154,2155],{},[1030,2156,2157],{},"BlogList",[1388,2159,2160],{},[1271,2161,2162],{"href":219},[1030,2163,218],{},[1370,2165,2166,2171],{},[1388,2167,2168],{},[1030,2169,2170],{},"ColorModeToggle",[1388,2172,2173],{},[1271,2174,2175],{"href":349},[1030,2176,348],{},[1370,2178,2179,2184],{},[1388,2180,2181],{},[1030,2182,2183],{},"DashboardCard",[1388,2185,2096,2186,2101],{},[1271,2187,2188],{"href":629},[1030,2189,628],{},[1370,2191,2192,2197],{},[1388,2193,2194],{},[1030,2195,2196],{},"DashboardLayout",[1388,2198,2199],{},[1271,2200,2201],{"href":401},[1030,2202,400],{},[1370,2204,2205,2210],{},[1388,2206,2207],{},[1030,2208,2209],{},"DashboardModal",[1388,2211,2096,2212,2101],{},[1271,2213,2214],{"href":599},[1030,2215,598],{},[1370,2217,2218,2223],{},[1388,2219,2220],{},[1030,2221,2222],{},"DashboardNavbarToggle",[1388,2224,2225],{},[1271,2226,2227],{"href":442},[1030,2228,441],{},[1370,2230,2231,2236],{},[1388,2232,2233],{},[1030,2234,2235],{},"DashboardPage",[1388,2237,2073],{},[1370,2239,2240,2245],{},[1388,2241,2242],{},[1030,2243,2244],{},"DashboardPanelContent",[1388,2246,2096,2247,2250],{},[1030,2248,2249],{},"#body"," slot instead)",[1370,2252,2253,2258],{},[1388,2254,2255],{},[1030,2256,2257],{},"DashboardPanelHandle",[1388,2259,2260],{},[1271,2261,2262],{"href":417},[1030,2263,416],{},[1370,2265,2266,2271],{},[1388,2267,2268],{},[1030,2269,2270],{},"DashboardSection",[1388,2272,2096,2273,2101],{},[1271,2274,2275],{"href":629},[1030,2276,628],{},[1370,2278,2279,2284],{},[1388,2280,2281],{},[1030,2282,2283],{},"DashboardSidebarLinks",[1388,2285,2096,2286,2101],{},[1271,2287,2288],{"href":604},[1030,2289,603],{},[1370,2291,2292,2297],{},[1388,2293,2294],{},[1030,2295,2296],{},"DashboardSlideover",[1388,2298,2096,2299,2101],{},[1271,2300,2301],{"href":754},[1030,2302,753],{},[1370,2304,2305,2310],{},[1388,2306,2307],{},[1030,2308,2309],{},"FooterLinks",[1388,2311,2096,2312,2101],{},[1271,2313,2314],{"href":604},[1030,2315,603],{},[1370,2317,2318,2323],{},[1388,2319,2320],{},[1030,2321,2322],{},"HeaderLinks",[1388,2324,2096,2325,2101],{},[1271,2326,2327],{"href":604},[1030,2328,603],{},[1370,2330,2331,2336],{},[1388,2332,2333],{},[1030,2334,2335],{},"LandingCard",[1388,2337,2096,2338,2101],{},[1271,2339,2340],{"href":629},[1030,2341,628],{},[1370,2343,2344,2349],{},[1388,2345,2346],{},[1030,2347,2348],{},"LandingCTA",[1388,2350,2351],{},[1271,2352,2353],{"href":639},[1030,2354,638],{},[1370,2356,2357,2362],{},[1388,2358,2359],{},[1030,2360,2361],{},"LandingFAQ",[1388,2363,2096,2364,2101],{},[1271,2365,2366],{"href":170},[1030,2367,169],{},[1370,2369,2370,2375],{},[1388,2371,2372],{},[1030,2373,2374],{},"LandingGrid",[1388,2376,2096,2377,2101],{},[1271,2378,2379],{"href":649},[1030,2380,648],{},[1370,2382,2383,2388],{},[1388,2384,2385],{},[1030,2386,2387],{},"LandingHero",[1388,2389,2096,2390,2101],{},[1271,2391,2392],{"href":659},[1030,2393,658],{},[1370,2395,2396,2401],{},[1388,2397,2398],{},[1030,2399,2400],{},"LandingLogos",[1388,2402,2403],{},[1271,2404,2405],{"href":674},[1030,2406,673],{},[1370,2408,2409,2414],{},[1388,2410,2411],{},[1030,2412,2413],{},"LandingSection",[1388,2415,2416],{},[1271,2417,2418],{"href":679},[1030,2419,678],{},[1370,2421,2422,2427],{},[1388,2423,2424],{},[1030,2425,2426],{},"LandingTestimonial",[1388,2428,2096,2429,2101],{},[1271,2430,2432],{"href":2431},"\u002Fdocs\u002Fcomponents\u002Fpage-card#as-a-testimonial",[1030,2433,628],{},[1370,2435,2436,2441],{},[1388,2437,2438],{},[1030,2439,2440],{},"NavigationAccordion",[1388,2442,2443],{},[1271,2444,2445],{"href":369},[1030,2446,368],{},[1370,2448,2449,2454],{},[1388,2450,2451],{},[1030,2452,2453],{},"NavigationLinks",[1388,2455,2456],{},[1271,2457,2458],{"href":369},[1030,2459,368],{},[1370,2461,2462,2467],{},[1388,2463,2464],{},[1030,2465,2466],{},"NavigationTree",[1388,2468,2469],{},[1271,2470,2471],{"href":369},[1030,2472,368],{},[1370,2474,2475,2480],{},[1388,2476,2477],{},[1030,2478,2479],{},"PageError",[1388,2481,2482],{},[1271,2483,2484],{"href":498},[1030,2485,497],{},[1370,2487,2488,2493],{},[1388,2489,2490],{},[1030,2491,2492],{},"PricingCard",[1388,2494,2495],{},[1271,2496,2497],{"href":699},[1030,2498,698],{},[1370,2500,2501,2506],{},[1388,2502,2503],{},[1030,2504,2505],{},"PricingGrid",[1388,2507,2508],{},[1271,2509,2510],{"href":704},[1030,2511,703],{},[1370,2513,2514,2519],{},[1388,2515,2516],{},[1030,2517,2518],{},"PricingSwitch",[1388,2520,2096,2521,2525,2526,2101],{},[1271,2522,2523],{"href":769},[1030,2524,768],{}," or ",[1271,2527,2528],{"href":779},[1030,2529,778],{},[1004,2531,2533],{"id":2532},"changed-components","Changed components",[966,2535,2536],{},"In addition to the renamed components, there are lots of changes to the components API. Let's detail the most important ones:",[970,2538,2539],{},[973,2540,1494,2541,1598,2544,2547,2548,2551],{},[1030,2542,2543],{},"links",[1030,2545,2546],{},"options"," props have been renamed to ",[1030,2549,2550],{},"items"," for consistency:",[1042,2553,2555],{"className":1502,"code":2554,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUSelect :options=\"countries\" \u002F>\n+ \u003CUSelect :items=\"countries\" \u002F>\n\n- \u003CUHorizontalNavigation :links=\"links\" \u002F>\n+ \u003CUNavigationMenu :items=\"links\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,2556,2557,2561,2568,2575,2579,2586,2593],{"__ignoreMap":1048},[1052,2558,2559],{"class":1054,"line":1055},[1052,2560,1511],{"class":1095},[1052,2562,2563,2565],{"class":1054,"line":1102},[1052,2564,1516],{"class":1062},[1052,2566,2567],{"class":1105}," \u003CUSelect :options=\"countries\" \u002F>\n",[1052,2569,2570,2572],{"class":1054,"line":1126},[1052,2571,1524],{"class":1062},[1052,2573,2574],{"class":1066}," \u003CUSelect :items=\"countries\" \u002F>\n",[1052,2576,2577],{"class":1054,"line":1227},[1052,2578,1568],{"emptyLinePlaceholder":21},[1052,2580,2581,2583],{"class":1054,"line":1266},[1052,2582,1516],{"class":1062},[1052,2584,2585],{"class":1105}," \u003CUHorizontalNavigation :links=\"links\" \u002F>\n",[1052,2587,2588,2590],{"class":1054,"line":1578},[1052,2589,1524],{"class":1062},[1052,2591,2592],{"class":1066}," \u003CUNavigationMenu :items=\"links\" \u002F>\n",[1052,2594,2595],{"class":1054,"line":1586},[1052,2596,1532],{"class":1095},[1012,2598,2599],{},[966,2600,2601,2602,1351,2604,1351,2606,1351,2608,1351,2610,1351,2612,1351,2614,1022],{},"This change affects the following components: ",[1030,2603,223],{},[1030,2605,2125],{},[1030,2607,552],{},[1030,2609,718],{},[1030,2611,728],{},[1030,2613,733],{},[1030,2615,2108],{},[970,2617,2618],{},[973,2619,1494,2620,2623,2624,2627],{},[1030,2621,2622],{},"click"," field in different components has been removed in favor of the native Vue ",[1030,2625,2626],{},"onClick"," event:",[1042,2629,2631],{"className":1502,"code":2630,"language":1504,"meta":1048,"style":1048},"\u003Cscript setup lang=\"ts\">\nconst items = [{\n  label: 'Edit',\n-  click: () => {\n+  onClick: () => {\n    console.log('Edit')\n  }\n}]\n\u003C\u002Fscript>\n",[1030,2632,2633,2638,2643,2648,2655,2662,2667,2671,2676],{"__ignoreMap":1048},[1052,2634,2635],{"class":1054,"line":1055},[1052,2636,2637],{"class":1095},"\u003Cscript setup lang=\"ts\">\n",[1052,2639,2640],{"class":1054,"line":1102},[1052,2641,2642],{"class":1095},"const items = [{\n",[1052,2644,2645],{"class":1054,"line":1126},[1052,2646,2647],{"class":1095},"  label: 'Edit',\n",[1052,2649,2650,2652],{"class":1054,"line":1227},[1052,2651,1516],{"class":1062},[1052,2653,2654],{"class":1105},"  click: () => {\n",[1052,2656,2657,2659],{"class":1054,"line":1266},[1052,2658,1524],{"class":1062},[1052,2660,2661],{"class":1066},"  onClick: () => {\n",[1052,2663,2664],{"class":1054,"line":1578},[1052,2665,2666],{"class":1095},"    console.log('Edit')\n",[1052,2668,2669],{"class":1054,"line":1586},[1052,2670,1773],{"class":1095},[1052,2672,2673],{"class":1054,"line":1659},[1052,2674,2675],{"class":1095},"}]\n",[1052,2677,2678],{"class":1054,"line":1770},[1052,2679,2680],{"class":1095},"\u003C\u002Fscript>\n",[1012,2682,2683],{},[966,2684,2685,2686,2688,2689,2691,2692,1351,2694,1351,2696,2698],{},"This change affects the ",[1030,2687,798],{}," component as well as all component that have ",[1030,2690,2550],{}," links like ",[1030,2693,603],{},[1030,2695,456],{},[1030,2697,358],{},", etc.",[970,2700,2701],{},[973,2702,2703,2704,1351,2707,1598,2710,2713,2714,1273],{},"The global ",[1030,2705,2706],{},"Modals",[1030,2708,2709],{},"Slideovers",[1030,2711,2712],{},"Notifications"," components have been removed in favor of the ",[1271,2715,181],{"href":182},[1042,2717,2719],{"className":1502,"code":2718,"filename":1278,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n+  \u003CUApp>\n+    \u003CNuxtPage \u002F>\n+  \u003C\u002FUApp>\n-  \u003CUModals \u002F>\n-  \u003CUSlideovers \u002F>\n-  \u003CUNotifications \u002F>\n\u003C\u002Ftemplate>\n",[1030,2720,2721,2725,2732,2739,2746,2753,2760,2767],{"__ignoreMap":1048},[1052,2722,2723],{"class":1054,"line":1055},[1052,2724,1511],{"class":1095},[1052,2726,2727,2729],{"class":1054,"line":1102},[1052,2728,1524],{"class":1062},[1052,2730,2731],{"class":1066},"  \u003CUApp>\n",[1052,2733,2734,2736],{"class":1054,"line":1126},[1052,2735,1524],{"class":1062},[1052,2737,2738],{"class":1066},"    \u003CNuxtPage \u002F>\n",[1052,2740,2741,2743],{"class":1054,"line":1227},[1052,2742,1524],{"class":1062},[1052,2744,2745],{"class":1066},"  \u003C\u002FUApp>\n",[1052,2747,2748,2750],{"class":1054,"line":1266},[1052,2749,1516],{"class":1062},[1052,2751,2752],{"class":1105},"  \u003CUModals \u002F>\n",[1052,2754,2755,2757],{"class":1054,"line":1578},[1052,2756,1516],{"class":1062},[1052,2758,2759],{"class":1105},"  \u003CUSlideovers \u002F>\n",[1052,2761,2762,2764],{"class":1054,"line":1586},[1052,2763,1516],{"class":1062},[1052,2765,2766],{"class":1105},"  \u003CUNotifications \u002F>\n",[1052,2768,2769],{"class":1054,"line":1659},[1052,2770,1532],{"class":1095},[970,2772,2773],{},[973,2774,1494,2775,2778,2779,2782],{},[1030,2776,2777],{},"v-model:open"," directive and ",[1030,2780,2781],{},"default-open"," prop are now used to control visibility:",[1042,2784,2786],{"className":1502,"code":2785,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUModal v-model=\"open\" \u002F>\n+ \u003CUModal v-model:open=\"open\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,2787,2788,2792,2799,2806],{"__ignoreMap":1048},[1052,2789,2790],{"class":1054,"line":1055},[1052,2791,1511],{"class":1095},[1052,2793,2794,2796],{"class":1054,"line":1102},[1052,2795,1516],{"class":1062},[1052,2797,2798],{"class":1105}," \u003CUModal v-model=\"open\" \u002F>\n",[1052,2800,2801,2803],{"class":1054,"line":1126},[1052,2802,1524],{"class":1062},[1052,2804,2805],{"class":1066}," \u003CUModal v-model:open=\"open\" \u002F>\n",[1052,2807,2808],{"class":1054,"line":1227},[1052,2809,1532],{"class":1095},[1012,2811,2812],{},[966,2813,2601,2814,1351,2816,1598,2818,2820,2821,1351,2823,1351,2825,1598,2827,1022],{},[1030,2815,394],{},[1030,2817,598],{},[1030,2819,753],{}," and enables controlling visibility for ",[1030,2822,552],{},[1030,2824,728],{},[1030,2826,733],{},[1030,2828,803],{},[970,2830,2831],{},[973,2832,2833,2834,2837,2838,2840],{},"The default slot is now used for the trigger and the content goes inside the ",[1030,2835,2836],{},"#content"," slot (you don't need to use a ",[1030,2839,2777],{}," directive with this method):",[1042,2842,2844],{"className":1502,"code":2843,"language":1504,"meta":1048,"style":1048},"\u003Cscript setup lang=\"ts\">\n- const open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n- \u003CUButton label=\"Open\" @click=\"open = true\" \u002F>\n\n- \u003CUModal v-model=\"open\">\n+ \u003CUModal>\n+   \u003CUButton label=\"Open\" \u002F>\n\n+   \u003Ctemplate #content>\n      \u003Cdiv class=\"p-4\">\n        \u003CPlaceholder class=\"h-48\" \u002F>\n      \u003C\u002Fdiv>\n+   \u003C\u002Ftemplate>\n  \u003C\u002FUModal>\n\u003C\u002Ftemplate>\n",[1030,2845,2846,2850,2857,2861,2865,2869,2876,2880,2887,2894,2901,2905,2912,2917,2922,2927,2934,2939],{"__ignoreMap":1048},[1052,2847,2848],{"class":1054,"line":1055},[1052,2849,2637],{"class":1095},[1052,2851,2852,2854],{"class":1054,"line":1102},[1052,2853,1516],{"class":1062},[1052,2855,2856],{"class":1105}," const open = ref(false)\n",[1052,2858,2859],{"class":1054,"line":1126},[1052,2860,2680],{"class":1095},[1052,2862,2863],{"class":1054,"line":1227},[1052,2864,1568],{"emptyLinePlaceholder":21},[1052,2866,2867],{"class":1054,"line":1266},[1052,2868,1511],{"class":1095},[1052,2870,2871,2873],{"class":1054,"line":1578},[1052,2872,1516],{"class":1062},[1052,2874,2875],{"class":1105}," \u003CUButton label=\"Open\" @click=\"open = true\" \u002F>\n",[1052,2877,2878],{"class":1054,"line":1586},[1052,2879,1568],{"emptyLinePlaceholder":21},[1052,2881,2882,2884],{"class":1054,"line":1659},[1052,2883,1516],{"class":1062},[1052,2885,2886],{"class":1105}," \u003CUModal v-model=\"open\">\n",[1052,2888,2889,2891],{"class":1054,"line":1770},[1052,2890,1524],{"class":1062},[1052,2892,2893],{"class":1066}," \u003CUModal>\n",[1052,2895,2896,2898],{"class":1054,"line":1776},[1052,2897,1524],{"class":1062},[1052,2899,2900],{"class":1066},"   \u003CUButton label=\"Open\" \u002F>\n",[1052,2902,2903],{"class":1054,"line":1879},[1052,2904,1568],{"emptyLinePlaceholder":21},[1052,2906,2907,2909],{"class":1054,"line":1887},[1052,2908,1524],{"class":1062},[1052,2910,2911],{"class":1066},"   \u003Ctemplate #content>\n",[1052,2913,2914],{"class":1054,"line":1895},[1052,2915,2916],{"class":1095},"      \u003Cdiv class=\"p-4\">\n",[1052,2918,2919],{"class":1054,"line":1902},[1052,2920,2921],{"class":1095},"        \u003CPlaceholder class=\"h-48\" \u002F>\n",[1052,2923,2924],{"class":1054,"line":1909},[1052,2925,2926],{"class":1095},"      \u003C\u002Fdiv>\n",[1052,2928,2929,2931],{"class":1054,"line":1916},[1052,2930,1524],{"class":1062},[1052,2932,2933],{"class":1066},"   \u003C\u002Ftemplate>\n",[1052,2935,2936],{"class":1054,"line":1922},[1052,2937,2938],{"class":1095},"  \u003C\u002FUModal>\n",[1052,2940,2941],{"class":1054,"line":1927},[1052,2942,1532],{"class":1095},[1012,2944,2945],{},[966,2946,2601,2947,1351,2949,1351,2951,1351,2953,1022],{},[1030,2948,598],{},[1030,2950,693],{},[1030,2952,753],{},[1030,2954,803],{},[970,2956,2957],{},[973,2958,2959,2960,1351,2963,1598,2965,2968,2969,2971],{},"A ",[1030,2961,2962],{},"#header",[1030,2964,2249],{},[1030,2966,2967],{},"#footer"," slots have been added inside the ",[1030,2970,2836],{}," slot like:",[1042,2973,2975],{"className":1502,"code":2974,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUModal>\n+ \u003CUModal title=\"Title\" description=\"Description\">\n-   \u003Cdiv class=\"p-4\">\n+   \u003Ctemplate #body>\n      \u003CPlaceholder class=\"h-48\" \u002F>\n+   \u003C\u002Ftemplate>\n-   \u003C\u002Fdiv>\n  \u003C\u002FUModal>\n\u003C\u002Ftemplate>\n",[1030,2976,2977,2981,2987,2994,3001,3008,3013,3019,3026,3030],{"__ignoreMap":1048},[1052,2978,2979],{"class":1054,"line":1055},[1052,2980,1511],{"class":1095},[1052,2982,2983,2985],{"class":1054,"line":1102},[1052,2984,1516],{"class":1062},[1052,2986,2893],{"class":1105},[1052,2988,2989,2991],{"class":1054,"line":1126},[1052,2990,1524],{"class":1062},[1052,2992,2993],{"class":1066}," \u003CUModal title=\"Title\" description=\"Description\">\n",[1052,2995,2996,2998],{"class":1054,"line":1227},[1052,2997,1516],{"class":1062},[1052,2999,3000],{"class":1105},"   \u003Cdiv class=\"p-4\">\n",[1052,3002,3003,3005],{"class":1054,"line":1266},[1052,3004,1524],{"class":1062},[1052,3006,3007],{"class":1066},"   \u003Ctemplate #body>\n",[1052,3009,3010],{"class":1054,"line":1578},[1052,3011,3012],{"class":1095},"      \u003CPlaceholder class=\"h-48\" \u002F>\n",[1052,3014,3015,3017],{"class":1054,"line":1586},[1052,3016,1524],{"class":1062},[1052,3018,2933],{"class":1066},[1052,3020,3021,3023],{"class":1054,"line":1659},[1052,3022,1516],{"class":1062},[1052,3024,3025],{"class":1105},"   \u003C\u002Fdiv>\n",[1052,3027,3028],{"class":1054,"line":1770},[1052,3029,2938],{"class":1095},[1052,3031,3032],{"class":1054,"line":1776},[1052,3033,1532],{"class":1095},[1012,3035,3036],{},[966,3037,2601,3038,1351,3040,1022],{},[1030,3039,598],{},[1030,3041,753],{},[970,3043,3044],{},[973,3045,1494,3046,3049,3050,3053],{},[1030,3047,3048],{},"prevent-close"," prop has been removed in favor of the ",[1030,3051,3052],{},"dismissible"," prop:",[1042,3055,3057],{"className":1502,"code":3056,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUModal prevent-close \u002F>\n+ \u003CUModal :dismissible=\"false\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3058,3059,3063,3070,3077],{"__ignoreMap":1048},[1052,3060,3061],{"class":1054,"line":1055},[1052,3062,1511],{"class":1095},[1052,3064,3065,3067],{"class":1054,"line":1102},[1052,3066,1516],{"class":1062},[1052,3068,3069],{"class":1105}," \u003CUModal prevent-close \u002F>\n",[1052,3071,3072,3074],{"class":1054,"line":1126},[1052,3073,1524],{"class":1062},[1052,3075,3076],{"class":1066}," \u003CUModal :dismissible=\"false\" \u002F>\n",[1052,3078,3079],{"class":1054,"line":1227},[1052,3080,1532],{"class":1095},[1012,3082,3083],{},[966,3084,2601,3085,1351,3087,1022],{},[1030,3086,598],{},[1030,3088,753],{},[970,3090,3091],{},[973,3092,1494,3093,3095,3096,3099,3100,1109],{},[1030,3094,683],{}," component ",[1030,3097,3098],{},"v-model"," directive has been renamed to ",[1030,3101,3102],{},"v-model:page",[1042,3104,3106],{"className":1502,"code":3105,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUPagination v-model=\"page\" \u002F>\n+ \u003CUPagination v-model:page=\"page\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3107,3108,3112,3119,3126],{"__ignoreMap":1048},[1052,3109,3110],{"class":1054,"line":1055},[1052,3111,1511],{"class":1095},[1052,3113,3114,3116],{"class":1054,"line":1102},[1052,3115,1516],{"class":1062},[1052,3117,3118],{"class":1105}," \u003CUPagination v-model=\"page\" \u002F>\n",[1052,3120,3121,3123],{"class":1054,"line":1126},[1052,3122,1524],{"class":1062},[1052,3124,3125],{"class":1066}," \u003CUPagination v-model:page=\"page\" \u002F>\n",[1052,3127,3128],{"class":1054,"line":1227},[1052,3129,1532],{"class":1095},[970,3131,3132],{},[973,3133,1494,3134,3137,3138,3140,3141,2627],{},[1030,3135,3136],{},"change"," event now emits the native ",[1030,3139,3136],{}," event, not the new value, which is now emitted in the ",[1030,3142,3143],{},"update:modelValue",[1042,3145,3147],{"className":1502,"code":3146,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUSelectMenu v-model=\"country\" :items=\"countries\" @change=\"console.log(newVal)\" \u002F>\n+ \u003CUSelectMenu v-model=\"country\" :items=\"countries\" @update:modelValue=\"console.log(newVal)\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3148,3149,3153,3160,3167],{"__ignoreMap":1048},[1052,3150,3151],{"class":1054,"line":1055},[1052,3152,1511],{"class":1095},[1052,3154,3155,3157],{"class":1054,"line":1102},[1052,3156,1516],{"class":1062},[1052,3158,3159],{"class":1105}," \u003CUSelectMenu v-model=\"country\" :items=\"countries\" @change=\"console.log(newVal)\" \u002F>\n",[1052,3161,3162,3164],{"class":1054,"line":1126},[1052,3163,1524],{"class":1062},[1052,3165,3166],{"class":1066}," \u003CUSelectMenu v-model=\"country\" :items=\"countries\" @update:modelValue=\"console.log(newVal)\" \u002F>\n",[1052,3168,3169],{"class":1054,"line":1227},[1052,3170,1532],{"class":1095},[1012,3172,3173],{},[966,3174,2601,3175,1351,3177,1351,3179,1022],{},[1030,3176,728],{},[1030,3178,733],{},[1030,3180,718],{},[970,3182,3183],{},[973,3184,1494,3185,3095,3187,3190,3191,3194,3195,3198],{},[1030,3186,733],{},[1030,3188,3189],{},"searchable"," prop has been renamed to ",[1030,3192,3193],{},"search-input"," and now defaults to ",[1030,3196,3197],{},"true",". To preserve v2 behavior (no search input):",[1042,3200,3202],{"className":1502,"code":3201,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUSelectMenu :items=\"items\" \u002F>\n+ \u003CUSelectMenu :search-input=\"false\" :items=\"items\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3203,3204,3208,3215,3222],{"__ignoreMap":1048},[1052,3205,3206],{"class":1054,"line":1055},[1052,3207,1511],{"class":1095},[1052,3209,3210,3212],{"class":1054,"line":1102},[1052,3211,1516],{"class":1062},[1052,3213,3214],{"class":1105}," \u003CUSelectMenu :items=\"items\" \u002F>\n",[1052,3216,3217,3219],{"class":1054,"line":1126},[1052,3218,1524],{"class":1062},[1052,3220,3221],{"class":1066}," \u003CUSelectMenu :search-input=\"false\" :items=\"items\" \u002F>\n",[1052,3223,3224],{"class":1054,"line":1227},[1052,3225,1532],{"class":1095},[970,3227,3228],{},[973,3229,1494,3230,3232,3233,3236,3237,3240,3241,3244],{},[1030,3231,169],{}," component has been redesigned. The ",[1030,3234,3235],{},"multiple"," prop has been replaced by the ",[1030,3238,3239],{},"type"," prop (defaults to ",[1030,3242,3243],{},"single","):",[1042,3246,3248],{"className":1502,"code":3247,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUAccordion multiple :items=\"items\" \u002F>\n+ \u003CUAccordion type=\"multiple\" :items=\"items\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3249,3250,3254,3261,3268],{"__ignoreMap":1048},[1052,3251,3252],{"class":1054,"line":1055},[1052,3253,1511],{"class":1095},[1052,3255,3256,3258],{"class":1054,"line":1102},[1052,3257,1516],{"class":1062},[1052,3259,3260],{"class":1105}," \u003CUAccordion multiple :items=\"items\" \u002F>\n",[1052,3262,3263,3265],{"class":1054,"line":1126},[1052,3264,1524],{"class":1062},[1052,3266,3267],{"class":1066}," \u003CUAccordion type=\"multiple\" :items=\"items\" \u002F>\n",[1052,3269,3270],{"class":1054,"line":1227},[1052,3271,1532],{"class":1095},[970,3273,3274],{},[973,3275,1494,3276,3095,3278,3280,3281,3284,3285,3288,3289,3292,3293,3295],{},[1030,3277,169],{},[1030,3279,2781],{}," prop and ",[1030,3282,3283],{},"defaultOpen"," ",[976,3286,3287],{},"item"," property have been removed. State is now controlled using ",[1030,3290,3291],{},"default-value"," (uncontrolled) or ",[1030,3294,3098],{}," (controlled):",[1042,3297,3299],{"className":1502,"code":3298,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUAccordion default-open multiple :items=\"items\" \u002F>\n+ \u003CUAccordion\n+   type=\"multiple\"\n+   :default-value=\"['0', '1']\"\n+   :items=\"items\"\n+ \u002F>\n\u003C\u002Ftemplate>\n",[1030,3300,3301,3305,3312,3319,3326,3333,3340,3346],{"__ignoreMap":1048},[1052,3302,3303],{"class":1054,"line":1055},[1052,3304,1511],{"class":1095},[1052,3306,3307,3309],{"class":1054,"line":1102},[1052,3308,1516],{"class":1062},[1052,3310,3311],{"class":1105}," \u003CUAccordion default-open multiple :items=\"items\" \u002F>\n",[1052,3313,3314,3316],{"class":1054,"line":1126},[1052,3315,1524],{"class":1062},[1052,3317,3318],{"class":1066}," \u003CUAccordion\n",[1052,3320,3321,3323],{"class":1054,"line":1227},[1052,3322,1524],{"class":1062},[1052,3324,3325],{"class":1066},"   type=\"multiple\"\n",[1052,3327,3328,3330],{"class":1054,"line":1266},[1052,3329,1524],{"class":1062},[1052,3331,3332],{"class":1066},"   :default-value=\"['0', '1']\"\n",[1052,3334,3335,3337],{"class":1054,"line":1578},[1052,3336,1524],{"class":1062},[1052,3338,3339],{"class":1066},"   :items=\"items\"\n",[1052,3341,3342,3344],{"class":1054,"line":1586},[1052,3343,1524],{"class":1062},[1052,3345,1314],{"class":1066},[1052,3347,3348],{"class":1054,"line":1659},[1052,3349,1532],{"class":1095},[970,3351,3352],{},[973,3353,1494,3354,3095,3356,3359,3360,1598,3362,1109],{},[1030,3355,169],{},[1030,3357,3358],{},"#item"," slot has been removed in favor of ",[1030,3361,2836],{},[1030,3363,2249],{},[1042,3365,3367],{"className":1502,"code":3366,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003Ctemplate #item=\"{ item }\">\n-   {{ item.content }}\n- \u003C\u002Ftemplate>\n\n+ \u003Ctemplate #content=\"{ item }\">\n+   {{ item.content }}\n+ \u003C\u002Ftemplate>\n\u003C\u002Ftemplate>\n",[1030,3368,3369,3373,3380,3387,3394,3398,3405,3411,3417],{"__ignoreMap":1048},[1052,3370,3371],{"class":1054,"line":1055},[1052,3372,1511],{"class":1095},[1052,3374,3375,3377],{"class":1054,"line":1102},[1052,3376,1516],{"class":1062},[1052,3378,3379],{"class":1105}," \u003Ctemplate #item=\"{ item }\">\n",[1052,3381,3382,3384],{"class":1054,"line":1126},[1052,3383,1516],{"class":1062},[1052,3385,3386],{"class":1105},"   {{ item.content }}\n",[1052,3388,3389,3391],{"class":1054,"line":1227},[1052,3390,1516],{"class":1062},[1052,3392,3393],{"class":1105}," \u003C\u002Ftemplate>\n",[1052,3395,3396],{"class":1054,"line":1266},[1052,3397,1568],{"emptyLinePlaceholder":21},[1052,3399,3400,3402],{"class":1054,"line":1578},[1052,3401,1524],{"class":1062},[1052,3403,3404],{"class":1066}," \u003Ctemplate #content=\"{ item }\">\n",[1052,3406,3407,3409],{"class":1054,"line":1586},[1052,3408,1524],{"class":1062},[1052,3410,3386],{"class":1066},[1052,3412,3413,3415],{"class":1054,"line":1659},[1052,3414,1524],{"class":1062},[1052,3416,3393],{"class":1066},[1052,3418,3419],{"class":1054,"line":1770},[1052,3420,1532],{"class":1095},[1012,3422,3423],{},[966,3424,3425,3426,1351,3429,1351,3432,3434],{},"The default slot now only customizes the trigger, with additional slots for finer control (",[1030,3427,3428],{},"#leading",[1030,3430,3431],{},"#trailing",[1030,3433,2249],{},").",[970,3436,3437],{},[973,3438,1494,3439,3095,3441,3190,3444,3194,3447,3449,3450,1109],{},[1030,3440,169],{},[1030,3442,3443],{},"unmount",[1030,3445,3446],{},"unmount-on-hide",[1030,3448,3197],{},". To preserve v2 behavior (keep content mounted), use ",[1030,3451,3452],{},":unmount-on-hide=\"false\"",[1042,3454,3456],{"className":1502,"code":3455,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUAccordion :items=\"items\" \u002F>\n+ \u003CUAccordion :unmount-on-hide=\"false\" :items=\"items\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3457,3458,3462,3469,3476],{"__ignoreMap":1048},[1052,3459,3460],{"class":1054,"line":1055},[1052,3461,1511],{"class":1095},[1052,3463,3464,3466],{"class":1054,"line":1102},[1052,3465,1516],{"class":1062},[1052,3467,3468],{"class":1105}," \u003CUAccordion :items=\"items\" \u002F>\n",[1052,3470,3471,3473],{"class":1054,"line":1126},[1052,3472,1524],{"class":1062},[1052,3474,3475],{"class":1066}," \u003CUAccordion :unmount-on-hide=\"false\" :items=\"items\" \u002F>\n",[1052,3477,3478],{"class":1054,"line":1227},[1052,3479,1532],{"class":1095},[970,3481,3482],{},[973,3483,1494,3484,3486,3487,3493,3494,3190,3497,1109],{},[1030,3485,773],{}," component now uses ",[1271,3488,3492],{"href":3489,"rel":3490,"target":1015},"https:\u002F\u002Ftanstack.com\u002Ftable\u002Flatest",[3491],"nofollow","TanStack Table"," under the hood. The ",[1030,3495,3496],{},"rows",[1030,3498,172],{},[1042,3500,3502],{"className":1502,"code":3501,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUTable :rows=\"rows\" \u002F>\n+ \u003CUTable :data=\"data\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3503,3504,3508,3515,3522],{"__ignoreMap":1048},[1052,3505,3506],{"class":1054,"line":1055},[1052,3507,1511],{"class":1095},[1052,3509,3510,3512],{"class":1054,"line":1102},[1052,3511,1516],{"class":1062},[1052,3513,3514],{"class":1105}," \u003CUTable :rows=\"rows\" \u002F>\n",[1052,3516,3517,3519],{"class":1054,"line":1126},[1052,3518,1524],{"class":1062},[1052,3520,3521],{"class":1066}," \u003CUTable :data=\"data\" \u002F>\n",[1052,3523,3524],{"class":1054,"line":1227},[1052,3525,1532],{"class":1095},[970,3527,3528],{},[973,3529,1494,3530,3532],{},[1030,3531,773],{}," component columns definition is now explicit and semantic:",[1042,3534,3536],{"className":1502,"code":3535,"language":1504,"meta":1048,"style":1048},"\u003Cscript setup lang=\"ts\">\nconst columns = [{\n-  label: 'Status',\n-  key: 'status'\n+  header: 'Status',\n+  accessorKey: 'status'\n}]\n\u003C\u002Fscript>\n",[1030,3537,3538,3542,3547,3554,3561,3568,3575,3579],{"__ignoreMap":1048},[1052,3539,3540],{"class":1054,"line":1055},[1052,3541,2637],{"class":1095},[1052,3543,3544],{"class":1054,"line":1102},[1052,3545,3546],{"class":1095},"const columns = [{\n",[1052,3548,3549,3551],{"class":1054,"line":1126},[1052,3550,1516],{"class":1062},[1052,3552,3553],{"class":1105},"  label: 'Status',\n",[1052,3555,3556,3558],{"class":1054,"line":1227},[1052,3557,1516],{"class":1062},[1052,3559,3560],{"class":1105},"  key: 'status'\n",[1052,3562,3563,3565],{"class":1054,"line":1266},[1052,3564,1524],{"class":1062},[1052,3566,3567],{"class":1066},"  header: 'Status',\n",[1052,3569,3570,3572],{"class":1054,"line":1578},[1052,3571,1524],{"class":1062},[1052,3573,3574],{"class":1066},"  accessorKey: 'status'\n",[1052,3576,3577],{"class":1054,"line":1586},[1052,3578,2675],{"class":1095},[1052,3580,3581],{"class":1054,"line":1659},[1052,3582,2680],{"class":1095},[970,3584,3585],{},[973,3586,1494,3587,3589,3590,3593,3594,1109],{},[1030,3588,773],{}," component row cell slot names have been changed from ",[1030,3591,3592],{},"\u003Ccolumn-accessorKey>-data"," to ",[1030,3595,3596],{},"\u003Ccolumn-accessorKey>-cell",[1042,3598,3600],{"className":1502,"code":3599,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003Ctemplate #column-data=\"{ row }\">\n+ \u003Ctemplate #column-cell=\"{ row }\">\n\u003C\u002Ftemplate>\n",[1030,3601,3602,3606,3613,3620],{"__ignoreMap":1048},[1052,3603,3604],{"class":1054,"line":1055},[1052,3605,1511],{"class":1095},[1052,3607,3608,3610],{"class":1054,"line":1102},[1052,3609,1516],{"class":1062},[1052,3611,3612],{"class":1105}," \u003Ctemplate #column-data=\"{ row }\">\n",[1052,3614,3615,3617],{"class":1054,"line":1126},[1052,3616,1524],{"class":1062},[1052,3618,3619],{"class":1066}," \u003Ctemplate #column-cell=\"{ row }\">\n",[1052,3621,3622],{"class":1054,"line":1227},[1052,3623,1532],{"class":1095},[970,3625,3626],{},[973,3627,1494,3628,3095,3630,3359,3632,1109],{},[1030,3629,778],{},[1030,3631,3358],{},[1030,3633,2836],{},[1042,3635,3637],{"className":1502,"code":3636,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003Ctemplate #item=\"{ item }\">\n+ \u003Ctemplate #content=\"{ item }\">\n\u003C\u002Ftemplate>\n",[1030,3638,3639,3643,3649,3655],{"__ignoreMap":1048},[1052,3640,3641],{"class":1054,"line":1055},[1052,3642,1511],{"class":1095},[1052,3644,3645,3647],{"class":1054,"line":1102},[1052,3646,1516],{"class":1062},[1052,3648,3379],{"class":1105},[1052,3650,3651,3653],{"class":1054,"line":1126},[1052,3652,1524],{"class":1062},[1052,3654,3404],{"class":1066},[1052,3656,3657],{"class":1054,"line":1227},[1052,3658,1532],{"class":1095},[970,3660,3661],{},[973,3662,1494,3663,3095,3665,3668,3669,1109],{},[1030,3664,778],{},[1030,3666,3667],{},"default-index"," prop has been removed in favor of ",[1030,3670,3291],{},[1042,3672,3674],{"className":1502,"code":3673,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUTabs :default-index=\"0\" :items=\"tabs\" \u002F>\n+ \u003CUTabs :default-value=\"0\" :items=\"tabs\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3675,3676,3680,3687,3694],{"__ignoreMap":1048},[1052,3677,3678],{"class":1054,"line":1055},[1052,3679,1511],{"class":1095},[1052,3681,3682,3684],{"class":1054,"line":1102},[1052,3683,1516],{"class":1062},[1052,3685,3686],{"class":1105}," \u003CUTabs :default-index=\"0\" :items=\"tabs\" \u002F>\n",[1052,3688,3689,3691],{"class":1054,"line":1126},[1052,3690,1524],{"class":1062},[1052,3692,3693],{"class":1066}," \u003CUTabs :default-value=\"0\" :items=\"tabs\" \u002F>\n",[1052,3695,3696],{"class":1054,"line":1227},[1052,3697,1532],{"class":1095},[970,3699,3700],{},[973,3701,1494,3702,3095,3704,3190,3706,3194,3708,3710],{},[1030,3703,778],{},[1030,3705,3443],{},[1030,3707,3446],{},[1030,3709,3197],{},". To preserve v2 behavior where content stayed mounted:",[1042,3712,3714],{"className":1502,"code":3713,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUTabs :items=\"tabs\" \u002F>\n+ \u003CUTabs :unmount-on-hide=\"false\" :items=\"tabs\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3715,3716,3720,3727,3734],{"__ignoreMap":1048},[1052,3717,3718],{"class":1054,"line":1055},[1052,3719,1511],{"class":1095},[1052,3721,3722,3724],{"class":1054,"line":1102},[1052,3723,1516],{"class":1062},[1052,3725,3726],{"class":1105}," \u003CUTabs :items=\"tabs\" \u002F>\n",[1052,3728,3729,3731],{"class":1054,"line":1126},[1052,3730,1524],{"class":1062},[1052,3732,3733],{"class":1066}," \u003CUTabs :unmount-on-hide=\"false\" :items=\"tabs\" \u002F>\n",[1052,3735,3736],{"class":1054,"line":1227},[1052,3737,1532],{"class":1095},[970,3739,3740],{},[973,3741,1494,3742,3095,3744,3236,3747,3053],{},[1030,3743,175],{},[1030,3745,3746],{},"close-button",[1030,3748,3749],{},"close",[1042,3751,3753],{"className":1502,"code":3752,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUAlert :close-button=\"{ icon: 'i-lucide-x', variant: 'link' }\" \u002F>\n+ \u003CUAlert :close=\"{ icon: 'i-lucide-x', variant: 'link' }\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3754,3755,3759,3766,3773],{"__ignoreMap":1048},[1052,3756,3757],{"class":1054,"line":1055},[1052,3758,1511],{"class":1095},[1052,3760,3761,3763],{"class":1054,"line":1102},[1052,3762,1516],{"class":1062},[1052,3764,3765],{"class":1105}," \u003CUAlert :close-button=\"{ icon: 'i-lucide-x', variant: 'link' }\" \u002F>\n",[1052,3767,3768,3770],{"class":1054,"line":1126},[1052,3769,1524],{"class":1062},[1052,3771,3772],{"class":1066}," \u003CUAlert :close=\"{ icon: 'i-lucide-x', variant: 'link' }\" \u002F>\n",[1052,3774,3775],{"class":1054,"line":1227},[1052,3776,1532],{"class":1095},[970,3778,3779],{},[973,3780,1494,3781,3095,3783,3785,3786,2627],{},[1030,3782,175],{},[1030,3784,3749],{}," event has been replaced by the ",[1030,3787,3788],{},"update:open",[1042,3790,3792],{"className":1502,"code":3791,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUAlert @close=\"isOpen = false\" \u002F>\n+ \u003CUAlert @update:open=\"isOpen = false\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3793,3794,3798,3805,3812],{"__ignoreMap":1048},[1052,3795,3796],{"class":1054,"line":1055},[1052,3797,1511],{"class":1095},[1052,3799,3800,3802],{"class":1054,"line":1102},[1052,3801,1516],{"class":1062},[1052,3803,3804],{"class":1105}," \u003CUAlert @close=\"isOpen = false\" \u002F>\n",[1052,3806,3807,3809],{"class":1054,"line":1126},[1052,3808,1524],{"class":1062},[1052,3810,3811],{"class":1066}," \u003CUAlert @update:open=\"isOpen = false\" \u002F>\n",[1052,3813,3814],{"class":1054,"line":1227},[1052,3815,1532],{"class":1095},[970,3817,3818],{},[973,3819,1494,3820,3095,3822,1598,3825,3828,3829,3831],{},[1030,3821,175],{},[1030,3823,3824],{},"#icon",[1030,3826,3827],{},"#avatar"," slots have been replaced by a single ",[1030,3830,3428],{}," slot:",[1042,3833,3835],{"className":1502,"code":3834,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUAlert>\n-   \u003Ctemplate #icon>\n-     \u003CUIcon name=\"i-lucide-terminal\" \u002F>\n-   \u003C\u002Ftemplate>\n- \u003C\u002FUAlert>\n\n+ \u003CUAlert>\n+   \u003Ctemplate #leading>\n+     \u003CUIcon name=\"i-lucide-terminal\" \u002F>\n+   \u003C\u002Ftemplate>\n+ \u003C\u002FUAlert>\n\u003C\u002Ftemplate>\n",[1030,3836,3837,3841,3848,3855,3862,3868,3875,3879,3885,3892,3898,3904,3910],{"__ignoreMap":1048},[1052,3838,3839],{"class":1054,"line":1055},[1052,3840,1511],{"class":1095},[1052,3842,3843,3845],{"class":1054,"line":1102},[1052,3844,1516],{"class":1062},[1052,3846,3847],{"class":1105}," \u003CUAlert>\n",[1052,3849,3850,3852],{"class":1054,"line":1126},[1052,3851,1516],{"class":1062},[1052,3853,3854],{"class":1105},"   \u003Ctemplate #icon>\n",[1052,3856,3857,3859],{"class":1054,"line":1227},[1052,3858,1516],{"class":1062},[1052,3860,3861],{"class":1105},"     \u003CUIcon name=\"i-lucide-terminal\" \u002F>\n",[1052,3863,3864,3866],{"class":1054,"line":1266},[1052,3865,1516],{"class":1062},[1052,3867,2933],{"class":1105},[1052,3869,3870,3872],{"class":1054,"line":1578},[1052,3871,1516],{"class":1062},[1052,3873,3874],{"class":1105}," \u003C\u002FUAlert>\n",[1052,3876,3877],{"class":1054,"line":1586},[1052,3878,1568],{"emptyLinePlaceholder":21},[1052,3880,3881,3883],{"class":1054,"line":1659},[1052,3882,1524],{"class":1062},[1052,3884,3847],{"class":1066},[1052,3886,3887,3889],{"class":1054,"line":1770},[1052,3888,1524],{"class":1062},[1052,3890,3891],{"class":1066},"   \u003Ctemplate #leading>\n",[1052,3893,3894,3896],{"class":1054,"line":1776},[1052,3895,1524],{"class":1062},[1052,3897,3861],{"class":1066},[1052,3899,3900,3902],{"class":1054,"line":1879},[1052,3901,1524],{"class":1062},[1052,3903,2933],{"class":1066},[1052,3905,3906,3908],{"class":1054,"line":1887},[1052,3907,1524],{"class":1062},[1052,3909,3874],{"class":1066},[1052,3911,3912],{"class":1054,"line":1895},[1052,3913,1532],{"class":1095},[970,3915,3916],{},[973,3917,1494,3918,3920,3921,3924],{},[1030,3919,522],{}," component now always validates on submit. The ",[1030,3922,3923],{},"validate-on"," prop only controls which input events trigger validation. Pass an empty array to validate only on submit:",[1042,3926,3928],{"className":1502,"code":3927,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUForm :validate-on=\"['submit']\" \u002F>\n+ \u003CUForm :validate-on=\"[]\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,3929,3930,3934,3941,3948],{"__ignoreMap":1048},[1052,3931,3932],{"class":1054,"line":1055},[1052,3933,1511],{"class":1095},[1052,3935,3936,3938],{"class":1054,"line":1102},[1052,3937,1516],{"class":1062},[1052,3939,3940],{"class":1105}," \u003CUForm :validate-on=\"['submit']\" \u002F>\n",[1052,3942,3943,3945],{"class":1054,"line":1126},[1052,3944,1524],{"class":1062},[1052,3946,3947],{"class":1066}," \u003CUForm :validate-on=\"[]\" \u002F>\n",[1052,3949,3950],{"class":1054,"line":1227},[1052,3951,1532],{"class":1095},[970,3953,3954],{},[973,3955,3956,3957,3960,3961,3964,3965,3968,3969,3972,3973,1109],{},"Form components now use ",[1030,3958,3959],{},"inline-flex"," instead of ",[1030,3962,3963],{},"block"," layout, which means they no longer expand to full width by default. Add ",[1030,3966,3967],{},"w-full"," manually with the ",[1030,3970,3971],{},"class"," prop or configure it globally in your ",[1030,3974,1705],{},[1042,3976,3979],{"className":1076,"code":3977,"filename":3978,"language":1078,"meta":1048,"style":1048},"export default defineAppConfig({\n  ui: {\n    input: { slots: { root: 'w-full' } },\n    inputMenu: { slots: { root: 'w-full' } },\n    textarea: { slots: { root: 'w-full' } },\n    select: { slots: { base: 'w-full' } },\n    selectMenu: { slots: { base: 'w-full' } }\n  }\n})\n","app\u002Fapp.config.ts",[1030,3980,3981,3994,4004,4039,4068,4097,4127,4157,4161],{"__ignoreMap":1048},[1052,3982,3983,3985,3987,3990,3992],{"class":1054,"line":1055},[1052,3984,1085],{"class":1058},[1052,3986,1088],{"class":1058},[1052,3988,3989],{"class":1091}," defineAppConfig",[1052,3991,1096],{"class":1095},[1052,3993,1099],{"class":1062},[1052,3995,3996,3999,4001],{"class":1054,"line":1102},[1052,3997,3998],{"class":1105},"  ui",[1052,4000,1109],{"class":1062},[1052,4002,4003],{"class":1062}," {\n",[1052,4005,4006,4009,4011,4014,4017,4019,4021,4024,4026,4029,4031,4033,4036],{"class":1054,"line":1126},[1052,4007,4008],{"class":1105},"    input",[1052,4010,1109],{"class":1062},[1052,4012,4013],{"class":1062}," {",[1052,4015,4016],{"class":1105}," slots",[1052,4018,1109],{"class":1062},[1052,4020,4013],{"class":1062},[1052,4022,4023],{"class":1105}," root",[1052,4025,1109],{"class":1062},[1052,4027,4028],{"class":1062}," '",[1052,4030,3967],{"class":1066},[1052,4032,1115],{"class":1062},[1052,4034,4035],{"class":1062}," }",[1052,4037,4038],{"class":1062}," },\n",[1052,4040,4041,4044,4046,4048,4050,4052,4054,4056,4058,4060,4062,4064,4066],{"class":1054,"line":1227},[1052,4042,4043],{"class":1105},"    inputMenu",[1052,4045,1109],{"class":1062},[1052,4047,4013],{"class":1062},[1052,4049,4016],{"class":1105},[1052,4051,1109],{"class":1062},[1052,4053,4013],{"class":1062},[1052,4055,4023],{"class":1105},[1052,4057,1109],{"class":1062},[1052,4059,4028],{"class":1062},[1052,4061,3967],{"class":1066},[1052,4063,1115],{"class":1062},[1052,4065,4035],{"class":1062},[1052,4067,4038],{"class":1062},[1052,4069,4070,4073,4075,4077,4079,4081,4083,4085,4087,4089,4091,4093,4095],{"class":1054,"line":1266},[1052,4071,4072],{"class":1105},"    textarea",[1052,4074,1109],{"class":1062},[1052,4076,4013],{"class":1062},[1052,4078,4016],{"class":1105},[1052,4080,1109],{"class":1062},[1052,4082,4013],{"class":1062},[1052,4084,4023],{"class":1105},[1052,4086,1109],{"class":1062},[1052,4088,4028],{"class":1062},[1052,4090,3967],{"class":1066},[1052,4092,1115],{"class":1062},[1052,4094,4035],{"class":1062},[1052,4096,4038],{"class":1062},[1052,4098,4099,4102,4104,4106,4108,4110,4112,4115,4117,4119,4121,4123,4125],{"class":1054,"line":1578},[1052,4100,4101],{"class":1105},"    select",[1052,4103,1109],{"class":1062},[1052,4105,4013],{"class":1062},[1052,4107,4016],{"class":1105},[1052,4109,1109],{"class":1062},[1052,4111,4013],{"class":1062},[1052,4113,4114],{"class":1105}," base",[1052,4116,1109],{"class":1062},[1052,4118,4028],{"class":1062},[1052,4120,3967],{"class":1066},[1052,4122,1115],{"class":1062},[1052,4124,4035],{"class":1062},[1052,4126,4038],{"class":1062},[1052,4128,4129,4132,4134,4136,4138,4140,4142,4144,4146,4148,4150,4152,4154],{"class":1054,"line":1586},[1052,4130,4131],{"class":1105},"    selectMenu",[1052,4133,1109],{"class":1062},[1052,4135,4013],{"class":1062},[1052,4137,4016],{"class":1105},[1052,4139,1109],{"class":1062},[1052,4141,4013],{"class":1062},[1052,4143,4114],{"class":1105},[1052,4145,1109],{"class":1062},[1052,4147,4028],{"class":1062},[1052,4149,3967],{"class":1066},[1052,4151,1115],{"class":1062},[1052,4153,4035],{"class":1062},[1052,4155,4156],{"class":1062}," }\n",[1052,4158,4159],{"class":1054,"line":1659},[1052,4160,1773],{"class":1062},[1052,4162,4163,4165],{"class":1054,"line":1770},[1052,4164,1129],{"class":1062},[1052,4166,1132],{"class":1095},[1012,4168,4169],{},[966,4170,2601,4171,1351,4173,1351,4175,1351,4177,1351,4179,1022],{},[1030,4172,542],{},[1030,4174,552],{},[1030,4176,783],{},[1030,4178,728],{},[1030,4180,733],{},[970,4182,4183],{},[973,4184,1494,4185,4188,4189,4191],{},[1030,4186,4187],{},"popper"," prop has been replaced by ",[1030,4190,371],{}," for positioning:",[1042,4193,4195],{"className":1502,"code":4194,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUTooltip :popper=\"{ placement: 'top' }\" \u002F>\n+ \u003CUTooltip :content=\"{ side: 'top' }\" \u002F>\n\n- \u003CUSelectMenu :popper=\"{ placement: 'bottom-start' }\" \u002F>\n+ \u003CUSelectMenu :content=\"{ side: 'bottom', align: 'start' }\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,4196,4197,4201,4208,4215,4219,4226,4233],{"__ignoreMap":1048},[1052,4198,4199],{"class":1054,"line":1055},[1052,4200,1511],{"class":1095},[1052,4202,4203,4205],{"class":1054,"line":1102},[1052,4204,1516],{"class":1062},[1052,4206,4207],{"class":1105}," \u003CUTooltip :popper=\"{ placement: 'top' }\" \u002F>\n",[1052,4209,4210,4212],{"class":1054,"line":1126},[1052,4211,1524],{"class":1062},[1052,4213,4214],{"class":1066}," \u003CUTooltip :content=\"{ side: 'top' }\" \u002F>\n",[1052,4216,4217],{"class":1054,"line":1227},[1052,4218,1568],{"emptyLinePlaceholder":21},[1052,4220,4221,4223],{"class":1054,"line":1266},[1052,4222,1516],{"class":1062},[1052,4224,4225],{"class":1105}," \u003CUSelectMenu :popper=\"{ placement: 'bottom-start' }\" \u002F>\n",[1052,4227,4228,4230],{"class":1054,"line":1578},[1052,4229,1524],{"class":1062},[1052,4231,4232],{"class":1066}," \u003CUSelectMenu :content=\"{ side: 'bottom', align: 'start' }\" \u002F>\n",[1052,4234,4235],{"class":1054,"line":1586},[1052,4236,1532],{"class":1095},[1012,4238,4239],{},[966,4240,2601,4241,1351,4243,1351,4245,1351,4247,1351,4249,1351,4251,1022],{},[1030,4242,803],{},[1030,4244,693],{},[1030,4246,456],{},[1030,4248,394],{},[1030,4250,733],{},[1030,4252,552],{},[970,4254,4255],{},[973,4256,1494,4257,3095,4259,3190,4262,1598,4265,3593,4268,1109],{},[1030,4258,803],{},[1030,4260,4261],{},"shortcuts",[1030,4263,4264],{},"kbds",[1030,4266,4267],{},"prevent",[1030,4269,4270],{},"disabled",[1042,4272,4274],{"className":1502,"code":4273,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUTooltip text=\"Open\" :shortcuts=\"['⌘', 'O']\" \u002F>\n+ \u003CUTooltip text=\"Open\" :kbds=\"['meta', 'O']\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,4275,4276,4280,4287,4294],{"__ignoreMap":1048},[1052,4277,4278],{"class":1054,"line":1055},[1052,4279,1511],{"class":1095},[1052,4281,4282,4284],{"class":1054,"line":1102},[1052,4283,1516],{"class":1062},[1052,4285,4286],{"class":1105}," \u003CUTooltip text=\"Open\" :shortcuts=\"['⌘', 'O']\" \u002F>\n",[1052,4288,4289,4291],{"class":1054,"line":1126},[1052,4290,1524],{"class":1062},[1052,4292,4293],{"class":1066}," \u003CUTooltip text=\"Open\" :kbds=\"['meta', 'O']\" \u002F>\n",[1052,4295,4296],{"class":1054,"line":1227},[1052,4297,1532],{"class":1095},[970,4299,4300],{},[973,4301,1494,4302,3095,4304,4307,4308,1109],{},[1030,4303,693],{},[1030,4305,4306],{},"#panel"," slot has been renamed to ",[1030,4309,2836],{},[1042,4311,4313],{"className":1502,"code":4312,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n  \u003CUPopover>\n    \u003CUButton label=\"Open\" \u002F>\n\n-   \u003Ctemplate #panel>\n+   \u003Ctemplate #content>\n      \u003Cdiv class=\"p-4\">Content\u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUPopover>\n\u003C\u002Ftemplate>\n",[1030,4314,4315,4319,4324,4329,4333,4340,4346,4351,4356,4361],{"__ignoreMap":1048},[1052,4316,4317],{"class":1054,"line":1055},[1052,4318,1511],{"class":1095},[1052,4320,4321],{"class":1054,"line":1102},[1052,4322,4323],{"class":1095},"  \u003CUPopover>\n",[1052,4325,4326],{"class":1054,"line":1126},[1052,4327,4328],{"class":1095},"    \u003CUButton label=\"Open\" \u002F>\n",[1052,4330,4331],{"class":1054,"line":1227},[1052,4332,1568],{"emptyLinePlaceholder":21},[1052,4334,4335,4337],{"class":1054,"line":1266},[1052,4336,1516],{"class":1062},[1052,4338,4339],{"class":1105},"   \u003Ctemplate #panel>\n",[1052,4341,4342,4344],{"class":1054,"line":1578},[1052,4343,1524],{"class":1062},[1052,4345,2911],{"class":1066},[1052,4347,4348],{"class":1054,"line":1586},[1052,4349,4350],{"class":1095},"      \u003Cdiv class=\"p-4\">Content\u003C\u002Fdiv>\n",[1052,4352,4353],{"class":1054,"line":1659},[1052,4354,4355],{"class":1095},"    \u003C\u002Ftemplate>\n",[1052,4357,4358],{"class":1054,"line":1770},[1052,4359,4360],{"class":1095},"  \u003C\u002FUPopover>\n",[1052,4362,4363],{"class":1054,"line":1776},[1052,4364,1532],{"class":1095},[970,4366,4367],{},[973,4368,1494,4369,4371],{},[1030,4370,394],{}," component has been completely redesigned. It now uses items and has a proper trigger\u002Fcontent structure:",[1042,4373,4375],{"className":1502,"code":4374,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUContextMenu v-model=\"isOpen\" :virtual-element=\"virtualElement\" \u002F>\n+ \u003CUContextMenu :items=\"items\">\n+   \u003Cdiv>Right-click me\u003C\u002Fdiv>\n+ \u003C\u002FUContextMenu>\n\u003C\u002Ftemplate>\n",[1030,4376,4377,4381,4388,4395,4402,4409],{"__ignoreMap":1048},[1052,4378,4379],{"class":1054,"line":1055},[1052,4380,1511],{"class":1095},[1052,4382,4383,4385],{"class":1054,"line":1102},[1052,4384,1516],{"class":1062},[1052,4386,4387],{"class":1105}," \u003CUContextMenu v-model=\"isOpen\" :virtual-element=\"virtualElement\" \u002F>\n",[1052,4389,4390,4392],{"class":1054,"line":1126},[1052,4391,1524],{"class":1062},[1052,4393,4394],{"class":1066}," \u003CUContextMenu :items=\"items\">\n",[1052,4396,4397,4399],{"class":1054,"line":1227},[1052,4398,1524],{"class":1062},[1052,4400,4401],{"class":1066},"   \u003Cdiv>Right-click me\u003C\u002Fdiv>\n",[1052,4403,4404,4406],{"class":1054,"line":1266},[1052,4405,1524],{"class":1062},[1052,4407,4408],{"class":1066}," \u003C\u002FUContextMenu>\n",[1052,4410,4411],{"class":1054,"line":1578},[1052,4412,1532],{"class":1095},[970,4414,4415],{},[973,4416,1494,4417,3095,4419,4188,4422,1598,4425,4428,4429,1109],{},[1030,4418,713],{},[1030,4420,4421],{},"value",[1030,4423,4424],{},"model-value",[1030,4426,4427],{},"indicator"," by ",[1030,4430,4431],{},"status",[1042,4433,4435],{"className":1502,"code":4434,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUProgress :value=\"50\" indicator \u002F>\n+ \u003CUProgress :model-value=\"50\" status \u002F>\n\u003C\u002Ftemplate>\n",[1030,4436,4437,4441,4448,4455],{"__ignoreMap":1048},[1052,4438,4439],{"class":1054,"line":1055},[1052,4440,1511],{"class":1095},[1052,4442,4443,4445],{"class":1054,"line":1102},[1052,4444,1516],{"class":1062},[1052,4446,4447],{"class":1105}," \u003CUProgress :value=\"50\" indicator \u002F>\n",[1052,4449,4450,4452],{"class":1054,"line":1126},[1052,4451,1524],{"class":1062},[1052,4453,4454],{"class":1066}," \u003CUProgress :model-value=\"50\" status \u002F>\n",[1052,4456,4457],{"class":1054,"line":1227},[1052,4458,1532],{"class":1095},[970,4460,4461],{},[973,4462,1494,4463,3095,4465,3190,4468,1109],{},[1030,4464,244],{},[1030,4466,4467],{},"indicators",[1030,4469,4470],{},"dots",[1042,4472,4474],{"className":1502,"code":4473,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUCarousel :items=\"items\" indicators \u002F>\n+ \u003CUCarousel :items=\"items\" dots \u002F>\n\u003C\u002Ftemplate>\n",[1030,4475,4476,4480,4487,4494],{"__ignoreMap":1048},[1052,4477,4478],{"class":1054,"line":1055},[1052,4479,1511],{"class":1095},[1052,4481,4482,4484],{"class":1054,"line":1102},[1052,4483,1516],{"class":1062},[1052,4485,4486],{"class":1105}," \u003CUCarousel :items=\"items\" indicators \u002F>\n",[1052,4488,4489,4491],{"class":1054,"line":1126},[1052,4490,1524],{"class":1062},[1052,4492,4493],{"class":1066}," \u003CUCarousel :items=\"items\" dots \u002F>\n",[1052,4495,4496],{"class":1054,"line":1227},[1052,4497,1532],{"class":1095},[1012,4499,4500],{},[966,4501,1494,4502,3486,4504,4509],{},[1030,4503,244],{},[1271,4505,4508],{"href":4506,"rel":4507,"target":1015},"https:\u002F\u002Fwww.embla-carousel.com\u002F",[3491],"Embla Carousel"," under the hood.",[970,4511,4512],{},[973,4513,1494,4514,4517,4518,1109],{},[1030,4515,4516],{},"help"," prop\u002Fproperty has been renamed to ",[1030,4519,4520],{},"description",[1042,4522,4524],{"className":1502,"code":4523,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUCheckbox label=\"Remember me\" help=\"Save my login details\" \u002F>\n+ \u003CUCheckbox label=\"Remember me\" description=\"Save my login details\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst items = [{\n  label: 'Option 1',\n- help: 'Description for option 1'\n+ description: 'Description for option 1'\n}]\n\u003C\u002Fscript>\n",[1030,4525,4526,4530,4537,4544,4548,4552,4556,4560,4565,4572,4579,4583],{"__ignoreMap":1048},[1052,4527,4528],{"class":1054,"line":1055},[1052,4529,1511],{"class":1095},[1052,4531,4532,4534],{"class":1054,"line":1102},[1052,4533,1516],{"class":1062},[1052,4535,4536],{"class":1105}," \u003CUCheckbox label=\"Remember me\" help=\"Save my login details\" \u002F>\n",[1052,4538,4539,4541],{"class":1054,"line":1126},[1052,4540,1524],{"class":1062},[1052,4542,4543],{"class":1066}," \u003CUCheckbox label=\"Remember me\" description=\"Save my login details\" \u002F>\n",[1052,4545,4546],{"class":1054,"line":1227},[1052,4547,1532],{"class":1095},[1052,4549,4550],{"class":1054,"line":1266},[1052,4551,1568],{"emptyLinePlaceholder":21},[1052,4553,4554],{"class":1054,"line":1578},[1052,4555,2637],{"class":1095},[1052,4557,4558],{"class":1054,"line":1586},[1052,4559,2642],{"class":1095},[1052,4561,4562],{"class":1054,"line":1659},[1052,4563,4564],{"class":1095},"  label: 'Option 1',\n",[1052,4566,4567,4569],{"class":1054,"line":1770},[1052,4568,1516],{"class":1062},[1052,4570,4571],{"class":1105}," help: 'Description for option 1'\n",[1052,4573,4574,4576],{"class":1054,"line":1776},[1052,4575,1524],{"class":1062},[1052,4577,4578],{"class":1066}," description: 'Description for option 1'\n",[1052,4580,4581],{"class":1054,"line":1879},[1052,4582,2675],{"class":1095},[1052,4584,4585],{"class":1054,"line":1887},[1052,4586,2680],{"class":1095},[1012,4588,4589],{},[966,4590,2601,4591,1351,4593,1022],{},[1030,4592,306],{},[1030,4594,718],{},[970,4596,4597],{},[973,4598,1494,4599,3095,4601,3190,4604,1598,4607,4610,4611,1109],{},[1030,4600,223],{},[1030,4602,4603],{},"divider",[1030,4605,4606],{},"separator-icon",[1030,4608,4609],{},"#divider"," slot to ",[1030,4612,4613],{},"#separator",[1042,4615,4617],{"className":1502,"code":4616,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUBreadcrumb :links=\"links\" divider=\"i-lucide-arrow-right\" \u002F>\n+ \u003CUBreadcrumb :items=\"items\" separator-icon=\"i-lucide-arrow-right\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,4618,4619,4623,4630,4637],{"__ignoreMap":1048},[1052,4620,4621],{"class":1054,"line":1055},[1052,4622,1511],{"class":1095},[1052,4624,4625,4627],{"class":1054,"line":1102},[1052,4626,1516],{"class":1062},[1052,4628,4629],{"class":1105}," \u003CUBreadcrumb :links=\"links\" divider=\"i-lucide-arrow-right\" \u002F>\n",[1052,4631,4632,4634],{"class":1054,"line":1126},[1052,4633,1524],{"class":1062},[1052,4635,4636],{"class":1066}," \u003CUBreadcrumb :items=\"items\" separator-icon=\"i-lucide-arrow-right\" \u002F>\n",[1052,4638,4639],{"class":1054,"line":1227},[1052,4640,1532],{"class":1095},[970,4642,4643],{},[973,4644,1494,4645,4647,4648,1351,4651,1351,4654,4657,4658,3053],{},[1030,4646,193],{}," component chip props (",[1030,4649,4650],{},"chip-color",[1030,4652,4653],{},"chip-position",[1030,4655,4656],{},"chip-text",") have been consolidated into a single ",[1030,4659,4660],{},"chip",[1042,4662,4664],{"className":1502,"code":4663,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUAvatar src=\"...\" chip-color=\"green\" chip-position=\"top-right\" chip-text=\"\" \u002F>\n+ \u003CUAvatar src=\"...\" :chip=\"{ color: 'success', position: 'top-right' }\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,4665,4666,4670,4677,4684],{"__ignoreMap":1048},[1052,4667,4668],{"class":1054,"line":1055},[1052,4669,1511],{"class":1095},[1052,4671,4672,4674],{"class":1054,"line":1102},[1052,4673,1516],{"class":1062},[1052,4675,4676],{"class":1105}," \u003CUAvatar src=\"...\" chip-color=\"green\" chip-position=\"top-right\" chip-text=\"\" \u002F>\n",[1052,4678,4679,4681],{"class":1054,"line":1126},[1052,4680,1524],{"class":1062},[1052,4682,4683],{"class":1066}," \u003CUAvatar src=\"...\" :chip=\"{ color: 'success', position: 'top-right' }\" \u002F>\n",[1052,4685,4686],{"class":1054,"line":1227},[1052,4687,1532],{"class":1095},[970,4689,4690],{},[973,4691,1494,4692,3095,4694,1598,4697,4700,4701,3960,4704,1109],{},[1030,4693,229],{},[1030,4695,4696],{},"padded",[1030,4698,4699],{},"truncate"," props have been removed. Use ",[1030,4702,4703],{},"square",[1030,4705,4706],{},":padded=\"false\"",[1042,4708,4710],{"className":1502,"code":4709,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUButton :padded=\"false\" \u002F>\n+ \u003CUButton square \u002F>\n\u003C\u002Ftemplate>\n",[1030,4711,4712,4716,4723,4730],{"__ignoreMap":1048},[1052,4713,4714],{"class":1054,"line":1055},[1052,4715,1511],{"class":1095},[1052,4717,4718,4720],{"class":1054,"line":1102},[1052,4719,1516],{"class":1062},[1052,4721,4722],{"class":1105}," \u003CUButton :padded=\"false\" \u002F>\n",[1052,4724,4725,4727],{"class":1054,"line":1126},[1052,4726,1524],{"class":1062},[1052,4728,4729],{"class":1066}," \u003CUButton square \u002F>\n",[1052,4731,4732],{"class":1054,"line":1227},[1052,4733,1532],{"class":1095},[970,4735,4736],{},[973,4737,1494,4738,3095,4740,4743,4744,3244],{},[1030,4739,317],{},[1030,4741,4742],{},"show"," prop is now a model (",[1030,4745,4746],{},"v-model:show",[1042,4748,4750],{"className":1502,"code":4749,"language":1504,"meta":1048,"style":1048},"\u003Ctemplate>\n- \u003CUChip :show=\"isVisible\" \u002F>\n+ \u003CUChip v-model:show=\"isVisible\" \u002F>\n\u003C\u002Ftemplate>\n",[1030,4751,4752,4756,4763,4770],{"__ignoreMap":1048},[1052,4753,4754],{"class":1054,"line":1055},[1052,4755,1511],{"class":1095},[1052,4757,4758,4760],{"class":1054,"line":1102},[1052,4759,1516],{"class":1062},[1052,4761,4762],{"class":1105}," \u003CUChip :show=\"isVisible\" \u002F>\n",[1052,4764,4765,4767],{"class":1054,"line":1126},[1052,4766,1524],{"class":1062},[1052,4768,4769],{"class":1066}," \u003CUChip v-model:show=\"isVisible\" \u002F>\n",[1052,4771,4772],{"class":1054,"line":1227},[1052,4773,1532],{"class":1095},[970,4775,4776],{},[973,4777,1494,4778,3095,4780,4783,4784,4786,4787,3960,4790,1109],{},[1030,4779,358],{},[1030,4781,4782],{},"groups"," prop structure has changed. Each group now has an ",[1030,4785,2550],{}," array and uses ",[1030,4788,4789],{},"onSelect",[1030,4791,2622],{},[1042,4793,4795],{"className":1502,"code":4794,"language":1504,"meta":1048,"style":1048},"\u003Cscript setup lang=\"ts\">\nconst groups = [{\n  id: 'actions',\n  label: 'Actions',\n- commands: [{ id: 'new', label: 'New file' }]\n+ items: [{ id: 'new', label: 'New file' }]\n}]\n\u003C\u002Fscript>\n",[1030,4796,4797,4801,4806,4811,4816,4823,4830,4834],{"__ignoreMap":1048},[1052,4798,4799],{"class":1054,"line":1055},[1052,4800,2637],{"class":1095},[1052,4802,4803],{"class":1054,"line":1102},[1052,4804,4805],{"class":1095},"const groups = [{\n",[1052,4807,4808],{"class":1054,"line":1126},[1052,4809,4810],{"class":1095},"  id: 'actions',\n",[1052,4812,4813],{"class":1054,"line":1227},[1052,4814,4815],{"class":1095},"  label: 'Actions',\n",[1052,4817,4818,4820],{"class":1054,"line":1266},[1052,4819,1516],{"class":1062},[1052,4821,4822],{"class":1105}," commands: [{ id: 'new', label: 'New file' }]\n",[1052,4824,4825,4827],{"class":1054,"line":1578},[1052,4826,1524],{"class":1062},[1052,4828,4829],{"class":1066}," items: [{ id: 'new', label: 'New file' }]\n",[1052,4831,4832],{"class":1054,"line":1586},[1052,4833,2675],{"class":1095},[1052,4835,4836],{"class":1054,"line":1659},[1052,4837,2680],{"class":1095},[1004,4839,4841],{"id":4840},"changed-composables","Changed composables",[970,4843,4844],{},[973,4845,1494,4846,4849,4850,3190,4853,1109],{},[1030,4847,4848],{},"useToast()"," composable ",[1030,4851,4852],{},"timeout",[1030,4854,4855],{},"duration",[1042,4857,4859],{"className":1502,"code":4858,"language":1504,"meta":1048,"style":1048},"\u003Cscript setup lang=\"ts\">\nconst toast = useToast()\n\n- toast.add({ title: 'Invitation sent', timeout: 0 })\n+ toast.add({ title: 'Invitation sent', duration: 0 })\n\u003C\u002Fscript>\n",[1030,4860,4861,4865,4870,4874,4881,4888],{"__ignoreMap":1048},[1052,4862,4863],{"class":1054,"line":1055},[1052,4864,2637],{"class":1095},[1052,4866,4867],{"class":1054,"line":1102},[1052,4868,4869],{"class":1095},"const toast = useToast()\n",[1052,4871,4872],{"class":1054,"line":1126},[1052,4873,1568],{"emptyLinePlaceholder":21},[1052,4875,4876,4878],{"class":1054,"line":1227},[1052,4877,1516],{"class":1062},[1052,4879,4880],{"class":1105}," toast.add({ title: 'Invitation sent', timeout: 0 })\n",[1052,4882,4883,4885],{"class":1054,"line":1266},[1052,4884,1524],{"class":1062},[1052,4886,4887],{"class":1066}," toast.add({ title: 'Invitation sent', duration: 0 })\n",[1052,4889,4890],{"class":1054,"line":1578},[1052,4891,2680],{"class":1095},[970,4893,4894],{},[973,4895,1494,4896,1598,4899,4902,4903,4905],{},[1030,4897,4898],{},"useModal",[1030,4900,4901],{},"useSlideover"," composables have been removed in favor of a more generic ",[1030,4904,844],{}," composable:",[966,4907,4908],{},"Some important differences:",[970,4910,4911,4916,4919,4932],{},[973,4912,1494,4913,4915],{},[1030,4914,844],{}," composable is now used to create overlay instances",[973,4917,4918],{},"Overlays that are opened, can be awaited for their result",[973,4920,4921,4922,2525,4925,4928,4929,4931],{},"Overlays can no longer be close using ",[1030,4923,4924],{},"modal.close()",[1030,4926,4927],{},"slideover.close()",", rather, they close automatically: either when a ",[1030,4930,3749],{}," event is fired explicitly from the opened component OR when the overlay closes itself (clicking on backdrop, pressing the ESC key, etc)",[973,4933,4934,4935,4937],{},"To capture the return value in the parent component you must explicitly emit a ",[1030,4936,3749],{}," event with the desired value",[1042,4939,4941],{"className":1502,"code":4940,"language":1504,"meta":1048,"style":1048},"\u003Cscript setup lang=\"ts\">\nimport { ModalExampleComponent } from '#components'\n\n- const modal = useModal()\n+ const overlay = useOverlay()\n\n- modal.open(ModalExampleComponent)\n+ const modal = overlay.create(ModalExampleComponent)\n\u003C\u002Fscript>\n",[1030,4942,4943,4947,4952,4956,4963,4970,4974,4981,4988],{"__ignoreMap":1048},[1052,4944,4945],{"class":1054,"line":1055},[1052,4946,2637],{"class":1095},[1052,4948,4949],{"class":1054,"line":1102},[1052,4950,4951],{"class":1095},"import { ModalExampleComponent } from '#components'\n",[1052,4953,4954],{"class":1054,"line":1126},[1052,4955,1568],{"emptyLinePlaceholder":21},[1052,4957,4958,4960],{"class":1054,"line":1227},[1052,4959,1516],{"class":1062},[1052,4961,4962],{"class":1105}," const modal = useModal()\n",[1052,4964,4965,4967],{"class":1054,"line":1266},[1052,4966,1524],{"class":1062},[1052,4968,4969],{"class":1066}," const overlay = useOverlay()\n",[1052,4971,4972],{"class":1054,"line":1578},[1052,4973,1568],{"emptyLinePlaceholder":21},[1052,4975,4976,4978],{"class":1054,"line":1586},[1052,4977,1516],{"class":1062},[1052,4979,4980],{"class":1105}," modal.open(ModalExampleComponent)\n",[1052,4982,4983,4985],{"class":1054,"line":1659},[1052,4984,1524],{"class":1062},[1052,4986,4987],{"class":1066}," const modal = overlay.create(ModalExampleComponent)\n",[1052,4989,4990],{"class":1054,"line":1770},[1052,4991,2680],{"class":1095},[966,4993,4994],{},"Props are now passed through a props attribute:",[1042,4996,4998],{"className":1502,"code":4997,"language":1504,"meta":1048,"style":1048},"\u003Cscript setup lang=\"ts\">\nimport { ModalExampleComponent } from '#components'\n\n- const modal = useModal()\n+ const overlay = useOverlay()\n\nconst count = ref(0)\n\n- modal.open(ModalExampleComponent, {\n-   count: count.value\n- })\n+ const modal = overlay.create(ModalExampleComponent, {\n+   props: {\n+     count: count.value\n+   }\n+ })\n\u003C\u002Fscript>\n",[1030,4999,5000,5004,5008,5012,5018,5024,5028,5033,5037,5044,5051,5058,5065,5072,5079,5085,5091],{"__ignoreMap":1048},[1052,5001,5002],{"class":1054,"line":1055},[1052,5003,2637],{"class":1095},[1052,5005,5006],{"class":1054,"line":1102},[1052,5007,4951],{"class":1095},[1052,5009,5010],{"class":1054,"line":1126},[1052,5011,1568],{"emptyLinePlaceholder":21},[1052,5013,5014,5016],{"class":1054,"line":1227},[1052,5015,1516],{"class":1062},[1052,5017,4962],{"class":1105},[1052,5019,5020,5022],{"class":1054,"line":1266},[1052,5021,1524],{"class":1062},[1052,5023,4969],{"class":1066},[1052,5025,5026],{"class":1054,"line":1578},[1052,5027,1568],{"emptyLinePlaceholder":21},[1052,5029,5030],{"class":1054,"line":1586},[1052,5031,5032],{"class":1095},"const count = ref(0)\n",[1052,5034,5035],{"class":1054,"line":1659},[1052,5036,1568],{"emptyLinePlaceholder":21},[1052,5038,5039,5041],{"class":1054,"line":1770},[1052,5040,1516],{"class":1062},[1052,5042,5043],{"class":1105}," modal.open(ModalExampleComponent, {\n",[1052,5045,5046,5048],{"class":1054,"line":1776},[1052,5047,1516],{"class":1062},[1052,5049,5050],{"class":1105},"   count: count.value\n",[1052,5052,5053,5055],{"class":1054,"line":1879},[1052,5054,1516],{"class":1062},[1052,5056,5057],{"class":1105}," })\n",[1052,5059,5060,5062],{"class":1054,"line":1887},[1052,5061,1524],{"class":1062},[1052,5063,5064],{"class":1066}," const modal = overlay.create(ModalExampleComponent, {\n",[1052,5066,5067,5069],{"class":1054,"line":1895},[1052,5068,1524],{"class":1062},[1052,5070,5071],{"class":1066},"   props: {\n",[1052,5073,5074,5076],{"class":1054,"line":1902},[1052,5075,1524],{"class":1062},[1052,5077,5078],{"class":1066},"     count: count.value\n",[1052,5080,5081,5083],{"class":1054,"line":1909},[1052,5082,1524],{"class":1062},[1052,5084,1767],{"class":1066},[1052,5086,5087,5089],{"class":1054,"line":1916},[1052,5088,1524],{"class":1062},[1052,5090,5057],{"class":1066},[1052,5092,5093],{"class":1054,"line":1922},[1052,5094,2680],{"class":1095},[966,5096,5097,5098,5100,5101,5104],{},"Closing a modal is now done through the ",[1030,5099,3749],{}," event. The ",[1030,5102,5103],{},"modal.open"," method now returns an instance that can be used to await for the result of the modal whenever the modal is closed:",[1042,5106,5108],{"className":1502,"code":5107,"language":1504,"meta":1048,"style":1048},"\u003Cscript setup lang=\"ts\">\nimport { ModalExampleComponent } from '#components'\n\n- const modal = useModal()\n+ const overlay = useOverlay()\n\n+ const modal = overlay.create(ModalExampleComponent)\n\n- function openModal() {\n-   modal.open(ModalExampleComponent, {\n-     onSuccess() {\n-       toast.add({ title: 'Success!' })\n-     }\n-   })\n- }\n+ async function openModal() {\n+   const instance = modal.open(ModalExampleComponent, {\n+     count: count.value\n+   })\n+\n+   const result = await instance.result\n+\n+   if (result) {\n+     toast.add({ title: 'Success!' })\n+   }\n+ }\n\u003C\u002Fscript>\n",[1030,5109,5110,5114,5118,5122,5128,5134,5138,5144,5148,5155,5162,5169,5176,5182,5189,5195,5202,5209,5215,5222,5228,5236,5241,5249,5257,5264,5271],{"__ignoreMap":1048},[1052,5111,5112],{"class":1054,"line":1055},[1052,5113,2637],{"class":1095},[1052,5115,5116],{"class":1054,"line":1102},[1052,5117,4951],{"class":1095},[1052,5119,5120],{"class":1054,"line":1126},[1052,5121,1568],{"emptyLinePlaceholder":21},[1052,5123,5124,5126],{"class":1054,"line":1227},[1052,5125,1516],{"class":1062},[1052,5127,4962],{"class":1105},[1052,5129,5130,5132],{"class":1054,"line":1266},[1052,5131,1524],{"class":1062},[1052,5133,4969],{"class":1066},[1052,5135,5136],{"class":1054,"line":1578},[1052,5137,1568],{"emptyLinePlaceholder":21},[1052,5139,5140,5142],{"class":1054,"line":1586},[1052,5141,1524],{"class":1062},[1052,5143,4987],{"class":1066},[1052,5145,5146],{"class":1054,"line":1659},[1052,5147,1568],{"emptyLinePlaceholder":21},[1052,5149,5150,5152],{"class":1054,"line":1770},[1052,5151,1516],{"class":1062},[1052,5153,5154],{"class":1105}," function openModal() {\n",[1052,5156,5157,5159],{"class":1054,"line":1776},[1052,5158,1516],{"class":1062},[1052,5160,5161],{"class":1105},"   modal.open(ModalExampleComponent, {\n",[1052,5163,5164,5166],{"class":1054,"line":1879},[1052,5165,1516],{"class":1062},[1052,5167,5168],{"class":1105},"     onSuccess() {\n",[1052,5170,5171,5173],{"class":1054,"line":1887},[1052,5172,1516],{"class":1062},[1052,5174,5175],{"class":1105},"       toast.add({ title: 'Success!' })\n",[1052,5177,5178,5180],{"class":1054,"line":1895},[1052,5179,1516],{"class":1062},[1052,5181,1919],{"class":1105},[1052,5183,5184,5186],{"class":1054,"line":1902},[1052,5185,1516],{"class":1062},[1052,5187,5188],{"class":1105},"   })\n",[1052,5190,5191,5193],{"class":1054,"line":1909},[1052,5192,1516],{"class":1062},[1052,5194,4156],{"class":1105},[1052,5196,5197,5199],{"class":1054,"line":1916},[1052,5198,1524],{"class":1062},[1052,5200,5201],{"class":1066}," async function openModal() {\n",[1052,5203,5204,5206],{"class":1054,"line":1922},[1052,5205,1524],{"class":1062},[1052,5207,5208],{"class":1066},"   const instance = modal.open(ModalExampleComponent, {\n",[1052,5210,5211,5213],{"class":1054,"line":1927},[1052,5212,1524],{"class":1062},[1052,5214,5078],{"class":1066},[1052,5216,5218,5220],{"class":1054,"line":5217},19,[1052,5219,1524],{"class":1062},[1052,5221,5188],{"class":1066},[1052,5223,5225],{"class":1054,"line":5224},20,[1052,5226,5227],{"class":1062},"+\n",[1052,5229,5231,5233],{"class":1054,"line":5230},21,[1052,5232,1524],{"class":1062},[1052,5234,5235],{"class":1066},"   const result = await instance.result\n",[1052,5237,5239],{"class":1054,"line":5238},22,[1052,5240,5227],{"class":1062},[1052,5242,5244,5246],{"class":1054,"line":5243},23,[1052,5245,1524],{"class":1062},[1052,5247,5248],{"class":1066},"   if (result) {\n",[1052,5250,5252,5254],{"class":1054,"line":5251},24,[1052,5253,1524],{"class":1062},[1052,5255,5256],{"class":1066},"     toast.add({ title: 'Success!' })\n",[1052,5258,5260,5262],{"class":1054,"line":5259},25,[1052,5261,1524],{"class":1062},[1052,5263,1767],{"class":1066},[1052,5265,5267,5269],{"class":1054,"line":5266},26,[1052,5268,1524],{"class":1062},[1052,5270,4156],{"class":1066},[1052,5272,5274],{"class":1054,"line":5273},27,[1052,5275,2680],{"class":1095},[1004,5277,5279],{"id":5278},"changed-form-validation","Changed form validation",[970,5281,5282],{},[973,5283,5284,5285,3593,5288,1109],{},"The error object property for targeting form fields has been renamed from ",[1030,5286,5287],{},"path",[1030,5289,5290],{},"name",[1042,5292,5294],{"className":1502,"code":5293,"language":1504,"meta":1048,"style":1048},"\u003Cscript setup lang=\"ts\">\nfunction validate(state: any): FormError[] {\n  const errors = []\n  if (!state.email) {\n    errors.push({\n-     path: 'email',\n+     name: 'email',\n      message: 'Required'\n    })\n  }\n  if (!state.password) {\n    errors.push({\n-     path: 'password',\n+     name: 'password',\n      message: 'Required'\n    })\n  }\n  return errors\n}\n\u003C\u002Fscript>\n",[1030,5295,5296,5300,5305,5310,5315,5320,5327,5334,5339,5344,5348,5353,5357,5364,5371,5375,5379,5383,5388,5393],{"__ignoreMap":1048},[1052,5297,5298],{"class":1054,"line":1055},[1052,5299,2637],{"class":1095},[1052,5301,5302],{"class":1054,"line":1102},[1052,5303,5304],{"class":1095},"function validate(state: any): FormError[] {\n",[1052,5306,5307],{"class":1054,"line":1126},[1052,5308,5309],{"class":1095},"  const errors = []\n",[1052,5311,5312],{"class":1054,"line":1227},[1052,5313,5314],{"class":1095},"  if (!state.email) {\n",[1052,5316,5317],{"class":1054,"line":1266},[1052,5318,5319],{"class":1095},"    errors.push({\n",[1052,5321,5322,5324],{"class":1054,"line":1578},[1052,5323,1516],{"class":1062},[1052,5325,5326],{"class":1105},"     path: 'email',\n",[1052,5328,5329,5331],{"class":1054,"line":1586},[1052,5330,1524],{"class":1062},[1052,5332,5333],{"class":1066},"     name: 'email',\n",[1052,5335,5336],{"class":1054,"line":1659},[1052,5337,5338],{"class":1095},"      message: 'Required'\n",[1052,5340,5341],{"class":1054,"line":1770},[1052,5342,5343],{"class":1095},"    })\n",[1052,5345,5346],{"class":1054,"line":1776},[1052,5347,1773],{"class":1095},[1052,5349,5350],{"class":1054,"line":1879},[1052,5351,5352],{"class":1095},"  if (!state.password) {\n",[1052,5354,5355],{"class":1054,"line":1887},[1052,5356,5319],{"class":1095},[1052,5358,5359,5361],{"class":1054,"line":1895},[1052,5360,1516],{"class":1062},[1052,5362,5363],{"class":1105},"     path: 'password',\n",[1052,5365,5366,5368],{"class":1054,"line":1902},[1052,5367,1524],{"class":1062},[1052,5369,5370],{"class":1066},"     name: 'password',\n",[1052,5372,5373],{"class":1054,"line":1909},[1052,5374,5338],{"class":1095},[1052,5376,5377],{"class":1054,"line":1916},[1052,5378,5343],{"class":1095},[1052,5380,5381],{"class":1054,"line":1922},[1052,5382,1773],{"class":1095},[1052,5384,5385],{"class":1054,"line":1927},[1052,5386,5387],{"class":1095},"  return errors\n",[1052,5389,5390],{"class":1054,"line":5217},[1052,5391,5392],{"class":1095},"}\n",[1052,5394,5395],{"class":1054,"line":5224},[1052,5396,2680],{"class":1095},[5398,5399],"hr",{},[1449,5401,5402],{},[966,5403,5404],{},"This page is a work in progress, we'll improve it regularly.",[5406,5407,5408],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":1048,"searchDepth":1102,"depth":1102,"links":5410},[5411,5415],{"id":998,"depth":1102,"text":999,"children":5412},[5413,5414],{"id":1006,"depth":1126,"text":1007},{"id":1156,"depth":1126,"text":1157},{"id":1336,"depth":1102,"text":1337,"children":5416},[5417,5418,5419,5420,5421,5422],{"id":1343,"depth":1126,"text":1344},{"id":1782,"depth":1126,"text":1783},{"id":1980,"depth":1126,"text":1981},{"id":2532,"depth":1126,"text":2533},{"id":4840,"depth":1126,"text":4841},{"id":5278,"depth":1126,"text":5279},"A comprehensive guide to migrate your application from Nuxt UI v2 to Nuxt UI v3.","md",[5426],{"label":5427,"to":44,"icon":39},"Migration to v4",{},"\u002Fdocs\u002Fgetting-started\u002Fmigration\u002Fv3",{"title":961,"description":5423},"docs\u002F1.getting-started\u002F3.migration\u002F2.v3","j5PhyicGoviFVPwQp2dCzfDTseVFdlEnsKJFGp61YBM",{"data":5434,"body":5435},{},{"type":5436,"children":5437},"root",[5438],{"type":178,"tag":966,"props":5439,"children":5440},{},[5441],{"type":5442,"value":5423},"text",1774005618175]