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