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