[{"data":1,"prerenderedAt":798},["Reactive",2],{"navigation":3,"docs-/guide/getting-started":37,"docs-/guide/getting-started-surround":797},[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":10,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":9,"description":41,"body":42,"_type":792,"_id":793,"_source":794,"_file":795,"_extension":796},"guide",false,"","Using Nuxt DevTools in your Nuxt project is only a command away.",{"type":43,"children":44,"toc":783},"root",[45,54,72,79,106,205,210,216,221,255,294,309,314,341,347,352,382,487,493,516,521,586,612,618,629,764,777],{"type":46,"tag":47,"props":48,"children":50},"element","h2",{"id":49},"installation",[51],{"type":52,"value":53},"text","Installation",{"type":46,"tag":55,"props":56,"children":57},"callout",{},[58],{"type":46,"tag":59,"props":60,"children":61},"p",{},[62,64,70],{"type":52,"value":63},"Nuxt DevTools requires ",{"type":46,"tag":65,"props":66,"children":67},"strong",{},[68],{"type":52,"value":69},"Nuxt v3.1.0 or higher",{"type":52,"value":71},".",{"type":46,"tag":73,"props":74,"children":76},"h3",{"id":75},"auto-install",[77],{"type":52,"value":78},"Auto Install",{"type":46,"tag":59,"props":80,"children":81},{},[82,84,90,92,97,99,104],{"type":52,"value":83},"You just need to go to your ",{"type":46,"tag":85,"props":86,"children":87},"code",{"className":40},[88],{"type":52,"value":89},"nuxt.config",{"type":52,"value":91}," file and set ",{"type":46,"tag":85,"props":93,"children":94},{"className":40},[95],{"type":52,"value":96},"devtools",{"type":52,"value":98}," to ",{"type":46,"tag":85,"props":100,"children":101},{"className":40},[102],{"type":52,"value":103},"true",{"type":52,"value":105},":",{"type":46,"tag":107,"props":108,"children":113},"pre",{"className":109,"code":110,"filename":111,"language":112,"meta":40,"style":40},"language-ts shiki shiki-themes material-theme material-theme-palenight material-theme-lighter","export default defineNuxtConfig({\n  devtools: { enabled: true },\n})\n","nuxt.config.ts","ts",[114],{"type":46,"tag":85,"props":115,"children":116},{"__ignoreMap":40},[117,152,191],{"type":46,"tag":118,"props":119,"children":122},"span",{"class":120,"line":121},"line",1,[123,129,134,140,146],{"type":46,"tag":118,"props":124,"children":126},{"style":125},"color:#89DDFF;--shiki-dark:#89DDFF;--shiki-light:#39ADB5;font-style:italic;--shiki-dark-font-style:italic;--shiki-light-font-style:italic",[127],{"type":52,"value":128},"export",{"type":46,"tag":118,"props":130,"children":131},{"style":125},[132],{"type":52,"value":133}," default",{"type":46,"tag":118,"props":135,"children":137},{"style":136},"color:#82AAFF;--shiki-dark:#82AAFF;--shiki-light:#6182B8",[138],{"type":52,"value":139}," defineNuxtConfig",{"type":46,"tag":118,"props":141,"children":143},{"style":142},"color:#EEFFFF;--shiki-dark:#BABED8;--shiki-light:#90A4AE",[144],{"type":52,"value":145},"(",{"type":46,"tag":118,"props":147,"children":149},{"style":148},"color:#89DDFF;--shiki-dark:#89DDFF;--shiki-light:#39ADB5",[150],{"type":52,"value":151},"{",{"type":46,"tag":118,"props":153,"children":155},{"class":120,"line":154},2,[156,162,166,171,176,180,186],{"type":46,"tag":118,"props":157,"children":159},{"style":158},"color:#F07178;--shiki-dark:#F07178;--shiki-light:#E53935",[160],{"type":52,"value":161},"  devtools",{"type":46,"tag":118,"props":163,"children":164},{"style":148},[165],{"type":52,"value":105},{"type":46,"tag":118,"props":167,"children":168},{"style":148},[169],{"type":52,"value":170}," {",{"type":46,"tag":118,"props":172,"children":173},{"style":158},[174],{"type":52,"value":175}," enabled",{"type":46,"tag":118,"props":177,"children":178},{"style":148},[179],{"type":52,"value":105},{"type":46,"tag":118,"props":181,"children":183},{"style":182},"color:#FF9CAC;--shiki-dark:#FF9CAC;--shiki-light:#FF5370",[184],{"type":52,"value":185}," true",{"type":46,"tag":118,"props":187,"children":188},{"style":148},[189],{"type":52,"value":190}," },",{"type":46,"tag":118,"props":192,"children":194},{"class":120,"line":193},3,[195,200],{"type":46,"tag":118,"props":196,"children":197},{"style":148},[198],{"type":52,"value":199},"}",{"type":46,"tag":118,"props":201,"children":202},{"style":142},[203],{"type":52,"value":204},")",{"type":46,"tag":59,"props":206,"children":207},{},[208],{"type":52,"value":209},"Nuxt will automatically install the DevTools module for you.",{"type":46,"tag":73,"props":211,"children":213},{"id":212},"install-using-nuxi",[214],{"type":52,"value":215},"Install using Nuxi",{"type":46,"tag":59,"props":217,"children":218},{},[219],{"type":52,"value":220},"You can opt-in Nuxt DevTools per-project by going to the project root and run:",{"type":46,"tag":107,"props":222,"children":226},{"className":223,"code":224,"language":225,"meta":40,"style":40},"language-bash shiki shiki-themes material-theme material-theme-palenight material-theme-lighter","npx nuxi@latest devtools enable\n","bash",[227],{"type":46,"tag":85,"props":228,"children":229},{"__ignoreMap":40},[230],{"type":46,"tag":118,"props":231,"children":232},{"class":120,"line":121},[233,239,245,250],{"type":46,"tag":118,"props":234,"children":236},{"style":235},"color:#FFCB6B;--shiki-dark:#FFCB6B;--shiki-light:#E2931D",[237],{"type":52,"value":238},"npx",{"type":46,"tag":118,"props":240,"children":242},{"style":241},"color:#C3E88D;--shiki-dark:#C3E88D;--shiki-light:#91B859",[243],{"type":52,"value":244}," nuxi@latest",{"type":46,"tag":118,"props":246,"children":247},{"style":241},[248],{"type":52,"value":249}," devtools",{"type":46,"tag":118,"props":251,"children":252},{"style":241},[253],{"type":52,"value":254}," enable",{"type":46,"tag":59,"props":256,"children":257},{},[258,260,266,268,273,275,280,281,286,287,292],{"type":52,"value":259},"Restart your Nuxt server and open your app in browser. Click the Nuxt icon on the bottom (or press ",{"type":46,"tag":261,"props":262,"children":263},"kbd",{},[264],{"type":52,"value":265},"Shift",{"type":52,"value":267}," + ",{"type":46,"tag":261,"props":269,"children":270},{},[271],{"type":52,"value":272},"Alt",{"type":52,"value":274}," / ",{"type":46,"tag":261,"props":276,"children":277},{},[278],{"type":52,"value":279},"⇧ Shift",{"type":52,"value":267},{"type":46,"tag":261,"props":282,"children":283},{},[284],{"type":52,"value":285},"⌥ Option",{"type":52,"value":267},{"type":46,"tag":261,"props":288,"children":289},{},[290],{"type":52,"value":291},"D",{"type":52,"value":293},") to toggle the DevTools.",{"type":46,"tag":55,"props":295,"children":296},{},[297],{"type":46,"tag":59,"props":298,"children":299},{},[300,302,307],{"type":52,"value":301},"If you using ",{"type":46,"tag":85,"props":303,"children":304},{"className":40},[305],{"type":52,"value":306},"nvm",{"type":52,"value":308}," or other Node version managers, we suggest to run the enable command again after switching Node version.",{"type":46,"tag":59,"props":310,"children":311},{},[312],{"type":52,"value":313},"Similarly, you can disable it per-project by running:",{"type":46,"tag":107,"props":315,"children":317},{"className":223,"code":316,"language":225,"meta":40,"style":40},"npx nuxi@latest devtools disable\n",[318],{"type":46,"tag":85,"props":319,"children":320},{"__ignoreMap":40},[321],{"type":46,"tag":118,"props":322,"children":323},{"class":120,"line":121},[324,328,332,336],{"type":46,"tag":118,"props":325,"children":326},{"style":235},[327],{"type":52,"value":238},{"type":46,"tag":118,"props":329,"children":330},{"style":241},[331],{"type":52,"value":244},{"type":46,"tag":118,"props":333,"children":334},{"style":241},[335],{"type":52,"value":249},{"type":46,"tag":118,"props":337,"children":338},{"style":241},[339],{"type":52,"value":340}," disable",{"type":46,"tag":73,"props":342,"children":344},{"id":343},"install-manually",[345],{"type":52,"value":346},"Install Manually",{"type":46,"tag":59,"props":348,"children":349},{},[350],{"type":52,"value":351},"Nuxt DevTools is currently provided as a module (might be changed in the future). If you prefer, you can also install it locally, which will be activated for all your team members.",{"type":46,"tag":107,"props":353,"children":355},{"className":223,"code":354,"language":225,"meta":40,"style":40},"npm i -D @nuxt/devtools\n",[356],{"type":46,"tag":85,"props":357,"children":358},{"__ignoreMap":40},[359],{"type":46,"tag":118,"props":360,"children":361},{"class":120,"line":121},[362,367,372,377],{"type":46,"tag":118,"props":363,"children":364},{"style":235},[365],{"type":52,"value":366},"npm",{"type":46,"tag":118,"props":368,"children":369},{"style":241},[370],{"type":52,"value":371}," i",{"type":46,"tag":118,"props":373,"children":374},{"style":241},[375],{"type":52,"value":376}," -D",{"type":46,"tag":118,"props":378,"children":379},{"style":241},[380],{"type":52,"value":381}," @nuxt/devtools",{"type":46,"tag":107,"props":383,"children":385},{"className":109,"code":384,"language":112,"meta":40,"style":40},"// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxt/devtools',\n  ],\n})\n",[386],{"type":46,"tag":85,"props":387,"children":388},{"__ignoreMap":40},[389,398,421,438,462,475],{"type":46,"tag":118,"props":390,"children":391},{"class":120,"line":121},[392],{"type":46,"tag":118,"props":393,"children":395},{"style":394},"color:#546E7A;--shiki-dark:#676E95;--shiki-light:#90A4AE;font-style:italic;--shiki-dark-font-style:italic;--shiki-light-font-style:italic",[396],{"type":52,"value":397},"// nuxt.config.ts",{"type":46,"tag":118,"props":399,"children":400},{"class":120,"line":154},[401,405,409,413,417],{"type":46,"tag":118,"props":402,"children":403},{"style":125},[404],{"type":52,"value":128},{"type":46,"tag":118,"props":406,"children":407},{"style":125},[408],{"type":52,"value":133},{"type":46,"tag":118,"props":410,"children":411},{"style":136},[412],{"type":52,"value":139},{"type":46,"tag":118,"props":414,"children":415},{"style":142},[416],{"type":52,"value":145},{"type":46,"tag":118,"props":418,"children":419},{"style":148},[420],{"type":52,"value":151},{"type":46,"tag":118,"props":422,"children":423},{"class":120,"line":193},[424,429,433],{"type":46,"tag":118,"props":425,"children":426},{"style":158},[427],{"type":52,"value":428},"  modules",{"type":46,"tag":118,"props":430,"children":431},{"style":148},[432],{"type":52,"value":105},{"type":46,"tag":118,"props":434,"children":435},{"style":142},[436],{"type":52,"value":437}," [",{"type":46,"tag":118,"props":439,"children":441},{"class":120,"line":440},4,[442,447,452,457],{"type":46,"tag":118,"props":443,"children":444},{"style":148},[445],{"type":52,"value":446},"    '",{"type":46,"tag":118,"props":448,"children":449},{"style":241},[450],{"type":52,"value":451},"@nuxt/devtools",{"type":46,"tag":118,"props":453,"children":454},{"style":148},[455],{"type":52,"value":456},"'",{"type":46,"tag":118,"props":458,"children":459},{"style":148},[460],{"type":52,"value":461},",",{"type":46,"tag":118,"props":463,"children":465},{"class":120,"line":464},5,[466,471],{"type":46,"tag":118,"props":467,"children":468},{"style":142},[469],{"type":52,"value":470},"  ]",{"type":46,"tag":118,"props":472,"children":473},{"style":148},[474],{"type":52,"value":461},{"type":46,"tag":118,"props":476,"children":478},{"class":120,"line":477},6,[479,483],{"type":46,"tag":118,"props":480,"children":481},{"style":148},[482],{"type":52,"value":199},{"type":46,"tag":118,"props":484,"children":485},{"style":142},[486],{"type":52,"value":204},{"type":46,"tag":73,"props":488,"children":490},{"id":489},"edge-release-channel",[491],{"type":52,"value":492},"Edge Release Channel",{"type":46,"tag":59,"props":494,"children":495},{},[496,498,507,509,514],{"type":52,"value":497},"Similar to ",{"type":46,"tag":499,"props":500,"children":504},"a",{"href":501,"rel":502},"https://nuxt.com/docs/guide/going-further/edge-channel#opting-into-the-edge-channel",[503],"nofollow",[505],{"type":52,"value":506},"Nuxt's Edge Channel",{"type":52,"value":508},", DevTools also offers an edge release channel, that automatically releases for every commit to ",{"type":46,"tag":85,"props":510,"children":511},{"className":40},[512],{"type":52,"value":513},"main",{"type":52,"value":515}," branch.",{"type":46,"tag":59,"props":517,"children":518},{},[519],{"type":52,"value":520},"You can opt-in to the edge release channel by running:",{"type":46,"tag":107,"props":522,"children":526},{"className":523,"code":524,"language":525,"meta":40,"style":40},"language-diff shiki shiki-themes material-theme material-theme-palenight material-theme-lighter","{\n  \"devDependencies\": {\n--    \"@nuxt/devtools\": \"^0.1.0\"\n++    \"@nuxt/devtools\": \"npm:@nuxt/devtools-edge@latest\"\n  }\n}\n","diff",[527],{"type":46,"tag":85,"props":528,"children":529},{"__ignoreMap":40},[530,537,545,558,571,579],{"type":46,"tag":118,"props":531,"children":532},{"class":120,"line":121},[533],{"type":46,"tag":118,"props":534,"children":535},{"style":142},[536],{"type":52,"value":151},{"type":46,"tag":118,"props":538,"children":539},{"class":120,"line":154},[540],{"type":46,"tag":118,"props":541,"children":542},{"style":142},[543],{"type":52,"value":544},"  \"devDependencies\": {",{"type":46,"tag":118,"props":546,"children":547},{"class":120,"line":193},[548,553],{"type":46,"tag":118,"props":549,"children":550},{"style":148},[551],{"type":52,"value":552},"-",{"type":46,"tag":118,"props":554,"children":555},{"style":158},[556],{"type":52,"value":557},"-    \"@nuxt/devtools\": \"^0.1.0\"",{"type":46,"tag":118,"props":559,"children":560},{"class":120,"line":440},[561,566],{"type":46,"tag":118,"props":562,"children":563},{"style":148},[564],{"type":52,"value":565},"+",{"type":46,"tag":118,"props":567,"children":568},{"style":241},[569],{"type":52,"value":570},"+    \"@nuxt/devtools\": \"npm:@nuxt/devtools-edge@latest\"",{"type":46,"tag":118,"props":572,"children":573},{"class":120,"line":464},[574],{"type":46,"tag":118,"props":575,"children":576},{"style":142},[577],{"type":52,"value":578},"  }",{"type":46,"tag":118,"props":580,"children":581},{"class":120,"line":477},[582],{"type":46,"tag":118,"props":583,"children":584},{"style":142},[585],{"type":52,"value":199},{"type":46,"tag":59,"props":587,"children":588},{},[589,591,596,598,603,605,610],{"type":52,"value":590},"Remove lockfile (",{"type":46,"tag":85,"props":592,"children":593},{"className":40},[594],{"type":52,"value":595},"package-lock.json",{"type":52,"value":597},", ",{"type":46,"tag":85,"props":599,"children":600},{"className":40},[601],{"type":52,"value":602},"yarn.lock",{"type":52,"value":604},", or ",{"type":46,"tag":85,"props":606,"children":607},{"className":40},[608],{"type":52,"value":609},"pnpm-lock.yaml",{"type":52,"value":611},") and reinstall dependencies.",{"type":46,"tag":73,"props":613,"children":615},{"id":614},"module-options",[616],{"type":52,"value":617},"Module Options",{"type":46,"tag":59,"props":619,"children":620},{},[621,623,627],{"type":52,"value":622},"To configure Nuxt DevTools, you can pass the ",{"type":46,"tag":85,"props":624,"children":625},{"className":40},[626],{"type":52,"value":96},{"type":52,"value":628}," options.",{"type":46,"tag":107,"props":630,"children":632},{"className":109,"code":631,"language":112,"meta":40,"style":40},"// nuxt.config.ts\nexport default defineNuxtConfig({\n  devtools: {\n    // Enable devtools (default: true)\n    enabled: true,\n    // VS Code Server options\n    vscode: {},\n    // ...other options\n  }\n})\n",[633],{"type":46,"tag":85,"props":634,"children":635},{"__ignoreMap":40},[636,643,666,681,689,709,717,735,744,752],{"type":46,"tag":118,"props":637,"children":638},{"class":120,"line":121},[639],{"type":46,"tag":118,"props":640,"children":641},{"style":394},[642],{"type":52,"value":397},{"type":46,"tag":118,"props":644,"children":645},{"class":120,"line":154},[646,650,654,658,662],{"type":46,"tag":118,"props":647,"children":648},{"style":125},[649],{"type":52,"value":128},{"type":46,"tag":118,"props":651,"children":652},{"style":125},[653],{"type":52,"value":133},{"type":46,"tag":118,"props":655,"children":656},{"style":136},[657],{"type":52,"value":139},{"type":46,"tag":118,"props":659,"children":660},{"style":142},[661],{"type":52,"value":145},{"type":46,"tag":118,"props":663,"children":664},{"style":148},[665],{"type":52,"value":151},{"type":46,"tag":118,"props":667,"children":668},{"class":120,"line":193},[669,673,677],{"type":46,"tag":118,"props":670,"children":671},{"style":158},[672],{"type":52,"value":161},{"type":46,"tag":118,"props":674,"children":675},{"style":148},[676],{"type":52,"value":105},{"type":46,"tag":118,"props":678,"children":679},{"style":148},[680],{"type":52,"value":170},{"type":46,"tag":118,"props":682,"children":683},{"class":120,"line":440},[684],{"type":46,"tag":118,"props":685,"children":686},{"style":394},[687],{"type":52,"value":688},"    // Enable devtools (default: true)",{"type":46,"tag":118,"props":690,"children":691},{"class":120,"line":464},[692,697,701,705],{"type":46,"tag":118,"props":693,"children":694},{"style":158},[695],{"type":52,"value":696},"    enabled",{"type":46,"tag":118,"props":698,"children":699},{"style":148},[700],{"type":52,"value":105},{"type":46,"tag":118,"props":702,"children":703},{"style":182},[704],{"type":52,"value":185},{"type":46,"tag":118,"props":706,"children":707},{"style":148},[708],{"type":52,"value":461},{"type":46,"tag":118,"props":710,"children":711},{"class":120,"line":477},[712],{"type":46,"tag":118,"props":713,"children":714},{"style":394},[715],{"type":52,"value":716},"    // VS Code Server options",{"type":46,"tag":118,"props":718,"children":720},{"class":120,"line":719},7,[721,726,730],{"type":46,"tag":118,"props":722,"children":723},{"style":158},[724],{"type":52,"value":725},"    vscode",{"type":46,"tag":118,"props":727,"children":728},{"style":148},[729],{"type":52,"value":105},{"type":46,"tag":118,"props":731,"children":732},{"style":148},[733],{"type":52,"value":734}," {},",{"type":46,"tag":118,"props":736,"children":738},{"class":120,"line":737},8,[739],{"type":46,"tag":118,"props":740,"children":741},{"style":394},[742],{"type":52,"value":743},"    // ...other options",{"type":46,"tag":118,"props":745,"children":747},{"class":120,"line":746},9,[748],{"type":46,"tag":118,"props":749,"children":750},{"style":148},[751],{"type":52,"value":578},{"type":46,"tag":118,"props":753,"children":755},{"class":120,"line":754},10,[756,760],{"type":46,"tag":118,"props":757,"children":758},{"style":148},[759],{"type":52,"value":199},{"type":46,"tag":118,"props":761,"children":762},{"style":142},[763],{"type":52,"value":204},{"type":46,"tag":59,"props":765,"children":766},{},[767,769,776],{"type":52,"value":768},"For all options available, please refer to TSDocs in your IDE, or the ",{"type":46,"tag":499,"props":770,"children":773},{"href":771,"rel":772},"https://github.com/nuxt/devtools/blob/main/packages/devtools-kit/src/_types/options.ts#L6",[503],[774],{"type":52,"value":775},"type definition file",{"type":52,"value":71},{"type":46,"tag":778,"props":779,"children":780},"style",{},[781],{"type":52,"value":782},"html.dark .shiki span {color: var(--shiki-dark) !important;background: var(--shiki-dark-bg) !important;font-style: var(--shiki-dark-font-style) !important;font-weight: var(--shiki-dark-font-weight) !important;text-decoration: var(--shiki-dark-text-decoration) !important;}html.light .shiki span {color: var(--shiki-light) !important;background: var(--shiki-light-bg) !important;font-style: var(--shiki-light-font-style) !important;font-weight: var(--shiki-light-font-weight) !important;text-decoration: var(--shiki-light-text-decoration) !important;}",{"title":40,"searchDepth":154,"depth":154,"links":784},[785],{"id":49,"depth":154,"text":53,"children":786},[787,788,789,790,791],{"id":75,"depth":193,"text":78},{"id":212,"depth":193,"text":215},{"id":343,"depth":193,"text":346},{"id":489,"depth":193,"text":492},{"id":614,"depth":193,"text":617},"markdown","content:1.guide:0.getting-started.md","content","1.guide/0.getting-started.md","md",null,1698390517375]