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