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