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