[{"data":1,"prerenderedAt":1429},["Reactive",2],{"navigation":3,"docs-/development/contributing":37,"docs-/development/contributing-surround":421},[4,17,30],{"title":5,"_path":6,"children":7},"Guide","/guide",[8,11,14],{"title":9,"_path":10},"Getting Started","/guide/getting-started",{"title":12,"_path":13},"Features","/guide/features",{"title":15,"_path":16},"Composables","/guide/composables",{"title":18,"_path":19,"children":20},"Module","/module",[21,24,27],{"title":22,"_path":23},"Module Authors","/module/guide",{"title":25,"_path":26},"Utility Kit","/module/utils-kit",{"title":28,"_path":29},"UI Kit","/module/ui-kit",{"title":31,"_path":32,"children":33},"Development","/development",[34],{"title":35,"_path":36},"Contribution Guide","/development/contributing",{"_path":36,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":35,"description":41,"body":42,"_type":416,"_id":417,"_source":418,"_file":419,"_extension":420},"development",false,"","Learn how to contribute to the Nuxt DevTools.",{"type":43,"children":44,"toc":408},"root",[45,53,60,76,81,141,165,171,176,201,208,227,245,250,267,273,285,296,315,397,402],{"type":46,"tag":47,"props":48,"children":49},"element","p",{},[50],{"type":51,"value":52},"text","Hi! We're really excited that you're interested in contributing to Nuxt DevTools! Before submitting your contribution, please read through the following guide.",{"type":46,"tag":54,"props":55,"children":57},"h2",{"id":56},"monorepo",[58],{"type":51,"value":59},"Monorepo",{"type":46,"tag":47,"props":61,"children":62},{},[63,65,74],{"type":51,"value":64},"The Nuxt DevTools repo is a monorepo using pnpm workspaces. The package manager used to install and link dependencies must be ",{"type":46,"tag":66,"props":67,"children":71},"a",{"href":68,"rel":69},"https://pnpm.io/",[70],"nofollow",[72],{"type":51,"value":73},"pnpm",{"type":51,"value":75},".",{"type":46,"tag":47,"props":77,"children":78},{},[79],{"type":51,"value":80},"After cloning the repo, run in the root folder.",{"type":46,"tag":82,"props":83,"children":87},"pre",{"className":84,"code":85,"language":86,"meta":40},"language-sh material-theme_material-theme-palenight_material-theme-lighter","pnpm i\npnpm run build\n","sh",[88],{"type":46,"tag":89,"props":90,"children":91},"code",{"__ignoreMap":40},[92,115],{"type":46,"tag":93,"props":94,"children":97},"span",{"class":95,"line":96},"line",1,[98,103,109],{"type":46,"tag":93,"props":99,"children":101},{"class":100},"ct-902167",[102],{"type":51,"value":73},{"type":46,"tag":93,"props":104,"children":106},{"class":105},"ct-521921",[107],{"type":51,"value":108}," ",{"type":46,"tag":93,"props":110,"children":112},{"class":111},"ct-083593",[113],{"type":51,"value":114},"i\n",{"type":46,"tag":93,"props":116,"children":118},{"class":95,"line":117},2,[119,123,127,132,136],{"type":46,"tag":93,"props":120,"children":121},{"class":100},[122],{"type":51,"value":73},{"type":46,"tag":93,"props":124,"children":125},{"class":105},[126],{"type":51,"value":108},{"type":46,"tag":93,"props":128,"children":129},{"class":111},[130],{"type":51,"value":131},"run",{"type":46,"tag":93,"props":133,"children":134},{"class":105},[135],{"type":51,"value":108},{"type":46,"tag":93,"props":137,"children":138},{"class":111},[139],{"type":51,"value":140},"build",{"type":46,"tag":142,"props":143,"children":144},"callout",{},[145],{"type":46,"tag":47,"props":146,"children":147},{},[148,150,157,159,164],{"type":51,"value":149},"Nuxt DevTools uses pnpm v7. If you are working on multiple projects with different versions of pnpm, it's recommended to enable ",{"type":46,"tag":66,"props":151,"children":154},{"href":152,"rel":153},"https://github.com/nodejs/corepack",[70],[155],{"type":51,"value":156},"Corepack",{"type":51,"value":158}," by running ",{"type":46,"tag":89,"props":160,"children":161},{},[162],{"type":51,"value":163},"corepack enable",{"type":51,"value":75},{"type":46,"tag":54,"props":166,"children":168},{"id":167},"packages",[169],{"type":51,"value":170},"Packages",{"type":46,"tag":47,"props":172,"children":173},{},[174],{"type":51,"value":175},"This repo contains the following packages:",{"type":46,"tag":177,"props":178,"children":179},"ul",{},[180,191],{"type":46,"tag":181,"props":182,"children":183},"li",{},[184,189],{"type":46,"tag":89,"props":185,"children":186},{},[187],{"type":51,"value":188},"@nuxt/devtools",{"type":51,"value":190},": The Nuxt DevTools module",{"type":46,"tag":181,"props":192,"children":193},{},[194,199],{"type":46,"tag":89,"props":195,"children":196},{},[197],{"type":51,"value":198},"@nuxt/devtools-ui-kit",{"type":51,"value":200},": The UI Kit used by Nuxt DevTools and also for module authors to build UI for DevTools interation",{"type":46,"tag":202,"props":203,"children":205},"h3",{"id":204},"devtools",[206],{"type":51,"value":207},"DevTools",{"type":46,"tag":47,"props":209,"children":210},{},[211,213,218,220,225],{"type":51,"value":212},"Most of the scripts are forward to the root ",{"type":46,"tag":89,"props":214,"children":215},{},[216],{"type":51,"value":217},"package.json",{"type":51,"value":219},". You can run ",{"type":46,"tag":89,"props":221,"children":222},{},[223],{"type":51,"value":224},"pnpm dev",{"type":51,"value":226}," in the root folder to start the development server (Nuxt DevTools on top of it's own client UI).",{"type":46,"tag":47,"props":228,"children":229},{},[230,232,237,239,243],{"type":51,"value":231},"Or you can ",{"type":46,"tag":89,"props":233,"children":234},{},[235],{"type":51,"value":236},"cd packages/devtools",{"type":51,"value":238}," and run ",{"type":46,"tag":89,"props":240,"children":241},{},[242],{"type":51,"value":224},{"type":51,"value":244}," to start the development server.",{"type":46,"tag":202,"props":246,"children":248},{"id":247},"ui-kit",[249],{"type":51,"value":28},{"type":46,"tag":47,"props":251,"children":252},{},[253,255,260,261,265],{"type":51,"value":254},"Normally when you are developing the Nuxt DevTools, the components in the UI Kit already get the HMR capabilities. But if you want to develop the UI Kit itself, you can run ",{"type":46,"tag":89,"props":256,"children":257},{},[258],{"type":51,"value":259},"cd packages/devtools-ui-kit",{"type":51,"value":238},{"type":46,"tag":89,"props":262,"children":263},{},[264],{"type":51,"value":224},{"type":51,"value":266}," to start the playground for the UI Kit.",{"type":46,"tag":54,"props":268,"children":270},{"id":269},"trying-local-changes",[271],{"type":51,"value":272},"Trying Local Changes",{"type":46,"tag":47,"props":274,"children":275},{},[276,278,283],{"type":51,"value":277},"If you want to try your local changes in other Nuxt projects, you can use the ",{"type":46,"tag":89,"props":279,"children":280},{},[281],{"type":51,"value":282},"local.ts",{"type":51,"value":284}," module under the root folder.",{"type":46,"tag":47,"props":286,"children":287},{},[288,290,294],{"type":51,"value":289},"Change ",{"type":46,"tag":89,"props":291,"children":292},{},[293],{"type":51,"value":188},{"type":51,"value":295}," to the absolute path of this module in any of your Nuxt projects,\nallows you to try Nuxt DevTools locally directly from the source code. HMR is supported\nfor the front-end client.",{"type":46,"tag":47,"props":297,"children":298},{},[299,301,306,308,313],{"type":51,"value":300},"For example, if you clone this repo to ",{"type":46,"tag":89,"props":302,"children":303},{},[304],{"type":51,"value":305},"/users/me/nuxt-devtools",{"type":51,"value":307},", update your ",{"type":46,"tag":89,"props":309,"children":310},{},[311],{"type":51,"value":312},"nuxt.config.ts",{"type":51,"value":314},":",{"type":46,"tag":82,"props":316,"children":320},{"className":317,"code":318,"language":319,"meta":40},"language-diff material-theme_material-theme-palenight_material-theme-lighter","// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [\n-   '@nuxt/devtools',\n+   '/users/me/nuxt-devtools/local',\n  ]\n})\n","diff",[321],{"type":46,"tag":89,"props":322,"children":323},{"__ignoreMap":40},[324,332,340,349,365,379,388],{"type":46,"tag":93,"props":325,"children":326},{"class":95,"line":96},[327],{"type":46,"tag":93,"props":328,"children":329},{"class":105},[330],{"type":51,"value":331},"// nuxt.config.ts\n",{"type":46,"tag":93,"props":333,"children":334},{"class":95,"line":117},[335],{"type":46,"tag":93,"props":336,"children":337},{"class":105},[338],{"type":51,"value":339},"export default defineNuxtConfig({\n",{"type":46,"tag":93,"props":341,"children":343},{"class":95,"line":342},3,[344],{"type":46,"tag":93,"props":345,"children":346},{"class":105},[347],{"type":51,"value":348},"  modules: [\n",{"type":46,"tag":93,"props":350,"children":352},{"class":95,"line":351},4,[353,359],{"type":46,"tag":93,"props":354,"children":356},{"class":355},"ct-542793",[357],{"type":51,"value":358},"-",{"type":46,"tag":93,"props":360,"children":362},{"class":361},"ct-821147",[363],{"type":51,"value":364},"   '@nuxt/devtools',\n",{"type":46,"tag":93,"props":366,"children":368},{"class":95,"line":367},5,[369,374],{"type":46,"tag":93,"props":370,"children":371},{"class":355},[372],{"type":51,"value":373},"+",{"type":46,"tag":93,"props":375,"children":376},{"class":111},[377],{"type":51,"value":378},"   '/users/me/nuxt-devtools/local',\n",{"type":46,"tag":93,"props":380,"children":382},{"class":95,"line":381},6,[383],{"type":46,"tag":93,"props":384,"children":385},{"class":105},[386],{"type":51,"value":387},"  ]\n",{"type":46,"tag":93,"props":389,"children":391},{"class":95,"line":390},7,[392],{"type":46,"tag":93,"props":393,"children":394},{"class":105},[395],{"type":51,"value":396},"})",{"type":46,"tag":47,"props":398,"children":399},{},[400],{"type":51,"value":401},"On the module code, the source TypeScript file are directly used, so you don't need to build everytime. However, due to Node.js module caching, you need to restart your app to see the changes on the module side.",{"type":46,"tag":403,"props":404,"children":405},"style",{},[406],{"type":51,"value":407},".material-theme_material-theme-palenight_material-theme-lighter{color:#EEFFFF;background:#263238;}.dark .material-theme_material-theme-palenight_material-theme-lighter{color:#A6ACCD;background:#292D3E;}.light .material-theme_material-theme-palenight_material-theme-lighter{color:#90A4AE;background:#FAFAFA;}.ct-902167{color:#FFCB6B;}.light .ct-902167{color:#E2931D;}.ct-521921{color:#EEFFFF;}.dark .ct-521921{color:#A6ACCD;}.light .ct-521921{color:#90A4AE;}.ct-083593{color:#C3E88D;}.light .ct-083593{color:#91B859;}.ct-542793{color:#89DDFF;}.light .ct-542793{color:#39ADB5;}.ct-821147{color:#F07178;}.light .ct-821147{color:#E53935;}",{"title":40,"searchDepth":117,"depth":117,"links":409},[410,411,415],{"id":56,"depth":117,"text":59},{"id":167,"depth":117,"text":170,"children":412},[413,414],{"id":204,"depth":342,"text":207},{"id":247,"depth":342,"text":28},{"id":269,"depth":117,"text":272},"markdown","content:3.development:0.contributing.md","content","3.development/0.contributing.md","md",[422,1428],{"_path":29,"_dir":423,"_draft":39,"_partial":39,"_locale":40,"title":28,"description":424,"body":425,"_type":416,"_id":1426,"_source":418,"_file":1427,"_extension":420},"module","UI Kit is for module authors to build a custom view.",{"type":43,"children":426,"toc":1418},[427,442,458,464,477,483,517,628,634,663,675,730,767,814,819,866,871,1022,1036,1042,1055,1061,1074,1079,1400,1413],{"type":46,"tag":142,"props":428,"children":429},{},[430],{"type":46,"tag":47,"props":431,"children":432},{},[433,435,440],{"type":51,"value":434},"We suggest you to read the ",{"type":46,"tag":66,"props":436,"children":437},{"href":23},[438],{"type":51,"value":439},"Module Authors Guide",{"type":51,"value":441}," first.",{"type":46,"tag":47,"props":443,"children":444},{},[445,447,457],{"type":51,"value":446},"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 ",{"type":46,"tag":66,"props":448,"children":451},{"href":449,"rel":450},"https://github.com/nuxt/devtools/tree/main/packages/devtools-ui-kit",[70],[452],{"type":46,"tag":89,"props":453,"children":454},{},[455],{"type":51,"value":456},"packages/devtools-ui-kit",{"type":51,"value":75},{"type":46,"tag":54,"props":459,"children":461},{"id":460},"installation",[462],{"type":51,"value":463},"Installation",{"type":46,"tag":47,"props":465,"children":466},{},[467,469,475],{"type":51,"value":468},"We recommend to use the ",{"type":46,"tag":66,"props":470,"children":472},{"href":471},"/module/guide#starter-template",[473],{"type":51,"value":474},"Starter Template",{"type":51,"value":476}," for authoring a DevTools integration for your module, which has the set up built in and ready to use.",{"type":46,"tag":202,"props":478,"children":480},{"id":479},"manual-install",[481],{"type":51,"value":482},"Manual Install",{"type":46,"tag":82,"props":484,"children":488},{"className":485,"code":486,"language":487,"meta":40},"language-bash material-theme_material-theme-palenight_material-theme-lighter","npm i @nuxt/devtools-ui-kit\n","bash",[489],{"type":46,"tag":89,"props":490,"children":491},{"__ignoreMap":40},[492],{"type":46,"tag":93,"props":493,"children":494},{"class":95,"line":96},[495,500,504,509,513],{"type":46,"tag":93,"props":496,"children":497},{"class":100},[498],{"type":51,"value":499},"npm",{"type":46,"tag":93,"props":501,"children":502},{"class":105},[503],{"type":51,"value":108},{"type":46,"tag":93,"props":505,"children":506},{"class":111},[507],{"type":51,"value":508},"i",{"type":46,"tag":93,"props":510,"children":511},{"class":105},[512],{"type":51,"value":108},{"type":46,"tag":93,"props":514,"children":515},{"class":111},[516],{"type":51,"value":198},{"type":46,"tag":82,"props":518,"children":522},{"className":519,"code":520,"language":521,"meta":40},"language-ts material-theme_material-theme-palenight_material-theme-lighter","export default defineNuxtConfig({\n  modules: [\n    '@nuxt/devtools-ui-kit'\n  ]\n})\n","ts",[523],{"type":46,"tag":89,"props":524,"children":525},{"__ignoreMap":40},[526,564,586,608,615],{"type":46,"tag":93,"props":527,"children":528},{"class":95,"line":96},[529,535,539,544,548,554,559],{"type":46,"tag":93,"props":530,"children":532},{"class":531},"ct-398028",[533],{"type":51,"value":534},"export",{"type":46,"tag":93,"props":536,"children":537},{"class":105},[538],{"type":51,"value":108},{"type":46,"tag":93,"props":540,"children":541},{"class":531},[542],{"type":51,"value":543},"default",{"type":46,"tag":93,"props":545,"children":546},{"class":105},[547],{"type":51,"value":108},{"type":46,"tag":93,"props":549,"children":551},{"class":550},"ct-021512",[552],{"type":51,"value":553},"defineNuxtConfig",{"type":46,"tag":93,"props":555,"children":556},{"class":105},[557],{"type":51,"value":558},"(",{"type":46,"tag":93,"props":560,"children":561},{"class":355},[562],{"type":51,"value":563},"{\n",{"type":46,"tag":93,"props":565,"children":566},{"class":95,"line":117},[567,572,577,581],{"type":46,"tag":93,"props":568,"children":569},{"class":105},[570],{"type":51,"value":571},"  ",{"type":46,"tag":93,"props":573,"children":574},{"class":361},[575],{"type":51,"value":576},"modules",{"type":46,"tag":93,"props":578,"children":579},{"class":355},[580],{"type":51,"value":314},{"type":46,"tag":93,"props":582,"children":583},{"class":105},[584],{"type":51,"value":585}," [\n",{"type":46,"tag":93,"props":587,"children":588},{"class":95,"line":342},[589,594,599,603],{"type":46,"tag":93,"props":590,"children":591},{"class":105},[592],{"type":51,"value":593},"    ",{"type":46,"tag":93,"props":595,"children":596},{"class":355},[597],{"type":51,"value":598},"'",{"type":46,"tag":93,"props":600,"children":601},{"class":111},[602],{"type":51,"value":198},{"type":46,"tag":93,"props":604,"children":605},{"class":355},[606],{"type":51,"value":607},"'\n",{"type":46,"tag":93,"props":609,"children":610},{"class":95,"line":351},[611],{"type":46,"tag":93,"props":612,"children":613},{"class":105},[614],{"type":51,"value":387},{"type":46,"tag":93,"props":616,"children":617},{"class":95,"line":367},[618,623],{"type":46,"tag":93,"props":619,"children":620},{"class":355},[621],{"type":51,"value":622},"}",{"type":46,"tag":93,"props":624,"children":625},{"class":105},[626],{"type":51,"value":627},")",{"type":46,"tag":54,"props":629,"children":631},{"id":630},"usage",[632],{"type":51,"value":633},"Usage",{"type":46,"tag":47,"props":635,"children":636},{},[637,639,643,645,652,654,661],{"type":51,"value":638},"Under the hood, ",{"type":46,"tag":89,"props":640,"children":641},{},[642],{"type":51,"value":198},{"type":51,"value":644}," is an unbundled component library powered by ",{"type":46,"tag":66,"props":646,"children":649},{"href":647,"rel":648},"https://github.com/unocss/unocss",[70],[650],{"type":51,"value":651},"UnoCSS",{"type":51,"value":653}," and ",{"type":46,"tag":66,"props":655,"children":658},{"href":656,"rel":657},"https://vueuse.org/",[70],[659],{"type":51,"value":660},"VueUse",{"type":51,"value":662},". Components are auto imported.",{"type":46,"tag":47,"props":664,"children":665},{},[666,668,673],{"type":51,"value":667},"In this library, we introduced the ",{"type":46,"tag":89,"props":669,"children":670},{},[671],{"type":51,"value":672},"n",{"type":51,"value":674}," attribute for every component to customize the styles and variations. For example, to make a red button:",{"type":46,"tag":82,"props":676,"children":680},{"className":677,"code":678,"language":679,"meta":40},"language-html material-theme_material-theme-palenight_material-theme-lighter","\u003CNButton n=\"red\" />\n","html",[681],{"type":46,"tag":89,"props":682,"children":683},{"__ignoreMap":40},[684],{"type":46,"tag":93,"props":685,"children":686},{"class":95,"line":96},[687,692,697,701,706,711,716,721,725],{"type":46,"tag":93,"props":688,"children":689},{"class":355},[690],{"type":51,"value":691},"\u003C",{"type":46,"tag":93,"props":693,"children":694},{"class":361},[695],{"type":51,"value":696},"NButton",{"type":46,"tag":93,"props":698,"children":699},{"class":355},[700],{"type":51,"value":108},{"type":46,"tag":93,"props":702,"children":704},{"class":703},"ct-366012",[705],{"type":51,"value":672},{"type":46,"tag":93,"props":707,"children":708},{"class":355},[709],{"type":51,"value":710},"=",{"type":46,"tag":93,"props":712,"children":713},{"class":355},[714],{"type":51,"value":715},"\"",{"type":46,"tag":93,"props":717,"children":718},{"class":111},[719],{"type":51,"value":720},"red",{"type":46,"tag":93,"props":722,"children":723},{"class":355},[724],{"type":51,"value":715},{"type":46,"tag":93,"props":726,"children":727},{"class":355},[728],{"type":51,"value":729}," />",{"type":46,"tag":47,"props":731,"children":732},{},[733,735,740,742,746,747,752,754,759,761,765],{"type":51,"value":734},"to make it larger, add the size specifier (",{"type":46,"tag":89,"props":736,"children":737},{},[738],{"type":51,"value":739},"sm",{"type":51,"value":741},", ",{"type":46,"tag":89,"props":743,"children":744},{},[745],{"type":51,"value":420},{"type":51,"value":741},{"type":46,"tag":89,"props":748,"children":749},{},[750],{"type":51,"value":751},"lg",{"type":51,"value":753}," or ",{"type":46,"tag":89,"props":755,"children":756},{},[757],{"type":51,"value":758},"xl",{"type":51,"value":760},") the ",{"type":46,"tag":89,"props":762,"children":763},{},[764],{"type":51,"value":672},{"type":51,"value":766}," attribute:",{"type":46,"tag":82,"props":768,"children":770},{"className":677,"code":769,"language":679,"meta":40},"\u003CNButton n=\"red xl\" />\n",[771],{"type":46,"tag":89,"props":772,"children":773},{"__ignoreMap":40},[774],{"type":46,"tag":93,"props":775,"children":776},{"class":95,"line":96},[777,781,785,789,793,797,801,806,810],{"type":46,"tag":93,"props":778,"children":779},{"class":355},[780],{"type":51,"value":691},{"type":46,"tag":93,"props":782,"children":783},{"class":361},[784],{"type":51,"value":696},{"type":46,"tag":93,"props":786,"children":787},{"class":355},[788],{"type":51,"value":108},{"type":46,"tag":93,"props":790,"children":791},{"class":703},[792],{"type":51,"value":672},{"type":46,"tag":93,"props":794,"children":795},{"class":355},[796],{"type":51,"value":710},{"type":46,"tag":93,"props":798,"children":799},{"class":355},[800],{"type":51,"value":715},{"type":46,"tag":93,"props":802,"children":803},{"class":111},[804],{"type":51,"value":805},"red xl",{"type":46,"tag":93,"props":807,"children":808},{"class":355},[809],{"type":51,"value":715},{"type":46,"tag":93,"props":811,"children":812},{"class":355},[813],{"type":51,"value":729},{"type":46,"tag":47,"props":815,"children":816},{},[817],{"type":51,"value":818},"You can apply the same specifiers to any other component, for example:",{"type":46,"tag":82,"props":820,"children":822},{"className":677,"code":821,"language":679,"meta":40},"\u003CNCheckbox n=\"red xl\" />\n",[823],{"type":46,"tag":89,"props":824,"children":825},{"__ignoreMap":40},[826],{"type":46,"tag":93,"props":827,"children":828},{"class":95,"line":96},[829,833,838,842,846,850,854,858,862],{"type":46,"tag":93,"props":830,"children":831},{"class":355},[832],{"type":51,"value":691},{"type":46,"tag":93,"props":834,"children":835},{"class":361},[836],{"type":51,"value":837},"NCheckbox",{"type":46,"tag":93,"props":839,"children":840},{"class":355},[841],{"type":51,"value":108},{"type":46,"tag":93,"props":843,"children":844},{"class":703},[845],{"type":51,"value":672},{"type":46,"tag":93,"props":847,"children":848},{"class":355},[849],{"type":51,"value":710},{"type":46,"tag":93,"props":851,"children":852},{"class":355},[853],{"type":51,"value":715},{"type":46,"tag":93,"props":855,"children":856},{"class":111},[857],{"type":51,"value":805},{"type":46,"tag":93,"props":859,"children":860},{"class":355},[861],{"type":51,"value":715},{"type":46,"tag":93,"props":863,"children":864},{"class":355},[865],{"type":51,"value":729},{"type":46,"tag":47,"props":867,"children":868},{},[869],{"type":51,"value":870},"Apply it to parent components could make a local theme scope",{"type":46,"tag":82,"props":872,"children":874},{"className":677,"code":873,"language":679,"meta":40},"\u003CNCard n=\"green-500\">\n  \u003C!-- both of them are themed green -->\n  \u003CNCheckbox>i accept the terms & conditions\u003C/NCheckbox>\n  \u003CNButton>Submit\u003C/NButton>\n\u003C/NCard>\n",[875],{"type":46,"tag":89,"props":876,"children":877},{"__ignoreMap":40},[878,920,933,971,1007],{"type":46,"tag":93,"props":879,"children":880},{"class":95,"line":96},[881,885,890,894,898,902,906,911,915],{"type":46,"tag":93,"props":882,"children":883},{"class":355},[884],{"type":51,"value":691},{"type":46,"tag":93,"props":886,"children":887},{"class":361},[888],{"type":51,"value":889},"NCard",{"type":46,"tag":93,"props":891,"children":892},{"class":355},[893],{"type":51,"value":108},{"type":46,"tag":93,"props":895,"children":896},{"class":703},[897],{"type":51,"value":672},{"type":46,"tag":93,"props":899,"children":900},{"class":355},[901],{"type":51,"value":710},{"type":46,"tag":93,"props":903,"children":904},{"class":355},[905],{"type":51,"value":715},{"type":46,"tag":93,"props":907,"children":908},{"class":111},[909],{"type":51,"value":910},"green-500",{"type":46,"tag":93,"props":912,"children":913},{"class":355},[914],{"type":51,"value":715},{"type":46,"tag":93,"props":916,"children":917},{"class":355},[918],{"type":51,"value":919},">\n",{"type":46,"tag":93,"props":921,"children":922},{"class":95,"line":117},[923,927],{"type":46,"tag":93,"props":924,"children":925},{"class":105},[926],{"type":51,"value":571},{"type":46,"tag":93,"props":928,"children":930},{"class":929},"ct-767688",[931],{"type":51,"value":932},"\u003C!-- both of them are themed green -->\n",{"type":46,"tag":93,"props":934,"children":935},{"class":95,"line":342},[936,940,944,948,953,958,963,967],{"type":46,"tag":93,"props":937,"children":938},{"class":105},[939],{"type":51,"value":571},{"type":46,"tag":93,"props":941,"children":942},{"class":355},[943],{"type":51,"value":691},{"type":46,"tag":93,"props":945,"children":946},{"class":361},[947],{"type":51,"value":837},{"type":46,"tag":93,"props":949,"children":950},{"class":355},[951],{"type":51,"value":952},">",{"type":46,"tag":93,"props":954,"children":955},{"class":105},[956],{"type":51,"value":957},"i accept the terms & conditions",{"type":46,"tag":93,"props":959,"children":960},{"class":355},[961],{"type":51,"value":962},"\u003C/",{"type":46,"tag":93,"props":964,"children":965},{"class":361},[966],{"type":51,"value":837},{"type":46,"tag":93,"props":968,"children":969},{"class":355},[970],{"type":51,"value":919},{"type":46,"tag":93,"props":972,"children":973},{"class":95,"line":351},[974,978,982,986,990,995,999,1003],{"type":46,"tag":93,"props":975,"children":976},{"class":105},[977],{"type":51,"value":571},{"type":46,"tag":93,"props":979,"children":980},{"class":355},[981],{"type":51,"value":691},{"type":46,"tag":93,"props":983,"children":984},{"class":361},[985],{"type":51,"value":696},{"type":46,"tag":93,"props":987,"children":988},{"class":355},[989],{"type":51,"value":952},{"type":46,"tag":93,"props":991,"children":992},{"class":105},[993],{"type":51,"value":994},"Submit",{"type":46,"tag":93,"props":996,"children":997},{"class":355},[998],{"type":51,"value":962},{"type":46,"tag":93,"props":1000,"children":1001},{"class":361},[1002],{"type":51,"value":696},{"type":46,"tag":93,"props":1004,"children":1005},{"class":355},[1006],{"type":51,"value":919},{"type":46,"tag":93,"props":1008,"children":1009},{"class":95,"line":367},[1010,1014,1018],{"type":46,"tag":93,"props":1011,"children":1012},{"class":355},[1013],{"type":51,"value":962},{"type":46,"tag":93,"props":1015,"children":1016},{"class":361},[1017],{"type":51,"value":889},{"type":46,"tag":93,"props":1019,"children":1020},{"class":355},[1021],{"type":51,"value":952},{"type":46,"tag":47,"props":1023,"children":1024},{},[1025,1027,1034],{"type":51,"value":1026},"Please check our ",{"type":46,"tag":66,"props":1028,"children":1031},{"href":1029,"rel":1030},"https://ui-kit.devtools.nuxtjs.org/",[70],[1032],{"type":51,"value":1033},"Online Demo",{"type":51,"value":1035}," for more components usages.",{"type":46,"tag":54,"props":1037,"children":1039},{"id":1038},"components",[1040],{"type":51,"value":1041},"Components",{"type":46,"tag":47,"props":1043,"children":1044},{},[1045,1047,1054],{"type":51,"value":1046},"Check ",{"type":46,"tag":66,"props":1048,"children":1051},{"href":1049,"rel":1050},"https://github.com/nuxt/devtools/blob/main/packages/devtools-ui-kit/src/components",[70],[1052],{"type":51,"value":1053},"all components",{"type":51,"value":75},{"type":46,"tag":54,"props":1056,"children":1058},{"id":1057},"theming",[1059],{"type":51,"value":1060},"Theming",{"type":46,"tag":47,"props":1062,"children":1063},{},[1064,1066,1072],{"type":51,"value":1065},"Powered by ",{"type":46,"tag":66,"props":1067,"children":1070},{"href":1068,"rel":1069},"https://github.com/antfu/unocss",[70],[1071],{"type":51,"value":651},{"type":51,"value":1073},", you can use Tailwind/Windi CSS utilities to quickly customize the look and feel of components.",{"type":46,"tag":47,"props":1075,"children":1076},{},[1077],{"type":51,"value":1078},"It's also possible to override the default theme globally, for example:",{"type":46,"tag":82,"props":1080,"children":1082},{"className":519,"code":1081,"language":521,"meta":40},"// nuxt.config.js\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxt/devtools-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/5',\n    }\n  }\n})\n",[1083],{"type":46,"tag":89,"props":1084,"children":1085},{"__ignoreMap":40},[1086,1094,1125,1144,1163,1176,1200,1224,1271,1317,1363,1376,1388],{"type":46,"tag":93,"props":1087,"children":1088},{"class":95,"line":96},[1089],{"type":46,"tag":93,"props":1090,"children":1091},{"class":929},[1092],{"type":51,"value":1093},"// nuxt.config.js\n",{"type":46,"tag":93,"props":1095,"children":1096},{"class":95,"line":117},[1097,1101,1105,1109,1113,1117,1121],{"type":46,"tag":93,"props":1098,"children":1099},{"class":531},[1100],{"type":51,"value":534},{"type":46,"tag":93,"props":1102,"children":1103},{"class":105},[1104],{"type":51,"value":108},{"type":46,"tag":93,"props":1106,"children":1107},{"class":531},[1108],{"type":51,"value":543},{"type":46,"tag":93,"props":1110,"children":1111},{"class":105},[1112],{"type":51,"value":108},{"type":46,"tag":93,"props":1114,"children":1115},{"class":550},[1116],{"type":51,"value":553},{"type":46,"tag":93,"props":1118,"children":1119},{"class":105},[1120],{"type":51,"value":558},{"type":46,"tag":93,"props":1122,"children":1123},{"class":355},[1124],{"type":51,"value":563},{"type":46,"tag":93,"props":1126,"children":1127},{"class":95,"line":342},[1128,1132,1136,1140],{"type":46,"tag":93,"props":1129,"children":1130},{"class":105},[1131],{"type":51,"value":571},{"type":46,"tag":93,"props":1133,"children":1134},{"class":361},[1135],{"type":51,"value":576},{"type":46,"tag":93,"props":1137,"children":1138},{"class":355},[1139],{"type":51,"value":314},{"type":46,"tag":93,"props":1141,"children":1142},{"class":105},[1143],{"type":51,"value":585},{"type":46,"tag":93,"props":1145,"children":1146},{"class":95,"line":351},[1147,1151,1155,1159],{"type":46,"tag":93,"props":1148,"children":1149},{"class":105},[1150],{"type":51,"value":593},{"type":46,"tag":93,"props":1152,"children":1153},{"class":355},[1154],{"type":51,"value":598},{"type":46,"tag":93,"props":1156,"children":1157},{"class":111},[1158],{"type":51,"value":198},{"type":46,"tag":93,"props":1160,"children":1161},{"class":355},[1162],{"type":51,"value":607},{"type":46,"tag":93,"props":1164,"children":1165},{"class":95,"line":367},[1166,1171],{"type":46,"tag":93,"props":1167,"children":1168},{"class":105},[1169],{"type":51,"value":1170},"  ]",{"type":46,"tag":93,"props":1172,"children":1173},{"class":355},[1174],{"type":51,"value":1175},",\n",{"type":46,"tag":93,"props":1177,"children":1178},{"class":95,"line":381},[1179,1183,1188,1192,1196],{"type":46,"tag":93,"props":1180,"children":1181},{"class":105},[1182],{"type":51,"value":571},{"type":46,"tag":93,"props":1184,"children":1185},{"class":361},[1186],{"type":51,"value":1187},"unocss",{"type":46,"tag":93,"props":1189,"children":1190},{"class":355},[1191],{"type":51,"value":314},{"type":46,"tag":93,"props":1193,"children":1194},{"class":105},[1195],{"type":51,"value":108},{"type":46,"tag":93,"props":1197,"children":1198},{"class":355},[1199],{"type":51,"value":563},{"type":46,"tag":93,"props":1201,"children":1202},{"class":95,"line":390},[1203,1207,1212,1216,1220],{"type":46,"tag":93,"props":1204,"children":1205},{"class":105},[1206],{"type":51,"value":593},{"type":46,"tag":93,"props":1208,"children":1209},{"class":361},[1210],{"type":51,"value":1211},"shortcuts",{"type":46,"tag":93,"props":1213,"children":1214},{"class":355},[1215],{"type":51,"value":314},{"type":46,"tag":93,"props":1217,"children":1218},{"class":105},[1219],{"type":51,"value":108},{"type":46,"tag":93,"props":1221,"children":1222},{"class":355},[1223],{"type":51,"value":563},{"type":46,"tag":93,"props":1225,"children":1227},{"class":95,"line":1226},8,[1228,1233,1237,1242,1246,1250,1254,1258,1263,1267],{"type":46,"tag":93,"props":1229,"children":1230},{"class":105},[1231],{"type":51,"value":1232},"      ",{"type":46,"tag":93,"props":1234,"children":1235},{"class":355},[1236],{"type":51,"value":598},{"type":46,"tag":93,"props":1238,"children":1239},{"class":361},[1240],{"type":51,"value":1241},"n-button-base",{"type":46,"tag":93,"props":1243,"children":1244},{"class":355},[1245],{"type":51,"value":598},{"type":46,"tag":93,"props":1247,"children":1248},{"class":355},[1249],{"type":51,"value":314},{"type":46,"tag":93,"props":1251,"children":1252},{"class":105},[1253],{"type":51,"value":108},{"type":46,"tag":93,"props":1255,"children":1256},{"class":355},[1257],{"type":51,"value":598},{"type":46,"tag":93,"props":1259,"children":1260},{"class":111},[1261],{"type":51,"value":1262},"border n-border-base rounded shadow-sm op80 !outline-none",{"type":46,"tag":93,"props":1264,"children":1265},{"class":355},[1266],{"type":51,"value":598},{"type":46,"tag":93,"props":1268,"children":1269},{"class":355},[1270],{"type":51,"value":1175},{"type":46,"tag":93,"props":1272,"children":1274},{"class":95,"line":1273},9,[1275,1279,1283,1288,1292,1296,1300,1304,1309,1313],{"type":46,"tag":93,"props":1276,"children":1277},{"class":105},[1278],{"type":51,"value":1232},{"type":46,"tag":93,"props":1280,"children":1281},{"class":355},[1282],{"type":51,"value":598},{"type":46,"tag":93,"props":1284,"children":1285},{"class":361},[1286],{"type":51,"value":1287},"n-button-hover",{"type":46,"tag":93,"props":1289,"children":1290},{"class":355},[1291],{"type":51,"value":598},{"type":46,"tag":93,"props":1293,"children":1294},{"class":355},[1295],{"type":51,"value":314},{"type":46,"tag":93,"props":1297,"children":1298},{"class":105},[1299],{"type":51,"value":108},{"type":46,"tag":93,"props":1301,"children":1302},{"class":355},[1303],{"type":51,"value":598},{"type":46,"tag":93,"props":1305,"children":1306},{"class":111},[1307],{"type":51,"value":1308},"op100 !border-context text-context",{"type":46,"tag":93,"props":1310,"children":1311},{"class":355},[1312],{"type":51,"value":598},{"type":46,"tag":93,"props":1314,"children":1315},{"class":355},[1316],{"type":51,"value":1175},{"type":46,"tag":93,"props":1318,"children":1320},{"class":95,"line":1319},10,[1321,1325,1329,1334,1338,1342,1346,1350,1355,1359],{"type":46,"tag":93,"props":1322,"children":1323},{"class":105},[1324],{"type":51,"value":1232},{"type":46,"tag":93,"props":1326,"children":1327},{"class":355},[1328],{"type":51,"value":598},{"type":46,"tag":93,"props":1330,"children":1331},{"class":361},[1332],{"type":51,"value":1333},"n-button-active",{"type":46,"tag":93,"props":1335,"children":1336},{"class":355},[1337],{"type":51,"value":598},{"type":46,"tag":93,"props":1339,"children":1340},{"class":355},[1341],{"type":51,"value":314},{"type":46,"tag":93,"props":1343,"children":1344},{"class":105},[1345],{"type":51,"value":108},{"type":46,"tag":93,"props":1347,"children":1348},{"class":355},[1349],{"type":51,"value":598},{"type":46,"tag":93,"props":1351,"children":1352},{"class":111},[1353],{"type":51,"value":1354},"n-active-base bg-context/5",{"type":46,"tag":93,"props":1356,"children":1357},{"class":355},[1358],{"type":51,"value":598},{"type":46,"tag":93,"props":1360,"children":1361},{"class":355},[1362],{"type":51,"value":1175},{"type":46,"tag":93,"props":1364,"children":1366},{"class":95,"line":1365},11,[1367,1371],{"type":46,"tag":93,"props":1368,"children":1369},{"class":105},[1370],{"type":51,"value":593},{"type":46,"tag":93,"props":1372,"children":1373},{"class":355},[1374],{"type":51,"value":1375},"}\n",{"type":46,"tag":93,"props":1377,"children":1379},{"class":95,"line":1378},12,[1380,1384],{"type":46,"tag":93,"props":1381,"children":1382},{"class":105},[1383],{"type":51,"value":571},{"type":46,"tag":93,"props":1385,"children":1386},{"class":355},[1387],{"type":51,"value":1375},{"type":46,"tag":93,"props":1389,"children":1391},{"class":95,"line":1390},13,[1392,1396],{"type":46,"tag":93,"props":1393,"children":1394},{"class":355},[1395],{"type":51,"value":622},{"type":46,"tag":93,"props":1397,"children":1398},{"class":105},[1399],{"type":51,"value":627},{"type":46,"tag":47,"props":1401,"children":1402},{},[1403,1405,1412],{"type":51,"value":1404},"You can find all the default values and available entries in ",{"type":46,"tag":66,"props":1406,"children":1409},{"href":1407,"rel":1408},"https://github.com/nuxt/devtools/blob/main/packages/devtools-ui-kit/src/unocss.ts",[70],[1410],{"type":51,"value":1411},"src/unocss.ts",{"type":51,"value":75},{"type":46,"tag":403,"props":1414,"children":1415},{},[1416],{"type":51,"value":1417},".material-theme_material-theme-palenight_material-theme-lighter{color:#EEFFFF;background:#263238;}.dark .material-theme_material-theme-palenight_material-theme-lighter{color:#A6ACCD;background:#292D3E;}.light .material-theme_material-theme-palenight_material-theme-lighter{color:#90A4AE;background:#FAFAFA;}.ct-902167{color:#FFCB6B;}.light .ct-902167{color:#E2931D;}.ct-521921{color:#EEFFFF;}.dark .ct-521921{color:#A6ACCD;}.light .ct-521921{color:#90A4AE;}.ct-083593{color:#C3E88D;}.light .ct-083593{color:#91B859;}.ct-398028{color:#89DDFF;font-style:italic;}.light .ct-398028{color:#39ADB5;font-style:italic;}.ct-021512{color:#82AAFF;}.light .ct-021512{color:#6182B8;}.ct-542793{color:#89DDFF;}.light .ct-542793{color:#39ADB5;}.ct-821147{color:#F07178;}.light .ct-821147{color:#E53935;}.ct-366012{color:#C792EA;}.light .ct-366012{color:#9C3EDA;}.ct-767688{color:#546E7A;font-style:italic;}.dark .ct-767688{color:#676E95;font-style:italic;}.light .ct-767688{color:#90A4AE;font-style:italic;}",{"title":40,"searchDepth":117,"depth":117,"links":1419},[1420,1423,1424,1425],{"id":460,"depth":117,"text":463,"children":1421},[1422],{"id":479,"depth":342,"text":482},{"id":630,"depth":117,"text":633},{"id":1038,"depth":117,"text":1041},{"id":1057,"depth":117,"text":1060},"content:2.module:2.ui-kit.md","2.module/2.ui-kit.md",null,1695853922058]