[{"data":1,"prerenderedAt":799},["Reactive",2],{"navigation":3,"docs-/guide/getting-started":37},[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":794,"_id":795,"_source":796,"_file":797,"_extension":798},"guide",false,"","Using Nuxt DevTools in your Nuxt project is only a command away.",{"type":43,"children":44,"toc":785},"root",[45,54,72,79,106,205,210,216,221,255,294,309,314,341,347,352,382,487,493,516,521,587,613,619,630,766,779],{"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-lighter material-theme material-theme-palenight","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},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF;--shiki-light-font-style:italic;--shiki-default-font-style:italic;--shiki-dark-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},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[138],{"type":52,"value":139}," defineNuxtConfig",{"type":46,"tag":118,"props":141,"children":143},{"style":142},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[144],{"type":52,"value":145},"(",{"type":46,"tag":118,"props":147,"children":149},{"style":148},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[150],{"type":52,"value":151},"{\n",{"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},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[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},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[184],{"type":52,"value":185}," true",{"type":46,"tag":118,"props":187,"children":188},{"style":148},[189],{"type":52,"value":190}," },\n",{"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},")\n",{"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-lighter material-theme material-theme-palenight","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},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[237],{"type":52,"value":238},"npx",{"type":46,"tag":118,"props":240,"children":242},{"style":241},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[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\n",{"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\n",{"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\n",{"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},"--shiki-light:#90A4AE;--shiki-default:#546E7A;--shiki-dark:#676E95;--shiki-light-font-style:italic;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[396],{"type":52,"value":397},"// nuxt.config.ts\n",{"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}," [\n",{"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},",\n",{"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-lighter material-theme material-theme-palenight","{\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\": {\n",{"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\"\n",{"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\"\n",{"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},"  }\n",{"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":586},"}\n",{"type":46,"tag":59,"props":588,"children":589},{},[590,592,597,599,604,606,611],{"type":52,"value":591},"Remove lockfile (",{"type":46,"tag":85,"props":593,"children":594},{"className":40},[595],{"type":52,"value":596},"package-lock.json",{"type":52,"value":598},", ",{"type":46,"tag":85,"props":600,"children":601},{"className":40},[602],{"type":52,"value":603},"yarn.lock",{"type":52,"value":605},", or ",{"type":46,"tag":85,"props":607,"children":608},{"className":40},[609],{"type":52,"value":610},"pnpm-lock.yaml",{"type":52,"value":612},") and reinstall dependencies.",{"type":46,"tag":73,"props":614,"children":616},{"id":615},"module-options",[617],{"type":52,"value":618},"Module Options",{"type":46,"tag":59,"props":620,"children":621},{},[622,624,628],{"type":52,"value":623},"To configure Nuxt DevTools, you can pass the ",{"type":46,"tag":85,"props":625,"children":626},{"className":40},[627],{"type":52,"value":96},{"type":52,"value":629}," options.",{"type":46,"tag":107,"props":631,"children":633},{"className":109,"code":632,"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",[634],{"type":46,"tag":85,"props":635,"children":636},{"__ignoreMap":40},[637,644,667,683,691,711,719,737,746,754],{"type":46,"tag":118,"props":638,"children":639},{"class":120,"line":121},[640],{"type":46,"tag":118,"props":641,"children":642},{"style":394},[643],{"type":52,"value":397},{"type":46,"tag":118,"props":645,"children":646},{"class":120,"line":154},[647,651,655,659,663],{"type":46,"tag":118,"props":648,"children":649},{"style":125},[650],{"type":52,"value":128},{"type":46,"tag":118,"props":652,"children":653},{"style":125},[654],{"type":52,"value":133},{"type":46,"tag":118,"props":656,"children":657},{"style":136},[658],{"type":52,"value":139},{"type":46,"tag":118,"props":660,"children":661},{"style":142},[662],{"type":52,"value":145},{"type":46,"tag":118,"props":664,"children":665},{"style":148},[666],{"type":52,"value":151},{"type":46,"tag":118,"props":668,"children":669},{"class":120,"line":193},[670,674,678],{"type":46,"tag":118,"props":671,"children":672},{"style":158},[673],{"type":52,"value":161},{"type":46,"tag":118,"props":675,"children":676},{"style":148},[677],{"type":52,"value":105},{"type":46,"tag":118,"props":679,"children":680},{"style":148},[681],{"type":52,"value":682}," {\n",{"type":46,"tag":118,"props":684,"children":685},{"class":120,"line":440},[686],{"type":46,"tag":118,"props":687,"children":688},{"style":394},[689],{"type":52,"value":690},"    // Enable devtools (default: true)\n",{"type":46,"tag":118,"props":692,"children":693},{"class":120,"line":464},[694,699,703,707],{"type":46,"tag":118,"props":695,"children":696},{"style":158},[697],{"type":52,"value":698},"    enabled",{"type":46,"tag":118,"props":700,"children":701},{"style":148},[702],{"type":52,"value":105},{"type":46,"tag":118,"props":704,"children":705},{"style":182},[706],{"type":52,"value":185},{"type":46,"tag":118,"props":708,"children":709},{"style":148},[710],{"type":52,"value":461},{"type":46,"tag":118,"props":712,"children":713},{"class":120,"line":477},[714],{"type":46,"tag":118,"props":715,"children":716},{"style":394},[717],{"type":52,"value":718},"    // VS Code Server options\n",{"type":46,"tag":118,"props":720,"children":722},{"class":120,"line":721},7,[723,728,732],{"type":46,"tag":118,"props":724,"children":725},{"style":158},[726],{"type":52,"value":727},"    vscode",{"type":46,"tag":118,"props":729,"children":730},{"style":148},[731],{"type":52,"value":105},{"type":46,"tag":118,"props":733,"children":734},{"style":148},[735],{"type":52,"value":736}," {},\n",{"type":46,"tag":118,"props":738,"children":740},{"class":120,"line":739},8,[741],{"type":46,"tag":118,"props":742,"children":743},{"style":394},[744],{"type":52,"value":745},"    // ...other options\n",{"type":46,"tag":118,"props":747,"children":749},{"class":120,"line":748},9,[750],{"type":46,"tag":118,"props":751,"children":752},{"style":148},[753],{"type":52,"value":578},{"type":46,"tag":118,"props":755,"children":757},{"class":120,"line":756},10,[758,762],{"type":46,"tag":118,"props":759,"children":760},{"style":148},[761],{"type":52,"value":199},{"type":46,"tag":118,"props":763,"children":764},{"style":142},[765],{"type":52,"value":204},{"type":46,"tag":59,"props":767,"children":768},{},[769,771,778],{"type":52,"value":770},"For all options available, please refer to TSDocs in your IDE, or the ",{"type":46,"tag":499,"props":772,"children":775},{"href":773,"rel":774},"https://github.com/nuxt/devtools/blob/main/packages/devtools-kit/src/_types/options.ts#L6",[503],[776],{"type":52,"value":777},"type definition file",{"type":52,"value":71},{"type":46,"tag":780,"props":781,"children":782},"style",{},[783],{"type":52,"value":784},"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 .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.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 .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);}",{"title":40,"searchDepth":154,"depth":154,"links":786},[787],{"id":49,"depth":154,"text":53,"children":788},[789,790,791,792,793],{"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":615,"depth":193,"text":618},"markdown","content:1.guide:0.getting-started.md","content","1.guide/0.getting-started.md","md",1702469253975]