[{"data":1,"prerenderedAt":3721},["ShallowReactive",2],{"navigation":3,"-docs-getting-started-migration-v3":918,"-docs-getting-started-migration-v3-description":3711},[4],{"title":5,"path":6,"stem":7,"children":8,"page":36},"Docs","/docs","docs",[9,157,781,817],{"title":10,"path":11,"stem":12,"children":13,"framework":16,"category":16,"description":16,"icon":30},"Get Started","/docs/getting-started","docs/1.getting-started/1.index",[14,19,37,47,53,76,140],{"title":15,"path":11,"stem":12,"framework":16,"category":16,"description":17,"icon":18},"Introduction",null,"Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.","i-lucide-house",{"title":20,"framework":16,"category":16,"description":16,"shadow":21,"path":22,"stem":23,"children":24,"page":36},"Installation",true,"/docs/getting-started/installation","docs/1.getting-started/2.installation",[25,31],{"title":20,"path":26,"stem":27,"framework":28,"category":16,"description":29,"icon":30},"/docs/getting-started/installation/nuxt","docs/1.getting-started/2.installation/1.nuxt","nuxt","Learn how to install and configure Nuxt UI in your Nuxt application.","i-lucide-square-play",{"title":20,"path":32,"stem":33,"framework":34,"category":16,"description":35,"icon":30},"/docs/getting-started/installation/vue","docs/1.getting-started/2.installation/2.vue","vue","Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.",false,{"title":38,"framework":16,"category":16,"description":16,"icon":39,"shadow":21,"path":40,"stem":41,"children":42,"page":36},"Migration","i-lucide-arrow-right-left","/docs/getting-started/migration","docs/1.getting-started/3.migration",[43],{"title":38,"path":44,"stem":45,"framework":16,"category":16,"description":46,"icon":39},"/docs/getting-started/migration/v4","docs/1.getting-started/3.migration/1.v4","A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.",{"title":48,"path":49,"stem":50,"framework":16,"category":16,"description":51,"icon":52},"Contribution","/docs/getting-started/contribution","docs/1.getting-started/4.contribution","A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.","i-lucide-handshake",{"title":54,"path":55,"stem":56,"children":57,"page":36},"Theme","/docs/getting-started/theme","docs/1.getting-started/5.theme",[58,64,70],{"title":59,"path":60,"stem":61,"framework":16,"category":16,"description":62,"icon":63},"Design System","/docs/getting-started/theme/design-system","docs/1.getting-started/5.theme/1.design-system","Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.","i-lucide-palette",{"title":65,"path":66,"stem":67,"framework":16,"category":16,"description":68,"icon":69},"CSS Variables","/docs/getting-started/theme/css-variables","docs/1.getting-started/5.theme/2.css-variables","Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.","i-lucide-swatch-book",{"title":71,"path":72,"stem":73,"framework":16,"category":16,"description":74,"icon":75},"Components","/docs/getting-started/theme/components","docs/1.getting-started/5.theme/3.components","Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.","i-lucide-layout-grid",{"title":77,"framework":16,"category":16,"description":16,"path":78,"stem":79,"children":80,"page":36},"Integrations","/docs/getting-started/integrations","docs/1.getting-started/6.integrations",[81,95,101,115,129,135],{"title":82,"framework":16,"category":16,"description":16,"shadow":21,"path":83,"stem":84,"children":85,"page":36},"Icons","/docs/getting-started/integrations/icons","docs/1.getting-started/6.integrations/1.icons",[86,91],{"title":82,"path":87,"stem":88,"framework":28,"category":16,"description":89,"icon":90},"/docs/getting-started/integrations/icons/nuxt","docs/1.getting-started/6.integrations/1.icons/1.nuxt","Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.","i-lucide-smile",{"title":82,"path":92,"stem":93,"framework":34,"category":16,"description":94,"icon":90},"/docs/getting-started/integrations/icons/vue","docs/1.getting-started/6.integrations/1.icons/2.vue","Nuxt UI integrates with Iconify to access over 200,000+ icons.",{"title":96,"path":97,"stem":98,"framework":28,"category":16,"description":99,"icon":100},"Fonts","/docs/getting-started/integrations/fonts","docs/1.getting-started/6.integrations/2.fonts","Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.","i-lucide-a-large-small",{"title":102,"framework":16,"category":16,"description":16,"shadow":21,"path":103,"stem":104,"children":105,"page":36},"Color Mode","/docs/getting-started/integrations/color-mode","docs/1.getting-started/6.integrations/3.color-mode",[106,111],{"title":102,"path":107,"stem":108,"framework":28,"category":16,"description":109,"icon":110},"/docs/getting-started/integrations/color-mode/nuxt","docs/1.getting-started/6.integrations/3.color-mode/1.nuxt","Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.","i-lucide-sun-moon",{"title":102,"path":112,"stem":113,"framework":34,"category":16,"description":114,"icon":110},"/docs/getting-started/integrations/color-mode/vue","docs/1.getting-started/6.integrations/3.color-mode/2.vue","Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.",{"title":116,"framework":16,"category":16,"description":16,"shadow":21,"path":117,"stem":118,"children":119,"page":36},"I18n","/docs/getting-started/integrations/i18n","docs/1.getting-started/6.integrations/4.i18n",[120,126],{"title":121,"path":122,"stem":123,"framework":28,"category":16,"description":124,"icon":125},"Internationalization (i18n)","/docs/getting-started/integrations/i18n/nuxt","docs/1.getting-started/6.integrations/4.i18n/1.nuxt","Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.","i-lucide-languages",{"title":121,"path":127,"stem":128,"framework":34,"category":16,"description":124,"icon":125},"/docs/getting-started/integrations/i18n/vue","docs/1.getting-started/6.integrations/4.i18n/2.vue",{"title":130,"path":131,"stem":132,"framework":28,"category":16,"description":133,"icon":134},"Content","/docs/getting-started/integrations/content","docs/1.getting-started/6.integrations/5.content","Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.","i-simple-icons-markdown",{"title":136,"path":137,"stem":138,"framework":34,"category":16,"description":139,"icon":134},"SSR","/docs/getting-started/integrations/ssr","docs/1.getting-started/6.integrations/6.ssr","Nuxt UI has first-party support for Vue SSR. This guide will help you have it fully enabled.",{"title":141,"framework":16,"category":16,"description":16,"path":142,"stem":143,"children":144,"page":36},"AI Tools","/docs/getting-started/ai","docs/1.getting-started/7.ai",[145,151],{"title":146,"path":147,"stem":148,"framework":16,"category":16,"description":149,"icon":150},"MCP Server","/docs/getting-started/ai/mcp","docs/1.getting-started/7.ai/1.mcp","Use Nuxt UI components in your AI assistants with Model Context Protocol support.","i-lucide-server",{"title":152,"path":153,"stem":154,"framework":16,"category":16,"description":155,"icon":156},"LLMs.txt","/docs/getting-started/ai/llms-txt","docs/1.getting-started/7.ai/2.llms-txt","How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt UI components, theming, and best practices.","i-lucide-bot",{"title":71,"framework":16,"category":16,"description":16,"icon":158,"path":159,"stem":160,"children":161,"page":36},"i-lucide-square-code","/docs/components","docs/2.components",[162,168,174,180,186,191,196,201,206,211,216,222,227,232,237,242,247,252,258,263,268,273,278,284,289,294,299,305,310,315,320,325,330,335,340,346,351,356,361,366,372,378,383,388,393,398,403,408,413,418,423,428,433,440,445,450,455,460,465,470,475,480,485,490,495,500,505,510,515,520,525,530,535,540,545,550,555,561,566,571,576,581,586,591,596,601,606,611,616,621,626,631,636,641,646,651,656,661,666,671,676,681,686,691,696,701,706,711,716,721,726,731,736,741,746,751,756,761,766,771,776],{"title":163,"path":164,"stem":165,"framework":16,"category":166,"description":167},"Accordion","/docs/components/accordion","docs/2.components/accordion","data","A stacked set of collapsible panels.",{"title":169,"path":170,"stem":171,"framework":16,"category":172,"description":173},"Alert","/docs/components/alert","docs/2.components/alert","element","A callout to draw user's attention.",{"title":175,"path":176,"stem":177,"framework":16,"category":178,"description":179},"App","/docs/components/app","docs/2.components/app","layout","Wraps your app to provide global configurations and more.",{"title":181,"path":182,"stem":183,"framework":16,"category":184,"description":185},"AuthForm","/docs/components/auth-form","docs/2.components/auth-form","page","A customizable Form to create login, register or password reset forms.",{"title":187,"path":188,"stem":189,"framework":16,"category":172,"description":190},"Avatar","/docs/components/avatar","docs/2.components/avatar","An img element with fallback and Nuxt Image support.",{"title":192,"path":193,"stem":194,"framework":16,"category":172,"description":195},"AvatarGroup","/docs/components/avatar-group","docs/2.components/avatar-group","Stack multiple avatars in a group.",{"title":197,"path":198,"stem":199,"framework":16,"category":172,"description":200},"Badge","/docs/components/badge","docs/2.components/badge","A short text to represent a status or a category.",{"title":202,"path":203,"stem":204,"framework":16,"category":172,"description":205},"Banner","/docs/components/banner","docs/2.components/banner","Display a banner at the top of your website to inform users about important information.",{"title":207,"path":208,"stem":209,"framework":16,"category":184,"description":210},"BlogPost","/docs/components/blog-post","docs/2.components/blog-post","A customizable article to display in a blog page.",{"title":212,"path":213,"stem":214,"framework":16,"category":184,"description":215},"BlogPosts","/docs/components/blog-posts","docs/2.components/blog-posts","Display a list of blog posts in a responsive grid layout.",{"title":217,"path":218,"stem":219,"framework":16,"category":220,"description":221},"Breadcrumb","/docs/components/breadcrumb","docs/2.components/breadcrumb","navigation","A hierarchy of links to navigate through a website.",{"title":223,"path":224,"stem":225,"framework":16,"category":172,"description":226},"Button","/docs/components/button","docs/2.components/button","A button element that can act as a link or trigger an action.",{"title":228,"path":229,"stem":230,"framework":16,"category":172,"description":231},"Calendar","/docs/components/calendar","docs/2.components/calendar","A calendar component for selecting single dates, multiple dates or date ranges.",{"title":233,"path":234,"stem":235,"framework":16,"category":172,"description":236},"Card","/docs/components/card","docs/2.components/card","Display content in a card with a header, body and footer.",{"title":238,"path":239,"stem":240,"framework":16,"category":166,"description":241},"Carousel","/docs/components/carousel","docs/2.components/carousel","A carousel with motion and swipe built using Embla.",{"title":243,"path":244,"stem":245,"framework":16,"category":184,"description":246},"ChangelogVersion","/docs/components/changelog-version","docs/2.components/changelog-version","A customizable article to display in a changelog.",{"title":248,"path":249,"stem":250,"framework":16,"category":184,"description":251},"ChangelogVersions","/docs/components/changelog-versions","docs/2.components/changelog-versions","Display a list of changelog versions in a timeline.",{"title":253,"path":254,"stem":255,"framework":16,"category":256,"description":257},"ChatMessage","/docs/components/chat-message","docs/2.components/chat-message","chat","Display a chat message with icon, avatar, and actions.",{"title":259,"path":260,"stem":261,"framework":16,"category":256,"description":262},"ChatMessages","/docs/components/chat-messages","docs/2.components/chat-messages","Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.",{"title":264,"path":265,"stem":266,"framework":16,"category":256,"description":267},"ChatPalette","/docs/components/chat-palette","docs/2.components/chat-palette","A chat palette to create a chatbot interface inside an overlay.",{"title":269,"path":270,"stem":271,"framework":16,"category":256,"description":272},"ChatPrompt","/docs/components/chat-prompt","docs/2.components/chat-prompt","An enhanced Textarea for submitting prompts in AI chat interfaces.",{"title":274,"path":275,"stem":276,"framework":16,"category":256,"description":277},"ChatPromptSubmit","/docs/components/chat-prompt-submit","docs/2.components/chat-prompt-submit","A Button for submitting chat prompts with automatic status handling.",{"title":279,"path":280,"stem":281,"framework":16,"category":282,"description":283},"Checkbox","/docs/components/checkbox","docs/2.components/checkbox","form","An input element to toggle between checked and unchecked states.",{"title":285,"path":286,"stem":287,"framework":16,"category":282,"description":288},"CheckboxGroup","/docs/components/checkbox-group","docs/2.components/checkbox-group","A set of checklist buttons to select multiple option from a list.",{"title":290,"path":291,"stem":292,"framework":16,"category":172,"description":293},"Chip","/docs/components/chip","docs/2.components/chip","An indicator of a numeric value or a state.",{"title":295,"path":296,"stem":297,"framework":16,"category":172,"description":298},"Collapsible","/docs/components/collapsible","docs/2.components/collapsible","A collapsible element to toggle visibility of its content.",{"title":300,"path":301,"stem":302,"framework":16,"category":303,"description":304},"ColorModeAvatar","/docs/components/color-mode-avatar","docs/2.components/color-mode-avatar","color-mode","An Avatar with a different source for light and dark mode.",{"title":306,"path":307,"stem":308,"framework":16,"category":303,"description":309},"ColorModeButton","/docs/components/color-mode-button","docs/2.components/color-mode-button","A Button to switch between light and dark mode.",{"title":311,"path":312,"stem":313,"framework":16,"category":303,"description":314},"ColorModeImage","/docs/components/color-mode-image","docs/2.components/color-mode-image","An image element with a different source for light and dark mode.",{"title":316,"path":317,"stem":318,"framework":16,"category":303,"description":319},"ColorModeSelect","/docs/components/color-mode-select","docs/2.components/color-mode-select","A Select to switch between system, dark & light mode.",{"title":321,"path":322,"stem":323,"framework":16,"category":303,"description":324},"ColorModeSwitch","/docs/components/color-mode-switch","docs/2.components/color-mode-switch","A switch to toggle between light and dark mode.",{"title":326,"path":327,"stem":328,"framework":16,"category":282,"description":329},"ColorPicker","/docs/components/color-picker","docs/2.components/color-picker","A component to select a color.",{"title":331,"path":332,"stem":333,"framework":16,"category":220,"description":334},"CommandPalette","/docs/components/command-palette","docs/2.components/command-palette","A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.",{"title":336,"path":337,"stem":338,"framework":16,"category":178,"description":339},"Container","/docs/components/container","docs/2.components/container","A container lets you center and constrain the width of your content.",{"title":341,"path":342,"stem":343,"framework":28,"category":344,"description":345},"ContentNavigation","/docs/components/content-navigation","docs/2.components/content-navigation","content","An accordion-style navigation component for organizing page links.",{"title":347,"path":348,"stem":349,"framework":28,"category":344,"description":350},"ContentSearch","/docs/components/content-search","docs/2.components/content-search","A ready to use CommandPalette to add to your documentation.",{"title":352,"path":353,"stem":354,"framework":28,"category":344,"description":355},"ContentSearchButton","/docs/components/content-search-button","docs/2.components/content-search-button","A pre-styled Button to open the ContentSearch modal.",{"title":357,"path":358,"stem":359,"framework":28,"category":344,"description":360},"ContentSurround","/docs/components/content-surround","docs/2.components/content-surround","A pair of prev and next links to navigate between pages.",{"title":362,"path":363,"stem":364,"framework":28,"category":344,"description":365},"ContentToc","/docs/components/content-toc","docs/2.components/content-toc","A sticky Table of Contents with automatic active anchor link highlighting.",{"title":367,"path":368,"stem":369,"framework":16,"category":370,"description":371},"ContextMenu","/docs/components/context-menu","docs/2.components/context-menu","overlay","A menu to display actions when right-clicking on an element.",{"title":373,"path":374,"stem":375,"framework":16,"category":376,"description":377},"DashboardGroup","/docs/components/dashboard-group","docs/2.components/dashboard-group","dashboard","A fixed layout component that provides context for dashboard components with sidebar state management and persistence.",{"title":379,"path":380,"stem":381,"framework":16,"category":376,"description":382},"DashboardNavbar","/docs/components/dashboard-navbar","docs/2.components/dashboard-navbar","A responsive navbar to display in a dashboard.",{"title":384,"path":385,"stem":386,"framework":16,"category":376,"description":387},"DashboardPanel","/docs/components/dashboard-panel","docs/2.components/dashboard-panel","A resizable panel to display in a dashboard.",{"title":389,"path":390,"stem":391,"framework":16,"category":376,"description":392},"DashboardResizeHandle","/docs/components/dashboard-resize-handle","docs/2.components/dashboard-resize-handle","A handle to resize a sidebar or panel.",{"title":394,"path":395,"stem":396,"framework":16,"category":376,"description":397},"DashboardSearch","/docs/components/dashboard-search","docs/2.components/dashboard-search","A ready to use CommandPalette to add to your dashboard.",{"title":399,"path":400,"stem":401,"framework":16,"category":376,"description":402},"DashboardSearchButton","/docs/components/dashboard-search-button","docs/2.components/dashboard-search-button","A pre-styled Button to open the DashboardSearch modal.",{"title":404,"path":405,"stem":406,"framework":16,"category":376,"description":407},"DashboardSidebar","/docs/components/dashboard-sidebar","docs/2.components/dashboard-sidebar","A resizable and collapsible sidebar to display in a dashboard.",{"title":409,"path":410,"stem":411,"framework":16,"category":376,"description":412},"DashboardSidebarCollapse","/docs/components/dashboard-sidebar-collapse","docs/2.components/dashboard-sidebar-collapse","A Button to collapse the sidebar on desktop.",{"title":414,"path":415,"stem":416,"framework":16,"category":376,"description":417},"DashboardSidebarToggle","/docs/components/dashboard-sidebar-toggle","docs/2.components/dashboard-sidebar-toggle","A Button to toggle the sidebar on mobile.",{"title":419,"path":420,"stem":421,"framework":16,"category":376,"description":422},"DashboardToolbar","/docs/components/dashboard-toolbar","docs/2.components/dashboard-toolbar","A toolbar to display under the navbar in a dashboard.",{"title":424,"path":425,"stem":426,"framework":16,"category":370,"description":427},"Drawer","/docs/components/drawer","docs/2.components/drawer","A drawer that smoothly slides in & out of the screen.",{"title":429,"path":430,"stem":431,"framework":16,"category":370,"description":432},"DropdownMenu","/docs/components/dropdown-menu","docs/2.components/dropdown-menu","A menu to display actions when clicking on an element.",{"title":434,"path":435,"stem":436,"framework":16,"category":437,"description":438,"badge":439},"Editor","/docs/components/editor","docs/2.components/editor","editor","A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.","New",{"title":441,"path":442,"stem":443,"framework":16,"category":437,"description":444,"badge":439},"EditorDragHandle","/docs/components/editor-drag-handle","docs/2.components/editor-drag-handle","A draggable handle for reordering and selecting blocks in the editor.",{"title":446,"path":447,"stem":448,"framework":16,"category":437,"description":449,"badge":439},"EditorEmojiMenu","/docs/components/editor-emoji-menu","docs/2.components/editor-emoji-menu","An emoji picker menu that displays emoji suggestions when typing the : character in the editor.",{"title":451,"path":452,"stem":453,"framework":16,"category":437,"description":454,"badge":439},"EditorMentionMenu","/docs/components/editor-mention-menu","docs/2.components/editor-mention-menu","A mention menu that displays user suggestions when typing the @ character in the editor.",{"title":456,"path":457,"stem":458,"framework":16,"category":437,"description":459,"badge":439},"EditorSuggestionMenu","/docs/components/editor-suggestion-menu","docs/2.components/editor-suggestion-menu","A command menu that displays formatting and action suggestions when typing the / character in the editor.",{"title":461,"path":462,"stem":463,"framework":16,"category":437,"description":464,"badge":439},"EditorToolbar","/docs/components/editor-toolbar","docs/2.components/editor-toolbar","A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.",{"title":466,"path":467,"stem":468,"framework":16,"category":166,"description":469},"Empty","/docs/components/empty","docs/2.components/empty","A component to display an empty state.",{"title":471,"path":472,"stem":473,"framework":16,"category":178,"description":474},"Error","/docs/components/error","docs/2.components/error","A pre-built error component with NuxtError support.",{"title":476,"path":477,"stem":478,"framework":16,"category":172,"description":479},"FieldGroup","/docs/components/field-group","docs/2.components/field-group","Group multiple button-like elements together.",{"title":481,"path":482,"stem":483,"framework":16,"category":282,"description":484},"FileUpload","/docs/components/file-upload","docs/2.components/file-upload","An input element to upload files.",{"title":486,"path":487,"stem":488,"framework":16,"category":178,"description":489},"Footer","/docs/components/footer","docs/2.components/footer","A responsive footer component.",{"title":491,"path":492,"stem":493,"framework":16,"category":220,"description":494},"FooterColumns","/docs/components/footer-columns","docs/2.components/footer-columns","A list of links as columns to display in your Footer.",{"title":496,"path":497,"stem":498,"framework":16,"category":282,"description":499},"Form","/docs/components/form","docs/2.components/form","A form component with built-in validation and submission handling.",{"title":501,"path":502,"stem":503,"framework":16,"category":282,"description":504},"FormField","/docs/components/form-field","docs/2.components/form-field","A wrapper for form elements that provides validation and error handling.",{"title":506,"path":507,"stem":508,"framework":16,"category":178,"description":509},"Header","/docs/components/header","docs/2.components/header","A responsive header component.",{"title":511,"path":512,"stem":513,"framework":16,"category":172,"description":514},"Icon","/docs/components/icon","docs/2.components/icon","A component to display any icon from Iconify or another component.",{"title":516,"path":517,"stem":518,"framework":16,"category":282,"description":519},"Input","/docs/components/input","docs/2.components/input","An input element to enter text.",{"title":521,"path":522,"stem":523,"framework":16,"category":282,"description":524},"InputDate","/docs/components/input-date","docs/2.components/input-date","An input component for date selection.",{"title":526,"path":527,"stem":528,"framework":16,"category":282,"description":529},"InputMenu","/docs/components/input-menu","docs/2.components/input-menu","An autocomplete input with real-time suggestions.",{"title":531,"path":532,"stem":533,"framework":16,"category":282,"description":534},"InputNumber","/docs/components/input-number","docs/2.components/input-number","An input for numerical values with a customizable range.",{"title":536,"path":537,"stem":538,"framework":16,"category":282,"description":539},"InputTags","/docs/components/input-tags","docs/2.components/input-tags","An input element that displays interactive tags.",{"title":541,"path":542,"stem":543,"framework":16,"category":282,"description":544},"InputTime","/docs/components/input-time","docs/2.components/input-time","An input for selecting a time.",{"title":546,"path":547,"stem":548,"framework":16,"category":172,"description":549},"Kbd","/docs/components/kbd","docs/2.components/kbd","A kbd element to display a keyboard key.",{"title":551,"path":552,"stem":553,"framework":16,"category":220,"description":554},"Link","/docs/components/link","docs/2.components/link","A wrapper around \u003CNuxtLink> with extra props.",{"title":556,"path":557,"stem":558,"framework":16,"category":559,"description":560},"LocaleSelect","/docs/components/locale-select","docs/2.components/locale-select","i18n","A Select to switch between locales.",{"title":562,"path":563,"stem":564,"framework":16,"category":178,"description":565},"Main","/docs/components/main","docs/2.components/main","A main element that fills the available viewport height.",{"title":567,"path":568,"stem":569,"framework":16,"category":166,"description":570},"Marquee","/docs/components/marquee","docs/2.components/marquee","A component to create infinite scrolling content.",{"title":572,"path":573,"stem":574,"framework":16,"category":370,"description":575},"Modal","/docs/components/modal","docs/2.components/modal","A dialog window that can be used to display a message or request user input.",{"title":577,"path":578,"stem":579,"framework":16,"category":220,"description":580},"NavigationMenu","/docs/components/navigation-menu","docs/2.components/navigation-menu","A list of links that can be displayed horizontally or vertically.",{"title":582,"path":583,"stem":584,"framework":16,"category":184,"description":585},"Page","/docs/components/page","docs/2.components/page","A grid layout for your pages with left and right columns.",{"title":587,"path":588,"stem":589,"framework":16,"category":184,"description":590},"PageAnchors","/docs/components/page-anchors","docs/2.components/page-anchors","A list of anchors to be displayed in the page.",{"title":592,"path":593,"stem":594,"framework":16,"category":184,"description":595},"PageAside","/docs/components/page-aside","docs/2.components/page-aside","A sticky aside to display your page navigation.",{"title":597,"path":598,"stem":599,"framework":16,"category":184,"description":600},"PageBody","/docs/components/page-body","docs/2.components/page-body","The main content of your page.",{"title":602,"path":603,"stem":604,"framework":16,"category":184,"description":605},"PageCard","/docs/components/page-card","docs/2.components/page-card","A pre-styled card component that displays a title, description and optional link.",{"title":607,"path":608,"stem":609,"framework":16,"category":184,"description":610},"PageColumns","/docs/components/page-columns","docs/2.components/page-columns","A responsive multi-column layout system for organizing content side-by-side.",{"title":612,"path":613,"stem":614,"framework":16,"category":184,"description":615},"PageCTA","/docs/components/page-cta","docs/2.components/page-cta","A call to action section to display in your pages.",{"title":617,"path":618,"stem":619,"framework":16,"category":184,"description":620},"PageFeature","/docs/components/page-feature","docs/2.components/page-feature","A component to showcase key features of your application.",{"title":622,"path":623,"stem":624,"framework":16,"category":184,"description":625},"PageGrid","/docs/components/page-grid","docs/2.components/page-grid","A responsive grid system for displaying content in a flexible layout.",{"title":627,"path":628,"stem":629,"framework":16,"category":184,"description":630},"PageHeader","/docs/components/page-header","docs/2.components/page-header","A responsive header for your pages.",{"title":632,"path":633,"stem":634,"framework":16,"category":184,"description":635},"PageHero","/docs/components/page-hero","docs/2.components/page-hero","A responsive hero for your pages.",{"title":637,"path":638,"stem":639,"framework":16,"category":184,"description":640},"PageLinks","/docs/components/page-links","docs/2.components/page-links","A list of links to be displayed in the page.",{"title":642,"path":643,"stem":644,"framework":16,"category":184,"description":645},"PageList","/docs/components/page-list","docs/2.components/page-list","A vertical list layout for displaying content in a stacked format.",{"title":647,"path":648,"stem":649,"framework":16,"category":184,"description":650},"PageLogos","/docs/components/page-logos","docs/2.components/page-logos","A list of logos or images to display on your pages.",{"title":652,"path":653,"stem":654,"framework":16,"category":184,"description":655},"PageSection","/docs/components/page-section","docs/2.components/page-section","A responsive section for your pages.",{"title":657,"path":658,"stem":659,"framework":16,"category":220,"description":660},"Pagination","/docs/components/pagination","docs/2.components/pagination","A list of buttons or links to navigate through pages.",{"title":662,"path":663,"stem":664,"framework":16,"category":282,"description":665},"PinInput","/docs/components/pin-input","docs/2.components/pin-input","An input element to enter a pin.",{"title":667,"path":668,"stem":669,"framework":16,"category":370,"description":670},"Popover","/docs/components/popover","docs/2.components/popover","A non-modal dialog that floats around a trigger element.",{"title":672,"path":673,"stem":674,"framework":16,"category":184,"description":675},"PricingPlan","/docs/components/pricing-plan","docs/2.components/pricing-plan","A customizable pricing plan to display in a pricing page.",{"title":677,"path":678,"stem":679,"framework":16,"category":184,"description":680},"PricingPlans","/docs/components/pricing-plans","docs/2.components/pricing-plans","Display a list of pricing plans in a responsive grid layout.",{"title":682,"path":683,"stem":684,"framework":16,"category":184,"description":685},"PricingTable","/docs/components/pricing-table","docs/2.components/pricing-table","A responsive pricing table component that displays tiered pricing plans with feature comparisons.",{"title":687,"path":688,"stem":689,"framework":16,"category":172,"description":690},"Progress","/docs/components/progress","docs/2.components/progress","An indicator showing the progress of a task.",{"title":692,"path":693,"stem":694,"framework":16,"category":282,"description":695},"RadioGroup","/docs/components/radio-group","docs/2.components/radio-group","A set of radio buttons to select a single option from a list.",{"title":697,"path":698,"stem":699,"framework":16,"category":166,"description":700,"badge":439},"ScrollArea","/docs/components/scroll-area","docs/2.components/scroll-area","A flexible scroll container with virtualization support.",{"title":702,"path":703,"stem":704,"framework":16,"category":282,"description":705},"Select","/docs/components/select","docs/2.components/select","A select element to choose from a list of options.",{"title":707,"path":708,"stem":709,"framework":16,"category":282,"description":710},"SelectMenu","/docs/components/select-menu","docs/2.components/select-menu","An advanced searchable select element.",{"title":712,"path":713,"stem":714,"framework":16,"category":172,"description":715},"Separator","/docs/components/separator","docs/2.components/separator","Separates content horizontally or vertically.",{"title":717,"path":718,"stem":719,"framework":16,"category":172,"description":720},"Skeleton","/docs/components/skeleton","docs/2.components/skeleton","A placeholder to show while content is loading.",{"title":722,"path":723,"stem":724,"framework":16,"category":370,"description":725},"Slideover","/docs/components/slideover","docs/2.components/slideover","A dialog that slides in from any side of the screen.",{"title":727,"path":728,"stem":729,"framework":16,"category":282,"description":730},"Slider","/docs/components/slider","docs/2.components/slider","An input to select a numeric value within a range.",{"title":732,"path":733,"stem":734,"framework":16,"category":220,"description":735},"Stepper","/docs/components/stepper","docs/2.components/stepper","A set of steps that are used to indicate progress through a multi-step process.",{"title":737,"path":738,"stem":739,"framework":16,"category":282,"description":740},"Switch","/docs/components/switch","docs/2.components/switch","A control that toggles between two states.",{"title":742,"path":743,"stem":744,"framework":16,"category":166,"description":745},"Table","/docs/components/table","docs/2.components/table","A responsive table element to display data in rows and columns.",{"title":747,"path":748,"stem":749,"framework":16,"category":220,"description":750},"Tabs","/docs/components/tabs","docs/2.components/tabs","A set of tab panels that are displayed one at a time.",{"title":752,"path":753,"stem":754,"framework":16,"category":282,"description":755},"Textarea","/docs/components/textarea","docs/2.components/textarea","A textarea element to input multi-line text.",{"title":757,"path":758,"stem":759,"framework":16,"category":166,"description":760},"Timeline","/docs/components/timeline","docs/2.components/timeline","A component that displays a sequence of events with dates, titles, icons or avatars.",{"title":762,"path":763,"stem":764,"framework":16,"category":370,"description":765},"Toast","/docs/components/toast","docs/2.components/toast","A succinct message to provide information or feedback to the user.",{"title":767,"path":768,"stem":769,"framework":16,"category":370,"description":770},"Tooltip","/docs/components/tooltip","docs/2.components/tooltip","A popup that reveals information when hovering over an element.",{"title":772,"path":773,"stem":774,"framework":16,"category":166,"description":775},"Tree","/docs/components/tree","docs/2.components/tree","A tree view component to display and interact with hierarchical data structures.",{"title":777,"path":778,"stem":779,"framework":16,"category":166,"description":780},"User","/docs/components/user","docs/2.components/user","Display user information with name, description and avatar.",{"title":782,"framework":16,"category":16,"description":16,"icon":783,"path":784,"stem":785,"children":786,"page":36},"Composables","i-lucide-square-function","/docs/composables","docs/3.composables",[787,792,797,802,807,812],{"title":788,"path":789,"stem":790,"framework":16,"category":16,"description":791},"defineLocale","/docs/composables/define-locale","docs/3.composables/define-locale","A utility to create a custom locale for your app.",{"title":793,"path":794,"stem":795,"framework":16,"category":16,"description":796},"defineShortcuts","/docs/composables/define-shortcuts","docs/3.composables/define-shortcuts","A composable to define keyboard shortcuts in your app.",{"title":798,"path":799,"stem":800,"framework":16,"category":16,"description":801},"extendLocale","/docs/composables/extend-locale","docs/3.composables/extend-locale","A utility to extend an existing locale with custom translations.",{"title":803,"path":804,"stem":805,"framework":16,"category":16,"description":806},"extractShortcuts","/docs/composables/extract-shortcuts","docs/3.composables/extract-shortcuts","A utility to extract keyboard shortcuts from menu items.",{"title":808,"path":809,"stem":810,"framework":16,"category":16,"description":811},"useOverlay","/docs/composables/use-overlay","docs/3.composables/use-overlay","A composable to programmatically control overlays.",{"title":813,"path":814,"stem":815,"framework":16,"category":16,"description":816},"useToast","/docs/composables/use-toast","docs/3.composables/use-toast","A composable to display toast notifications in your app.",{"title":818,"path":819,"stem":820,"children":821,"framework":28,"category":16,"description":16,"icon":917},"Typography","/docs/typography","docs/4.typography/1.index",[822,824,829,834,839,844,849,853,858,862,867,872,877,882,887,891,896,900,904,908,913],{"title":15,"path":819,"stem":820,"framework":28,"category":16,"description":823},"Beautiful typography components and utilities to style your content with Nuxt UI.",{"title":825,"path":826,"stem":827,"framework":28,"category":16,"description":828},"Headers and text","/docs/typography/headers-and-text","docs/4.typography/2.headers-and-text","Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.",{"title":830,"path":831,"stem":832,"framework":28,"category":16,"description":833},"Lists and tables","/docs/typography/lists-and-tables","docs/4.typography/3.lists-and-tables","Organize information with styled lists and responsive tables for clear, consistent readability.",{"title":835,"path":836,"stem":837,"framework":28,"category":16,"description":838},"Images and embeds","/docs/typography/images-and-embeds","docs/4.typography/4.images-and-embeds","Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.",{"title":840,"path":841,"stem":842,"framework":28,"category":16,"description":843},"Code","/docs/typography/code","docs/4.typography/5.code","Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.",{"title":163,"path":845,"stem":846,"framework":28,"category":847,"description":848},"/docs/typography/accordion","docs/4.typography/accordion","components","Create expandable content sections for better information organization.",{"title":197,"path":850,"stem":851,"framework":28,"category":847,"description":852},"/docs/typography/badge","docs/4.typography/badge","Display version numbers, status labels, and tags within your content.",{"title":854,"path":855,"stem":856,"framework":28,"category":847,"description":857},"Callout","/docs/typography/callout","docs/4.typography/callout","Highlight important information with eye-catching colored boxes and icons.",{"title":233,"path":859,"stem":860,"framework":28,"category":847,"description":861},"/docs/typography/card","docs/4.typography/card","Create highlighted content blocks with optional links and navigation.",{"title":863,"path":864,"stem":865,"framework":28,"category":847,"description":866},"CardGroup","/docs/typography/card-group","docs/4.typography/card-group","Organize multiple cards in responsive grid layouts for better content presentation.",{"title":868,"path":869,"stem":870,"framework":28,"category":847,"description":871},"CodeCollapse","/docs/typography/code-collapse","docs/4.typography/code-collapse","Make long code blocks collapsible to save space and improve readability.",{"title":873,"path":874,"stem":875,"framework":28,"category":847,"description":876},"CodeGroup","/docs/typography/code-group","docs/4.typography/code-group","Group multiple code examples in tabbed interfaces for easy comparison.",{"title":878,"path":879,"stem":880,"framework":28,"category":847,"description":881},"CodePreview","/docs/typography/code-preview","docs/4.typography/code-preview","Display code examples with a preview and their source for clearer documentation.",{"title":883,"path":884,"stem":885,"framework":28,"category":847,"description":886},"CodeTree","/docs/typography/code-tree","docs/4.typography/code-tree","Visualize file and folder structures with syntax-highlighted code.",{"title":295,"path":888,"stem":889,"framework":28,"category":847,"description":890},"/docs/typography/collapsible","docs/4.typography/collapsible","Toggle content visibility with smooth expand and collapse animations.",{"title":892,"path":893,"stem":894,"framework":28,"category":847,"description":895},"Field","/docs/typography/field","docs/4.typography/field","Document API parameters, props, and configuration options clearly.",{"title":476,"path":897,"stem":898,"framework":28,"category":847,"description":899},"/docs/typography/field-group","docs/4.typography/field-group","Group related fields together for comprehensive API documentation.",{"title":511,"path":901,"stem":902,"framework":28,"category":847,"description":903},"/docs/typography/icon","docs/4.typography/icon","Display icons from popular icon libraries to enhance your content.",{"title":546,"path":905,"stem":906,"framework":28,"category":847,"description":907},"/docs/typography/kbd","docs/4.typography/kbd","Display keyboard shortcuts and key combinations with proper styling.",{"title":909,"path":910,"stem":911,"framework":28,"category":847,"description":912},"Steps","/docs/typography/steps","docs/4.typography/steps","Transform headings into numbered step-by-step guides and tutorials.",{"title":747,"path":914,"stem":915,"framework":28,"category":847,"description":916},"/docs/typography/tabs","docs/4.typography/tabs","Organize related content in interactive tabbed interfaces.","i-lucide-square-pilcrow",{"id":919,"title":920,"body":921,"category":16,"description":3701,"extension":3702,"framework":16,"links":3703,"meta":3706,"navigation":36,"path":3707,"seo":3708,"stem":3709,"__hash__":3710},"docs/docs/1.getting-started/3.migration/2.v3.md","Migration to v3",{"type":922,"value":923,"toc":3687},"minimark",[924,928,951,954,959,1293,1297,1300,1304,1322,1446,1449,1459,1492,1548,1568,1624,1632,1651,1657,1670,1739,1743,1757,1768,1889,1900,1927,1937,1941,1944,2069,2072,2467,2471,2474,2489,2534,2553,2565,2618,2636,2653,2708,2720,2747,2766,2778,2880,2892,2911,2973,2981,2998,3025,3040,3067,3088,3112,3116,3131,3167,3181,3184,3214,3268,3271,3371,3381,3553,3557,3569,3675,3678,3683],[925,926,927],"p",{},"Nuxt UI v3 is a new major version rebuilt from the ground up, introducing a modern architecture with significant performance improvements and an enhanced developer experience. This major release includes several breaking changes alongside powerful new features and capabilities:",[929,930,931,939,945],"ul",{},[932,933,934,938],"li",{},[935,936,937],"strong",{},"Tailwind CSS v4",": Migration from JavaScript to CSS-based configuration",[932,940,941,944],{},[935,942,943],{},"Reka UI",": Replacing Headless UI as the underlying component library",[932,946,947,950],{},[935,948,949],{},"Tailwind Variants",": New styling API for component variants",[925,952,953],{},"This guide provides step by step instructions to migrate your application from v2 to v3.",[955,956,958],"h2",{"id":957},"migrate-your-project","Migrate your project",[960,961,962,967,970,982,997,1092,1097,1113,1117,1122,1184,1190,1223,1233],"steps",{},[963,964,966],"h3",{"id":965},"update-tailwind-css","Update Tailwind CSS",[925,968,969],{},"Tailwind CSS v4 introduces significant changes to its configuration approach. The official Tailwind upgrade tool will help automate most of the migration process.",[971,972,975],"note",{"to":973,"target":974},"https://tailwindcss.com/docs/upgrade-guide#changes-from-v3","_blank",[925,976,977,978,981],{},"For a detailed walkthrough of all changes, refer to the official ",[935,979,980],{},"Tailwind CSS v4 upgrade guide",".",[983,984,985],"ol",{},[932,986,987,988,992,993,996],{},"Create a ",[989,990,991],"code",{},"main.css"," file and import it in your ",[989,994,995],{},"nuxt.config.ts"," file:",[998,999,1000,1033],"code-group",{},[1001,1002,1008],"pre",{"className":1003,"code":1004,"filename":1005,"language":1006,"meta":1007,"style":1007},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@import \"tailwindcss\";\n","app/assets/css/main.css","css","",[989,1009,1010],{"__ignoreMap":1007},[1011,1012,1015,1019,1023,1027,1030],"span",{"class":1013,"line":1014},"line",1,[1011,1016,1018],{"class":1017},"s7zQu","@import",[1011,1020,1022],{"class":1021},"sMK4o"," \"",[1011,1024,1026],{"class":1025},"sfazB","tailwindcss",[1011,1028,1029],{"class":1021},"\"",[1011,1031,1032],{"class":1021},";\n",[1001,1034,1038],{"className":1035,"code":1036,"filename":995,"language":1037,"meta":1007,"style":1007},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  css: ['~/assets/css/main.css']\n})\n","ts",[989,1039,1040,1059,1083],{"__ignoreMap":1007},[1011,1041,1042,1045,1048,1052,1056],{"class":1013,"line":1014},[1011,1043,1044],{"class":1017},"export",[1011,1046,1047],{"class":1017}," default",[1011,1049,1051],{"class":1050},"s2Zo4"," defineNuxtConfig",[1011,1053,1055],{"class":1054},"sTEyZ","(",[1011,1057,1058],{"class":1021},"{\n",[1011,1060,1062,1066,1069,1072,1075,1078,1080],{"class":1013,"line":1061},2,[1011,1063,1065],{"class":1064},"swJcz","  css",[1011,1067,1068],{"class":1021},":",[1011,1070,1071],{"class":1054}," [",[1011,1073,1074],{"class":1021},"'",[1011,1076,1077],{"class":1025},"~/assets/css/main.css",[1011,1079,1074],{"class":1021},[1011,1081,1082],{"class":1054},"]\n",[1011,1084,1086,1089],{"class":1013,"line":1085},3,[1011,1087,1088],{"class":1021},"}",[1011,1090,1091],{"class":1054},")\n",[983,1093,1094],{"start":1061},[932,1095,1096],{},"Run the Tailwind CSS upgrade tool:",[1001,1098,1102],{"className":1099,"code":1100,"language":1101,"meta":1007,"style":1007},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx @tailwindcss/upgrade\n","bash",[989,1103,1104],{"__ignoreMap":1007},[1011,1105,1106,1110],{"class":1013,"line":1014},[1011,1107,1109],{"class":1108},"sBMFI","npx",[1011,1111,1112],{"class":1025}," @tailwindcss/upgrade\n",[963,1114,1116],{"id":1115},"update-nuxt-ui","Update Nuxt UI",[983,1118,1119],{"start":1085},[932,1120,1121],{},"Install the latest version of the package:",[998,1123,1125,1141,1155,1170],{"sync":1124},"pm",[1001,1126,1129],{"className":1099,"code":1127,"filename":1128,"language":1101,"meta":1007,"style":1007},"pnpm add @nuxt/ui\n","pnpm",[989,1130,1131],{"__ignoreMap":1007},[1011,1132,1133,1135,1138],{"class":1013,"line":1014},[1011,1134,1128],{"class":1108},[1011,1136,1137],{"class":1025}," add",[1011,1139,1140],{"class":1025}," @nuxt/ui\n",[1001,1142,1145],{"className":1099,"code":1143,"filename":1144,"language":1101,"meta":1007,"style":1007},"yarn add @nuxt/ui\n","yarn",[989,1146,1147],{"__ignoreMap":1007},[1011,1148,1149,1151,1153],{"class":1013,"line":1014},[1011,1150,1144],{"class":1108},[1011,1152,1137],{"class":1025},[1011,1154,1140],{"class":1025},[1001,1156,1159],{"className":1099,"code":1157,"filename":1158,"language":1101,"meta":1007,"style":1007},"npm install @nuxt/ui\n","npm",[989,1160,1161],{"__ignoreMap":1007},[1011,1162,1163,1165,1168],{"class":1013,"line":1014},[1011,1164,1158],{"class":1108},[1011,1166,1167],{"class":1025}," install",[1011,1169,1140],{"class":1025},[1001,1171,1174],{"className":1099,"code":1172,"filename":1173,"language":1101,"meta":1007,"style":1007},"bun add @nuxt/ui\n","bun",[989,1175,1176],{"__ignoreMap":1007},[1011,1177,1178,1180,1182],{"class":1013,"line":1014},[1011,1179,1173],{"class":1108},[1011,1181,1137],{"class":1025},[1011,1183,1140],{"class":1025},[983,1185,1187],{"start":1186},4,[932,1188,1189],{},"Import it in your CSS:",[1001,1191,1194],{"className":1003,"code":1192,"filename":1005,"highlights":1193,"language":1006,"meta":1007,"style":1007},"@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n",[1061],[989,1195,1196,1208],{"__ignoreMap":1007},[1011,1197,1198,1200,1202,1204,1206],{"class":1013,"line":1014},[1011,1199,1018],{"class":1017},[1011,1201,1022],{"class":1021},[1011,1203,1026],{"class":1025},[1011,1205,1029],{"class":1021},[1011,1207,1032],{"class":1021},[1011,1209,1212,1214,1216,1219,1221],{"class":1210,"line":1061},[1013,1211],"highlight",[1011,1213,1018],{"class":1017},[1011,1215,1022],{"class":1021},[1011,1217,1218],{"class":1025},"@nuxt/ui",[1011,1220,1029],{"class":1021},[1011,1222,1032],{"class":1021},[983,1224,1226],{"start":1225},5,[932,1227,1228,1229,1232],{},"Wrap your app with the ",[1230,1231,175],"a",{"href":176}," component:",[1001,1234,1239],{"className":1235,"code":1236,"filename":1237,"highlights":1238,"language":34,"meta":1007,"style":1007},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUApp>\n    \u003CNuxtPage />\n  \u003C/UApp>\n\u003C/template>\n","app.vue",[1061,1186],[989,1240,1241,1252,1263,1274,1284],{"__ignoreMap":1007},[1011,1242,1243,1246,1249],{"class":1013,"line":1014},[1011,1244,1245],{"class":1021},"\u003C",[1011,1247,1248],{"class":1064},"template",[1011,1250,1251],{"class":1021},">\n",[1011,1253,1255,1258,1261],{"class":1254,"line":1061},[1013,1211],[1011,1256,1257],{"class":1021},"  \u003C",[1011,1259,1260],{"class":1064},"UApp",[1011,1262,1251],{"class":1021},[1011,1264,1265,1268,1271],{"class":1013,"line":1085},[1011,1266,1267],{"class":1021},"    \u003C",[1011,1269,1270],{"class":1064},"NuxtPage",[1011,1272,1273],{"class":1021}," />\n",[1011,1275,1277,1280,1282],{"class":1276,"line":1186},[1013,1211],[1011,1278,1279],{"class":1021},"  \u003C/",[1011,1281,1260],{"class":1064},[1011,1283,1251],{"class":1021},[1011,1285,1286,1289,1291],{"class":1013,"line":1225},[1011,1287,1288],{"class":1021},"\u003C/",[1011,1290,1248],{"class":1064},[1011,1292,1251],{"class":1021},[955,1294,1296],{"id":1295},"changes-from-v2","Changes from v2",[925,1298,1299],{},"Now that you have updated your project, you can start migrating your code. Here's a comprehensive list of all the breaking changes in Nuxt UI v3.",[963,1301,1303],{"id":1302},"updated-design-system","Updated design system",[925,1305,1306,1307,1310,1311,1310,1314,1317,1318,1321],{},"In Nuxt UI v2, we had a mix between a design system with ",[989,1308,1309],{},"primary",", ",[989,1312,1313],{},"gray",[989,1315,1316],{},"error"," aliases and all the colors from Tailwind CSS. We've replaced it with a proper ",[1230,1319,1320],{"href":60},"design system"," with 7 color aliases:",[1323,1324,1325,1341],"table",{},[1326,1327,1328],"thead",{},[1329,1330,1331,1335,1338],"tr",{},[1332,1333,1334],"th",{},"Color",[1332,1336,1337],{},"Default",[1332,1339,1340],{},"Description",[1342,1343,1344,1359,1374,1388,1402,1417,1431],"tbody",{},[1329,1345,1346,1351,1356],{},[1347,1348,1349],"td",{},[989,1350,1309],{"color":1309},[1347,1352,1353],{},[989,1354,1355],{},"green",[1347,1357,1358],{},"Main brand color, used as the default color for components.",[1329,1360,1361,1366,1371],{},[1347,1362,1363],{},[989,1364,1365],{"color":1365},"secondary",[1347,1367,1368],{},[989,1369,1370],{},"blue",[1347,1372,1373],{},"Secondary color to complement the primary color.",[1329,1375,1376,1381,1385],{},[1347,1377,1378],{},[989,1379,1380],{"color":1380},"success",[1347,1382,1383],{},[989,1384,1355],{},[1347,1386,1387],{},"Used for success states.",[1329,1389,1390,1395,1399],{},[1347,1391,1392],{},[989,1393,1394],{"color":1394},"info",[1347,1396,1397],{},[989,1398,1370],{},[1347,1400,1401],{},"Used for informational states.",[1329,1403,1404,1409,1414],{},[1347,1405,1406],{},[989,1407,1408],{"color":1408},"warning",[1347,1410,1411],{},[989,1412,1413],{},"yellow",[1347,1415,1416],{},"Used for warning states.",[1329,1418,1419,1423,1428],{},[1347,1420,1421],{},[989,1422,1316],{"color":1316},[1347,1424,1425],{},[989,1426,1427],{},"red",[1347,1429,1430],{},"Used for form error validation states.",[1329,1432,1433,1438,1443],{},[1347,1434,1435],{},[989,1436,1437],{},"neutral",[1347,1439,1440],{},[989,1441,1442],{},"slate",[1347,1444,1445],{},"Neutral color for backgrounds, text, etc.",[925,1447,1448],{},"This change introduces several breaking changes that you need to be aware of:",[929,1450,1451],{},[932,1452,1453,1454,1456,1457],{},"The ",[989,1455,1313],{}," color has been renamed to ",[989,1458,1437],{},[1001,1460,1464],{"className":1461,"code":1462,"language":1463,"meta":1007,"style":1007},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n- \u003Cp class=\"text-gray-500 dark:text-gray-400\" />\n+ \u003Cp class=\"text-neutral-500 dark:text-neutral-400\" />\n\u003C/template>\n","diff",[989,1465,1466,1471,1479,1487],{"__ignoreMap":1007},[1011,1467,1468],{"class":1013,"line":1014},[1011,1469,1470],{"class":1054},"\u003Ctemplate>\n",[1011,1472,1473,1476],{"class":1013,"line":1061},[1011,1474,1475],{"class":1021},"-",[1011,1477,1478],{"class":1064}," \u003Cp class=\"text-gray-500 dark:text-gray-400\" />\n",[1011,1480,1481,1484],{"class":1013,"line":1085},[1011,1482,1483],{"class":1021},"+",[1011,1485,1486],{"class":1025}," \u003Cp class=\"text-neutral-500 dark:text-neutral-400\" />\n",[1011,1488,1489],{"class":1013,"line":1186},[1011,1490,1491],{"class":1054},"\u003C/template>\n",[971,1493,1494,1501],{},[925,1495,1496,1497,1500],{},"You can also use the new ",[1230,1498,1499],{"href":66},"design tokens"," to handle light and dark mode:",[1001,1502,1504],{"className":1461,"code":1503,"language":1463,"meta":1007,"style":1007},"\u003Ctemplate>\n- \u003Cp class=\"text-gray-500 dark:text-gray-400\" />\n+ \u003Cp class=\"text-muted\" />\n\n- \u003Cp class=\"text-gray-900 dark:text-white\" />\n+ \u003Cp class=\"text-highlighted\" />\n\u003C/template>\n",[989,1505,1506,1510,1516,1523,1528,1535,1543],{"__ignoreMap":1007},[1011,1507,1508],{"class":1013,"line":1014},[1011,1509,1470],{"class":1054},[1011,1511,1512,1514],{"class":1013,"line":1061},[1011,1513,1475],{"class":1021},[1011,1515,1478],{"class":1064},[1011,1517,1518,1520],{"class":1013,"line":1085},[1011,1519,1483],{"class":1021},[1011,1521,1522],{"class":1025}," \u003Cp class=\"text-muted\" />\n",[1011,1524,1525],{"class":1013,"line":1186},[1011,1526,1527],{"emptyLinePlaceholder":21},"\n",[1011,1529,1530,1532],{"class":1013,"line":1225},[1011,1531,1475],{"class":1021},[1011,1533,1534],{"class":1064}," \u003Cp class=\"text-gray-900 dark:text-white\" />\n",[1011,1536,1538,1540],{"class":1013,"line":1537},6,[1011,1539,1483],{"class":1021},[1011,1541,1542],{"class":1025}," \u003Cp class=\"text-highlighted\" />\n",[1011,1544,1546],{"class":1013,"line":1545},7,[1011,1547,1491],{"class":1054},[929,1549,1550],{},[932,1551,1453,1552,1310,1554,1557,1558,1561,1562,1565,1566,1068],{},[989,1553,1313],{},[989,1555,1556],{},"black"," and ",[989,1559,1560],{},"white"," in the ",[989,1563,1564],{},"color"," props have been removed in favor of ",[989,1567,1437],{},[1001,1569,1571],{"className":1461,"code":1570,"language":1463,"meta":1007,"style":1007},"- \u003CUButton color=\"black\" />\n+ \u003CUButton color=\"neutral\" />\n\n- \u003CUButton color=\"gray\" />\n+ \u003CUButton color=\"neutral\" variant=\"subtle\" />\n\n- \u003CUButton color=\"white\" />\n+ \u003CUButton color=\"neutral\" variant=\"outline\" />\n",[989,1572,1573,1580,1587,1591,1598,1605,1609,1616],{"__ignoreMap":1007},[1011,1574,1575,1577],{"class":1013,"line":1014},[1011,1576,1475],{"class":1021},[1011,1578,1579],{"class":1064}," \u003CUButton color=\"black\" />\n",[1011,1581,1582,1584],{"class":1013,"line":1061},[1011,1583,1483],{"class":1021},[1011,1585,1586],{"class":1025}," \u003CUButton color=\"neutral\" />\n",[1011,1588,1589],{"class":1013,"line":1085},[1011,1590,1527],{"emptyLinePlaceholder":21},[1011,1592,1593,1595],{"class":1013,"line":1186},[1011,1594,1475],{"class":1021},[1011,1596,1597],{"class":1064}," \u003CUButton color=\"gray\" />\n",[1011,1599,1600,1602],{"class":1013,"line":1225},[1011,1601,1483],{"class":1021},[1011,1603,1604],{"class":1025}," \u003CUButton color=\"neutral\" variant=\"subtle\" />\n",[1011,1606,1607],{"class":1013,"line":1537},[1011,1608,1527],{"emptyLinePlaceholder":21},[1011,1610,1611,1613],{"class":1013,"line":1545},[1011,1612,1475],{"class":1021},[1011,1614,1615],{"class":1064}," \u003CUButton color=\"white\" />\n",[1011,1617,1619,1621],{"class":1013,"line":1618},8,[1011,1620,1483],{"class":1021},[1011,1622,1623],{"class":1025}," \u003CUButton color=\"neutral\" variant=\"outline\" />\n",[929,1625,1626],{},[932,1627,1628,1629,1631],{},"You can no longer use Tailwind CSS colors in the ",[989,1630,1564],{}," props, use the new aliases instead:",[1001,1633,1635],{"className":1461,"code":1634,"language":1463,"meta":1007,"style":1007},"- \u003CUButton color=\"red\" />\n+ \u003CUButton color=\"error\" />\n",[989,1636,1637,1644],{"__ignoreMap":1007},[1011,1638,1639,1641],{"class":1013,"line":1014},[1011,1640,1475],{"class":1021},[1011,1642,1643],{"class":1064}," \u003CUButton color=\"red\" />\n",[1011,1645,1646,1648],{"class":1013,"line":1061},[1011,1647,1483],{"class":1021},[1011,1649,1650],{"class":1025}," \u003CUButton color=\"error\" />\n",[971,1652,1654],{"to":1653},"/docs/getting-started/theme/design-system#colors",[925,1655,1656],{},"Learn how to extend the design system to add new color aliases.",[929,1658,1659],{},[932,1660,1661,1662,1665,1666,1669],{},"The color configuration in ",[989,1663,1664],{},"app.config.ts"," has been moved into a ",[989,1667,1668],{},"colors"," object:",[1001,1671,1673],{"className":1461,"code":1672,"language":1463,"meta":1007,"style":1007},"export default defineAppConfig({\n  ui: {\n-   primary: 'green',\n-   gray: 'cool'\n+   colors: {\n+     primary: 'green',\n+     neutral: 'slate'\n+   }\n  }\n})\n",[989,1674,1675,1680,1685,1692,1699,1706,1713,1720,1727,1733],{"__ignoreMap":1007},[1011,1676,1677],{"class":1013,"line":1014},[1011,1678,1679],{"class":1054},"export default defineAppConfig({\n",[1011,1681,1682],{"class":1013,"line":1061},[1011,1683,1684],{"class":1054},"  ui: {\n",[1011,1686,1687,1689],{"class":1013,"line":1085},[1011,1688,1475],{"class":1021},[1011,1690,1691],{"class":1064},"   primary: 'green',\n",[1011,1693,1694,1696],{"class":1013,"line":1186},[1011,1695,1475],{"class":1021},[1011,1697,1698],{"class":1064},"   gray: 'cool'\n",[1011,1700,1701,1703],{"class":1013,"line":1225},[1011,1702,1483],{"class":1021},[1011,1704,1705],{"class":1025},"   colors: {\n",[1011,1707,1708,1710],{"class":1013,"line":1537},[1011,1709,1483],{"class":1021},[1011,1711,1712],{"class":1025},"     primary: 'green',\n",[1011,1714,1715,1717],{"class":1013,"line":1545},[1011,1716,1483],{"class":1021},[1011,1718,1719],{"class":1025},"     neutral: 'slate'\n",[1011,1721,1722,1724],{"class":1013,"line":1618},[1011,1723,1483],{"class":1021},[1011,1725,1726],{"class":1025},"   }\n",[1011,1728,1730],{"class":1013,"line":1729},9,[1011,1731,1732],{"class":1054},"  }\n",[1011,1734,1736],{"class":1013,"line":1735},10,[1011,1737,1738],{"class":1054},"})\n",[963,1740,1742],{"id":1741},"updated-theming-system","Updated theming system",[925,1744,1745,1746,1749,1750,1752,1753,1756],{},"Nuxt UI components are now styled using the ",[1230,1747,1748],{"href":72},"Tailwind Variants API",", which makes all the overrides you made using the ",[989,1751,1664],{}," and the ",[989,1754,1755],{},"ui"," prop obsolete.",[929,1758,1759],{},[932,1760,1761,1762,1767],{},"Update your ",[1230,1763,1765],{"href":1764},"/docs/getting-started/theme/components#global-config",[989,1766,1664],{}," to override components with their new theme:",[1001,1769,1771],{"className":1461,"code":1770,"language":1463,"meta":1007,"style":1007},"export default defineAppConfig({\n   ui: {\n     button: {\n-       font: 'font-bold',\n-       default: {\n-         size: 'md',\n-         color: 'primary'\n-       }\n+       slots: {\n+         base: 'font-medium'\n+       },\n+       defaultVariants: {\n+         size: 'md',\n+         color: 'primary'\n+       }\n     }\n   }\n})\n",[989,1772,1773,1777,1782,1787,1794,1801,1808,1815,1822,1829,1836,1844,1852,1859,1866,1873,1879,1884],{"__ignoreMap":1007},[1011,1774,1775],{"class":1013,"line":1014},[1011,1776,1679],{"class":1054},[1011,1778,1779],{"class":1013,"line":1061},[1011,1780,1781],{"class":1054},"   ui: {\n",[1011,1783,1784],{"class":1013,"line":1085},[1011,1785,1786],{"class":1054},"     button: {\n",[1011,1788,1789,1791],{"class":1013,"line":1186},[1011,1790,1475],{"class":1021},[1011,1792,1793],{"class":1064},"       font: 'font-bold',\n",[1011,1795,1796,1798],{"class":1013,"line":1225},[1011,1797,1475],{"class":1021},[1011,1799,1800],{"class":1064},"       default: {\n",[1011,1802,1803,1805],{"class":1013,"line":1537},[1011,1804,1475],{"class":1021},[1011,1806,1807],{"class":1064},"         size: 'md',\n",[1011,1809,1810,1812],{"class":1013,"line":1545},[1011,1811,1475],{"class":1021},[1011,1813,1814],{"class":1064},"         color: 'primary'\n",[1011,1816,1817,1819],{"class":1013,"line":1618},[1011,1818,1475],{"class":1021},[1011,1820,1821],{"class":1064},"       }\n",[1011,1823,1824,1826],{"class":1013,"line":1729},[1011,1825,1483],{"class":1021},[1011,1827,1828],{"class":1025},"       slots: {\n",[1011,1830,1831,1833],{"class":1013,"line":1735},[1011,1832,1483],{"class":1021},[1011,1834,1835],{"class":1025},"         base: 'font-medium'\n",[1011,1837,1839,1841],{"class":1013,"line":1838},11,[1011,1840,1483],{"class":1021},[1011,1842,1843],{"class":1025},"       },\n",[1011,1845,1847,1849],{"class":1013,"line":1846},12,[1011,1848,1483],{"class":1021},[1011,1850,1851],{"class":1025},"       defaultVariants: {\n",[1011,1853,1855,1857],{"class":1013,"line":1854},13,[1011,1856,1483],{"class":1021},[1011,1858,1807],{"class":1025},[1011,1860,1862,1864],{"class":1013,"line":1861},14,[1011,1863,1483],{"class":1021},[1011,1865,1814],{"class":1025},[1011,1867,1869,1871],{"class":1013,"line":1868},15,[1011,1870,1483],{"class":1021},[1011,1872,1821],{"class":1025},[1011,1874,1876],{"class":1013,"line":1875},16,[1011,1877,1878],{"class":1054},"     }\n",[1011,1880,1882],{"class":1013,"line":1881},17,[1011,1883,1726],{"class":1054},[1011,1885,1887],{"class":1013,"line":1886},18,[1011,1888,1738],{"class":1054},[929,1890,1891],{},[932,1892,1761,1893,1899],{},[1230,1894,1896,1898],{"href":1895},"/docs/getting-started/theme/components#ui-prop",[989,1897,1755],{}," props"," to override each component's slots using their new theme:",[1001,1901,1903],{"className":1461,"code":1902,"language":1463,"meta":1007,"style":1007},"\u003Ctemplate>\n- \u003CUButton :ui=\"{ font: 'font-bold' }\" />\n+ \u003CUButton :ui=\"{ base: 'font-bold' }\" />\n\u003C/template>\n",[989,1904,1905,1909,1916,1923],{"__ignoreMap":1007},[1011,1906,1907],{"class":1013,"line":1014},[1011,1908,1470],{"class":1054},[1011,1910,1911,1913],{"class":1013,"line":1061},[1011,1912,1475],{"class":1021},[1011,1914,1915],{"class":1064}," \u003CUButton :ui=\"{ font: 'font-bold' }\" />\n",[1011,1917,1918,1920],{"class":1013,"line":1085},[1011,1919,1483],{"class":1021},[1011,1921,1922],{"class":1025}," \u003CUButton :ui=\"{ base: 'font-bold' }\" />\n",[1011,1924,1925],{"class":1013,"line":1186},[1011,1926,1491],{"class":1054},[1928,1929,1931],"tip",{"to":1930},"/docs/components/button#theme",[925,1932,1933,1934,1936],{},"We can't detail all the changes here but you can check each component's theme in the ",[935,1935,54],{}," section.",[963,1938,1940],{"id":1939},"renamed-components","Renamed components",[925,1942,1943],{},"We've renamed some Nuxt UI components to align with the Reka UI naming convention:",[1323,1945,1946,1956],{},[1326,1947,1948],{},[1329,1949,1950,1953],{},[1332,1951,1952],{},"v2",[1332,1954,1955],{},"v3",[1342,1957,1958,1971,1984,1997,2010,2023,2036,2053],{},[1329,1959,1960,1965],{},[1347,1961,1962],{},[989,1963,1964],{},"Divider",[1347,1966,1967],{},[1230,1968,1969],{"href":713},[989,1970,712],{},[1329,1972,1973,1978],{},[1347,1974,1975],{},[989,1976,1977],{},"Dropdown",[1347,1979,1980],{},[1230,1981,1982],{"href":430},[989,1983,429],{},[1329,1985,1986,1991],{},[1347,1987,1988],{},[989,1989,1990],{},"FormGroup",[1347,1992,1993],{},[1230,1994,1995],{"href":502},[989,1996,501],{},[1329,1998,1999,2004],{},[1347,2000,2001],{},[989,2002,2003],{},"Range",[1347,2005,2006],{},[1230,2007,2008],{"href":728},[989,2009,727],{},[1329,2011,2012,2017],{},[1347,2013,2014],{},[989,2015,2016],{},"Toggle",[1347,2018,2019],{},[1230,2020,2021],{"href":738},[989,2022,737],{},[1329,2024,2025,2030],{},[1347,2026,2027],{},[989,2028,2029],{},"Notification",[1347,2031,2032],{},[1230,2033,2034],{"href":763},[989,2035,762],{},[1329,2037,2038,2043],{},[1347,2039,2040],{},[989,2041,2042],{},"VerticalNavigation",[1347,2044,2045,2049,2050],{},[1230,2046,2047],{"href":578},[989,2048,577],{}," with ",[989,2051,2052],{},"orientation=\"vertical\"",[1329,2054,2055,2060],{},[1347,2056,2057],{},[989,2058,2059],{},"HorizontalNavigation",[1347,2061,2062,2049,2066],{},[1230,2063,2064],{"href":578},[989,2065,577],{},[989,2067,2068],{},"orientation=\"horizontal\"",[925,2070,2071],{},"Here are the Nuxt UI Pro components that have been renamed or removed:",[1323,2073,2074,2083],{},[1326,2075,2076],{},[1329,2077,2078,2081],{},[1332,2079,2080],{},"v1",[1332,2082,1955],{},[1342,2084,2085,2098,2111,2126,2139,2152,2165,2175,2188,2201,2214,2227,2240,2253,2266,2279,2292,2305,2318,2331,2344,2357,2371,2384,2397,2410,2423,2436,2449],{},[1329,2086,2087,2092],{},[1347,2088,2089],{},[989,2090,2091],{},"BlogList",[1347,2093,2094],{},[1230,2095,2096],{"href":213},[989,2097,212],{},[1329,2099,2100,2105],{},[1347,2101,2102],{},[989,2103,2104],{},"ColorModeToggle",[1347,2106,2107],{},[1230,2108,2109],{"href":322},[989,2110,321],{},[1329,2112,2113,2118],{},[1347,2114,2115],{},[989,2116,2117],{},"DashboardCard",[1347,2119,2120,2121,2125],{},"Removed (use ",[1230,2122,2123],{"href":603},[989,2124,602],{}," instead)",[1329,2127,2128,2133],{},[1347,2129,2130],{},[989,2131,2132],{},"DashboardLayout",[1347,2134,2135],{},[1230,2136,2137],{"href":374},[989,2138,373],{},[1329,2140,2141,2146],{},[1347,2142,2143],{},[989,2144,2145],{},"DashboardModal",[1347,2147,2120,2148,2125],{},[1230,2149,2150],{"href":573},[989,2151,572],{},[1329,2153,2154,2159],{},[1347,2155,2156],{},[989,2157,2158],{},"DashboardNavbarToggle",[1347,2160,2161],{},[1230,2162,2163],{"href":415},[989,2164,414],{},[1329,2166,2167,2172],{},[1347,2168,2169],{},[989,2170,2171],{},"DashboardPage",[1347,2173,2174],{},"Removed",[1329,2176,2177,2182],{},[1347,2178,2179],{},[989,2180,2181],{},"DashboardPanelContent",[1347,2183,2120,2184,2187],{},[989,2185,2186],{},"#body"," slot instead)",[1329,2189,2190,2195],{},[1347,2191,2192],{},[989,2193,2194],{},"DashboardPanelHandle",[1347,2196,2197],{},[1230,2198,2199],{"href":390},[989,2200,389],{},[1329,2202,2203,2208],{},[1347,2204,2205],{},[989,2206,2207],{},"DashboardSection",[1347,2209,2120,2210,2125],{},[1230,2211,2212],{"href":603},[989,2213,602],{},[1329,2215,2216,2221],{},[1347,2217,2218],{},[989,2219,2220],{},"DashboardSidebarLinks",[1347,2222,2120,2223,2125],{},[1230,2224,2225],{"href":578},[989,2226,577],{},[1329,2228,2229,2234],{},[1347,2230,2231],{},[989,2232,2233],{},"DashboardSlideover",[1347,2235,2120,2236,2125],{},[1230,2237,2238],{"href":723},[989,2239,722],{},[1329,2241,2242,2247],{},[1347,2243,2244],{},[989,2245,2246],{},"FooterLinks",[1347,2248,2120,2249,2125],{},[1230,2250,2251],{"href":578},[989,2252,577],{},[1329,2254,2255,2260],{},[1347,2256,2257],{},[989,2258,2259],{},"HeaderLinks",[1347,2261,2120,2262,2125],{},[1230,2263,2264],{"href":578},[989,2265,577],{},[1329,2267,2268,2273],{},[1347,2269,2270],{},[989,2271,2272],{},"LandingCard",[1347,2274,2120,2275,2125],{},[1230,2276,2277],{"href":603},[989,2278,602],{},[1329,2280,2281,2286],{},[1347,2282,2283],{},[989,2284,2285],{},"LandingCTA",[1347,2287,2288],{},[1230,2289,2290],{"href":613},[989,2291,612],{},[1329,2293,2294,2299],{},[1347,2295,2296],{},[989,2297,2298],{},"LandingFAQ",[1347,2300,2120,2301,2125],{},[1230,2302,2303],{"href":164},[989,2304,163],{},[1329,2306,2307,2312],{},[1347,2308,2309],{},[989,2310,2311],{},"LandingGrid",[1347,2313,2120,2314,2125],{},[1230,2315,2316],{"href":623},[989,2317,622],{},[1329,2319,2320,2325],{},[1347,2321,2322],{},[989,2323,2324],{},"LandingHero",[1347,2326,2120,2327,2125],{},[1230,2328,2329],{"href":633},[989,2330,632],{},[1329,2332,2333,2338],{},[1347,2334,2335],{},[989,2336,2337],{},"LandingLogos",[1347,2339,2340],{},[1230,2341,2342],{"href":648},[989,2343,647],{},[1329,2345,2346,2351],{},[1347,2347,2348],{},[989,2349,2350],{},"LandingSection",[1347,2352,2353],{},[1230,2354,2355],{"href":653},[989,2356,652],{},[1329,2358,2359,2364],{},[1347,2360,2361],{},[989,2362,2363],{},"LandingTestimonial",[1347,2365,2120,2366,2125],{},[1230,2367,2369],{"href":2368},"/docs/components/page-card#as-a-testimonial",[989,2370,602],{},[1329,2372,2373,2378],{},[1347,2374,2375],{},[989,2376,2377],{},"NavigationAccordion",[1347,2379,2380],{},[1230,2381,2382],{"href":342},[989,2383,341],{},[1329,2385,2386,2391],{},[1347,2387,2388],{},[989,2389,2390],{},"NavigationLinks",[1347,2392,2393],{},[1230,2394,2395],{"href":342},[989,2396,341],{},[1329,2398,2399,2404],{},[1347,2400,2401],{},[989,2402,2403],{},"NavigationTree",[1347,2405,2406],{},[1230,2407,2408],{"href":342},[989,2409,341],{},[1329,2411,2412,2417],{},[1347,2413,2414],{},[989,2415,2416],{},"PageError",[1347,2418,2419],{},[1230,2420,2421],{"href":472},[989,2422,471],{},[1329,2424,2425,2430],{},[1347,2426,2427],{},[989,2428,2429],{},"PricingCard",[1347,2431,2432],{},[1230,2433,2434],{"href":673},[989,2435,672],{},[1329,2437,2438,2443],{},[1347,2439,2440],{},[989,2441,2442],{},"PricingGrid",[1347,2444,2445],{},[1230,2446,2447],{"href":678},[989,2448,677],{},[1329,2450,2451,2456],{},[1347,2452,2453],{},[989,2454,2455],{},"PricingSwitch",[1347,2457,2120,2458,2462,2463,2125],{},[1230,2459,2460],{"href":738},[989,2461,737],{}," or ",[1230,2464,2465],{"href":748},[989,2466,747],{},[963,2468,2470],{"id":2469},"changed-components","Changed components",[925,2472,2473],{},"In addition to the renamed components, there are lots of changes to the components API. Let's detail the most important ones:",[929,2475,2476],{},[932,2477,1453,2478,1557,2481,2484,2485,2488],{},[989,2479,2480],{},"links",[989,2482,2483],{},"options"," props have been renamed to ",[989,2486,2487],{},"items"," for consistency:",[1001,2490,2492],{"className":1461,"code":2491,"language":1463,"meta":1007,"style":1007},"\u003Ctemplate>\n- \u003CUSelect :options=\"countries\" />\n+ \u003CUSelect :items=\"countries\" />\n\n- \u003CUHorizontalNavigation :links=\"links\" />\n+ \u003CUNavigationMenu :items=\"links\" />\n\u003C/template>\n",[989,2493,2494,2498,2505,2512,2516,2523,2530],{"__ignoreMap":1007},[1011,2495,2496],{"class":1013,"line":1014},[1011,2497,1470],{"class":1054},[1011,2499,2500,2502],{"class":1013,"line":1061},[1011,2501,1475],{"class":1021},[1011,2503,2504],{"class":1064}," \u003CUSelect :options=\"countries\" />\n",[1011,2506,2507,2509],{"class":1013,"line":1085},[1011,2508,1483],{"class":1021},[1011,2510,2511],{"class":1025}," \u003CUSelect :items=\"countries\" />\n",[1011,2513,2514],{"class":1013,"line":1186},[1011,2515,1527],{"emptyLinePlaceholder":21},[1011,2517,2518,2520],{"class":1013,"line":1225},[1011,2519,1475],{"class":1021},[1011,2521,2522],{"class":1064}," \u003CUHorizontalNavigation :links=\"links\" />\n",[1011,2524,2525,2527],{"class":1013,"line":1537},[1011,2526,1483],{"class":1021},[1011,2528,2529],{"class":1025}," \u003CUNavigationMenu :items=\"links\" />\n",[1011,2531,2532],{"class":1013,"line":1545},[1011,2533,1491],{"class":1054},[971,2535,2536],{},[925,2537,2538,2539,1310,2541,1310,2543,1310,2545,1310,2547,1310,2549,1310,2551,981],{},"This change affects the following components: ",[989,2540,217],{},[989,2542,2059],{},[989,2544,526],{},[989,2546,692],{},[989,2548,702],{},[989,2550,707],{},[989,2552,2042],{},[929,2554,2555],{},[932,2556,1453,2557,2560,2561,2564],{},[989,2558,2559],{},"click"," field in different components has been removed in favor of the native Vue ",[989,2562,2563],{},"onClick"," event:",[1001,2566,2568],{"className":1461,"code":2567,"language":1463,"meta":1007,"style":1007},"\u003Cscript setup lang=\"ts\">\nconst items = [{\n  label: 'Edit',\n-  click: () => {\n+  onClick: () => {\n    console.log('Edit')\n  }\n}]\n\u003C/script>\n",[989,2569,2570,2575,2580,2585,2592,2599,2604,2608,2613],{"__ignoreMap":1007},[1011,2571,2572],{"class":1013,"line":1014},[1011,2573,2574],{"class":1054},"\u003Cscript setup lang=\"ts\">\n",[1011,2576,2577],{"class":1013,"line":1061},[1011,2578,2579],{"class":1054},"const items = [{\n",[1011,2581,2582],{"class":1013,"line":1085},[1011,2583,2584],{"class":1054},"  label: 'Edit',\n",[1011,2586,2587,2589],{"class":1013,"line":1186},[1011,2588,1475],{"class":1021},[1011,2590,2591],{"class":1064},"  click: () => {\n",[1011,2593,2594,2596],{"class":1013,"line":1225},[1011,2595,1483],{"class":1021},[1011,2597,2598],{"class":1025},"  onClick: () => {\n",[1011,2600,2601],{"class":1013,"line":1537},[1011,2602,2603],{"class":1054},"    console.log('Edit')\n",[1011,2605,2606],{"class":1013,"line":1545},[1011,2607,1732],{"class":1054},[1011,2609,2610],{"class":1013,"line":1618},[1011,2611,2612],{"class":1054},"}]\n",[1011,2614,2615],{"class":1013,"line":1729},[1011,2616,2617],{"class":1054},"\u003C/script>\n",[971,2619,2620],{},[925,2621,2622,2623,2625,2626,2628,2629,1310,2631,1310,2633,2635],{},"This change affects the ",[989,2624,762],{}," component as well as all component that have ",[989,2627,2487],{}," links like ",[989,2630,577],{},[989,2632,429],{},[989,2634,331],{},", etc.",[929,2637,2638],{},[932,2639,2640,2641,1310,2644,1557,2647,2650,2651,1232],{},"The global ",[989,2642,2643],{},"Modals",[989,2645,2646],{},"Slideovers",[989,2648,2649],{},"Notifications"," components have been removed in favor the ",[1230,2652,175],{"href":176},[1001,2654,2656],{"className":1461,"code":2655,"filename":1237,"language":1463,"meta":1007,"style":1007},"\u003Ctemplate>\n+  \u003CUApp>\n+    \u003CNuxtPage />\n+  \u003C/UApp>\n-  \u003CUModals />\n-  \u003CUSlideovers />\n-  \u003CUNotifications />\n\u003C/template>\n",[989,2657,2658,2662,2669,2676,2683,2690,2697,2704],{"__ignoreMap":1007},[1011,2659,2660],{"class":1013,"line":1014},[1011,2661,1470],{"class":1054},[1011,2663,2664,2666],{"class":1013,"line":1061},[1011,2665,1483],{"class":1021},[1011,2667,2668],{"class":1025},"  \u003CUApp>\n",[1011,2670,2671,2673],{"class":1013,"line":1085},[1011,2672,1483],{"class":1021},[1011,2674,2675],{"class":1025},"    \u003CNuxtPage />\n",[1011,2677,2678,2680],{"class":1013,"line":1186},[1011,2679,1483],{"class":1021},[1011,2681,2682],{"class":1025},"  \u003C/UApp>\n",[1011,2684,2685,2687],{"class":1013,"line":1225},[1011,2686,1475],{"class":1021},[1011,2688,2689],{"class":1064},"  \u003CUModals />\n",[1011,2691,2692,2694],{"class":1013,"line":1537},[1011,2693,1475],{"class":1021},[1011,2695,2696],{"class":1064},"  \u003CUSlideovers />\n",[1011,2698,2699,2701],{"class":1013,"line":1545},[1011,2700,1475],{"class":1021},[1011,2702,2703],{"class":1064},"  \u003CUNotifications />\n",[1011,2705,2706],{"class":1013,"line":1618},[1011,2707,1491],{"class":1054},[929,2709,2710],{},[932,2711,1453,2712,2715,2716,2719],{},[989,2713,2714],{},"v-model:open"," directive and ",[989,2717,2718],{},"default-open"," prop are now used to control visibility:",[1001,2721,2723],{"className":1461,"code":2722,"language":1463,"meta":1007,"style":1007},"\u003Ctemplate>\n- \u003CUModal v-model=\"open\" />\n+ \u003CUModal v-model:open=\"open\" />\n\u003C/template>\n",[989,2724,2725,2729,2736,2743],{"__ignoreMap":1007},[1011,2726,2727],{"class":1013,"line":1014},[1011,2728,1470],{"class":1054},[1011,2730,2731,2733],{"class":1013,"line":1061},[1011,2732,1475],{"class":1021},[1011,2734,2735],{"class":1064}," \u003CUModal v-model=\"open\" />\n",[1011,2737,2738,2740],{"class":1013,"line":1085},[1011,2739,1483],{"class":1021},[1011,2741,2742],{"class":1025}," \u003CUModal v-model:open=\"open\" />\n",[1011,2744,2745],{"class":1013,"line":1186},[1011,2746,1491],{"class":1054},[971,2748,2749],{},[925,2750,2538,2751,1310,2753,1557,2755,2757,2758,1310,2760,1310,2762,1557,2764,981],{},[989,2752,367],{},[989,2754,572],{},[989,2756,722],{}," and enables controlling visibility for ",[989,2759,526],{},[989,2761,702],{},[989,2763,707],{},[989,2765,767],{},[929,2767,2768],{},[932,2769,2770,2771,2774,2775,2777],{},"The default slot is now used for the trigger and the content goes inside the ",[989,2772,2773],{},"#content"," slot (you don't need to use a ",[989,2776,2714],{}," directive with this method):",[1001,2779,2781],{"className":1461,"code":2780,"language":1463,"meta":1007,"style":1007},"\u003Cscript setup lang=\"ts\">\n- const open = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n- \u003CUButton label=\"Open\" @click=\"open = true\" />\n\n- \u003CUModal v-model=\"open\">\n+ \u003CUModal>\n+   \u003CUButton label=\"Open\" />\n\n+   \u003Ctemplate #content>\n      \u003Cdiv class=\"p-4\">\n        \u003CPlaceholder class=\"h-48\" />\n      \u003C/div>\n+   \u003C/template>\n  \u003C/UModal>\n\u003C/template>\n",[989,2782,2783,2787,2794,2798,2802,2806,2813,2817,2824,2831,2838,2842,2849,2854,2859,2864,2871,2876],{"__ignoreMap":1007},[1011,2784,2785],{"class":1013,"line":1014},[1011,2786,2574],{"class":1054},[1011,2788,2789,2791],{"class":1013,"line":1061},[1011,2790,1475],{"class":1021},[1011,2792,2793],{"class":1064}," const open = ref(false)\n",[1011,2795,2796],{"class":1013,"line":1085},[1011,2797,2617],{"class":1054},[1011,2799,2800],{"class":1013,"line":1186},[1011,2801,1527],{"emptyLinePlaceholder":21},[1011,2803,2804],{"class":1013,"line":1225},[1011,2805,1470],{"class":1054},[1011,2807,2808,2810],{"class":1013,"line":1537},[1011,2809,1475],{"class":1021},[1011,2811,2812],{"class":1064}," \u003CUButton label=\"Open\" @click=\"open = true\" />\n",[1011,2814,2815],{"class":1013,"line":1545},[1011,2816,1527],{"emptyLinePlaceholder":21},[1011,2818,2819,2821],{"class":1013,"line":1618},[1011,2820,1475],{"class":1021},[1011,2822,2823],{"class":1064}," \u003CUModal v-model=\"open\">\n",[1011,2825,2826,2828],{"class":1013,"line":1729},[1011,2827,1483],{"class":1021},[1011,2829,2830],{"class":1025}," \u003CUModal>\n",[1011,2832,2833,2835],{"class":1013,"line":1735},[1011,2834,1483],{"class":1021},[1011,2836,2837],{"class":1025},"   \u003CUButton label=\"Open\" />\n",[1011,2839,2840],{"class":1013,"line":1838},[1011,2841,1527],{"emptyLinePlaceholder":21},[1011,2843,2844,2846],{"class":1013,"line":1846},[1011,2845,1483],{"class":1021},[1011,2847,2848],{"class":1025},"   \u003Ctemplate #content>\n",[1011,2850,2851],{"class":1013,"line":1854},[1011,2852,2853],{"class":1054},"      \u003Cdiv class=\"p-4\">\n",[1011,2855,2856],{"class":1013,"line":1861},[1011,2857,2858],{"class":1054},"        \u003CPlaceholder class=\"h-48\" />\n",[1011,2860,2861],{"class":1013,"line":1868},[1011,2862,2863],{"class":1054},"      \u003C/div>\n",[1011,2865,2866,2868],{"class":1013,"line":1875},[1011,2867,1483],{"class":1021},[1011,2869,2870],{"class":1025},"   \u003C/template>\n",[1011,2872,2873],{"class":1013,"line":1881},[1011,2874,2875],{"class":1054},"  \u003C/UModal>\n",[1011,2877,2878],{"class":1013,"line":1886},[1011,2879,1491],{"class":1054},[971,2881,2882],{},[925,2883,2538,2884,1310,2886,1310,2888,1310,2890,981],{},[989,2885,572],{},[989,2887,667],{},[989,2889,722],{},[989,2891,767],{},[929,2893,2894],{},[932,2895,2896,2897,1310,2900,1557,2902,2905,2906,2908,2909,1232],{},"A ",[989,2898,2899],{},"#header",[989,2901,2186],{},[989,2903,2904],{},"#footer"," slots have been added inside the ",[989,2907,2773],{}," slot like the ",[989,2910,233],{},[1001,2912,2914],{"className":1461,"code":2913,"language":1463,"meta":1007,"style":1007},"\u003Ctemplate>\n- \u003CUModal>\n+ \u003CUModal title=\"Title\" description=\"Description\">\n-   \u003Cdiv class=\"p-4\">\n+   \u003Ctemplate #body>\n      \u003CPlaceholder class=\"h-48\" />\n+   \u003C/template>\n-   \u003C/div>\n  \u003C/UModal>\n\u003C/template>\n",[989,2915,2916,2920,2926,2933,2940,2947,2952,2958,2965,2969],{"__ignoreMap":1007},[1011,2917,2918],{"class":1013,"line":1014},[1011,2919,1470],{"class":1054},[1011,2921,2922,2924],{"class":1013,"line":1061},[1011,2923,1475],{"class":1021},[1011,2925,2830],{"class":1064},[1011,2927,2928,2930],{"class":1013,"line":1085},[1011,2929,1483],{"class":1021},[1011,2931,2932],{"class":1025}," \u003CUModal title=\"Title\" description=\"Description\">\n",[1011,2934,2935,2937],{"class":1013,"line":1186},[1011,2936,1475],{"class":1021},[1011,2938,2939],{"class":1064},"   \u003Cdiv class=\"p-4\">\n",[1011,2941,2942,2944],{"class":1013,"line":1225},[1011,2943,1483],{"class":1021},[1011,2945,2946],{"class":1025},"   \u003Ctemplate #body>\n",[1011,2948,2949],{"class":1013,"line":1537},[1011,2950,2951],{"class":1054},"      \u003CPlaceholder class=\"h-48\" />\n",[1011,2953,2954,2956],{"class":1013,"line":1545},[1011,2955,1483],{"class":1021},[1011,2957,2870],{"class":1025},[1011,2959,2960,2962],{"class":1013,"line":1618},[1011,2961,1475],{"class":1021},[1011,2963,2964],{"class":1064},"   \u003C/div>\n",[1011,2966,2967],{"class":1013,"line":1729},[1011,2968,2875],{"class":1054},[1011,2970,2971],{"class":1013,"line":1735},[1011,2972,1491],{"class":1054},[971,2974,2975],{},[925,2976,2538,2977,1310,2979,981],{},[989,2978,572],{},[989,2980,722],{},[929,2982,2983],{},[932,2984,1453,2985,2988,2989,1557,2991,2993,2994,2997],{},[989,2986,2987],{},"prevent-close"," prop in ",[989,2990,572],{},[989,2992,722],{}," has been removed in favor of the ",[989,2995,2996],{},"dismissible"," prop that takes a boolean value:",[1001,2999,3001],{"className":1461,"code":3000,"language":1463,"meta":1007,"style":1007},"\u003Ctemplate>\n- \u003CUModal prevent-close />\n+ \u003CUModal :dismissible=\"false\" />\n\u003C/template>\n",[989,3002,3003,3007,3014,3021],{"__ignoreMap":1007},[1011,3004,3005],{"class":1013,"line":1014},[1011,3006,1470],{"class":1054},[1011,3008,3009,3011],{"class":1013,"line":1061},[1011,3010,1475],{"class":1021},[1011,3012,3013],{"class":1064}," \u003CUModal prevent-close />\n",[1011,3015,3016,3018],{"class":1013,"line":1085},[1011,3017,1483],{"class":1021},[1011,3019,3020],{"class":1025}," \u003CUModal :dismissible=\"false\" />\n",[1011,3022,3023],{"class":1013,"line":1186},[1011,3024,1491],{"class":1054},[929,3026,3027],{},[932,3028,1453,3029,3032,3033,3035,3036,3039],{},[989,3030,3031],{},"v-model"," directive in ",[989,3034,657],{}," has been renamed to ",[989,3037,3038],{},"v-model:page"," to control current page:",[1001,3041,3043],{"className":1461,"code":3042,"language":1463,"meta":1007,"style":1007},"\u003Ctemplate>\n- \u003CUPagination v-model=\"page\" />\n+ \u003CUPagination v-model:page=\"page\" />\n\u003C/template>\n",[989,3044,3045,3049,3056,3063],{"__ignoreMap":1007},[1011,3046,3047],{"class":1013,"line":1014},[1011,3048,1470],{"class":1054},[1011,3050,3051,3053],{"class":1013,"line":1061},[1011,3052,1475],{"class":1021},[1011,3054,3055],{"class":1064}," \u003CUPagination v-model=\"page\" />\n",[1011,3057,3058,3060],{"class":1013,"line":1085},[1011,3059,1483],{"class":1021},[1011,3061,3062],{"class":1025}," \u003CUPagination v-model:page=\"page\" />\n",[1011,3064,3065],{"class":1013,"line":1186},[1011,3066,1491],{"class":1054},[929,3068,3069],{},[932,3070,1453,3071,3074,3075,1310,3077,1557,3079,3081,3082,3084,3085,2564],{},[989,3072,3073],{},"change"," event in ",[989,3076,702],{},[989,3078,707],{},[989,3080,692],{}," now emits the native ",[989,3083,3073],{}," event, not the new chnage value, which is now emitted in the ",[989,3086,3087],{},"update:modelValue",[1001,3089,3091],{"className":1461,"code":3090,"language":1463,"meta":1007,"style":1007},"\u003Ctemplate>\u003C/template>\n- \u003CUSelectMenu v-model=\"country\" :items=\"countries\" @change=\"console.log(newVal)\" />\n+ \u003CUSelectMenu v-model=\"country\" :items=\"countries\" @update:modelValue=\"console.log(newVal)\" />\n",[989,3092,3093,3098,3105],{"__ignoreMap":1007},[1011,3094,3095],{"class":1013,"line":1014},[1011,3096,3097],{"class":1054},"\u003Ctemplate>\u003C/template>\n",[1011,3099,3100,3102],{"class":1013,"line":1061},[1011,3101,1475],{"class":1021},[1011,3103,3104],{"class":1064}," \u003CUSelectMenu v-model=\"country\" :items=\"countries\" @change=\"console.log(newVal)\" />\n",[1011,3106,3107,3109],{"class":1013,"line":1085},[1011,3108,1483],{"class":1021},[1011,3110,3111],{"class":1025}," \u003CUSelectMenu v-model=\"country\" :items=\"countries\" @update:modelValue=\"console.log(newVal)\" />\n",[963,3113,3115],{"id":3114},"changed-composables","Changed composables",[929,3117,3118],{},[932,3119,1453,3120,3123,3124,3127,3128,1068],{},[989,3121,3122],{},"useToast()"," composable ",[989,3125,3126],{},"timeout"," prop has been renamed to ",[989,3129,3130],{},"duration",[1001,3132,3134],{"className":1461,"code":3133,"language":1463,"meta":1007,"style":1007},"\u003Cscript setup lang=\"ts\">\nconst toast = useToast()\n\n- toast.add({ title: 'Invitation sent', timeout: 0 })\n+ toast.add({ title: 'Invitation sent', duration: 0 })\n\u003C/script>\n",[989,3135,3136,3140,3145,3149,3156,3163],{"__ignoreMap":1007},[1011,3137,3138],{"class":1013,"line":1014},[1011,3139,2574],{"class":1054},[1011,3141,3142],{"class":1013,"line":1061},[1011,3143,3144],{"class":1054},"const toast = useToast()\n",[1011,3146,3147],{"class":1013,"line":1085},[1011,3148,1527],{"emptyLinePlaceholder":21},[1011,3150,3151,3153],{"class":1013,"line":1186},[1011,3152,1475],{"class":1021},[1011,3154,3155],{"class":1064}," toast.add({ title: 'Invitation sent', timeout: 0 })\n",[1011,3157,3158,3160],{"class":1013,"line":1225},[1011,3159,1483],{"class":1021},[1011,3161,3162],{"class":1025}," toast.add({ title: 'Invitation sent', duration: 0 })\n",[1011,3164,3165],{"class":1013,"line":1537},[1011,3166,2617],{"class":1054},[929,3168,3169],{},[932,3170,1453,3171,1557,3174,3177,3178,3180],{},[989,3172,3173],{},"useModal",[989,3175,3176],{},"useSlideover"," composables have been removed in favor of a more generic ",[989,3179,808],{}," composable:",[925,3182,3183],{},"Some important differences:",[929,3185,3186,3191,3194,3208],{},[932,3187,1453,3188,3190],{},[989,3189,808],{}," composable is now used to create overlay instances",[932,3192,3193],{},"Overlays that are opened, can be awaited for their result",[932,3195,3196,3197,2462,3200,3203,3204,3207],{},"Overlays can no longer be close using ",[989,3198,3199],{},"modal.close()",[989,3201,3202],{},"slideover.close()",", rather, they close automatically: either when a ",[989,3205,3206],{},"close"," event is fired explicitly from the opened component OR when the overlay closes itself (clicking on backdrop, pressing the ESC key, etc)",[932,3209,3210,3211,3213],{},"To capture the return value in the parent component you must explictly emit a ",[989,3212,3206],{}," event with the desired value",[1001,3215,3217],{"className":1461,"code":3216,"language":1463,"meta":1007,"style":1007},"\u003Cscript setup lang=\"ts\">\nimport { ModalExampleComponent } from '#components'\n\n- const modal = useModal()\n+ const overlay = useOverlay()\n\n- modal.open(ModalExampleComponent)\n+ const modal = overlay.create(ModalExampleComponent)\n\u003C/script>\n",[989,3218,3219,3223,3228,3232,3239,3246,3250,3257,3264],{"__ignoreMap":1007},[1011,3220,3221],{"class":1013,"line":1014},[1011,3222,2574],{"class":1054},[1011,3224,3225],{"class":1013,"line":1061},[1011,3226,3227],{"class":1054},"import { ModalExampleComponent } from '#components'\n",[1011,3229,3230],{"class":1013,"line":1085},[1011,3231,1527],{"emptyLinePlaceholder":21},[1011,3233,3234,3236],{"class":1013,"line":1186},[1011,3235,1475],{"class":1021},[1011,3237,3238],{"class":1064}," const modal = useModal()\n",[1011,3240,3241,3243],{"class":1013,"line":1225},[1011,3242,1483],{"class":1021},[1011,3244,3245],{"class":1025}," const overlay = useOverlay()\n",[1011,3247,3248],{"class":1013,"line":1537},[1011,3249,1527],{"emptyLinePlaceholder":21},[1011,3251,3252,3254],{"class":1013,"line":1545},[1011,3253,1475],{"class":1021},[1011,3255,3256],{"class":1064}," modal.open(ModalExampleComponent)\n",[1011,3258,3259,3261],{"class":1013,"line":1618},[1011,3260,1483],{"class":1021},[1011,3262,3263],{"class":1025}," const modal = overlay.create(ModalExampleComponent)\n",[1011,3265,3266],{"class":1013,"line":1729},[1011,3267,2617],{"class":1054},[925,3269,3270],{},"Props are now passed through a props attribute:",[1001,3272,3274],{"className":1461,"code":3273,"language":1463,"meta":1007,"style":1007},"\u003Cscript setup lang=\"ts\">\nimport { ModalExampleComponent } from '#components'\n\n- const modal = useModal()\n+ const overlay = useOverlay()\n\nconst count = ref(0)\n\n- modal.open(ModalExampleComponent, {\n-   count: count.value\n- })\n+ const modal = overlay.create(ModalExampleComponent, {\n+   props: {\n+     count: count.value\n+   }\n+ })\n\u003C/script>\n",[989,3275,3276,3280,3284,3288,3294,3300,3304,3309,3313,3320,3327,3334,3341,3348,3355,3361,3367],{"__ignoreMap":1007},[1011,3277,3278],{"class":1013,"line":1014},[1011,3279,2574],{"class":1054},[1011,3281,3282],{"class":1013,"line":1061},[1011,3283,3227],{"class":1054},[1011,3285,3286],{"class":1013,"line":1085},[1011,3287,1527],{"emptyLinePlaceholder":21},[1011,3289,3290,3292],{"class":1013,"line":1186},[1011,3291,1475],{"class":1021},[1011,3293,3238],{"class":1064},[1011,3295,3296,3298],{"class":1013,"line":1225},[1011,3297,1483],{"class":1021},[1011,3299,3245],{"class":1025},[1011,3301,3302],{"class":1013,"line":1537},[1011,3303,1527],{"emptyLinePlaceholder":21},[1011,3305,3306],{"class":1013,"line":1545},[1011,3307,3308],{"class":1054},"const count = ref(0)\n",[1011,3310,3311],{"class":1013,"line":1618},[1011,3312,1527],{"emptyLinePlaceholder":21},[1011,3314,3315,3317],{"class":1013,"line":1729},[1011,3316,1475],{"class":1021},[1011,3318,3319],{"class":1064}," modal.open(ModalExampleComponent, {\n",[1011,3321,3322,3324],{"class":1013,"line":1735},[1011,3323,1475],{"class":1021},[1011,3325,3326],{"class":1064},"   count: count.value\n",[1011,3328,3329,3331],{"class":1013,"line":1838},[1011,3330,1475],{"class":1021},[1011,3332,3333],{"class":1064}," })\n",[1011,3335,3336,3338],{"class":1013,"line":1846},[1011,3337,1483],{"class":1021},[1011,3339,3340],{"class":1025}," const modal = overlay.create(ModalExampleComponent, {\n",[1011,3342,3343,3345],{"class":1013,"line":1854},[1011,3344,1483],{"class":1021},[1011,3346,3347],{"class":1025},"   props: {\n",[1011,3349,3350,3352],{"class":1013,"line":1861},[1011,3351,1483],{"class":1021},[1011,3353,3354],{"class":1025},"     count: count.value\n",[1011,3356,3357,3359],{"class":1013,"line":1868},[1011,3358,1483],{"class":1021},[1011,3360,1726],{"class":1025},[1011,3362,3363,3365],{"class":1013,"line":1875},[1011,3364,1483],{"class":1021},[1011,3366,3333],{"class":1025},[1011,3368,3369],{"class":1013,"line":1881},[1011,3370,2617],{"class":1054},[925,3372,3373,3374,3376,3377,3380],{},"Closing a modal is now done through the ",[989,3375,3206],{}," event. The ",[989,3378,3379],{},"modal.open"," method now returns an instance that can be used to await for the result of the modal whenever the modal is closed:",[1001,3382,3384],{"className":1461,"code":3383,"language":1463,"meta":1007,"style":1007},"\u003Cscript setup lang=\"ts\">\nimport { ModalExampleComponent } from '#components'\n\n- const modal = useModal()\n+ const overlay = useOverlay()\n\n+ const modal = overlay.create(ModalExampleComponent)\n\n- function openModal() {\n-   modal.open(ModalExampleComponent, {\n-     onSuccess() {\n-       toast.add({ title: 'Success!' })\n-     }\n-   })\n- }\n+ async function openModal() {\n+   const instance = modal.open(ModalExampleComponent, {\n+     count: count.value\n+   })\n+\n+   const result = await instance.result\n+\n+   if (result) {\n+     toast.add({ title: 'Success!' })\n+   }\n+ }\n\u003C/script>\n",[989,3385,3386,3390,3394,3398,3404,3410,3414,3420,3424,3431,3438,3445,3452,3458,3465,3472,3479,3486,3492,3499,3505,3513,3518,3526,3534,3541,3548],{"__ignoreMap":1007},[1011,3387,3388],{"class":1013,"line":1014},[1011,3389,2574],{"class":1054},[1011,3391,3392],{"class":1013,"line":1061},[1011,3393,3227],{"class":1054},[1011,3395,3396],{"class":1013,"line":1085},[1011,3397,1527],{"emptyLinePlaceholder":21},[1011,3399,3400,3402],{"class":1013,"line":1186},[1011,3401,1475],{"class":1021},[1011,3403,3238],{"class":1064},[1011,3405,3406,3408],{"class":1013,"line":1225},[1011,3407,1483],{"class":1021},[1011,3409,3245],{"class":1025},[1011,3411,3412],{"class":1013,"line":1537},[1011,3413,1527],{"emptyLinePlaceholder":21},[1011,3415,3416,3418],{"class":1013,"line":1545},[1011,3417,1483],{"class":1021},[1011,3419,3263],{"class":1025},[1011,3421,3422],{"class":1013,"line":1618},[1011,3423,1527],{"emptyLinePlaceholder":21},[1011,3425,3426,3428],{"class":1013,"line":1729},[1011,3427,1475],{"class":1021},[1011,3429,3430],{"class":1064}," function openModal() {\n",[1011,3432,3433,3435],{"class":1013,"line":1735},[1011,3434,1475],{"class":1021},[1011,3436,3437],{"class":1064},"   modal.open(ModalExampleComponent, {\n",[1011,3439,3440,3442],{"class":1013,"line":1838},[1011,3441,1475],{"class":1021},[1011,3443,3444],{"class":1064},"     onSuccess() {\n",[1011,3446,3447,3449],{"class":1013,"line":1846},[1011,3448,1475],{"class":1021},[1011,3450,3451],{"class":1064},"       toast.add({ title: 'Success!' })\n",[1011,3453,3454,3456],{"class":1013,"line":1854},[1011,3455,1475],{"class":1021},[1011,3457,1878],{"class":1064},[1011,3459,3460,3462],{"class":1013,"line":1861},[1011,3461,1475],{"class":1021},[1011,3463,3464],{"class":1064},"   })\n",[1011,3466,3467,3469],{"class":1013,"line":1868},[1011,3468,1475],{"class":1021},[1011,3470,3471],{"class":1064}," }\n",[1011,3473,3474,3476],{"class":1013,"line":1875},[1011,3475,1483],{"class":1021},[1011,3477,3478],{"class":1025}," async function openModal() {\n",[1011,3480,3481,3483],{"class":1013,"line":1881},[1011,3482,1483],{"class":1021},[1011,3484,3485],{"class":1025},"   const instance = modal.open(ModalExampleComponent, {\n",[1011,3487,3488,3490],{"class":1013,"line":1886},[1011,3489,1483],{"class":1021},[1011,3491,3354],{"class":1025},[1011,3493,3495,3497],{"class":1013,"line":3494},19,[1011,3496,1483],{"class":1021},[1011,3498,3464],{"class":1025},[1011,3500,3502],{"class":1013,"line":3501},20,[1011,3503,3504],{"class":1021},"+\n",[1011,3506,3508,3510],{"class":1013,"line":3507},21,[1011,3509,1483],{"class":1021},[1011,3511,3512],{"class":1025},"   const result = await instance.result\n",[1011,3514,3516],{"class":1013,"line":3515},22,[1011,3517,3504],{"class":1021},[1011,3519,3521,3523],{"class":1013,"line":3520},23,[1011,3522,1483],{"class":1021},[1011,3524,3525],{"class":1025},"   if (result) {\n",[1011,3527,3529,3531],{"class":1013,"line":3528},24,[1011,3530,1483],{"class":1021},[1011,3532,3533],{"class":1025},"     toast.add({ title: 'Success!' })\n",[1011,3535,3537,3539],{"class":1013,"line":3536},25,[1011,3538,1483],{"class":1021},[1011,3540,1726],{"class":1025},[1011,3542,3544,3546],{"class":1013,"line":3543},26,[1011,3545,1483],{"class":1021},[1011,3547,3471],{"class":1025},[1011,3549,3551],{"class":1013,"line":3550},27,[1011,3552,2617],{"class":1054},[963,3554,3556],{"id":3555},"changed-form-validation","Changed form validation",[929,3558,3559],{},[932,3560,3561,3562,3565,3566,1068],{},"The error object property for targeting form fields has been renamed from ",[989,3563,3564],{},"path"," to ",[989,3567,3568],{},"name",[1001,3570,3572],{"className":1461,"code":3571,"language":1463,"meta":1007,"style":1007},"\u003Cscript setup lang=\"ts\">\nfunction validate(state: any): FormError[] {\n  const errors = []\n  if (!state.email) {\n    errors.push({\n-     path: 'email',\n+     name: 'email',\n      message: 'Required'\n    })\n  }\n  if (!state.password) {\n    errors.push({\n-     path: 'password',\n+     name: 'password',\n      message: 'Required'\n    })\n  }\n  return errors\n}\n\u003C/script>\n",[989,3573,3574,3578,3583,3588,3593,3598,3605,3612,3617,3622,3626,3631,3635,3642,3649,3653,3657,3661,3666,3671],{"__ignoreMap":1007},[1011,3575,3576],{"class":1013,"line":1014},[1011,3577,2574],{"class":1054},[1011,3579,3580],{"class":1013,"line":1061},[1011,3581,3582],{"class":1054},"function validate(state: any): FormError[] {\n",[1011,3584,3585],{"class":1013,"line":1085},[1011,3586,3587],{"class":1054},"  const errors = []\n",[1011,3589,3590],{"class":1013,"line":1186},[1011,3591,3592],{"class":1054},"  if (!state.email) {\n",[1011,3594,3595],{"class":1013,"line":1225},[1011,3596,3597],{"class":1054},"    errors.push({\n",[1011,3599,3600,3602],{"class":1013,"line":1537},[1011,3601,1475],{"class":1021},[1011,3603,3604],{"class":1064},"     path: 'email',\n",[1011,3606,3607,3609],{"class":1013,"line":1545},[1011,3608,1483],{"class":1021},[1011,3610,3611],{"class":1025},"     name: 'email',\n",[1011,3613,3614],{"class":1013,"line":1618},[1011,3615,3616],{"class":1054},"      message: 'Required'\n",[1011,3618,3619],{"class":1013,"line":1729},[1011,3620,3621],{"class":1054},"    })\n",[1011,3623,3624],{"class":1013,"line":1735},[1011,3625,1732],{"class":1054},[1011,3627,3628],{"class":1013,"line":1838},[1011,3629,3630],{"class":1054},"  if (!state.password) {\n",[1011,3632,3633],{"class":1013,"line":1846},[1011,3634,3597],{"class":1054},[1011,3636,3637,3639],{"class":1013,"line":1854},[1011,3638,1475],{"class":1021},[1011,3640,3641],{"class":1064},"     path: 'password',\n",[1011,3643,3644,3646],{"class":1013,"line":1861},[1011,3645,1483],{"class":1021},[1011,3647,3648],{"class":1025},"     name: 'password',\n",[1011,3650,3651],{"class":1013,"line":1868},[1011,3652,3616],{"class":1054},[1011,3654,3655],{"class":1013,"line":1875},[1011,3656,3621],{"class":1054},[1011,3658,3659],{"class":1013,"line":1881},[1011,3660,1732],{"class":1054},[1011,3662,3663],{"class":1013,"line":1886},[1011,3664,3665],{"class":1054},"  return errors\n",[1011,3667,3668],{"class":1013,"line":3494},[1011,3669,3670],{"class":1054},"}\n",[1011,3672,3673],{"class":1013,"line":3501},[1011,3674,2617],{"class":1054},[3676,3677],"hr",{},[1408,3679,3680],{},[925,3681,3682],{},"This page is a work in progress, we'll improve it regularly.",[3684,3685,3686],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":1007,"searchDepth":1061,"depth":1061,"links":3688},[3689,3693],{"id":957,"depth":1061,"text":958,"children":3690},[3691,3692],{"id":965,"depth":1085,"text":966},{"id":1115,"depth":1085,"text":1116},{"id":1295,"depth":1061,"text":1296,"children":3694},[3695,3696,3697,3698,3699,3700],{"id":1302,"depth":1085,"text":1303},{"id":1741,"depth":1085,"text":1742},{"id":1939,"depth":1085,"text":1940},{"id":2469,"depth":1085,"text":2470},{"id":3114,"depth":1085,"text":3115},{"id":3555,"depth":1085,"text":3556},"A comprehensive guide to migrate your application from Nuxt UI v2 to Nuxt UI v3.","md",[3704],{"label":3705,"to":44,"icon":39},"Migration to v4",{},"/docs/getting-started/migration/v3",{"title":920,"description":3701},"docs/1.getting-started/3.migration/2.v3","aRphOFtZqrYn3xGzgUecM74ibk-d905PwbovAT_Bs1c",{"data":3712,"body":3713},{},{"type":3714,"children":3715},"root",[3716],{"type":172,"tag":925,"props":3717,"children":3718},{},[3719],{"type":3720,"value":3701},"text",1768562284513]