[{"data":1,"prerenderedAt":625},["ShallowReactive",2],{"navigation":3,"docs-\u002Fmodule\u002Fui-kit":52,"docs-\u002Fmodule\u002Fui-kit-surround":620},[4,22,43],{"title":5,"path":6,"stem":7,"children":8,"page":21},"Guide","\u002Fguide","1.guide",[9,13,17],{"title":10,"path":11,"stem":12},"Getting Started","\u002Fguide\u002Fgetting-started","1.guide\u002F0.getting-started",{"title":14,"path":15,"stem":16},"Features","\u002Fguide\u002Ffeatures","1.guide\u002F1.features",{"title":18,"path":19,"stem":20},"Composables","\u002Fguide\u002Fcomposables","1.guide\u002F2.composables",false,{"title":23,"path":24,"stem":25,"children":26,"page":21},"Module","\u002Fmodule","2.module",[27,31,35,39],{"title":28,"path":29,"stem":30},"Module Authors","\u002Fmodule\u002Fguide","2.module\u002F0.guide",{"title":32,"path":33,"stem":34},"Utility Kit","\u002Fmodule\u002Futils-kit","2.module\u002F1.utils-kit",{"title":36,"path":37,"stem":38},"UI Kit","\u002Fmodule\u002Fui-kit","2.module\u002F2.ui-kit",{"title":40,"path":41,"stem":42},"Migration to v4","\u002Fmodule\u002Fmigration-v4","2.module\u002F3.migration-v4",{"title":44,"path":45,"stem":46,"children":47,"page":21},"Development","\u002Fdevelopment","3.development",[48],{"title":49,"path":50,"stem":51},"Contribution Guide","\u002Fdevelopment\u002Fcontributing","3.development\u002F0.contributing",{"id":53,"title":36,"body":54,"description":615,"extension":264,"meta":616,"navigation":617,"path":37,"seo":618,"stem":38,"__hash__":619},"docs\u002F2.module\u002F2.ui-kit.md",{"type":55,"value":56,"toc":607},"minimark",[57,69,82,87,95,100,125,193,197,215,222,255,276,300,303,327,330,407,416,420,428,432,440,443,595,603],[58,59,60],"callout",{},[61,62,63,64,68],"p",{},"We suggest you to read the ",[65,66,67],"a",{"href":29},"Module Authors Guide"," first.",[61,70,71,72,81],{},"DevTools UI Kit is for module authors to build the custom view with the similiar look and feel as built-in DevTools UI. The source code can be found under ",[65,73,77],{"href":74,"rel":75},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fdevtools\u002Ftree\u002Fmain\u002Fpackages\u002Fdevtools-ui-kit",[76],"nofollow",[78,79,80],"code",{},"packages\u002Fdevtools-ui-kit",".",[83,84,86],"h2",{"id":85},"installation","Installation",[61,88,89,90,94],{},"We recommend to use the ",[65,91,93],{"href":92},"\u002Fmodule\u002Fguide#starter-template","Starter Template"," for authoring a DevTools integration for your module, which has the set up built in and ready to use.",[96,97,99],"h3",{"id":98},"manual-install","Manual Install",[101,102,107],"pre",{"className":103,"code":104,"language":105,"meta":106,"style":106},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm i @nuxt\u002Fdevtools-ui-kit\n","bash","",[78,108,109],{"__ignoreMap":106},[110,111,114,118,122],"span",{"class":112,"line":113},"line",1,[110,115,117],{"class":116},"sBMFI","npm",[110,119,121],{"class":120},"sfazB"," i",[110,123,124],{"class":120}," @nuxt\u002Fdevtools-ui-kit\n",[101,126,130],{"className":127,"code":128,"language":129,"meta":106,"style":106},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: [\n    '@nuxt\u002Fdevtools-ui-kit'\n  ]\n})\n","ts",[78,131,132,153,166,178,184],{"__ignoreMap":106},[110,133,134,138,141,145,149],{"class":112,"line":113},[110,135,137],{"class":136},"s7zQu","export",[110,139,140],{"class":136}," default",[110,142,144],{"class":143},"s2Zo4"," defineNuxtConfig",[110,146,148],{"class":147},"sTEyZ","(",[110,150,152],{"class":151},"sMK4o","{\n",[110,154,156,160,163],{"class":112,"line":155},2,[110,157,159],{"class":158},"swJcz","  modules",[110,161,162],{"class":151},":",[110,164,165],{"class":147}," [\n",[110,167,169,172,175],{"class":112,"line":168},3,[110,170,171],{"class":151},"    '",[110,173,174],{"class":120},"@nuxt\u002Fdevtools-ui-kit",[110,176,177],{"class":151},"'\n",[110,179,181],{"class":112,"line":180},4,[110,182,183],{"class":147},"  ]\n",[110,185,187,190],{"class":112,"line":186},5,[110,188,189],{"class":151},"}",[110,191,192],{"class":147},")\n",[83,194,196],{"id":195},"usage","Usage",[61,198,199,200,202,203,208,209,214],{},"Under the hood, ",[78,201,174],{}," is an unbundled component library powered by ",[65,204,207],{"href":205,"rel":206},"https:\u002F\u002Fgithub.com\u002Funocss\u002Funocss",[76],"UnoCSS"," and ",[65,210,213],{"href":211,"rel":212},"https:\u002F\u002Fvueuse.org\u002F",[76],"VueUse",". Components are auto imported.",[61,216,217,218,221],{},"In this library, we introduced the ",[78,219,220],{},"n"," attribute for every component to customize the styles and variations. For example, to make a red button:",[101,223,227],{"className":224,"code":225,"language":226,"meta":106,"style":106},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNButton n=\"red\" \u002F>\n","html",[78,228,229],{"__ignoreMap":106},[110,230,231,234,237,241,244,247,250,252],{"class":112,"line":113},[110,232,233],{"class":151},"\u003C",[110,235,236],{"class":158},"NButton",[110,238,240],{"class":239},"spNyl"," n",[110,242,243],{"class":151},"=",[110,245,246],{"class":151},"\"",[110,248,249],{"class":120},"red",[110,251,246],{"class":151},[110,253,254],{"class":151}," \u002F>\n",[61,256,257,258,261,262,261,265,268,269,272,273,275],{},"to make it larger, add the size specifier (",[78,259,260],{},"sm",", ",[78,263,264],{},"md",[78,266,267],{},"lg"," or ",[78,270,271],{},"xl",") the ",[78,274,220],{}," attribute:",[101,277,279],{"className":224,"code":278,"language":226,"meta":106,"style":106},"\u003CNButton n=\"red xl\" \u002F>\n",[78,280,281],{"__ignoreMap":106},[110,282,283,285,287,289,291,293,296,298],{"class":112,"line":113},[110,284,233],{"class":151},[110,286,236],{"class":158},[110,288,240],{"class":239},[110,290,243],{"class":151},[110,292,246],{"class":151},[110,294,295],{"class":120},"red xl",[110,297,246],{"class":151},[110,299,254],{"class":151},[61,301,302],{},"You can apply the same specifiers to any other component, for example:",[101,304,306],{"className":224,"code":305,"language":226,"meta":106,"style":106},"\u003CNCheckbox n=\"red xl\" \u002F>\n",[78,307,308],{"__ignoreMap":106},[110,309,310,312,315,317,319,321,323,325],{"class":112,"line":113},[110,311,233],{"class":151},[110,313,314],{"class":158},"NCheckbox",[110,316,240],{"class":239},[110,318,243],{"class":151},[110,320,246],{"class":151},[110,322,295],{"class":120},[110,324,246],{"class":151},[110,326,254],{"class":151},[61,328,329],{},"Apply it to parent components could make a local theme scope",[101,331,333],{"className":224,"code":332,"language":226,"meta":106,"style":106},"\u003CNCard n=\"green-500\">\n  \u003C!-- both of them are themed green -->\n  \u003CNCheckbox>i accept the terms & conditions\u003C\u002FNCheckbox>\n  \u003CNButton>Submit\u003C\u002FNButton>\n\u003C\u002FNCard>\n",[78,334,335,356,362,382,399],{"__ignoreMap":106},[110,336,337,339,342,344,346,348,351,353],{"class":112,"line":113},[110,338,233],{"class":151},[110,340,341],{"class":158},"NCard",[110,343,240],{"class":239},[110,345,243],{"class":151},[110,347,246],{"class":151},[110,349,350],{"class":120},"green-500",[110,352,246],{"class":151},[110,354,355],{"class":151},">\n",[110,357,358],{"class":112,"line":155},[110,359,361],{"class":360},"sHwdD","  \u003C!-- both of them are themed green -->\n",[110,363,364,367,369,372,375,378,380],{"class":112,"line":168},[110,365,366],{"class":151},"  \u003C",[110,368,314],{"class":158},[110,370,371],{"class":151},">",[110,373,374],{"class":147},"i accept the terms & conditions",[110,376,377],{"class":151},"\u003C\u002F",[110,379,314],{"class":158},[110,381,355],{"class":151},[110,383,384,386,388,390,393,395,397],{"class":112,"line":180},[110,385,366],{"class":151},[110,387,236],{"class":158},[110,389,371],{"class":151},[110,391,392],{"class":147},"Submit",[110,394,377],{"class":151},[110,396,236],{"class":158},[110,398,355],{"class":151},[110,400,401,403,405],{"class":112,"line":186},[110,402,377],{"class":151},[110,404,341],{"class":158},[110,406,355],{"class":151},[61,408,409,410,415],{},"Please check our ",[65,411,414],{"href":412,"rel":413},"https:\u002F\u002Fui-kit.devtools.nuxtjs.org\u002F",[76],"Online Demo"," for more components usages.",[83,417,419],{"id":418},"components","Components",[61,421,422,423,81],{},"Check ",[65,424,427],{"href":425,"rel":426},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fdevtools\u002Fblob\u002Fmain\u002Fpackages\u002Fdevtools-ui-kit\u002Fsrc\u002Fcomponents",[76],"all components",[83,429,431],{"id":430},"theming","Theming",[61,433,434,435,439],{},"Powered by ",[65,436,207],{"href":437,"rel":438},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Funocss",[76],", you can use Tailwind\u002FWindi CSS utilities to quickly customize the look and feel of components.",[61,441,442],{},"It's also possible to override the default theme globally, for example:",[101,444,446],{"className":127,"code":445,"language":129,"meta":106,"style":106},"\u002F\u002F nuxt.config.js\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxt\u002Fdevtools-ui-kit'\n  ],\n  unocss: {\n    shortcuts: {\n      'n-button-base': 'border n-border-base rounded shadow-sm op80 !outline-none',\n      'n-button-hover': 'op100 !border-context text-context',\n      'n-button-active': 'n-active-base bg-context\u002F5',\n    }\n  }\n})\n",[78,447,448,453,465,473,481,489,500,510,534,555,576,582,588],{"__ignoreMap":106},[110,449,450],{"class":112,"line":113},[110,451,452],{"class":360},"\u002F\u002F nuxt.config.js\n",[110,454,455,457,459,461,463],{"class":112,"line":155},[110,456,137],{"class":136},[110,458,140],{"class":136},[110,460,144],{"class":143},[110,462,148],{"class":147},[110,464,152],{"class":151},[110,466,467,469,471],{"class":112,"line":168},[110,468,159],{"class":158},[110,470,162],{"class":151},[110,472,165],{"class":147},[110,474,475,477,479],{"class":112,"line":180},[110,476,171],{"class":151},[110,478,174],{"class":120},[110,480,177],{"class":151},[110,482,483,486],{"class":112,"line":186},[110,484,485],{"class":147},"  ]",[110,487,488],{"class":151},",\n",[110,490,492,495,497],{"class":112,"line":491},6,[110,493,494],{"class":158},"  unocss",[110,496,162],{"class":151},[110,498,499],{"class":151}," {\n",[110,501,503,506,508],{"class":112,"line":502},7,[110,504,505],{"class":158},"    shortcuts",[110,507,162],{"class":151},[110,509,499],{"class":151},[110,511,513,516,519,522,524,527,530,532],{"class":112,"line":512},8,[110,514,515],{"class":151},"      '",[110,517,518],{"class":158},"n-button-base",[110,520,521],{"class":151},"'",[110,523,162],{"class":151},[110,525,526],{"class":151}," '",[110,528,529],{"class":120},"border n-border-base rounded shadow-sm op80 !outline-none",[110,531,521],{"class":151},[110,533,488],{"class":151},[110,535,537,539,542,544,546,548,551,553],{"class":112,"line":536},9,[110,538,515],{"class":151},[110,540,541],{"class":158},"n-button-hover",[110,543,521],{"class":151},[110,545,162],{"class":151},[110,547,526],{"class":151},[110,549,550],{"class":120},"op100 !border-context text-context",[110,552,521],{"class":151},[110,554,488],{"class":151},[110,556,558,560,563,565,567,569,572,574],{"class":112,"line":557},10,[110,559,515],{"class":151},[110,561,562],{"class":158},"n-button-active",[110,564,521],{"class":151},[110,566,162],{"class":151},[110,568,526],{"class":151},[110,570,571],{"class":120},"n-active-base bg-context\u002F5",[110,573,521],{"class":151},[110,575,488],{"class":151},[110,577,579],{"class":112,"line":578},11,[110,580,581],{"class":151},"    }\n",[110,583,585],{"class":112,"line":584},12,[110,586,587],{"class":151},"  }\n",[110,589,591,593],{"class":112,"line":590},13,[110,592,189],{"class":151},[110,594,192],{"class":147},[61,596,597,598,81],{},"You can find all the default values and available entries in ",[65,599,602],{"href":600,"rel":601},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fdevtools\u002Fblob\u002Fmain\u002Fpackages\u002Fdevtools-ui-kit\u002Fsrc\u002Funocss.ts",[76],"src\u002Funocss.ts",[604,605,606],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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 .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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":106,"searchDepth":155,"depth":155,"links":608},[609,612,613,614],{"id":85,"depth":155,"text":86,"children":610},[611],{"id":98,"depth":168,"text":99},{"id":195,"depth":155,"text":196},{"id":418,"depth":155,"text":419},{"id":430,"depth":155,"text":431},"UI Kit is for module authors to build a custom view.",{},true,{"title":36,"description":615},"Yve1X2OZcM1UnFX_rxbB-TH4zvNDA52sodktoaZFgto",[621,623],{"title":32,"path":33,"stem":34,"description":622,"children":-1},"Utility kit for easier DevTools integrations.",{"title":40,"path":41,"stem":42,"description":624,"children":-1},"Breaking changes and migration guide for Nuxt DevTools v4.",1774568848203]