[{"data":1,"prerenderedAt":259},["ShallowReactive",2],{"i-ph:sidebar":3,"components-undefined":8},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"id":9,"title":10,"body":11,"description":21,"extension":252,"meta":253,"navigation":254,"path":255,"seo":256,"stem":257,"__hash__":258},"docs\u002Fdocs\u002Finstallation.md","Installation",{"type":12,"value":13,"toc":248},"minimark",[14,18,22,25,74,77,81,84,110,113,144,147,149,153,156,244],[15,16,10],"h1",{"id":17},"installation",[19,20,21],"p",{},"VUI is a modern Vue 3 component library designed for building beautiful and accessible user interfaces. It provides a comprehensive set of pre-built components with consistent styling, heavy theming support, and TypeScript integration.",[19,23,24],{},"VUI's core functionality is divided into four categories.",[26,27,28,41,52,63],"ul",{},[29,30,31,36],"li",{},[32,33,35],"a",{"href":34},"\u002Fdocs\u002Ftokens","Tokens",[26,37,38],{},[29,39,40],{},"Offers heavy customization of the framework & UI components",[29,42,43,47],{},[32,44,46],{"href":45},"\u002Fdocs\u002Fclasses","Classes",[26,48,49],{},[29,50,51],{},"Quick style change on the fly. VUI should not be used with a CSS framework",[29,53,54,58],{},[32,55,57],{"href":56},"\u002Fdocs\u002Fcomponents","Components",[26,59,60],{},[29,61,62],{},"The UI components",[29,64,65,69],{},[32,66,68],{"href":67},"\u002Fdocs\u002Flibrary","Library",[26,70,71],{},[29,72,73],{},"Collection of useful methods and composables",[75,76],"hr",{},[78,79,10],"h2",{"id":80},"installation-1",[19,82,83],{},"To install VUI into your project, simply run the following command.",[85,86,91],"pre",{"className":87,"code":88,"language":89,"meta":90,"style":90},"language-bash shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","npm i @dolanske\u002Fvui\n","bash","",[92,93,94],"code",{"__ignoreMap":90},[95,96,99,103,107],"span",{"class":97,"line":98},"line",1,[95,100,102],{"class":101},"sRTv0","npm",[95,104,106],{"class":105},"sfmH-"," i",[95,108,109],{"class":105}," @dolanske\u002Fvui\n",[19,111,112],{},"Add this import into your root stylsheet",[85,114,118],{"className":115,"code":116,"language":117,"meta":90,"style":90},"language-css shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","@import url(@dolanske\u002Fvui\u002Fstyle);\n","css",[92,119,120],{"__ignoreMap":90},[95,121,122,126,130,134,137,141],{"class":97,"line":98},[95,123,125],{"class":124},"sP76a","@",[95,127,129],{"class":128},"sKpE2","import",[95,131,133],{"class":132},"sDB6b"," url",[95,135,136],{"class":124},"(",[95,138,140],{"class":139},"sflEz","@dolanske\u002Fvui\u002Fstyle",[95,142,143],{"class":124},");\n",[19,145,146],{},"If it does not work, sometimes it requires you to add it to the main entry js\u002Fts file.",[75,148],{},[78,150,152],{"id":151},"usage","Usage",[19,154,155],{},"VUI supports treeshaking, so you will be importing only the components you are using.",[85,157,161],{"className":158,"code":159,"language":160,"meta":90,"style":90},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup lang=\"ts\">\nimport { Badge, Button, Input, Textarea } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n","vue",[92,162,163,192,234],{"__ignoreMap":90},[95,164,165,168,171,174,177,180,184,187,189],{"class":97,"line":98},[95,166,167],{"class":124},"\u003C",[95,169,170],{"class":128},"script",[95,172,173],{"class":139}," setup",[95,175,176],{"class":139}," lang",[95,178,179],{"class":124},"=",[95,181,183],{"class":182},"sBR95","\"",[95,185,186],{"class":105},"ts",[95,188,183],{"class":182},[95,190,191],{"class":124},">\n",[95,193,195,197,200,203,206,209,211,214,216,219,222,225,228,231],{"class":97,"line":194},2,[95,196,129],{"class":128},[95,198,199],{"class":124}," {",[95,201,202],{"class":139}," Badge",[95,204,205],{"class":124},",",[95,207,208],{"class":139}," Button",[95,210,205],{"class":124},[95,212,213],{"class":139}," Input",[95,215,205],{"class":124},[95,217,218],{"class":139}," Textarea",[95,220,221],{"class":124}," }",[95,223,224],{"class":128}," from",[95,226,227],{"class":182}," '",[95,229,230],{"class":105},"@dolanske\u002Fvui",[95,232,233],{"class":182},"'\n",[95,235,237,240,242],{"class":97,"line":236},3,[95,238,239],{"class":124},"\u003C\u002F",[95,241,170],{"class":128},[95,243,191],{"class":124},[245,246,247],"style",{},"html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}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 .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 pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sDB6b, html code.shiki .sDB6b{--shiki-dark:#B8A965;--shiki-light:#998418;--shiki-default:#B8A965}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}",{"title":90,"searchDepth":194,"depth":194,"links":249},[250,251],{"id":80,"depth":194,"text":10},{"id":151,"depth":194,"text":152},"md",{},true,"\u002Fdocs\u002Finstallation",{"title":10,"description":21},"docs\u002Finstallation","Gc0p1Nwe8eQb3_k3sRM36u4THk0jRiFFzohJ6Hithag",1782200880545]