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