[{"data":1,"prerenderedAt":287},["ShallowReactive",2],{"navigation":3,"docs-\u002Fguide\u002Fcomposables":52,"docs-\u002Fguide\u002Fcomposables-surround":282},[4,22,43],{"title":5,"path":6,"stem":7,"children":8,"page":21},"Guide","\u002Fguide","1.guide",[9,13,17],{"title":10,"path":11,"stem":12},"Getting Started","\u002Fguide\u002Fgetting-started","1.guide\u002F0.getting-started",{"title":14,"path":15,"stem":16},"Features","\u002Fguide\u002Ffeatures","1.guide\u002F1.features",{"title":18,"path":19,"stem":20},"Composables","\u002Fguide\u002Fcomposables","1.guide\u002F2.composables",false,{"title":23,"path":24,"stem":25,"children":26,"page":21},"Module","\u002Fmodule","2.module",[27,31,35,39],{"title":28,"path":29,"stem":30},"Module Authors","\u002Fmodule\u002Fguide","2.module\u002F0.guide",{"title":32,"path":33,"stem":34},"Utility Kit","\u002Fmodule\u002Futils-kit","2.module\u002F1.utils-kit",{"title":36,"path":37,"stem":38},"UI Kit","\u002Fmodule\u002Fui-kit","2.module\u002F2.ui-kit",{"title":40,"path":41,"stem":42},"Migration to v4","\u002Fmodule\u002Fmigration-v4","2.module\u002F3.migration-v4",{"title":44,"path":45,"stem":46,"children":47,"page":21},"Development","\u002Fdevelopment","3.development",[48],{"title":49,"path":50,"stem":51},"Contribution Guide","\u002Fdevelopment\u002Fcontributing","3.development\u002F0.contributing",{"id":53,"title":18,"body":54,"description":277,"extension":278,"meta":279,"navigation":140,"path":19,"seo":280,"stem":20,"__hash__":281},"docs\u002F1.guide\u002F2.composables.md",{"type":55,"value":56,"toc":275},"minimark",[57,66,232,235,268,271],[58,59,60,61,65],"p",{},"In case you might want to open or control the Nuxt DevTools in your application on development, a composable ",[62,63,64],"code",{},"useNuxtDevtools"," is registered with auto-import.",[67,68,73],"pre",{"className":69,"code":70,"language":71,"meta":72,"style":72},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\n\u002F\u002F Returns undefined in production mode or when the DevTools are not enabled\nconst devtoolsClient = useNuxtDevTools() \u002F\u002F NuxtDevToolsHostClient | undefined\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton\n    v-if=\"devtoolsClient\"\n    @click=\"devtoolsClient.devtools.navigate('\u002Fmodules\u002Fcomponents')\"\n  >\n    \u003C!-- Open the DevTools and navigate to the components tab -->\n    Open DevTools\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","vue","",[62,74,75,95,102,125,135,142,152,161,179,194,200,206,212,223],{"__ignoreMap":72},[76,77,80,84,88,92],"span",{"class":78,"line":79},"line",1,[76,81,83],{"class":82},"sMK4o","\u003C",[76,85,87],{"class":86},"swJcz","script",[76,89,91],{"class":90},"spNyl"," setup",[76,93,94],{"class":82},">\n",[76,96,98],{"class":78,"line":97},2,[76,99,101],{"class":100},"sHwdD","\u002F\u002F Returns undefined in production mode or when the DevTools are not enabled\n",[76,103,105,108,112,115,119,122],{"class":78,"line":104},3,[76,106,107],{"class":90},"const",[76,109,111],{"class":110},"sTEyZ"," devtoolsClient ",[76,113,114],{"class":82},"=",[76,116,118],{"class":117},"s2Zo4"," useNuxtDevTools",[76,120,121],{"class":110},"() ",[76,123,124],{"class":100},"\u002F\u002F NuxtDevToolsHostClient | undefined\n",[76,126,128,131,133],{"class":78,"line":127},4,[76,129,130],{"class":82},"\u003C\u002F",[76,132,87],{"class":86},[76,134,94],{"class":82},[76,136,138],{"class":78,"line":137},5,[76,139,141],{"emptyLinePlaceholder":140},true,"\n",[76,143,145,147,150],{"class":78,"line":144},6,[76,146,83],{"class":82},[76,148,149],{"class":86},"template",[76,151,94],{"class":82},[76,153,155,158],{"class":78,"line":154},7,[76,156,157],{"class":82},"  \u003C",[76,159,160],{"class":86},"button\n",[76,162,164,167,169,172,176],{"class":78,"line":163},8,[76,165,166],{"class":90},"    v-if",[76,168,114],{"class":82},[76,170,171],{"class":82},"\"",[76,173,175],{"class":174},"sfazB","devtoolsClient",[76,177,178],{"class":82},"\"\n",[76,180,182,185,187,189,192],{"class":78,"line":181},9,[76,183,184],{"class":90},"    @click",[76,186,114],{"class":82},[76,188,171],{"class":82},[76,190,191],{"class":174},"devtoolsClient.devtools.navigate('\u002Fmodules\u002Fcomponents')",[76,193,178],{"class":82},[76,195,197],{"class":78,"line":196},10,[76,198,199],{"class":82},"  >\n",[76,201,203],{"class":78,"line":202},11,[76,204,205],{"class":100},"    \u003C!-- Open the DevTools and navigate to the components tab -->\n",[76,207,209],{"class":78,"line":208},12,[76,210,211],{"class":110},"    Open DevTools\n",[76,213,215,218,221],{"class":78,"line":214},13,[76,216,217],{"class":82},"  \u003C\u002F",[76,219,220],{"class":86},"button",[76,222,94],{"class":82},[76,224,226,228,230],{"class":78,"line":225},14,[76,227,130],{"class":82},[76,229,149],{"class":86},[76,231,94],{"class":82},[58,233,234],{},"When you have auto-import disabled, you can also import it explicitly:",[67,236,240],{"className":237,"code":238,"language":239,"meta":72,"style":72},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useNuxtDevTools } from '#imports'\n","ts",[62,241,242],{"__ignoreMap":72},[76,243,244,248,251,253,256,259,262,265],{"class":78,"line":79},[76,245,247],{"class":246},"s7zQu","import",[76,249,250],{"class":82}," {",[76,252,118],{"class":110},[76,254,255],{"class":82}," }",[76,257,258],{"class":246}," from",[76,260,261],{"class":82}," '",[76,263,264],{"class":174},"#imports",[76,266,267],{"class":82},"'\n",[58,269,270],{},"Checkout it's type definition for more available methods.",[272,273,274],"style",{},"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}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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}",{"title":72,"searchDepth":97,"depth":97,"links":276},[],"Open or control Nuxt DevTools with the useNuxtDevtools composable.","md",{},{"title":18,"description":277},"aYufhjD8xp1ocjAUVcBnjmfl-cJaB7iCZ_u-35n8sfE",[283,285],{"title":14,"path":15,"stem":16,"description":284,"children":-1},"Discover all the features the Nuxt Devtools can offer.",{"title":28,"path":29,"stem":30,"description":286,"children":-1},"Add your own modules integration to the Nuxt DevTools.",1774568848203]