[{"data":1,"prerenderedAt":555},["ShallowReactive",2],{"docs-layout-toc:\u002Fdocs\u002Fgetting-started":3,"docs-header-toc:\u002Fdocs\u002Fgetting-started":251,"$5baMllDfv3":403},{"id":4,"title":5,"body":6,"description":5,"extension":244,"meta":245,"navigation":246,"path":247,"seo":248,"stem":249,"__hash__":250},"content\u002Fdocs\u002Fgetting-started\u002Findex.md","",{"type":7,"value":8,"toc":229},"minimark",[9,14,31,44,49,52,90,94,111,115,119,130,134,142,146,184,188,196,200,203],[10,11,13],"h2",{"id":12},"what-is-air-ui","What is Air UI?",[15,16,17,18,22,23,26,27,30],"p",{},"Air UI is a component and utility framework built on ",[19,20,21],"strong",{},"Vue",", ",[19,24,25],{},"Nuxt",", and ",[19,28,29],{},"Tailwind CSS",". It provides:",[32,33,34,38,41],"ul",{},[35,36,37],"li",{},"A themeable design system based on semantic tokens",[35,39,40],{},"Typed, reusable components and utilities",[35,42,43],{},"Auto-imported composables and helpers in Nuxt",[45,46,48],"h3",{"id":47},"built-on-two-packages","Built on two packages",[15,50,51],{},"Air UI is split into two packages, so you can install only the part you need:",[53,54,56,78],"grid",{":cols":55},"2",[57,58,61],"feature-card",{"description":59,"title":60},"Typed component library, design tokens, themes, and composables for Vue and Nuxt projects.","@imaginario27\u002Fair-ui-ds",[62,63,64],"template",{"v-slot:footer":5},[65,66,69],"card-actions",{"className":67},[68],"justify-end",[70,71],"action-button",{":isExternal":72,"actionType":73,"icon":74,"iconPosition":75,"text":76,"to":77},"true","link","mdi:external-link","left","Visit npm package","https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@imaginario27\u002Fair-ui-ds",[57,79,82],{"description":80,"title":81},"Standalone, type-safe utilities and composables. Built for Nuxt, usable in any JavaScript or TypeScript project.","@imaginario27\u002Fair-ui-utils",[62,83,84],{"v-slot:footer":5},[65,85,87],{"className":86},[68],[70,88],{":isExternal":72,"actionType":73,"icon":74,"iconPosition":75,"text":76,"to":89},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@imaginario27\u002Fair-ui-utils",[10,91,93],{"id":92},"core-technologies","Core technologies",[53,95,96,102,107],{},[57,97],{"description":98,"title":99,"containedIconStyleType":100,"icon":101},"Written with Vue 3’s Composition API and TypeScript, and auto-imported in Nuxt.","Vue + Composition API","flat","mdi:vuejs",[57,103],{"description":104,"title":105,"containedIconStyleType":100,"icon":106},"All components and composables are auto-imported, with no extra configuration.","Nuxt integration","mdi:nuxt",[57,108],{"description":109,"title":29,"containedIconStyleType":100,"icon":110},"Built on Tailwind CSS v4. Components use utility classes, and themes are customized through CSS variables.","mdi:tailwind",[10,112,114],{"id":113},"key-features","Key features",[45,116,118],{"id":117},"design-system","Design System",[32,120,121,124,127],{},[35,122,123],{},"Design tokens for color, spacing, typography, and themes",[35,125,126],{},"Light and dark theme support with semantic variables",[35,128,129],{},"Built-in script to generate theme tokens and CSS variables",[45,131,133],{"id":132},"component-library","Component Library",[32,135,136,139],{},[35,137,138],{},"Vue components with typed props, slots, and emits",[35,140,141],{},"Auto-imported in Nuxt",[45,143,145],{"id":144},"utility-first-architecture","Utility-first architecture",[32,147,148,151,181],{},[35,149,150],{},"Type-safe, reusable helper functions and composables",[35,152,153,154],{},"Common utilities for:",[32,155,156,161,166,171,176],{},[35,157,158],{},[19,159,160],{},"Form validation and filters",[35,162,163],{},[19,164,165],{},"Date and string formatting",[35,167,168],{},[19,169,170],{},"Navigation and page helpers",[35,172,173],{},[19,174,175],{},"PDF generation",[35,177,178],{},[19,179,180],{},"User and password utilities",[35,182,183],{},"Auto-imported in Nuxt, so you only use what you need",[45,185,187],{"id":186},"developer-experience","Developer experience",[32,189,190,193],{},[35,191,192],{},"TypeScript support with IntelliSense",[35,194,195],{},"Tested with Vitest and Vue Test Utils",[10,197,199],{"id":198},"typescript-support","TypeScript support",[15,201,202],{},"Both packages are written in TypeScript:",[32,204,205,211,217,223],{},[35,206,207,210],{},[19,208,209],{},"Props, slots, and events"," are typed",[35,212,213,216],{},[19,214,215],{},"Composables"," return typed reactive values",[35,218,219,222],{},[19,220,221],{},"Design tokens"," are exposed as typed CSS variables",[35,224,225,228],{},[19,226,227],{},"IntelliSense"," works in Nuxt and Vue projects",{"title":5,"searchDepth":230,"depth":231,"links":232},2,3,[233,236,237,243],{"id":12,"depth":230,"text":13,"children":234},[235],{"id":47,"depth":231,"text":48},{"id":92,"depth":230,"text":93},{"id":113,"depth":230,"text":114,"children":238},[239,240,241,242],{"id":117,"depth":231,"text":118},{"id":132,"depth":231,"text":133},{"id":144,"depth":231,"text":145},{"id":186,"depth":231,"text":187},{"id":198,"depth":230,"text":199},"md",{},true,"\u002Fdocs\u002Fgetting-started",{"description":5},"docs\u002Fgetting-started\u002Findex","WmD8ZgUOI3-RPFDVCAn42_4kjiAoUaKbURCd2VGDa-0",{"id":4,"title":5,"body":252,"description":5,"extension":244,"meta":401,"navigation":246,"path":247,"seo":402,"stem":249,"__hash__":250},{"type":7,"value":253,"toc":388},[254,256,264,272,274,276,296,298,306,308,310,318,320,326,328,358,360,366,368,370],[10,255,13],{"id":12},[15,257,17,258,22,260,26,262,30],{},[19,259,21],{},[19,261,25],{},[19,263,29],{},[32,265,266,268,270],{},[35,267,37],{},[35,269,40],{},[35,271,43],{},[45,273,48],{"id":47},[15,275,51],{},[53,277,278,287],{":cols":55},[57,279,280],{"description":59,"title":60},[62,281,282],{"v-slot:footer":5},[65,283,285],{"className":284},[68],[70,286],{":isExternal":72,"actionType":73,"icon":74,"iconPosition":75,"text":76,"to":77},[57,288,289],{"description":80,"title":81},[62,290,291],{"v-slot:footer":5},[65,292,294],{"className":293},[68],[70,295],{":isExternal":72,"actionType":73,"icon":74,"iconPosition":75,"text":76,"to":89},[10,297,93],{"id":92},[53,299,300,302,304],{},[57,301],{"description":98,"title":99,"containedIconStyleType":100,"icon":101},[57,303],{"description":104,"title":105,"containedIconStyleType":100,"icon":106},[57,305],{"description":109,"title":29,"containedIconStyleType":100,"icon":110},[10,307,114],{"id":113},[45,309,118],{"id":117},[32,311,312,314,316],{},[35,313,123],{},[35,315,126],{},[35,317,129],{},[45,319,133],{"id":132},[32,321,322,324],{},[35,323,138],{},[35,325,141],{},[45,327,145],{"id":144},[32,329,330,332,356],{},[35,331,150],{},[35,333,153,334],{},[32,335,336,340,344,348,352],{},[35,337,338],{},[19,339,160],{},[35,341,342],{},[19,343,165],{},[35,345,346],{},[19,347,170],{},[35,349,350],{},[19,351,175],{},[35,353,354],{},[19,355,180],{},[35,357,183],{},[45,359,187],{"id":186},[32,361,362,364],{},[35,363,192],{},[35,365,195],{},[10,367,199],{"id":198},[15,369,202],{},[32,371,372,376,380,384],{},[35,373,374,210],{},[19,375,209],{},[35,377,378,216],{},[19,379,215],{},[35,381,382,222],{},[19,383,221],{},[35,385,386,228],{},[19,387,227],{},{"title":5,"searchDepth":230,"depth":231,"links":389},[390,393,394,400],{"id":12,"depth":230,"text":13,"children":391},[392],{"id":47,"depth":231,"text":48},{"id":92,"depth":230,"text":93},{"id":113,"depth":230,"text":114,"children":395},[396,397,398,399],{"id":117,"depth":231,"text":118},{"id":132,"depth":231,"text":133},{"id":144,"depth":231,"text":145},{"id":186,"depth":231,"text":187},{"id":198,"depth":230,"text":199},{},{"description":5},{"id":4,"title":5,"body":404,"description":5,"extension":244,"meta":553,"navigation":246,"path":247,"seo":554,"stem":249,"__hash__":250},{"type":7,"value":405,"toc":540},[406,408,416,424,426,428,448,450,458,460,462,470,472,478,480,510,512,518,520,522],[10,407,13],{"id":12},[15,409,17,410,22,412,26,414,30],{},[19,411,21],{},[19,413,25],{},[19,415,29],{},[32,417,418,420,422],{},[35,419,37],{},[35,421,40],{},[35,423,43],{},[45,425,48],{"id":47},[15,427,51],{},[53,429,430,439],{":cols":55},[57,431,432],{"description":59,"title":60},[62,433,434],{"v-slot:footer":5},[65,435,437],{"className":436},[68],[70,438],{":isExternal":72,"actionType":73,"icon":74,"iconPosition":75,"text":76,"to":77},[57,440,441],{"description":80,"title":81},[62,442,443],{"v-slot:footer":5},[65,444,446],{"className":445},[68],[70,447],{":isExternal":72,"actionType":73,"icon":74,"iconPosition":75,"text":76,"to":89},[10,449,93],{"id":92},[53,451,452,454,456],{},[57,453],{"description":98,"title":99,"containedIconStyleType":100,"icon":101},[57,455],{"description":104,"title":105,"containedIconStyleType":100,"icon":106},[57,457],{"description":109,"title":29,"containedIconStyleType":100,"icon":110},[10,459,114],{"id":113},[45,461,118],{"id":117},[32,463,464,466,468],{},[35,465,123],{},[35,467,126],{},[35,469,129],{},[45,471,133],{"id":132},[32,473,474,476],{},[35,475,138],{},[35,477,141],{},[45,479,145],{"id":144},[32,481,482,484,508],{},[35,483,150],{},[35,485,153,486],{},[32,487,488,492,496,500,504],{},[35,489,490],{},[19,491,160],{},[35,493,494],{},[19,495,165],{},[35,497,498],{},[19,499,170],{},[35,501,502],{},[19,503,175],{},[35,505,506],{},[19,507,180],{},[35,509,183],{},[45,511,187],{"id":186},[32,513,514,516],{},[35,515,192],{},[35,517,195],{},[10,519,199],{"id":198},[15,521,202],{},[32,523,524,528,532,536],{},[35,525,526,210],{},[19,527,209],{},[35,529,530,216],{},[19,531,215],{},[35,533,534,222],{},[19,535,221],{},[35,537,538,228],{},[19,539,227],{},{"title":5,"searchDepth":230,"depth":231,"links":541},[542,545,546,552],{"id":12,"depth":230,"text":13,"children":543},[544],{"id":47,"depth":231,"text":48},{"id":92,"depth":230,"text":93},{"id":113,"depth":230,"text":114,"children":547},[548,549,550,551],{"id":117,"depth":231,"text":118},{"id":132,"depth":231,"text":133},{"id":144,"depth":231,"text":145},{"id":186,"depth":231,"text":187},{"id":198,"depth":230,"text":199},{},{"description":5},1791731009123]