[{"data":1,"prerenderedAt":3104},["ShallowReactive",2],{"navigation":3,"-docs-getting-started-migration-v4":918,"-docs-getting-started-migration-v4-description":3094},[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":46,"extension":3085,"framework":16,"links":3086,"meta":3090,"navigation":3091,"path":44,"seo":3092,"stem":45,"__hash__":3093},"docs/docs/1.getting-started/3.migration/1.v4.md","Migration to v4",{"type":922,"value":923,"toc":3070},"minimark",[924,938,948,951,956,961,979,1096,1300,1602,1611,1709,1718,1737,1741,1746,1808,1812,1815,1819,1831,1884,1888,1897,1924,1928,1938,1989,2007,2011,2032,2058,2077,2096,2111,2115,2120,2159,2281,2285,2296,2309,2312,2349,2353,2367,2381,2434,2446,2564,2575,2667,2672,2733,2742,3045,3055,3066],[925,926,927,928,932,933,937],"p",{},"Nuxt UI v4 marks a major milestone: ",[929,930,931],"strong",{},"Nuxt UI and Nuxt UI Pro are now unified into a single, fully open-source and free library",". You now have access to 125+ production-ready components, all available in the ",[934,935,936],"code",{},"@nuxt/ui"," package.",[939,940,941],"note",{},[925,942,943,944,947],{},"Nuxt UI v4 requires ",[929,945,946],{},"Nuxt 4"," due to some dependencies. Make sure to upgrade to Nuxt 4 before migrating to Nuxt UI v4.",[925,949,950],{},"This guide provides step-by-step instructions to migrate your application from v3 to v4.",[952,953,955],"h2",{"id":954},"migrate-your-project","Migrate your project",[957,958,960],"h3",{"id":959},"from-nuxt-ui-pro","From Nuxt UI Pro",[962,963,964],"ol",{},[965,966,967,968,971,972,974,975,978],"li",{},"Replace ",[934,969,970],{},"@nuxt/ui-pro"," with ",[934,973,936],{}," in your ",[934,976,977],{},"package.json",":",[980,981,983,1022,1046,1072],"code-group",{"sync":982},"pm",[984,985,991],"pre",{"className":986,"code":987,"filename":988,"language":989,"meta":990,"style":990},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm remove @nuxt/ui-pro\npnpm add @nuxt/ui tailwindcss\n","pnpm","bash","",[934,992,993,1008],{"__ignoreMap":990},[994,995,998,1001,1005],"span",{"class":996,"line":997},"line",1,[994,999,988],{"class":1000},"sBMFI",[994,1002,1004],{"class":1003},"sfazB"," remove",[994,1006,1007],{"class":1003}," @nuxt/ui-pro\n",[994,1009,1011,1013,1016,1019],{"class":996,"line":1010},2,[994,1012,988],{"class":1000},[994,1014,1015],{"class":1003}," add",[994,1017,1018],{"class":1003}," @nuxt/ui",[994,1020,1021],{"class":1003}," tailwindcss\n",[984,1023,1026],{"className":986,"code":1024,"filename":1025,"language":989,"meta":990,"style":990},"yarn remove @nuxt/ui-pro\nyarn add @nuxt/ui tailwindcss\n","yarn",[934,1027,1028,1036],{"__ignoreMap":990},[994,1029,1030,1032,1034],{"class":996,"line":997},[994,1031,1025],{"class":1000},[994,1033,1004],{"class":1003},[994,1035,1007],{"class":1003},[994,1037,1038,1040,1042,1044],{"class":996,"line":1010},[994,1039,1025],{"class":1000},[994,1041,1015],{"class":1003},[994,1043,1018],{"class":1003},[994,1045,1021],{"class":1003},[984,1047,1050],{"className":986,"code":1048,"filename":1049,"language":989,"meta":990,"style":990},"npm uninstall @nuxt/ui-pro\nnpm install @nuxt/ui tailwindcss\n","npm",[934,1051,1052,1061],{"__ignoreMap":990},[994,1053,1054,1056,1059],{"class":996,"line":997},[994,1055,1049],{"class":1000},[994,1057,1058],{"class":1003}," uninstall",[994,1060,1007],{"class":1003},[994,1062,1063,1065,1068,1070],{"class":996,"line":1010},[994,1064,1049],{"class":1000},[994,1066,1067],{"class":1003}," install",[994,1069,1018],{"class":1003},[994,1071,1021],{"class":1003},[984,1073,1076],{"className":986,"code":1074,"filename":1075,"language":989,"meta":990,"style":990},"bun remove @nuxt/ui-pro\nbun add @nuxt/ui tailwindcss\n","bun",[934,1077,1078,1086],{"__ignoreMap":990},[994,1079,1080,1082,1084],{"class":996,"line":997},[994,1081,1075],{"class":1000},[994,1083,1004],{"class":1003},[994,1085,1007],{"class":1003},[994,1087,1088,1090,1092,1094],{"class":996,"line":1010},[994,1089,1075],{"class":1000},[994,1091,1015],{"class":1003},[994,1093,1018],{"class":1003},[994,1095,1021],{"class":1003},[1097,1098,1099,1166],"framework-only",{},[1100,1101,1102],"template",{"v-slot:nuxt":990},[1103,1104,1105,1116],"div",{},[962,1106,1107],{"start":1010},[965,1108,967,1109,971,1111,974,1113,978],{},[934,1110,970],{},[934,1112,936],{},[934,1114,1115],{},"nuxt.config.ts",[984,1117,1121],{"className":1118,"code":1119,"filename":1115,"language":1120,"meta":990,"style":990},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: [\n-   '@nuxt/ui-pro',\n+   '@nuxt/ui'\n  ]\n})\n","diff",[934,1122,1123,1129,1134,1145,1154,1160],{"__ignoreMap":990},[994,1124,1125],{"class":996,"line":997},[994,1126,1128],{"class":1127},"sTEyZ","export default defineNuxtConfig({\n",[994,1130,1131],{"class":996,"line":1010},[994,1132,1133],{"class":1127},"  modules: [\n",[994,1135,1137,1141],{"class":996,"line":1136},3,[994,1138,1140],{"class":1139},"sMK4o","-",[994,1142,1144],{"class":1143},"swJcz","   '@nuxt/ui-pro',\n",[994,1146,1148,1151],{"class":996,"line":1147},4,[994,1149,1150],{"class":1139},"+",[994,1152,1153],{"class":1003},"   '@nuxt/ui'\n",[994,1155,1157],{"class":996,"line":1156},5,[994,1158,1159],{"class":1127},"  ]\n",[994,1161,1163],{"class":996,"line":1162},6,[994,1164,1165],{"class":1127},"})\n",[1100,1167,1168],{"v-slot:vue":990},[1103,1169,1170,1181],{},[962,1171,1172],{"start":1010},[965,1173,967,1174,971,1176,974,1178,978],{},[934,1175,970],{},[934,1177,936],{},[934,1179,1180],{},"vite.config.ts",[984,1182,1184],{"className":1118,"code":1183,"filename":1180,"language":1120,"meta":990,"style":990},"import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n- import uiPro from '@nuxt/ui-pro/vite'\n+ import ui from '@nuxt/ui/vite'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n-   uiPro({\n+   ui({\n      ui: {\n        colors: {\n          primary: 'green',\n          neutral: 'slate'\n        }\n      }\n    })\n  ]\n})\n",[934,1185,1186,1191,1196,1203,1210,1215,1220,1226,1232,1240,1248,1254,1260,1266,1272,1278,1284,1290,1295],{"__ignoreMap":990},[994,1187,1188],{"class":996,"line":997},[994,1189,1190],{"class":1127},"import { defineConfig } from 'vite'\n",[994,1192,1193],{"class":996,"line":1010},[994,1194,1195],{"class":1127},"import vue from '@vitejs/plugin-vue'\n",[994,1197,1198,1200],{"class":996,"line":1136},[994,1199,1140],{"class":1139},[994,1201,1202],{"class":1143}," import uiPro from '@nuxt/ui-pro/vite'\n",[994,1204,1205,1207],{"class":996,"line":1147},[994,1206,1150],{"class":1139},[994,1208,1209],{"class":1003}," import ui from '@nuxt/ui/vite'\n",[994,1211,1212],{"class":996,"line":1156},[994,1213,1214],{"emptyLinePlaceholder":21},"\n",[994,1216,1217],{"class":996,"line":1162},[994,1218,1219],{"class":1127},"export default defineConfig({\n",[994,1221,1223],{"class":996,"line":1222},7,[994,1224,1225],{"class":1127},"  plugins: [\n",[994,1227,1229],{"class":996,"line":1228},8,[994,1230,1231],{"class":1127},"    vue(),\n",[994,1233,1235,1237],{"class":996,"line":1234},9,[994,1236,1140],{"class":1139},[994,1238,1239],{"class":1143},"   uiPro({\n",[994,1241,1243,1245],{"class":996,"line":1242},10,[994,1244,1150],{"class":1139},[994,1246,1247],{"class":1003},"   ui({\n",[994,1249,1251],{"class":996,"line":1250},11,[994,1252,1253],{"class":1127},"      ui: {\n",[994,1255,1257],{"class":996,"line":1256},12,[994,1258,1259],{"class":1127},"        colors: {\n",[994,1261,1263],{"class":996,"line":1262},13,[994,1264,1265],{"class":1127},"          primary: 'green',\n",[994,1267,1269],{"class":996,"line":1268},14,[994,1270,1271],{"class":1127},"          neutral: 'slate'\n",[994,1273,1275],{"class":996,"line":1274},15,[994,1276,1277],{"class":1127},"        }\n",[994,1279,1281],{"class":996,"line":1280},16,[994,1282,1283],{"class":1127},"      }\n",[994,1285,1287],{"class":996,"line":1286},17,[994,1288,1289],{"class":1127},"    })\n",[994,1291,1293],{"class":996,"line":1292},18,[994,1294,1159],{"class":1127},[994,1296,1298],{"class":996,"line":1297},19,[994,1299,1165],{"class":1127},[1097,1301,1302,1445],{},[1100,1303,1304],{"v-slot:nuxt":990},[1103,1305,1306,1321],{},[962,1307,1308],{"start":1136},[965,1309,1310,1311,1314,1315,974,1318,978],{},"Use the ",[934,1312,1313],{},"ui"," key instead of ",[934,1316,1317],{},"uiPro",[934,1319,1320],{},"app.config.ts",[984,1322,1324],{"className":1118,"code":1323,"filename":1320,"language":1120,"meta":990,"style":990},"export default defineAppConfig({\n  ui: {\n    colors: {\n      primary: 'green',\n      neutral: 'slate'\n    },\n+   pageCard: {\n+     slots: {\n+       root: 'rounded-xl',\n+     }\n+   }\n  },\n- uiPro: {\n-   pageCard: {\n-     slots: {\n-       root: 'rounded-xl',\n-     }\n-   }\n- }\n})\n",[934,1325,1326,1331,1336,1341,1346,1351,1356,1363,1370,1377,1384,1391,1396,1403,1409,1415,1421,1427,1433,1440],{"__ignoreMap":990},[994,1327,1328],{"class":996,"line":997},[994,1329,1330],{"class":1127},"export default defineAppConfig({\n",[994,1332,1333],{"class":996,"line":1010},[994,1334,1335],{"class":1127},"  ui: {\n",[994,1337,1338],{"class":996,"line":1136},[994,1339,1340],{"class":1127},"    colors: {\n",[994,1342,1343],{"class":996,"line":1147},[994,1344,1345],{"class":1127},"      primary: 'green',\n",[994,1347,1348],{"class":996,"line":1156},[994,1349,1350],{"class":1127},"      neutral: 'slate'\n",[994,1352,1353],{"class":996,"line":1162},[994,1354,1355],{"class":1127},"    },\n",[994,1357,1358,1360],{"class":996,"line":1222},[994,1359,1150],{"class":1139},[994,1361,1362],{"class":1003},"   pageCard: {\n",[994,1364,1365,1367],{"class":996,"line":1228},[994,1366,1150],{"class":1139},[994,1368,1369],{"class":1003},"     slots: {\n",[994,1371,1372,1374],{"class":996,"line":1234},[994,1373,1150],{"class":1139},[994,1375,1376],{"class":1003},"       root: 'rounded-xl',\n",[994,1378,1379,1381],{"class":996,"line":1242},[994,1380,1150],{"class":1139},[994,1382,1383],{"class":1003},"     }\n",[994,1385,1386,1388],{"class":996,"line":1250},[994,1387,1150],{"class":1139},[994,1389,1390],{"class":1003},"   }\n",[994,1392,1393],{"class":996,"line":1256},[994,1394,1395],{"class":1127},"  },\n",[994,1397,1398,1400],{"class":996,"line":1262},[994,1399,1140],{"class":1139},[994,1401,1402],{"class":1143}," uiPro: {\n",[994,1404,1405,1407],{"class":996,"line":1268},[994,1406,1140],{"class":1139},[994,1408,1362],{"class":1143},[994,1410,1411,1413],{"class":996,"line":1274},[994,1412,1140],{"class":1139},[994,1414,1369],{"class":1143},[994,1416,1417,1419],{"class":996,"line":1280},[994,1418,1140],{"class":1139},[994,1420,1376],{"class":1143},[994,1422,1423,1425],{"class":996,"line":1286},[994,1424,1140],{"class":1139},[994,1426,1383],{"class":1143},[994,1428,1429,1431],{"class":996,"line":1292},[994,1430,1140],{"class":1139},[994,1432,1390],{"class":1143},[994,1434,1435,1437],{"class":996,"line":1297},[994,1436,1140],{"class":1139},[994,1438,1439],{"class":1143}," }\n",[994,1441,1443],{"class":996,"line":1442},20,[994,1444,1165],{"class":1127},[1100,1446,1447],{"v-slot:vue":990},[1103,1448,1449,1459],{},[962,1450,1451],{"start":1136},[965,1452,1310,1453,1314,1455,974,1457,978],{},[934,1454,1313],{},[934,1456,1317],{},[934,1458,1180],{},[984,1460,1462],{"className":1118,"code":1461,"filename":1180,"language":1120,"meta":990,"style":990},"export default defineConfig({\n  plugins: [\n    vue(),\n    ui({\n      ui: {\n        colors: {\n          primary: 'green',\n          neutral: 'slate'\n        },\n+       pageCard: {\n+         slots: {\n+           root: 'rounded-xl',\n+         }\n+       }\n      },\n-     uiPro: {\n-       pageCard: {\n-         slots: {\n-           root: 'rounded-xl',\n-         }\n-       }\n-     }\n    })\n  ]\n})\n",[934,1463,1464,1468,1472,1476,1481,1485,1489,1493,1497,1502,1509,1516,1523,1530,1537,1542,1549,1555,1561,1567,1573,1580,1587,1592,1597],{"__ignoreMap":990},[994,1465,1466],{"class":996,"line":997},[994,1467,1219],{"class":1127},[994,1469,1470],{"class":996,"line":1010},[994,1471,1225],{"class":1127},[994,1473,1474],{"class":996,"line":1136},[994,1475,1231],{"class":1127},[994,1477,1478],{"class":996,"line":1147},[994,1479,1480],{"class":1127},"    ui({\n",[994,1482,1483],{"class":996,"line":1156},[994,1484,1253],{"class":1127},[994,1486,1487],{"class":996,"line":1162},[994,1488,1259],{"class":1127},[994,1490,1491],{"class":996,"line":1222},[994,1492,1265],{"class":1127},[994,1494,1495],{"class":996,"line":1228},[994,1496,1271],{"class":1127},[994,1498,1499],{"class":996,"line":1234},[994,1500,1501],{"class":1127},"        },\n",[994,1503,1504,1506],{"class":996,"line":1242},[994,1505,1150],{"class":1139},[994,1507,1508],{"class":1003},"       pageCard: {\n",[994,1510,1511,1513],{"class":996,"line":1250},[994,1512,1150],{"class":1139},[994,1514,1515],{"class":1003},"         slots: {\n",[994,1517,1518,1520],{"class":996,"line":1256},[994,1519,1150],{"class":1139},[994,1521,1522],{"class":1003},"           root: 'rounded-xl',\n",[994,1524,1525,1527],{"class":996,"line":1262},[994,1526,1150],{"class":1139},[994,1528,1529],{"class":1003},"         }\n",[994,1531,1532,1534],{"class":996,"line":1268},[994,1533,1150],{"class":1139},[994,1535,1536],{"class":1003},"       }\n",[994,1538,1539],{"class":996,"line":1274},[994,1540,1541],{"class":1127},"      },\n",[994,1543,1544,1546],{"class":996,"line":1280},[994,1545,1140],{"class":1139},[994,1547,1548],{"class":1143},"     uiPro: {\n",[994,1550,1551,1553],{"class":996,"line":1286},[994,1552,1140],{"class":1139},[994,1554,1508],{"class":1143},[994,1556,1557,1559],{"class":996,"line":1292},[994,1558,1140],{"class":1139},[994,1560,1515],{"class":1143},[994,1562,1563,1565],{"class":996,"line":1297},[994,1564,1140],{"class":1139},[994,1566,1522],{"class":1143},[994,1568,1569,1571],{"class":996,"line":1442},[994,1570,1140],{"class":1139},[994,1572,1529],{"class":1143},[994,1574,1576,1578],{"class":996,"line":1575},21,[994,1577,1140],{"class":1139},[994,1579,1536],{"class":1143},[994,1581,1583,1585],{"class":996,"line":1582},22,[994,1584,1140],{"class":1139},[994,1586,1383],{"class":1143},[994,1588,1590],{"class":996,"line":1589},23,[994,1591,1289],{"class":1127},[994,1593,1595],{"class":996,"line":1594},24,[994,1596,1159],{"class":1127},[994,1598,1600],{"class":996,"line":1599},25,[994,1601,1165],{"class":1127},[962,1603,1604],{"start":1147},[965,1605,967,1606,971,1608,1610],{},[934,1607,970],{},[934,1609,936],{}," in your CSS:",[1097,1612,1613,1684],{},[1100,1614,1615],{"v-slot:nuxt":990},[1103,1616,1617,1642],{},[984,1618,1621],{"className":1118,"code":1619,"filename":1620,"language":1120,"meta":990,"style":990},"@import \"tailwindcss\";\n- @import \"@nuxt/ui-pro\";\n+ @import \"@nuxt/ui\";\n","app/assets/css/main.css",[934,1622,1623,1628,1635],{"__ignoreMap":990},[994,1624,1625],{"class":996,"line":997},[994,1626,1627],{"class":1127},"@import \"tailwindcss\";\n",[994,1629,1630,1632],{"class":996,"line":1010},[994,1631,1140],{"class":1139},[994,1633,1634],{"class":1143}," @import \"@nuxt/ui-pro\";\n",[994,1636,1637,1639],{"class":996,"line":1136},[994,1638,1150],{"class":1139},[994,1640,1641],{"class":1003}," @import \"@nuxt/ui\";\n",[1643,1644,1645,1652],"warning",{},[925,1646,1647,1648,1651],{},"If you are upgrading to Nuxt 4 at the same time as Nuxt UI v4, make sure to update the ",[934,1649,1650],{},"@source"," directive to match the new directory structure.",[984,1653,1655],{"className":1118,"code":1654,"filename":1620,"language":1120,"meta":990,"style":990},"@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n- @source \"../../content/**/*\";\n+ @source \"../../../content/**/*\";\n",[934,1656,1657,1661,1666,1670,1677],{"__ignoreMap":990},[994,1658,1659],{"class":996,"line":997},[994,1660,1627],{"class":1127},[994,1662,1663],{"class":996,"line":1010},[994,1664,1665],{"class":1127},"@import \"@nuxt/ui\";\n",[994,1667,1668],{"class":996,"line":1136},[994,1669,1214],{"emptyLinePlaceholder":21},[994,1671,1672,1674],{"class":996,"line":1147},[994,1673,1140],{"class":1139},[994,1675,1676],{"class":1143}," @source \"../../content/**/*\";\n",[994,1678,1679,1681],{"class":996,"line":1156},[994,1680,1150],{"class":1139},[994,1682,1683],{"class":1003}," @source \"../../../content/**/*\";\n",[1100,1685,1686],{"v-slot:vue":990},[1103,1687,1688],{},[984,1689,1691],{"className":1118,"code":1619,"filename":1690,"language":1120,"meta":990,"style":990},"src/assets/css/main.css",[934,1692,1693,1697,1703],{"__ignoreMap":990},[994,1694,1695],{"class":996,"line":997},[994,1696,1627],{"class":1127},[994,1698,1699,1701],{"class":996,"line":1010},[994,1700,1140],{"class":1139},[994,1702,1634],{"class":1143},[994,1704,1705,1707],{"class":996,"line":1136},[994,1706,1150],{"class":1139},[994,1708,1641],{"class":1003},[962,1710,1711],{"start":1156},[965,1712,967,1713,971,1715,1717],{},[934,1714,970],{},[934,1716,936],{}," in your imports:",[984,1719,1721],{"className":1118,"code":1720,"language":1120,"meta":990,"style":990},"- import type { BannerProps } from '@nuxt/ui-pro'\n+ import type { BannerProps } from '@nuxt/ui'\n",[934,1722,1723,1730],{"__ignoreMap":990},[994,1724,1725,1727],{"class":996,"line":997},[994,1726,1140],{"class":1139},[994,1728,1729],{"class":1143}," import type { BannerProps } from '@nuxt/ui-pro'\n",[994,1731,1732,1734],{"class":996,"line":1010},[994,1733,1150],{"class":1139},[994,1735,1736],{"class":1003}," import type { BannerProps } from '@nuxt/ui'\n",[957,1738,1740],{"id":1739},"from-nuxt-ui","From Nuxt UI",[962,1742,1743],{},[965,1744,1745],{},"When upgrading from Nuxt UI v3, you simply need to update to v4:",[980,1747,1748,1763,1778,1793],{"sync":982},[984,1749,1751],{"className":986,"code":1750,"filename":988,"language":989,"meta":990,"style":990},"pnpm add @nuxt/ui tailwindcss\n",[934,1752,1753],{"__ignoreMap":990},[994,1754,1755,1757,1759,1761],{"class":996,"line":997},[994,1756,988],{"class":1000},[994,1758,1015],{"class":1003},[994,1760,1018],{"class":1003},[994,1762,1021],{"class":1003},[984,1764,1766],{"className":986,"code":1765,"filename":1025,"language":989,"meta":990,"style":990},"yarn add @nuxt/ui tailwindcss\n",[934,1767,1768],{"__ignoreMap":990},[994,1769,1770,1772,1774,1776],{"class":996,"line":997},[994,1771,1025],{"class":1000},[994,1773,1015],{"class":1003},[994,1775,1018],{"class":1003},[994,1777,1021],{"class":1003},[984,1779,1781],{"className":986,"code":1780,"filename":1049,"language":989,"meta":990,"style":990},"npm install @nuxt/ui tailwindcss\n",[934,1782,1783],{"__ignoreMap":990},[994,1784,1785,1787,1789,1791],{"class":996,"line":997},[994,1786,1049],{"class":1000},[994,1788,1067],{"class":1003},[994,1790,1018],{"class":1003},[994,1792,1021],{"class":1003},[984,1794,1796],{"className":986,"code":1795,"filename":1075,"language":989,"meta":990,"style":990},"bun add @nuxt/ui tailwindcss\n",[934,1797,1798],{"__ignoreMap":990},[994,1799,1800,1802,1804,1806],{"class":996,"line":997},[994,1801,1075],{"class":1000},[994,1803,1015],{"class":1003},[994,1805,1018],{"class":1003},[994,1807,1021],{"class":1003},[952,1809,1811],{"id":1810},"changes-from-v3","Changes from v3",[925,1813,1814],{},"After upgrading to Nuxt UI v4, please note the following important changes:",[957,1816,1818],{"id":1817},"renamed-buttongroup","Renamed ButtonGroup",[925,1820,1821,1822,1825,1826,978],{},"The ",[934,1823,1824],{},"ButtonGroup"," component has been renamed to ",[1827,1828,1829],"a",{"href":477},[934,1830,476],{},[984,1832,1834],{"className":1118,"code":1833,"language":1120,"meta":990,"style":990},"\u003Ctemplate>\n- \u003CUButtonGroup>\n+ \u003CUFieldGroup>\n    \u003CUButton label=\"Button\" />\n    \u003CUButton icon=\"i-lucide-chevron-down\" />\n+ \u003C/UFieldGroup>\n- \u003C/UButtonGroup>\n\u003C/template>\n",[934,1835,1836,1841,1848,1855,1860,1865,1872,1879],{"__ignoreMap":990},[994,1837,1838],{"class":996,"line":997},[994,1839,1840],{"class":1127},"\u003Ctemplate>\n",[994,1842,1843,1845],{"class":996,"line":1010},[994,1844,1140],{"class":1139},[994,1846,1847],{"class":1143}," \u003CUButtonGroup>\n",[994,1849,1850,1852],{"class":996,"line":1136},[994,1851,1150],{"class":1139},[994,1853,1854],{"class":1003}," \u003CUFieldGroup>\n",[994,1856,1857],{"class":996,"line":1147},[994,1858,1859],{"class":1127},"    \u003CUButton label=\"Button\" />\n",[994,1861,1862],{"class":996,"line":1156},[994,1863,1864],{"class":1127},"    \u003CUButton icon=\"i-lucide-chevron-down\" />\n",[994,1866,1867,1869],{"class":996,"line":1162},[994,1868,1150],{"class":1139},[994,1870,1871],{"class":1003}," \u003C/UFieldGroup>\n",[994,1873,1874,1876],{"class":996,"line":1222},[994,1875,1140],{"class":1139},[994,1877,1878],{"class":1143}," \u003C/UButtonGroup>\n",[994,1880,1881],{"class":996,"line":1228},[994,1882,1883],{"class":1127},"\u003C/template>\n",[957,1885,1887],{"id":1886},"renamed-pagemarquee","Renamed PageMarquee",[925,1889,1821,1890,1825,1893,978],{},[934,1891,1892],{},"PageMarquee",[1827,1894,1895],{"href":568},[934,1896,567],{},[984,1898,1900],{"className":1118,"code":1899,"language":1120,"meta":990,"style":990},"\u003Ctemplate>\n- \u003CUPageMarquee :items=\"items\" />\n+ \u003CUMarquee :items=\"items\" />\n\u003C/template>\n",[934,1901,1902,1906,1913,1920],{"__ignoreMap":990},[994,1903,1904],{"class":996,"line":997},[994,1905,1840],{"class":1127},[994,1907,1908,1910],{"class":996,"line":1010},[994,1909,1140],{"class":1139},[994,1911,1912],{"class":1143}," \u003CUPageMarquee :items=\"items\" />\n",[994,1914,1915,1917],{"class":996,"line":1136},[994,1916,1150],{"class":1139},[994,1918,1919],{"class":1003}," \u003CUMarquee :items=\"items\" />\n",[994,1921,1922],{"class":996,"line":1147},[994,1923,1883],{"class":1127},[957,1925,1927],{"id":1926},"removed-pageaccordion","Removed PageAccordion",[925,1929,1821,1930,1933,1934,978],{},[934,1931,1932],{},"PageAccordion"," component has been removed in favor of ",[1827,1935,1936],{"href":164},[934,1937,163],{},[984,1939,1941],{"className":1118,"code":1940,"language":1120,"meta":990,"style":990},"\u003Ctemplate>\n- \u003CUPageAccordion\n+ \u003CUAccordion\n    :items=\"items\"\n+   :unmount-on-hide=\"false\"\n+   :ui=\"{ trigger: 'text-base', body: 'text-base text-muted' }\"\n  />\n\u003C/template>\n",[934,1942,1943,1947,1954,1961,1966,1973,1980,1985],{"__ignoreMap":990},[994,1944,1945],{"class":996,"line":997},[994,1946,1840],{"class":1127},[994,1948,1949,1951],{"class":996,"line":1010},[994,1950,1140],{"class":1139},[994,1952,1953],{"class":1143}," \u003CUPageAccordion\n",[994,1955,1956,1958],{"class":996,"line":1136},[994,1957,1150],{"class":1139},[994,1959,1960],{"class":1003}," \u003CUAccordion\n",[994,1962,1963],{"class":996,"line":1147},[994,1964,1965],{"class":1127},"    :items=\"items\"\n",[994,1967,1968,1970],{"class":996,"line":1156},[994,1969,1150],{"class":1139},[994,1971,1972],{"class":1003},"   :unmount-on-hide=\"false\"\n",[994,1974,1975,1977],{"class":996,"line":1162},[994,1976,1150],{"class":1139},[994,1978,1979],{"class":1003},"   :ui=\"{ trigger: 'text-base', body: 'text-base text-muted' }\"\n",[994,1981,1982],{"class":996,"line":1222},[994,1983,1984],{"class":1127},"  />\n",[994,1986,1987],{"class":996,"line":1228},[994,1988,1883],{"class":1127},[939,1990,1991],{},[925,1992,1821,1993,1995,1996,1999,2000,2003,2004,2006],{},[934,1994,1932],{}," component was a wrapper that set ",[934,1997,1998],{},"unmount-on-hide"," to ",[934,2001,2002],{},"false"," and customized the ",[934,2005,1313],{}," prop.",[957,2008,2010],{"id":2009},"renamed-model-modifiers","Renamed model modifiers",[925,2012,1821,2013,2016,2017,2021,2022,2026,2027,2031],{},[934,2014,2015],{},"modelModifiers"," shape used by ",[1827,2018,2019],{"href":517},[934,2020,516],{},", ",[1827,2023,2024],{"href":532},[934,2025,531],{}," and ",[1827,2028,2029],{"href":753},[934,2030,752],{}," has changed in v4:",[962,2033,2034,2048],{},[965,2035,1821,2036,2039,2040,2043,2044,2047],{},[934,2037,2038],{},"nullify"," modifier was renamed to ",[934,2041,2042],{},"nullable"," (it converts empty/blank values to ",[934,2045,2046],{},"null",").",[965,2049,2050,2051,2054,2055,2047],{},"A new ",[934,2052,2053],{},"optional"," modifier was added (it converts empty/blank values to ",[934,2056,2057],{},"undefined",[984,2059,2061],{"className":1118,"code":2060,"language":1120,"meta":990,"style":990},"- \u003CUInput v-model.nullify=\"value\" />\n+ \u003CUInput v-model.nullable=\"value\" />\n",[934,2062,2063,2070],{"__ignoreMap":990},[994,2064,2065,2067],{"class":996,"line":997},[994,2066,1140],{"class":1139},[994,2068,2069],{"class":1143}," \u003CUInput v-model.nullify=\"value\" />\n",[994,2071,2072,2074],{"class":996,"line":1010},[994,2073,1150],{"class":1139},[994,2075,2076],{"class":1003}," \u003CUInput v-model.nullable=\"value\" />\n",[984,2078,2080],{"className":1118,"code":2079,"language":1120,"meta":990,"style":990},"- \u003CUTextarea v-model=\"value\" :model-modifiers=\"{ nullify: true }\" />\n+ \u003CUTextarea v-model=\"value\" :model-modifiers=\"{ nullable: true }\" />\n",[934,2081,2082,2089],{"__ignoreMap":990},[994,2083,2084,2086],{"class":996,"line":997},[994,2085,1140],{"class":1139},[994,2087,2088],{"class":1143}," \u003CUTextarea v-model=\"value\" :model-modifiers=\"{ nullify: true }\" />\n",[994,2090,2091,2093],{"class":996,"line":1010},[994,2092,1150],{"class":1139},[994,2094,2095],{"class":1003}," \u003CUTextarea v-model=\"value\" :model-modifiers=\"{ nullable: true }\" />\n",[925,2097,2098,2099,2101,2102,2104,2105,2107,2108,2110],{},"Use ",[934,2100,2042],{}," when you want empty values as ",[934,2103,2046],{},", and ",[934,2106,2053],{}," when you prefer ",[934,2109,2057],{}," for absent values.",[957,2112,2114],{"id":2113},"changes-to-form-component","Changes to Form component",[925,2116,1821,2117,2119],{},[934,2118,496],{}," component has been improved in v4 with better state management and nested form handling. Here are the key changes you need to be aware of:",[962,2121,2122,2136,2146],{},[965,2123,2124,2125,2128,2129,2135],{},"Schema ",[929,2126,2127],{},"transformations will only"," be applied to the ",[929,2130,2131,2134],{},[934,2132,2133],{},"@submit"," data"," and will no longer mutate the form's state. This provides better predictability and prevents unexpected state mutations.",[965,2137,2138,2141,2142,2145],{},[929,2139,2140],{},"Nested forms must be enabled explicitly"," using the ",[934,2143,2144],{},"nested"," prop. This makes the component behavior more explicit and prevents accidental nested form creation.",[965,2147,2148,2154,2155,2158],{},[929,2149,2150,2151],{},"Nested forms should now provide a ",[934,2152,2153],{},"name"," prop (similar to ",[934,2156,2157],{},"UFormField",") and will automatically inherit their state from their parent form.",[984,2160,2162],{"className":1118,"code":2161,"language":1120,"meta":990,"style":990},"\u003Ctemplate>\n  \u003CUForm :state=\"state\" :schema=\"schema\" @submit=\"onSubmit\">\n    \u003CUFormField label=\"Customer\" name=\"customer\">\n      \u003CUInput v-model=\"state.customer\" placeholder=\"Wonka Industries\" />\n    \u003C/UFormField>\n\n    \u003Cdiv v-for=\"(item, index) in state.items\" :key=\"index\">\n      \u003CUForm\n-       :state=\"item\"\n+       :name=\"`items.${index}`\"\n        :schema=\"itemSchema\"\n+       nested\n      >\n        \u003CUFormField :label=\"!index ? 'Description' : undefined\" name=\"description\">\n          \u003CUInput v-model=\"item.description\" />\n        \u003C/UFormField>\n        \u003CUFormField :label=\"!index ? 'Price' : undefined\" name=\"price\">\n          \u003CUInput v-model=\"item.price\" type=\"number\" />\n        \u003C/UFormField>\n      \u003C/UForm>\n    \u003C/div>\n  \u003C/UForm>\n\u003C/template>\n",[934,2163,2164,2168,2173,2178,2183,2188,2192,2197,2202,2209,2216,2221,2228,2233,2238,2243,2248,2253,2258,2262,2267,2272,2277],{"__ignoreMap":990},[994,2165,2166],{"class":996,"line":997},[994,2167,1840],{"class":1127},[994,2169,2170],{"class":996,"line":1010},[994,2171,2172],{"class":1127},"  \u003CUForm :state=\"state\" :schema=\"schema\" @submit=\"onSubmit\">\n",[994,2174,2175],{"class":996,"line":1136},[994,2176,2177],{"class":1127},"    \u003CUFormField label=\"Customer\" name=\"customer\">\n",[994,2179,2180],{"class":996,"line":1147},[994,2181,2182],{"class":1127},"      \u003CUInput v-model=\"state.customer\" placeholder=\"Wonka Industries\" />\n",[994,2184,2185],{"class":996,"line":1156},[994,2186,2187],{"class":1127},"    \u003C/UFormField>\n",[994,2189,2190],{"class":996,"line":1162},[994,2191,1214],{"emptyLinePlaceholder":21},[994,2193,2194],{"class":996,"line":1222},[994,2195,2196],{"class":1127},"    \u003Cdiv v-for=\"(item, index) in state.items\" :key=\"index\">\n",[994,2198,2199],{"class":996,"line":1228},[994,2200,2201],{"class":1127},"      \u003CUForm\n",[994,2203,2204,2206],{"class":996,"line":1234},[994,2205,1140],{"class":1139},[994,2207,2208],{"class":1143},"       :state=\"item\"\n",[994,2210,2211,2213],{"class":996,"line":1242},[994,2212,1150],{"class":1139},[994,2214,2215],{"class":1003},"       :name=\"`items.${index}`\"\n",[994,2217,2218],{"class":996,"line":1250},[994,2219,2220],{"class":1127},"        :schema=\"itemSchema\"\n",[994,2222,2223,2225],{"class":996,"line":1256},[994,2224,1150],{"class":1139},[994,2226,2227],{"class":1003},"       nested\n",[994,2229,2230],{"class":996,"line":1262},[994,2231,2232],{"class":1127},"      >\n",[994,2234,2235],{"class":996,"line":1268},[994,2236,2237],{"class":1127},"        \u003CUFormField :label=\"!index ? 'Description' : undefined\" name=\"description\">\n",[994,2239,2240],{"class":996,"line":1274},[994,2241,2242],{"class":1127},"          \u003CUInput v-model=\"item.description\" />\n",[994,2244,2245],{"class":996,"line":1280},[994,2246,2247],{"class":1127},"        \u003C/UFormField>\n",[994,2249,2250],{"class":996,"line":1286},[994,2251,2252],{"class":1127},"        \u003CUFormField :label=\"!index ? 'Price' : undefined\" name=\"price\">\n",[994,2254,2255],{"class":996,"line":1292},[994,2256,2257],{"class":1127},"          \u003CUInput v-model=\"item.price\" type=\"number\" />\n",[994,2259,2260],{"class":996,"line":1297},[994,2261,2247],{"class":1127},[994,2263,2264],{"class":996,"line":1442},[994,2265,2266],{"class":1127},"      \u003C/UForm>\n",[994,2268,2269],{"class":996,"line":1575},[994,2270,2271],{"class":1127},"    \u003C/div>\n",[994,2273,2274],{"class":996,"line":1582},[994,2275,2276],{"class":1127},"  \u003C/UForm>\n",[994,2278,2279],{"class":996,"line":1589},[994,2280,1883],{"class":1127},[957,2282,2284],{"id":2283},"removed-deprecated-utilities","Removed deprecated utilities",[925,2286,2287,2288,2291,2292,2295],{},"Some ",[929,2289,2290],{},"Nuxt Content utilities"," that were previously available in Nuxt UI Pro have been ",[929,2293,2294],{},"removed"," in v4:",[2297,2298,2299,2304],"ul",{},[965,2300,2301],{},[934,2302,2303],{},"findPageBreadcrumb",[965,2305,2306],{},[934,2307,2308],{},"findPageHeadline",[925,2310,2311],{},"These are now fully provided by Nuxt Content. Make sure to update your imports and usage accordingly.",[984,2313,2315],{"className":1118,"code":2314,"language":1120,"meta":990,"style":990},"- import { findPageHeadline } from '@nuxt/ui-pro/utils/content'\n+ import { findPageHeadline } from '@nuxt/content/utils'\n\n- import { findPageBreadcrumb } from '@nuxt/ui-pro/utils/content'\n+ import { findPageBreadcrumb } from '@nuxt/content/utils'\n",[934,2316,2317,2324,2331,2335,2342],{"__ignoreMap":990},[994,2318,2319,2321],{"class":996,"line":997},[994,2320,1140],{"class":1139},[994,2322,2323],{"class":1143}," import { findPageHeadline } from '@nuxt/ui-pro/utils/content'\n",[994,2325,2326,2328],{"class":996,"line":1010},[994,2327,1150],{"class":1139},[994,2329,2330],{"class":1003}," import { findPageHeadline } from '@nuxt/content/utils'\n",[994,2332,2333],{"class":996,"line":1136},[994,2334,1214],{"emptyLinePlaceholder":21},[994,2336,2337,2339],{"class":996,"line":1147},[994,2338,1140],{"class":1139},[994,2340,2341],{"class":1143}," import { findPageBreadcrumb } from '@nuxt/ui-pro/utils/content'\n",[994,2343,2344,2346],{"class":996,"line":1156},[994,2345,1150],{"class":1139},[994,2347,2348],{"class":1003}," import { findPageBreadcrumb } from '@nuxt/content/utils'\n",[957,2350,2352],{"id":2351},"ai-sdk-v5-migration-optional","AI SDK v5 migration (optional)",[925,2354,2355,2356,2021,2358,2021,2360,2021,2362,2021,2364,2366],{},"This section only applies if you're using the AI SDK and chat components (",[934,2357,253],{},[934,2359,259],{},[934,2361,269],{},[934,2363,274],{},[934,2365,264],{},"). If you're not using AI features, you can skip this section.",[962,2368,2369],{},[965,2370,2371,2372,2026,2375,2378,2379,978],{},"Update ",[934,2373,2374],{},"@ai-sdk/vue",[934,2376,2377],{},"ai"," dependencies in your ",[934,2380,977],{},[984,2382,2384],{"className":1118,"code":2383,"language":1120,"meta":990,"style":990},"{\n  \"dependencies\": {\n-   \"@ai-sdk/vue\": \"^1.2.x\",\n+   \"@ai-sdk/vue\": \"^2.0.x\",\n-   \"ai\": \"^4.3.x\"\n+   \"ai\": \"^5.0.x\"\n  }\n}\n",[934,2385,2386,2391,2396,2403,2410,2417,2424,2429],{"__ignoreMap":990},[994,2387,2388],{"class":996,"line":997},[994,2389,2390],{"class":1127},"{\n",[994,2392,2393],{"class":996,"line":1010},[994,2394,2395],{"class":1127},"  \"dependencies\": {\n",[994,2397,2398,2400],{"class":996,"line":1136},[994,2399,1140],{"class":1139},[994,2401,2402],{"class":1143},"   \"@ai-sdk/vue\": \"^1.2.x\",\n",[994,2404,2405,2407],{"class":996,"line":1147},[994,2406,1150],{"class":1139},[994,2408,2409],{"class":1003},"   \"@ai-sdk/vue\": \"^2.0.x\",\n",[994,2411,2412,2414],{"class":996,"line":1156},[994,2413,1140],{"class":1139},[994,2415,2416],{"class":1143},"   \"ai\": \"^4.3.x\"\n",[994,2418,2419,2421],{"class":996,"line":1162},[994,2420,1150],{"class":1139},[994,2422,2423],{"class":1003},"   \"ai\": \"^5.0.x\"\n",[994,2425,2426],{"class":996,"line":1222},[994,2427,2428],{"class":1127},"  }\n",[994,2430,2431],{"class":996,"line":1228},[994,2432,2433],{"class":1127},"}\n",[962,2435,2436],{"start":1010},[965,2437,2438,2441,2442,2445],{},[934,2439,2440],{},"useChat"," composable has been replaced with the new ",[934,2443,2444],{},"Chat"," class:",[984,2447,2449],{"className":1118,"code":2448,"language":1120,"meta":990,"style":990},"\u003Cscript setup lang=\"ts\">\n- import { useChat } from '@ai-sdk/vue'\n+ import { Chat } from '@ai-sdk/vue'\n+ import type { UIMessage } from 'ai'\n\n- const { messages, input, handleSubmit, status, error, reload, setMessages } = useChat()\n+ const messages: UIMessage[] = []\n+ const input = ref('')\n+\n+ const chat = new Chat({\n+   messages\n+ })\n+\n+ function handleSubmit() {\n+   chat.sendMessage({ text: input.value })\n+   input.value = ''\n+ }\n\u003C/script>\n",[934,2450,2451,2456,2463,2470,2477,2481,2488,2495,2502,2507,2514,2521,2528,2532,2539,2546,2553,2559],{"__ignoreMap":990},[994,2452,2453],{"class":996,"line":997},[994,2454,2455],{"class":1127},"\u003Cscript setup lang=\"ts\">\n",[994,2457,2458,2460],{"class":996,"line":1010},[994,2459,1140],{"class":1139},[994,2461,2462],{"class":1143}," import { useChat } from '@ai-sdk/vue'\n",[994,2464,2465,2467],{"class":996,"line":1136},[994,2466,1150],{"class":1139},[994,2468,2469],{"class":1003}," import { Chat } from '@ai-sdk/vue'\n",[994,2471,2472,2474],{"class":996,"line":1147},[994,2473,1150],{"class":1139},[994,2475,2476],{"class":1003}," import type { UIMessage } from 'ai'\n",[994,2478,2479],{"class":996,"line":1156},[994,2480,1214],{"emptyLinePlaceholder":21},[994,2482,2483,2485],{"class":996,"line":1162},[994,2484,1140],{"class":1139},[994,2486,2487],{"class":1143}," const { messages, input, handleSubmit, status, error, reload, setMessages } = useChat()\n",[994,2489,2490,2492],{"class":996,"line":1222},[994,2491,1150],{"class":1139},[994,2493,2494],{"class":1003}," const messages: UIMessage[] = []\n",[994,2496,2497,2499],{"class":996,"line":1228},[994,2498,1150],{"class":1139},[994,2500,2501],{"class":1003}," const input = ref('')\n",[994,2503,2504],{"class":996,"line":1234},[994,2505,2506],{"class":1139},"+\n",[994,2508,2509,2511],{"class":996,"line":1242},[994,2510,1150],{"class":1139},[994,2512,2513],{"class":1003}," const chat = new Chat({\n",[994,2515,2516,2518],{"class":996,"line":1250},[994,2517,1150],{"class":1139},[994,2519,2520],{"class":1003},"   messages\n",[994,2522,2523,2525],{"class":996,"line":1256},[994,2524,1150],{"class":1139},[994,2526,2527],{"class":1003}," })\n",[994,2529,2530],{"class":996,"line":1262},[994,2531,2506],{"class":1139},[994,2533,2534,2536],{"class":996,"line":1268},[994,2535,1150],{"class":1139},[994,2537,2538],{"class":1003}," function handleSubmit() {\n",[994,2540,2541,2543],{"class":996,"line":1274},[994,2542,1150],{"class":1139},[994,2544,2545],{"class":1003},"   chat.sendMessage({ text: input.value })\n",[994,2547,2548,2550],{"class":996,"line":1280},[994,2549,1150],{"class":1139},[994,2551,2552],{"class":1003},"   input.value = ''\n",[994,2554,2555,2557],{"class":996,"line":1286},[994,2556,1150],{"class":1139},[994,2558,1439],{"class":1003},[994,2560,2561],{"class":996,"line":1292},[994,2562,2563],{"class":1127},"\u003C/script>\n",[962,2565,2566],{"start":1136},[965,2567,2568,2569,2572,2573,978],{},"Messages now use ",[934,2570,2571],{},"parts"," instead of ",[934,2574,344],{},[984,2576,2578],{"className":1118,"code":2577,"language":1120,"meta":990,"style":990},"// When manually creating messages\n- setMessages([{\n+ messages.push({\n  id: '1',\n  role: 'user',\n- content: 'Hello world'\n+ parts: [{ type: 'text', text: 'Hello world' }]\n- }])\n+ })\n\n// In templates\n\u003Ctemplate>\n- \u003CUChatMessage :content=\"message.content\" />\n+ \u003CUChatMessage :parts=\"message.parts\" />\n\u003C/template>\n",[934,2579,2580,2585,2592,2599,2604,2609,2616,2623,2630,2636,2640,2645,2649,2656,2663],{"__ignoreMap":990},[994,2581,2582],{"class":996,"line":997},[994,2583,2584],{"class":1127},"// When manually creating messages\n",[994,2586,2587,2589],{"class":996,"line":1010},[994,2588,1140],{"class":1139},[994,2590,2591],{"class":1143}," setMessages([{\n",[994,2593,2594,2596],{"class":996,"line":1136},[994,2595,1150],{"class":1139},[994,2597,2598],{"class":1003}," messages.push({\n",[994,2600,2601],{"class":996,"line":1147},[994,2602,2603],{"class":1127},"  id: '1',\n",[994,2605,2606],{"class":996,"line":1156},[994,2607,2608],{"class":1127},"  role: 'user',\n",[994,2610,2611,2613],{"class":996,"line":1162},[994,2612,1140],{"class":1139},[994,2614,2615],{"class":1143}," content: 'Hello world'\n",[994,2617,2618,2620],{"class":996,"line":1222},[994,2619,1150],{"class":1139},[994,2621,2622],{"class":1003}," parts: [{ type: 'text', text: 'Hello world' }]\n",[994,2624,2625,2627],{"class":996,"line":1228},[994,2626,1140],{"class":1139},[994,2628,2629],{"class":1143}," }])\n",[994,2631,2632,2634],{"class":996,"line":1234},[994,2633,1150],{"class":1139},[994,2635,2527],{"class":1003},[994,2637,2638],{"class":996,"line":1242},[994,2639,1214],{"emptyLinePlaceholder":21},[994,2641,2642],{"class":996,"line":1250},[994,2643,2644],{"class":1127},"// In templates\n",[994,2646,2647],{"class":996,"line":1256},[994,2648,1840],{"class":1127},[994,2650,2651,2653],{"class":996,"line":1262},[994,2652,1140],{"class":1139},[994,2654,2655],{"class":1143}," \u003CUChatMessage :content=\"message.content\" />\n",[994,2657,2658,2660],{"class":996,"line":1268},[994,2659,1150],{"class":1139},[994,2661,2662],{"class":1003}," \u003CUChatMessage :parts=\"message.parts\" />\n",[994,2664,2665],{"class":996,"line":1274},[994,2666,1883],{"class":1127},[962,2668,2669],{"start":1147},[965,2670,2671],{},"Some methods have been renamed:",[984,2673,2675],{"className":1118,"code":2674,"language":1120,"meta":990,"style":990},"// Regenerate the last message\n- reload()\n+ chat.regenerate()\n\n// Access chat state\n- :messages=\"messages\"\n- :status=\"status\"\n+ :messages=\"chat.messages\"\n+ :status=\"chat.status\"\n",[934,2676,2677,2682,2689,2696,2700,2705,2712,2719,2726],{"__ignoreMap":990},[994,2678,2679],{"class":996,"line":997},[994,2680,2681],{"class":1127},"// Regenerate the last message\n",[994,2683,2684,2686],{"class":996,"line":1010},[994,2685,1140],{"class":1139},[994,2687,2688],{"class":1143}," reload()\n",[994,2690,2691,2693],{"class":996,"line":1136},[994,2692,1150],{"class":1139},[994,2694,2695],{"class":1003}," chat.regenerate()\n",[994,2697,2698],{"class":996,"line":1147},[994,2699,1214],{"emptyLinePlaceholder":21},[994,2701,2702],{"class":996,"line":1156},[994,2703,2704],{"class":1127},"// Access chat state\n",[994,2706,2707,2709],{"class":996,"line":1162},[994,2708,1140],{"class":1139},[994,2710,2711],{"class":1143}," :messages=\"messages\"\n",[994,2713,2714,2716],{"class":996,"line":1222},[994,2715,1140],{"class":1139},[994,2717,2718],{"class":1143}," :status=\"status\"\n",[994,2720,2721,2723],{"class":996,"line":1228},[994,2722,1150],{"class":1139},[994,2724,2725],{"class":1003}," :messages=\"chat.messages\"\n",[994,2727,2728,2730],{"class":996,"line":1234},[994,2729,1150],{"class":1139},[994,2731,2732],{"class":1003}," :status=\"chat.status\"\n",[962,2734,2735],{"start":1156},[965,2736,2737,2738,2741],{},"New ",[934,2739,2740],{},"getTextFromMessage"," utility to extract text from AI SDK v5 message parts:",[984,2743,2746],{"className":2744,"code":2745,"language":34,"meta":990,"style":990},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUChatMessages :messages=\"chat.messages\" :status=\"chat.status\">\n    \u003Ctemplate #content=\"{ message }\">\n      \u003Ctemplate v-for=\"(part, index) in message.parts\" :key=\"`${message.id}-${part.type}-${index}`\">\n        \u003CMDC v-if=\"part.type === 'text' && message.role === 'assistant'\" :value=\"part.text\" :cache-key=\"`${message.id}-${index}`\" class=\"*:first:mt-0 *:last:mb-0\" />\n        \u003Cp v-else-if=\"part.type === 'text' && message.role === 'user'\" class=\"whitespace-pre-wrap\">{{ part.text }}\u003C/p>\n      \u003C/template>\n    \u003C/template>\n  \u003C/UChatMessages>\n\u003C/template>\n",[934,2747,2748,2758,2795,2824,2909,2968,3010,3019,3028,3037],{"__ignoreMap":990},[994,2749,2750,2753,2755],{"class":996,"line":997},[994,2751,2752],{"class":1139},"\u003C",[994,2754,1100],{"class":1143},[994,2756,2757],{"class":1139},">\n",[994,2759,2760,2763,2766,2770,2773,2776,2779,2781,2784,2786,2788,2791,2793],{"class":996,"line":1010},[994,2761,2762],{"class":1139},"  \u003C",[994,2764,2765],{"class":1143},"UChatMessages",[994,2767,2769],{"class":2768},"spNyl"," :messages",[994,2771,2772],{"class":1139},"=",[994,2774,2775],{"class":1139},"\"",[994,2777,2778],{"class":1003},"chat.messages",[994,2780,2775],{"class":1139},[994,2782,2783],{"class":2768}," :status",[994,2785,2772],{"class":1139},[994,2787,2775],{"class":1139},[994,2789,2790],{"class":1003},"chat.status",[994,2792,2775],{"class":1139},[994,2794,2757],{"class":1139},[994,2796,2797,2800,2802,2805,2807,2809,2811,2814,2817,2820,2822],{"class":996,"line":1136},[994,2798,2799],{"class":1139},"    \u003C",[994,2801,1100],{"class":1143},[994,2803,2804],{"class":1139}," #",[994,2806,344],{"class":2768},[994,2808,2772],{"class":1139},[994,2810,2775],{"class":1139},[994,2812,2813],{"class":1139},"{",[994,2815,2816],{"class":1127}," message ",[994,2818,2819],{"class":1139},"}",[994,2821,2775],{"class":1139},[994,2823,2757],{"class":1139},[994,2825,2826,2829,2831,2835,2837,2839,2842,2845,2848,2851,2854,2857,2859,2861,2864,2867,2869,2872,2875,2877,2880,2882,2884,2887,2890,2892,2895,2897,2899,2901,2904,2907],{"class":996,"line":1147},[994,2827,2828],{"class":1139},"      \u003C",[994,2830,1100],{"class":1143},[994,2832,2834],{"class":2833},"s7zQu"," v-for",[994,2836,2772],{"class":1139},[994,2838,2775],{"class":1139},[994,2840,2841],{"class":1127},"(part",[994,2843,2844],{"class":1139},",",[994,2846,2847],{"class":1127}," index) ",[994,2849,2850],{"class":1139},"in",[994,2852,2853],{"class":1127}," message",[994,2855,2856],{"class":1139},".",[994,2858,2571],{"class":1127},[994,2860,2775],{"class":1139},[994,2862,2863],{"class":1139}," :",[994,2865,2866],{"class":2768},"key",[994,2868,2772],{"class":1139},[994,2870,2871],{"class":1139},"\"`${",[994,2873,2874],{"class":1127},"message",[994,2876,2856],{"class":1139},[994,2878,2879],{"class":1127},"id",[994,2881,2819],{"class":1139},[994,2883,1140],{"class":1003},[994,2885,2886],{"class":1139},"${",[994,2888,2889],{"class":1127},"part",[994,2891,2856],{"class":1139},[994,2893,2894],{"class":1127},"type",[994,2896,2819],{"class":1139},[994,2898,1140],{"class":1003},[994,2900,2886],{"class":1139},[994,2902,2903],{"class":1127},"index",[994,2905,2906],{"class":1139},"}`\"",[994,2908,2757],{"class":1139},[994,2910,2911,2914,2917,2920,2922,2924,2927,2929,2932,2934,2936,2939,2941,2944,2946,2948,2951,2953,2956,2958,2960,2963,2965],{"class":996,"line":1156},[994,2912,2913],{"class":1139},"        \u003C",[994,2915,2916],{"class":1143},"MDC",[994,2918,2919],{"class":2768}," v-if",[994,2921,2772],{"class":1139},[994,2923,2775],{"class":1139},[994,2925,2926],{"class":1003},"part.type === 'text' && message.role === 'assistant'",[994,2928,2775],{"class":1139},[994,2930,2931],{"class":2768}," :value",[994,2933,2772],{"class":1139},[994,2935,2775],{"class":1139},[994,2937,2938],{"class":1003},"part.text",[994,2940,2775],{"class":1139},[994,2942,2943],{"class":2768}," :cache-key",[994,2945,2772],{"class":1139},[994,2947,2775],{"class":1139},[994,2949,2950],{"class":1003},"`${message.id}-${index}`",[994,2952,2775],{"class":1139},[994,2954,2955],{"class":2768}," class",[994,2957,2772],{"class":1139},[994,2959,2775],{"class":1139},[994,2961,2962],{"class":1003},"*:first:mt-0 *:last:mb-0",[994,2964,2775],{"class":1139},[994,2966,2967],{"class":1139}," />\n",[994,2969,2970,2972,2974,2977,2979,2981,2984,2986,2988,2990,2992,2995,2997,3000,3003,3006,3008],{"class":996,"line":1162},[994,2971,2913],{"class":1139},[994,2973,925],{"class":1143},[994,2975,2976],{"class":2768}," v-else-if",[994,2978,2772],{"class":1139},[994,2980,2775],{"class":1139},[994,2982,2983],{"class":1003},"part.type === 'text' && message.role === 'user'",[994,2985,2775],{"class":1139},[994,2987,2955],{"class":2768},[994,2989,2772],{"class":1139},[994,2991,2775],{"class":1139},[994,2993,2994],{"class":1003},"whitespace-pre-wrap",[994,2996,2775],{"class":1139},[994,2998,2999],{"class":1139},">",[994,3001,3002],{"class":1127},"{{ part.text }}",[994,3004,3005],{"class":1139},"\u003C/",[994,3007,925],{"class":1143},[994,3009,2757],{"class":1139},[994,3011,3012,3015,3017],{"class":996,"line":1222},[994,3013,3014],{"class":1139},"      \u003C/",[994,3016,1100],{"class":1143},[994,3018,2757],{"class":1139},[994,3020,3021,3024,3026],{"class":996,"line":1228},[994,3022,3023],{"class":1139},"    \u003C/",[994,3025,1100],{"class":1143},[994,3027,2757],{"class":1139},[994,3029,3030,3033,3035],{"class":996,"line":1234},[994,3031,3032],{"class":1139},"  \u003C/",[994,3034,2765],{"class":1143},[994,3036,2757],{"class":1139},[994,3038,3039,3041,3043],{"class":996,"line":1242},[994,3040,3005],{"class":1139},[994,3042,1100],{"class":1143},[994,3044,2757],{"class":1139},[939,3046,3049],{"target":3047,"to":3048},"_blank","https://ai-sdk.dev/docs/migration-guides/migration-guide-5-0",[925,3050,3051,3052,2856],{},"For more details on AI SDK v5 changes, review the ",[929,3053,3054],{},"official AI SDK v5 migration guide",[3056,3057,3059],"tip",{"target":3047,"to":3058},"https://github.com/nuxt/ui/pull/4698",[925,3060,3061,3062,3065],{},"View all changes from AI SDK v4 to v5 ",[929,3063,3064],{},"in the upgrade PR"," for a detailed migration reference.",[3067,3068,3069],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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}",{"title":990,"searchDepth":1010,"depth":1010,"links":3071},[3072,3076],{"id":954,"depth":1010,"text":955,"children":3073},[3074,3075],{"id":959,"depth":1136,"text":960},{"id":1739,"depth":1136,"text":1740},{"id":1810,"depth":1010,"text":1811,"children":3077},[3078,3079,3080,3081,3082,3083,3084],{"id":1817,"depth":1136,"text":1818},{"id":1886,"depth":1136,"text":1887},{"id":1926,"depth":1136,"text":1927},{"id":2009,"depth":1136,"text":2010},{"id":2113,"depth":1136,"text":2114},{"id":2283,"depth":1136,"text":2284},{"id":2351,"depth":1136,"text":2352},"md",[3087],{"label":3088,"to":3089,"icon":39},"Migration to v3","/docs/getting-started/migration/v3",{},{"title":38,"icon":39},{"title":920,"description":46},"pSib5V1H6OFfZ8Dl5V_8oAANCCuwHcq0e4dvgvePvjA",{"data":3095,"body":3096},{},{"type":3097,"children":3098},"root",[3099],{"type":172,"tag":925,"props":3100,"children":3101},{},[3102],{"type":3103,"value":46},"text",1769700079635]