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