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