[{"data":1,"prerenderedAt":4495},["ShallowReactive",2],{"navigation":3,"docs-/guide/composables":37,"docs-/guide/composables-surround":444},[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":16,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":15,"description":41,"body":42,"_type":438,"_id":439,"_source":440,"_file":441,"_stem":442,"_extension":443},"guide",false,"","Open or control Nuxt DevTools with the useNuxtDevtools composable.",{"type":43,"children":44,"toc":436},"root",[45,62,369,374,425,430],{"type":46,"tag":47,"props":48,"children":49},"element","p",{},[50,53,60],{"type":51,"value":52},"text","In case you might want to open or control the Nuxt DevTools in your application on development, a composable ",{"type":46,"tag":54,"props":55,"children":57},"code",{"className":56},[],[58],{"type":51,"value":59},"useNuxtDevtools",{"type":51,"value":61}," is registered with auto-import.",{"type":46,"tag":63,"props":64,"children":68},"pre",{"className":65,"code":66,"language":67,"meta":40,"style":40},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\n// Returns undefined in production mode or when the DevTools are not enabled\nconst devtoolsClient = useNuxtDevTools() // NuxtDevToolsHostClient | undefined\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cbutton\n    v-if=\"devtoolsClient\"\n    @click=\"devtoolsClient.devtools.navigate('/modules/components')\"\n  >\n    \u003C!-- Open the DevTools and navigate to the components tab -->\n    Open DevTools\n  \u003C/button>\n\u003C/template>\n","vue",[69],{"type":46,"tag":54,"props":70,"children":71},{"__ignoreMap":40},[72,101,111,147,164,174,191,205,234,308,317,326,335,353],{"type":46,"tag":73,"props":74,"children":77},"span",{"class":75,"line":76},"line",1,[78,84,90,96],{"type":46,"tag":73,"props":79,"children":81},{"style":80},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[82],{"type":51,"value":83},"\u003C",{"type":46,"tag":73,"props":85,"children":87},{"style":86},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[88],{"type":51,"value":89},"script",{"type":46,"tag":73,"props":91,"children":93},{"style":92},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[94],{"type":51,"value":95}," setup",{"type":46,"tag":73,"props":97,"children":98},{"style":80},[99],{"type":51,"value":100},">\n",{"type":46,"tag":73,"props":102,"children":104},{"class":75,"line":103},2,[105],{"type":46,"tag":73,"props":106,"children":108},{"style":107},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[109],{"type":51,"value":110},"// Returns undefined in production mode or when the DevTools are not enabled\n",{"type":46,"tag":73,"props":112,"children":114},{"class":75,"line":113},3,[115,120,126,131,137,142],{"type":46,"tag":73,"props":116,"children":117},{"style":92},[118],{"type":51,"value":119},"const",{"type":46,"tag":73,"props":121,"children":123},{"style":122},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[124],{"type":51,"value":125}," devtoolsClient ",{"type":46,"tag":73,"props":127,"children":128},{"style":80},[129],{"type":51,"value":130},"=",{"type":46,"tag":73,"props":132,"children":134},{"style":133},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[135],{"type":51,"value":136}," useNuxtDevTools",{"type":46,"tag":73,"props":138,"children":139},{"style":122},[140],{"type":51,"value":141},"() ",{"type":46,"tag":73,"props":143,"children":144},{"style":107},[145],{"type":51,"value":146},"// NuxtDevToolsHostClient | undefined\n",{"type":46,"tag":73,"props":148,"children":150},{"class":75,"line":149},4,[151,156,160],{"type":46,"tag":73,"props":152,"children":153},{"style":80},[154],{"type":51,"value":155},"\u003C/",{"type":46,"tag":73,"props":157,"children":158},{"style":86},[159],{"type":51,"value":89},{"type":46,"tag":73,"props":161,"children":162},{"style":80},[163],{"type":51,"value":100},{"type":46,"tag":73,"props":165,"children":167},{"class":75,"line":166},5,[168],{"type":46,"tag":73,"props":169,"children":171},{"emptyLinePlaceholder":170},true,[172],{"type":51,"value":173},"\n",{"type":46,"tag":73,"props":175,"children":177},{"class":75,"line":176},6,[178,182,187],{"type":46,"tag":73,"props":179,"children":180},{"style":80},[181],{"type":51,"value":83},{"type":46,"tag":73,"props":183,"children":184},{"style":86},[185],{"type":51,"value":186},"template",{"type":46,"tag":73,"props":188,"children":189},{"style":80},[190],{"type":51,"value":100},{"type":46,"tag":73,"props":192,"children":194},{"class":75,"line":193},7,[195,200],{"type":46,"tag":73,"props":196,"children":197},{"style":80},[198],{"type":51,"value":199},"  \u003C",{"type":46,"tag":73,"props":201,"children":202},{"style":86},[203],{"type":51,"value":204},"button\n",{"type":46,"tag":73,"props":206,"children":208},{"class":75,"line":207},8,[209,215,219,224,229],{"type":46,"tag":73,"props":210,"children":212},{"style":211},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[213],{"type":51,"value":214},"    v-if",{"type":46,"tag":73,"props":216,"children":217},{"style":80},[218],{"type":51,"value":130},{"type":46,"tag":73,"props":220,"children":221},{"style":80},[222],{"type":51,"value":223},"\"",{"type":46,"tag":73,"props":225,"children":226},{"style":122},[227],{"type":51,"value":228},"devtoolsClient",{"type":46,"tag":73,"props":230,"children":231},{"style":80},[232],{"type":51,"value":233},"\"\n",{"type":46,"tag":73,"props":235,"children":237},{"class":75,"line":236},9,[238,243,248,252,256,260,265,270,274,279,284,289,295,299,304],{"type":46,"tag":73,"props":239,"children":240},{"style":80},[241],{"type":51,"value":242},"    @",{"type":46,"tag":73,"props":244,"children":245},{"style":92},[246],{"type":51,"value":247},"click",{"type":46,"tag":73,"props":249,"children":250},{"style":80},[251],{"type":51,"value":130},{"type":46,"tag":73,"props":253,"children":254},{"style":80},[255],{"type":51,"value":223},{"type":46,"tag":73,"props":257,"children":258},{"style":122},[259],{"type":51,"value":228},{"type":46,"tag":73,"props":261,"children":262},{"style":80},[263],{"type":51,"value":264},".",{"type":46,"tag":73,"props":266,"children":267},{"style":122},[268],{"type":51,"value":269},"devtools",{"type":46,"tag":73,"props":271,"children":272},{"style":80},[273],{"type":51,"value":264},{"type":46,"tag":73,"props":275,"children":276},{"style":133},[277],{"type":51,"value":278},"navigate",{"type":46,"tag":73,"props":280,"children":281},{"style":80},[282],{"type":51,"value":283},"(",{"type":46,"tag":73,"props":285,"children":286},{"style":80},[287],{"type":51,"value":288},"'",{"type":46,"tag":73,"props":290,"children":292},{"style":291},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[293],{"type":51,"value":294},"/modules/components",{"type":46,"tag":73,"props":296,"children":297},{"style":80},[298],{"type":51,"value":288},{"type":46,"tag":73,"props":300,"children":301},{"style":80},[302],{"type":51,"value":303},")",{"type":46,"tag":73,"props":305,"children":306},{"style":80},[307],{"type":51,"value":233},{"type":46,"tag":73,"props":309,"children":311},{"class":75,"line":310},10,[312],{"type":46,"tag":73,"props":313,"children":314},{"style":80},[315],{"type":51,"value":316},"  >\n",{"type":46,"tag":73,"props":318,"children":320},{"class":75,"line":319},11,[321],{"type":46,"tag":73,"props":322,"children":323},{"style":107},[324],{"type":51,"value":325},"    \u003C!-- Open the DevTools and navigate to the components tab -->\n",{"type":46,"tag":73,"props":327,"children":329},{"class":75,"line":328},12,[330],{"type":46,"tag":73,"props":331,"children":332},{"style":122},[333],{"type":51,"value":334},"    Open DevTools\n",{"type":46,"tag":73,"props":336,"children":338},{"class":75,"line":337},13,[339,344,349],{"type":46,"tag":73,"props":340,"children":341},{"style":80},[342],{"type":51,"value":343},"  \u003C/",{"type":46,"tag":73,"props":345,"children":346},{"style":86},[347],{"type":51,"value":348},"button",{"type":46,"tag":73,"props":350,"children":351},{"style":80},[352],{"type":51,"value":100},{"type":46,"tag":73,"props":354,"children":356},{"class":75,"line":355},14,[357,361,365],{"type":46,"tag":73,"props":358,"children":359},{"style":80},[360],{"type":51,"value":155},{"type":46,"tag":73,"props":362,"children":363},{"style":86},[364],{"type":51,"value":186},{"type":46,"tag":73,"props":366,"children":367},{"style":80},[368],{"type":51,"value":100},{"type":46,"tag":47,"props":370,"children":371},{},[372],{"type":51,"value":373},"When you have auto-import disabled, you can also import it explicitly:",{"type":46,"tag":63,"props":375,"children":379},{"className":376,"code":377,"language":378,"meta":40,"style":40},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useNuxtDevTools } from '#imports'\n","ts",[380],{"type":46,"tag":54,"props":381,"children":382},{"__ignoreMap":40},[383],{"type":46,"tag":73,"props":384,"children":385},{"class":75,"line":76},[386,391,396,400,405,410,415,420],{"type":46,"tag":73,"props":387,"children":388},{"style":211},[389],{"type":51,"value":390},"import",{"type":46,"tag":73,"props":392,"children":393},{"style":80},[394],{"type":51,"value":395}," {",{"type":46,"tag":73,"props":397,"children":398},{"style":122},[399],{"type":51,"value":136},{"type":46,"tag":73,"props":401,"children":402},{"style":80},[403],{"type":51,"value":404}," }",{"type":46,"tag":73,"props":406,"children":407},{"style":211},[408],{"type":51,"value":409}," from",{"type":46,"tag":73,"props":411,"children":412},{"style":80},[413],{"type":51,"value":414}," '",{"type":46,"tag":73,"props":416,"children":417},{"style":291},[418],{"type":51,"value":419},"#imports",{"type":46,"tag":73,"props":421,"children":422},{"style":80},[423],{"type":51,"value":424},"'\n",{"type":46,"tag":47,"props":426,"children":427},{},[428],{"type":51,"value":429},"Checkout it's type definition for more available methods.",{"type":46,"tag":431,"props":432,"children":433},"style",{},[434],{"type":51,"value":435},"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);}",{"title":40,"searchDepth":103,"depth":103,"links":437},[],"markdown","content:1.guide:2.composables.md","content","1.guide/2.composables.md","1.guide/2.composables","md",[445,1718],{"_path":13,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":12,"description":446,"body":447,"_type":438,"_id":1715,"_source":440,"_file":1716,"_stem":1717,"_extension":443},"Discover all the features the Nuxt Devtools can offer.",{"type":43,"children":448,"toc":1683},[449,464,471,476,483,489,494,499,505,510,515,520,525,530,535,541,546,551,557,562,567,572,578,583,588,594,599,605,610,616,621,627,632,638,643,649,654,660,665,671,676,688,694,699,710,716,721,726,733,762,901,907,966,971,1050,1070,1080,1237,1243,1286,1448,1454,1464,1475,1487,1493,1498,1503,1509,1514,1519,1525,1543,1548,1554,1559,1565,1613,1619,1639,1644,1663,1668,1679],{"type":46,"tag":47,"props":450,"children":451},{},[452,454,463],{"type":51,"value":453},"You can learn more in our ",{"type":46,"tag":455,"props":456,"children":460},"a",{"href":457,"rel":458},"https://github.com/nuxt/devtools/discussions/31",[459],"nofollow",[461],{"type":51,"value":462},"roadmap",{"type":51,"value":264},{"type":46,"tag":465,"props":466,"children":468},"h2",{"id":467},"overview",[469],{"type":51,"value":470},"Overview",{"type":46,"tag":47,"props":472,"children":473},{},[474],{"type":51,"value":475},"Shows a quick overview of your app, including the Nuxt version (which if it’s not up to date you can easily update it), Vue version, pages, components, imports, modules and plugins that you are using, and your app’s loading time and more!",{"type":46,"tag":477,"props":478,"children":482},"img",{"width":479,"src":480,"alt":481},1284,"https://user-images.githubusercontent.com/11247099/217670797-12c33a03-ca4f-490d-a18a-ab9008b89c15.png","Nuxt DevTools Overview",[],{"type":46,"tag":465,"props":484,"children":486},{"id":485},"pages",[487],{"type":51,"value":488},"Pages",{"type":46,"tag":47,"props":490,"children":491},{},[492],{"type":51,"value":493},"Pages tab shows your current routes with some useful information such as what layout or middleware it has, and provides a quick way to navigate between pages. You can also use the textbox to see how each route is matched.",{"type":46,"tag":477,"props":495,"children":498},{"width":479,"src":496,"alt":497},"https://user-images.githubusercontent.com/11247099/217670804-e48482af-de37-47be-88d8-d9515e796d5f.png","Nuxt DevTools Pages tab",[],{"type":46,"tag":465,"props":500,"children":502},{"id":501},"components",[503],{"type":51,"value":504},"Components",{"type":46,"tag":47,"props":506,"children":507},{},[508],{"type":51,"value":509},"Components tab shows all the components you are using in your app and where they are from. You can also search for them and go to the source code.",{"type":46,"tag":477,"props":511,"children":514},{"width":479,"src":512,"alt":513},"https://user-images.githubusercontent.com/11247099/217670805-726eafd1-5364-4b11-9c2b-9253d068e7e3.png","Nuxt DevTools Components tab",[],{"type":46,"tag":47,"props":516,"children":517},{},[518],{"type":51,"value":519},"Components tab also has a Graph view which you can toggle.\nGraph view also shows the relationship between components, and knows the dependencies of each component.",{"type":46,"tag":477,"props":521,"children":524},{"width":479,"src":522,"alt":523},"https://user-images.githubusercontent.com/11247099/217670806-fb39aeff-3881-44e5-b9c8-6c757f5925fc.png","Nuxt DevTools Components graph view",[],{"type":46,"tag":47,"props":526,"children":527},{},[528],{"type":51,"value":529},"You can also inspect your app's DOM tree and see which component is rendering it. Finding the place to make changes are much easier.",{"type":46,"tag":477,"props":531,"children":534},{"width":479,"src":532,"alt":533},"https://user-images.githubusercontent.com/11247099/217670809-7dcb4198-5a74-4818-95b1-b62ea6c04a6c.png","Nuxt DevTools Component inspector",[],{"type":46,"tag":465,"props":536,"children":538},{"id":537},"imports",[539],{"type":51,"value":540},"Imports",{"type":46,"tag":47,"props":542,"children":543},{},[544],{"type":51,"value":545},"Imports tab shows all the auto-imports registered to Nuxt. You can see which files are importing them, and where they are from. Some entries can also provide short descriptions and documentation links.",{"type":46,"tag":477,"props":547,"children":550},{"width":479,"src":548,"alt":549},"https://user-images.githubusercontent.com/11247099/217670811-fa7c7249-5a21-48c9-abe8-ca02b2518a3a.png","Nuxt DevTools Imports tab",[],{"type":46,"tag":465,"props":552,"children":554},{"id":553},"modules",[555],{"type":51,"value":556},"Modules",{"type":46,"tag":47,"props":558,"children":559},{},[560],{"type":51,"value":561},"Modules tab shows all the modules you have installed and their information such as the module’s github repository, documentation, version and …",{"type":46,"tag":477,"props":563,"children":566},{"width":479,"src":564,"alt":565},"https://user-images.githubusercontent.com/11247099/217670813-ce3da4b6-269c-430e-abb5-a2263ffe4938.png","Nuxt DevTools Modules tab",[],{"type":46,"tag":47,"props":568,"children":569},{},[570],{"type":51,"value":571},"You can install or even remove any Nuxt module with one-click!",{"type":46,"tag":465,"props":573,"children":575},{"id":574},"assets",[576],{"type":51,"value":577},"Assets",{"type":46,"tag":47,"props":579,"children":580},{},[581],{"type":51,"value":582},"Assets tab shows your files from the Public directory, you can see the information of selected file with some helpful actions.",{"type":46,"tag":47,"props":584,"children":585},{},[586],{"type":51,"value":587},"You can also upload files with Drag & Drop ability",{"type":46,"tag":465,"props":589,"children":591},{"id":590},"terminals",[592],{"type":51,"value":593},"Terminals",{"type":46,"tag":47,"props":595,"children":596},{},[597],{"type":51,"value":598},"Terminals tab shows the active terminal processes.",{"type":46,"tag":465,"props":600,"children":602},{"id":601},"runtime-config",[603],{"type":51,"value":604},"Runtime Config",{"type":46,"tag":47,"props":606,"children":607},{},[608],{"type":51,"value":609},"Runtime Config tab shows all the runtime config of your project, with the ability to edit them.",{"type":46,"tag":465,"props":611,"children":613},{"id":612},"payload",[614],{"type":51,"value":615},"Payload",{"type":46,"tag":47,"props":617,"children":618},{},[619],{"type":51,"value":620},"Payloads tab shows all the state and data payloads of your project.",{"type":46,"tag":465,"props":622,"children":624},{"id":623},"build-analyze",[625],{"type":51,"value":626},"Build Analyze",{"type":46,"tag":47,"props":628,"children":629},{},[630],{"type":51,"value":631},"In the Build Analyze tab, you can run analyze build and see the bundle size of your project. it saves the report so you can compare the bundle size in different builds.",{"type":46,"tag":465,"props":633,"children":635},{"id":634},"open-graph",[636],{"type":51,"value":637},"Open Graph",{"type":46,"tag":47,"props":639,"children":640},{},[641],{"type":51,"value":642},"Open Graph tab is to help you with SEO, it shows you a Social Preview Card for twitter, facebook and linkedIn for your page. It also provides missing SEO tags with the ability to copy code snippets.",{"type":46,"tag":465,"props":644,"children":646},{"id":645},"plugins",[647],{"type":51,"value":648},"Plugins",{"type":46,"tag":47,"props":650,"children":651},{},[652],{"type":51,"value":653},"Plugins tab shows all the plugins your project is using, with some information such as plugin's initialization time.",{"type":46,"tag":465,"props":655,"children":657},{"id":656},"server-routes",[658],{"type":51,"value":659},"Server Routes",{"type":46,"tag":47,"props":661,"children":662},{},[663],{"type":51,"value":664},"Server Routes tab shows all nitro routes in your project. It provides a playground to send and test your endpoints.",{"type":46,"tag":465,"props":666,"children":668},{"id":667},"storage",[669],{"type":51,"value":670},"Storage",{"type":46,"tag":47,"props":672,"children":673},{},[674],{"type":51,"value":675},"Storage tab shows all the nitro storage in your project. You can create, edit, and delete files.",{"type":46,"tag":47,"props":677,"children":678},{},[679,681],{"type":51,"value":680},"Learn more about ",{"type":46,"tag":455,"props":682,"children":685},{"href":683,"rel":684},"https://nitro.unjs.io/guide/storage",[459],[686],{"type":51,"value":687},"Nitro Storage",{"type":46,"tag":465,"props":689,"children":691},{"id":690},"tasks",[692],{"type":51,"value":693},"Tasks",{"type":46,"tag":47,"props":695,"children":696},{},[697],{"type":51,"value":698},"Tasks tab shows all nitro tasks in your project. You can pass task payloads, run them, and see the task results.",{"type":46,"tag":47,"props":700,"children":701},{},[702,703],{"type":51,"value":680},{"type":46,"tag":455,"props":704,"children":707},{"href":705,"rel":706},"https://nitro.build/guide/tasks",[459],[708],{"type":51,"value":709},"Nitro Tasks",{"type":46,"tag":465,"props":711,"children":713},{"id":712},"vs-code-server",[714],{"type":51,"value":715},"VS Code Server",{"type":46,"tag":47,"props":717,"children":718},{},[719],{"type":51,"value":720},"The VS Code Server integration in Nuxt DevTools enhances your development experience by bringing the power of Visual Studio Code directly into your browser. With this feature, you can seamlessly edit and debug your Nuxt projects using the familiar interface of VS Code.",{"type":46,"tag":47,"props":722,"children":723},{},[724],{"type":51,"value":725},"Nuxt DevTools supports the following ways of integrating with VS Code:",{"type":46,"tag":727,"props":728,"children":730},"h3",{"id":729},"connecting-to-an-existing-code-server-instance",[731],{"type":51,"value":732},"Connecting to an existing code-server instance",{"type":46,"tag":47,"props":734,"children":735},{},[736,738,744,746,752,754,760],{"type":51,"value":737},"Set ",{"type":46,"tag":54,"props":739,"children":741},{"className":740},[],[742],{"type":51,"value":743},"reuseExistingServer",{"type":51,"value":745}," to true in runtime config for ",{"type":46,"tag":54,"props":747,"children":749},{"className":748},[],[750],{"type":51,"value":751},"devtools/vscode",{"type":51,"value":753}," and set the ",{"type":46,"tag":54,"props":755,"children":757},{"className":756},[],[758],{"type":51,"value":759},"port",{"type":51,"value":761}," option to specify a port (defalts to 3080):",{"type":46,"tag":63,"props":763,"children":766},{"className":376,"code":764,"filename":765,"language":378,"meta":40,"style":40},"export default defineNuxtConfig({\n  devtools: {\n    vscode: {\n      reuseExistingServer: true,\n      port: 3090\n    }\n  }\n})\n","nuxt.config.ts",[767],{"type":46,"tag":54,"props":768,"children":769},{"__ignoreMap":40},[770,797,815,831,854,872,880,888],{"type":46,"tag":73,"props":771,"children":772},{"class":75,"line":76},[773,778,783,788,792],{"type":46,"tag":73,"props":774,"children":775},{"style":211},[776],{"type":51,"value":777},"export",{"type":46,"tag":73,"props":779,"children":780},{"style":211},[781],{"type":51,"value":782}," default",{"type":46,"tag":73,"props":784,"children":785},{"style":133},[786],{"type":51,"value":787}," defineNuxtConfig",{"type":46,"tag":73,"props":789,"children":790},{"style":122},[791],{"type":51,"value":283},{"type":46,"tag":73,"props":793,"children":794},{"style":80},[795],{"type":51,"value":796},"{\n",{"type":46,"tag":73,"props":798,"children":799},{"class":75,"line":103},[800,805,810],{"type":46,"tag":73,"props":801,"children":802},{"style":86},[803],{"type":51,"value":804},"  devtools",{"type":46,"tag":73,"props":806,"children":807},{"style":80},[808],{"type":51,"value":809},":",{"type":46,"tag":73,"props":811,"children":812},{"style":80},[813],{"type":51,"value":814}," {\n",{"type":46,"tag":73,"props":816,"children":817},{"class":75,"line":113},[818,823,827],{"type":46,"tag":73,"props":819,"children":820},{"style":86},[821],{"type":51,"value":822},"    vscode",{"type":46,"tag":73,"props":824,"children":825},{"style":80},[826],{"type":51,"value":809},{"type":46,"tag":73,"props":828,"children":829},{"style":80},[830],{"type":51,"value":814},{"type":46,"tag":73,"props":832,"children":833},{"class":75,"line":149},[834,839,843,849],{"type":46,"tag":73,"props":835,"children":836},{"style":86},[837],{"type":51,"value":838},"      reuseExistingServer",{"type":46,"tag":73,"props":840,"children":841},{"style":80},[842],{"type":51,"value":809},{"type":46,"tag":73,"props":844,"children":846},{"style":845},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[847],{"type":51,"value":848}," true",{"type":46,"tag":73,"props":850,"children":851},{"style":80},[852],{"type":51,"value":853},",\n",{"type":46,"tag":73,"props":855,"children":856},{"class":75,"line":166},[857,862,866],{"type":46,"tag":73,"props":858,"children":859},{"style":86},[860],{"type":51,"value":861},"      port",{"type":46,"tag":73,"props":863,"children":864},{"style":80},[865],{"type":51,"value":809},{"type":46,"tag":73,"props":867,"children":869},{"style":868},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[870],{"type":51,"value":871}," 3090\n",{"type":46,"tag":73,"props":873,"children":874},{"class":75,"line":176},[875],{"type":46,"tag":73,"props":876,"children":877},{"style":80},[878],{"type":51,"value":879},"    }\n",{"type":46,"tag":73,"props":881,"children":882},{"class":75,"line":193},[883],{"type":46,"tag":73,"props":884,"children":885},{"style":80},[886],{"type":51,"value":887},"  }\n",{"type":46,"tag":73,"props":889,"children":890},{"class":75,"line":207},[891,896],{"type":46,"tag":73,"props":892,"children":893},{"style":80},[894],{"type":51,"value":895},"}",{"type":46,"tag":73,"props":897,"children":898},{"style":122},[899],{"type":51,"value":900},")\n",{"type":46,"tag":727,"props":902,"children":904},{"id":903},"running-a-code-server-instance-locally",[905],{"type":51,"value":906},"Running a code-server instance locally",{"type":46,"tag":47,"props":908,"children":909},{},[910,912,919,921,926,928,934,936,943,944,949,951,957,959,964],{"type":51,"value":911},"You can use either the ",{"type":46,"tag":455,"props":913,"children":916},{"href":914,"rel":915},"https://code.visualstudio.com/docs/remote/vscode-server",[459],[917],{"type":51,"value":918},"Microsoft Visual Studio Code Server",{"type":51,"value":920}," (via the ",{"type":46,"tag":54,"props":922,"children":924},{"className":923},[],[925],{"type":51,"value":54},{"type":51,"value":927}," or ",{"type":46,"tag":54,"props":929,"children":931},{"className":930},[],[932],{"type":51,"value":933},"code-server",{"type":51,"value":935}," cli tools) or the ",{"type":46,"tag":455,"props":937,"children":940},{"href":938,"rel":939},"https://coder.com/docs/code-server/latest/install",[459],[941],{"type":51,"value":942},"Coder VS Code Server",{"type":51,"value":920},{"type":46,"tag":54,"props":945,"children":947},{"className":946},[],[948],{"type":51,"value":933},{"type":51,"value":950}," cli tool) by setting the ",{"type":46,"tag":54,"props":952,"children":954},{"className":953},[],[955],{"type":51,"value":956},"codeServer",{"type":51,"value":958}," parameter under ",{"type":46,"tag":54,"props":960,"children":962},{"className":961},[],[963],{"type":51,"value":751},{"type":51,"value":965}," in the runtime configuration.",{"type":46,"tag":47,"props":967,"children":968},{},[969],{"type":51,"value":970},"Options for the codeServer parameter are:",{"type":46,"tag":972,"props":973,"children":974},"table",{},[975,994],{"type":46,"tag":976,"props":977,"children":978},"thead",{},[979],{"type":46,"tag":980,"props":981,"children":982},"tr",{},[983,989],{"type":46,"tag":984,"props":985,"children":986},"th",{},[987],{"type":51,"value":988},"Type",{"type":46,"tag":984,"props":990,"children":991},{},[992],{"type":51,"value":993},"Option",{"type":46,"tag":995,"props":996,"children":997},"tbody",{},[998,1016,1033],{"type":46,"tag":980,"props":999,"children":1000},{},[1001,1007],{"type":46,"tag":1002,"props":1003,"children":1004},"td",{},[1005],{"type":51,"value":1006},"MS Code CLI",{"type":46,"tag":1002,"props":1008,"children":1009},{},[1010],{"type":46,"tag":54,"props":1011,"children":1013},{"className":1012},[],[1014],{"type":51,"value":1015},"ms-code-cli",{"type":46,"tag":980,"props":1017,"children":1018},{},[1019,1024],{"type":46,"tag":1002,"props":1020,"children":1021},{},[1022],{"type":51,"value":1023},"MS Code Server",{"type":46,"tag":1002,"props":1025,"children":1026},{},[1027],{"type":46,"tag":54,"props":1028,"children":1030},{"className":1029},[],[1031],{"type":51,"value":1032},"ms-code-server",{"type":46,"tag":980,"props":1034,"children":1035},{},[1036,1041],{"type":46,"tag":1002,"props":1037,"children":1038},{},[1039],{"type":51,"value":1040},"Coder Code Server",{"type":46,"tag":1002,"props":1042,"children":1043},{},[1044],{"type":46,"tag":54,"props":1045,"children":1047},{"className":1046},[],[1048],{"type":51,"value":1049},"coder-code-server",{"type":46,"tag":47,"props":1051,"children":1052},{},[1053,1055,1060,1062,1068],{"type":51,"value":1054},"You can set the ",{"type":46,"tag":54,"props":1056,"children":1058},{"className":1057},[],[1059],{"type":51,"value":759},{"type":51,"value":1061}," parameter to listen on a specific port (default 3080) and you can set the ",{"type":46,"tag":54,"props":1063,"children":1065},{"className":1064},[],[1066],{"type":51,"value":1067},"host",{"type":51,"value":1069}," parameter if you need to listen on a particular host interface (useful for devcontainers or docker containers that listen on ipv6 by default).",{"type":46,"tag":47,"props":1071,"children":1072},{},[1073,1079],{"type":46,"tag":1074,"props":1075,"children":1076},"strong",{},[1077],{"type":51,"value":1078},"Example",{"type":51,"value":809},{"type":46,"tag":63,"props":1081,"children":1083},{"className":376,"code":1082,"filename":765,"language":378,"meta":40,"style":40},"export default defineNuxtConfig({\n  devtools: {\n    vscode: {\n      codeServer: 'ms-code-server',\n      host: '0.0.0.0',\n      port: 3090\n    }\n  }\n})\n",[1084],{"type":46,"tag":54,"props":1085,"children":1086},{"__ignoreMap":40},[1087,1110,1125,1140,1168,1197,1212,1219,1226],{"type":46,"tag":73,"props":1088,"children":1089},{"class":75,"line":76},[1090,1094,1098,1102,1106],{"type":46,"tag":73,"props":1091,"children":1092},{"style":211},[1093],{"type":51,"value":777},{"type":46,"tag":73,"props":1095,"children":1096},{"style":211},[1097],{"type":51,"value":782},{"type":46,"tag":73,"props":1099,"children":1100},{"style":133},[1101],{"type":51,"value":787},{"type":46,"tag":73,"props":1103,"children":1104},{"style":122},[1105],{"type":51,"value":283},{"type":46,"tag":73,"props":1107,"children":1108},{"style":80},[1109],{"type":51,"value":796},{"type":46,"tag":73,"props":1111,"children":1112},{"class":75,"line":103},[1113,1117,1121],{"type":46,"tag":73,"props":1114,"children":1115},{"style":86},[1116],{"type":51,"value":804},{"type":46,"tag":73,"props":1118,"children":1119},{"style":80},[1120],{"type":51,"value":809},{"type":46,"tag":73,"props":1122,"children":1123},{"style":80},[1124],{"type":51,"value":814},{"type":46,"tag":73,"props":1126,"children":1127},{"class":75,"line":113},[1128,1132,1136],{"type":46,"tag":73,"props":1129,"children":1130},{"style":86},[1131],{"type":51,"value":822},{"type":46,"tag":73,"props":1133,"children":1134},{"style":80},[1135],{"type":51,"value":809},{"type":46,"tag":73,"props":1137,"children":1138},{"style":80},[1139],{"type":51,"value":814},{"type":46,"tag":73,"props":1141,"children":1142},{"class":75,"line":149},[1143,1148,1152,1156,1160,1164],{"type":46,"tag":73,"props":1144,"children":1145},{"style":86},[1146],{"type":51,"value":1147},"      codeServer",{"type":46,"tag":73,"props":1149,"children":1150},{"style":80},[1151],{"type":51,"value":809},{"type":46,"tag":73,"props":1153,"children":1154},{"style":80},[1155],{"type":51,"value":414},{"type":46,"tag":73,"props":1157,"children":1158},{"style":291},[1159],{"type":51,"value":1032},{"type":46,"tag":73,"props":1161,"children":1162},{"style":80},[1163],{"type":51,"value":288},{"type":46,"tag":73,"props":1165,"children":1166},{"style":80},[1167],{"type":51,"value":853},{"type":46,"tag":73,"props":1169,"children":1170},{"class":75,"line":166},[1171,1176,1180,1184,1189,1193],{"type":46,"tag":73,"props":1172,"children":1173},{"style":86},[1174],{"type":51,"value":1175},"      host",{"type":46,"tag":73,"props":1177,"children":1178},{"style":80},[1179],{"type":51,"value":809},{"type":46,"tag":73,"props":1181,"children":1182},{"style":80},[1183],{"type":51,"value":414},{"type":46,"tag":73,"props":1185,"children":1186},{"style":291},[1187],{"type":51,"value":1188},"0.0.0.0",{"type":46,"tag":73,"props":1190,"children":1191},{"style":80},[1192],{"type":51,"value":288},{"type":46,"tag":73,"props":1194,"children":1195},{"style":80},[1196],{"type":51,"value":853},{"type":46,"tag":73,"props":1198,"children":1199},{"class":75,"line":176},[1200,1204,1208],{"type":46,"tag":73,"props":1201,"children":1202},{"style":86},[1203],{"type":51,"value":861},{"type":46,"tag":73,"props":1205,"children":1206},{"style":80},[1207],{"type":51,"value":809},{"type":46,"tag":73,"props":1209,"children":1210},{"style":868},[1211],{"type":51,"value":871},{"type":46,"tag":73,"props":1213,"children":1214},{"class":75,"line":193},[1215],{"type":46,"tag":73,"props":1216,"children":1217},{"style":80},[1218],{"type":51,"value":879},{"type":46,"tag":73,"props":1220,"children":1221},{"class":75,"line":207},[1222],{"type":46,"tag":73,"props":1223,"children":1224},{"style":80},[1225],{"type":51,"value":887},{"type":46,"tag":73,"props":1227,"children":1228},{"class":75,"line":236},[1229,1233],{"type":46,"tag":73,"props":1230,"children":1231},{"style":80},[1232],{"type":51,"value":895},{"type":46,"tag":73,"props":1234,"children":1235},{"style":122},[1236],{"type":51,"value":900},{"type":46,"tag":727,"props":1238,"children":1240},{"id":1239},"remotely-via-a-ms-vs-code-server-tunnel",[1241],{"type":51,"value":1242},"Remotely via a MS VS Code server tunnel",{"type":46,"tag":47,"props":1244,"children":1245},{},[1246,1248,1254,1256,1261,1263,1269,1271,1276,1278,1284],{"type":51,"value":1247},"Set the ",{"type":46,"tag":54,"props":1249,"children":1251},{"className":1250},[],[1252],{"type":51,"value":1253},"mode",{"type":51,"value":1255}," option in ",{"type":46,"tag":54,"props":1257,"children":1259},{"className":1258},[],[1260],{"type":51,"value":751},{"type":51,"value":1262}," runtime configuration to ",{"type":46,"tag":54,"props":1264,"children":1266},{"className":1265},[],[1267],{"type":51,"value":1268},"tunnel",{"type":51,"value":1270},". You can set the name of the tunnel to connect to using the ",{"type":46,"tag":54,"props":1272,"children":1274},{"className":1273},[],[1275],{"type":51,"value":1268},{"type":51,"value":1277}," option under ",{"type":46,"tag":54,"props":1279,"children":1281},{"className":1280},[],[1282],{"type":51,"value":1283},"devtools/vscode/tunnel",{"type":51,"value":1285}," in runtime configuration)",{"type":46,"tag":63,"props":1287,"children":1289},{"className":376,"code":1288,"filename":765,"language":378,"meta":40,"style":40},"export default defineNuxtConfig({\n  devtools: {\n    vscode: {\n      mode: 'tunnel',\n      tunnel: {\n        name: 'my-tunnel-name'\n      }\n    }\n  }\n})\n",[1290],{"type":46,"tag":54,"props":1291,"children":1292},{"__ignoreMap":40},[1293,1316,1331,1346,1374,1390,1415,1423,1430,1437],{"type":46,"tag":73,"props":1294,"children":1295},{"class":75,"line":76},[1296,1300,1304,1308,1312],{"type":46,"tag":73,"props":1297,"children":1298},{"style":211},[1299],{"type":51,"value":777},{"type":46,"tag":73,"props":1301,"children":1302},{"style":211},[1303],{"type":51,"value":782},{"type":46,"tag":73,"props":1305,"children":1306},{"style":133},[1307],{"type":51,"value":787},{"type":46,"tag":73,"props":1309,"children":1310},{"style":122},[1311],{"type":51,"value":283},{"type":46,"tag":73,"props":1313,"children":1314},{"style":80},[1315],{"type":51,"value":796},{"type":46,"tag":73,"props":1317,"children":1318},{"class":75,"line":103},[1319,1323,1327],{"type":46,"tag":73,"props":1320,"children":1321},{"style":86},[1322],{"type":51,"value":804},{"type":46,"tag":73,"props":1324,"children":1325},{"style":80},[1326],{"type":51,"value":809},{"type":46,"tag":73,"props":1328,"children":1329},{"style":80},[1330],{"type":51,"value":814},{"type":46,"tag":73,"props":1332,"children":1333},{"class":75,"line":113},[1334,1338,1342],{"type":46,"tag":73,"props":1335,"children":1336},{"style":86},[1337],{"type":51,"value":822},{"type":46,"tag":73,"props":1339,"children":1340},{"style":80},[1341],{"type":51,"value":809},{"type":46,"tag":73,"props":1343,"children":1344},{"style":80},[1345],{"type":51,"value":814},{"type":46,"tag":73,"props":1347,"children":1348},{"class":75,"line":149},[1349,1354,1358,1362,1366,1370],{"type":46,"tag":73,"props":1350,"children":1351},{"style":86},[1352],{"type":51,"value":1353},"      mode",{"type":46,"tag":73,"props":1355,"children":1356},{"style":80},[1357],{"type":51,"value":809},{"type":46,"tag":73,"props":1359,"children":1360},{"style":80},[1361],{"type":51,"value":414},{"type":46,"tag":73,"props":1363,"children":1364},{"style":291},[1365],{"type":51,"value":1268},{"type":46,"tag":73,"props":1367,"children":1368},{"style":80},[1369],{"type":51,"value":288},{"type":46,"tag":73,"props":1371,"children":1372},{"style":80},[1373],{"type":51,"value":853},{"type":46,"tag":73,"props":1375,"children":1376},{"class":75,"line":166},[1377,1382,1386],{"type":46,"tag":73,"props":1378,"children":1379},{"style":86},[1380],{"type":51,"value":1381},"      tunnel",{"type":46,"tag":73,"props":1383,"children":1384},{"style":80},[1385],{"type":51,"value":809},{"type":46,"tag":73,"props":1387,"children":1388},{"style":80},[1389],{"type":51,"value":814},{"type":46,"tag":73,"props":1391,"children":1392},{"class":75,"line":176},[1393,1398,1402,1406,1411],{"type":46,"tag":73,"props":1394,"children":1395},{"style":86},[1396],{"type":51,"value":1397},"        name",{"type":46,"tag":73,"props":1399,"children":1400},{"style":80},[1401],{"type":51,"value":809},{"type":46,"tag":73,"props":1403,"children":1404},{"style":80},[1405],{"type":51,"value":414},{"type":46,"tag":73,"props":1407,"children":1408},{"style":291},[1409],{"type":51,"value":1410},"my-tunnel-name",{"type":46,"tag":73,"props":1412,"children":1413},{"style":80},[1414],{"type":51,"value":424},{"type":46,"tag":73,"props":1416,"children":1417},{"class":75,"line":193},[1418],{"type":46,"tag":73,"props":1419,"children":1420},{"style":80},[1421],{"type":51,"value":1422},"      }\n",{"type":46,"tag":73,"props":1424,"children":1425},{"class":75,"line":207},[1426],{"type":46,"tag":73,"props":1427,"children":1428},{"style":80},[1429],{"type":51,"value":879},{"type":46,"tag":73,"props":1431,"children":1432},{"class":75,"line":236},[1433],{"type":46,"tag":73,"props":1434,"children":1435},{"style":80},[1436],{"type":51,"value":887},{"type":46,"tag":73,"props":1438,"children":1439},{"class":75,"line":310},[1440,1444],{"type":46,"tag":73,"props":1441,"children":1442},{"style":80},[1443],{"type":51,"value":895},{"type":46,"tag":73,"props":1445,"children":1446},{"style":122},[1447],{"type":51,"value":900},{"type":46,"tag":727,"props":1449,"children":1451},{"id":1450},"code-server-installation-instructions",[1452],{"type":51,"value":1453},"Code Server Installation Instructions",{"type":46,"tag":47,"props":1455,"children":1456},{},[1457,1459],{"type":51,"value":1458},"To get started with Microsoft VS Code Server, follow the installation instructions provided by ",{"type":46,"tag":455,"props":1460,"children":1462},{"href":914,"rel":1461},[459],[1463],{"type":51,"value":918},{"type":46,"tag":47,"props":1465,"children":1466},{},[1467,1469],{"type":51,"value":1468},"To get started with Coder Code Server, follow the installation instructions provided by ",{"type":46,"tag":455,"props":1470,"children":1472},{"href":938,"rel":1471},[459],[1473],{"type":51,"value":1474},"Code Server Installation Guide",{"type":46,"tag":47,"props":1476,"children":1477},{},[1478,1480],{"type":51,"value":1479},"For more information on the benefits and features of VS Code Server, refer to ",{"type":46,"tag":455,"props":1481,"children":1484},{"href":1482,"rel":1483},"https://code.visualstudio.com/blogs/2022/07/07/vscode-server",[459],[1485],{"type":51,"value":1486},"the official Visual Studio Code blog",{"type":46,"tag":465,"props":1488,"children":1490},{"id":1489},"hooks",[1491],{"type":51,"value":1492},"Hooks",{"type":46,"tag":47,"props":1494,"children":1495},{},[1496],{"type":51,"value":1497},"Hooks tab can help you to monitor the time spent in each hook. It can be helpful to find performance bottlenecks.",{"type":46,"tag":477,"props":1499,"children":1502},{"width":479,"src":1500,"alt":1501},"https://user-images.githubusercontent.com/11247099/217670815-80ec0ec3-7df1-4a07-96fb-4161fb6562a7.png","Nuxt DevTools Hooks tab",[],{"type":46,"tag":465,"props":1504,"children":1506},{"id":1505},"virtual-files",[1507],{"type":51,"value":1508},"Virtual Files",{"type":46,"tag":47,"props":1510,"children":1511},{},[1512],{"type":51,"value":1513},"Virtual Files tab shows the virtual files generated by Nuxt to support the conventions.",{"type":46,"tag":477,"props":1515,"children":1518},{"width":479,"src":1516,"alt":1517},"https://user-images.githubusercontent.com/11247099/217670817-abb0315a-6d92-4c5e-a4da-2327f22e0e8b.png","Nuxt DevTools Virtual Files tab",[],{"type":46,"tag":465,"props":1520,"children":1522},{"id":1521},"inspect",[1523],{"type":51,"value":1524},"Inspect",{"type":46,"tag":47,"props":1526,"children":1527},{},[1528,1530,1541],{"type":51,"value":1529},"Inspect expose the ",{"type":46,"tag":455,"props":1531,"children":1534},{"href":1532,"rel":1533},"https://github.com/antfu/vite-plugin-inspect",[459],[1535],{"type":46,"tag":54,"props":1536,"children":1538},{"className":1537},[],[1539],{"type":51,"value":1540},"vite-plugin-inspect",{"type":51,"value":1542}," integration, allowing you to inspect transformation steps of Vite.",{"type":46,"tag":477,"props":1544,"children":1547},{"width":479,"src":1545,"alt":1546},"https://user-images.githubusercontent.com/11247099/217670818-77f91135-7318-462e-9148-4ad504c82555.png","Nuxt DevTools Inspect tab",[],{"type":46,"tag":465,"props":1549,"children":1551},{"id":1550},"settings",[1552],{"type":51,"value":1553},"Settings",{"type":46,"tag":47,"props":1555,"children":1556},{},[1557],{"type":51,"value":1558},"Settings tab allows you to configure the DevTools to your needs. you can hide tabs, change tabs order, scale, theme and more...",{"type":46,"tag":465,"props":1560,"children":1562},{"id":1561},"nuxt-icon",[1563],{"type":51,"value":1564},"Nuxt Icon",{"type":46,"tag":47,"props":1566,"children":1567},{},[1568,1570,1576,1578,1583,1584,1590,1591,1597,1598,1604,1605,1611],{"type":51,"value":1569},"Nuxt Icon is the first item on sidebar, located at the top left corner of the DevTools. It gives you a quick access to some useful features such as ",{"type":46,"tag":54,"props":1571,"children":1573},{"className":1572},[],[1574],{"type":51,"value":1575},"Toggle Theme",{"type":51,"value":1577},", ",{"type":46,"tag":54,"props":1579,"children":1581},{"className":1580},[],[1582],{"type":51,"value":1553},{"type":51,"value":1577},{"type":46,"tag":54,"props":1585,"children":1587},{"className":1586},[],[1588],{"type":51,"value":1589},"Split Screen",{"type":51,"value":1577},{"type":46,"tag":54,"props":1592,"children":1594},{"className":1593},[],[1595],{"type":51,"value":1596},"Popup",{"type":51,"value":1577},{"type":46,"tag":54,"props":1599,"children":1601},{"className":1600},[],[1602],{"type":51,"value":1603},"Refresh Data",{"type":51,"value":1577},{"type":46,"tag":54,"props":1606,"children":1608},{"className":1607},[],[1609],{"type":51,"value":1610},"Refresh Page",{"type":51,"value":1612},". you can simply click on it and see the them yourself.",{"type":46,"tag":727,"props":1614,"children":1616},{"id":1615},"command-palette",[1617],{"type":51,"value":1618},"Command Palette",{"type":46,"tag":47,"props":1620,"children":1621},{},[1622,1624,1630,1631,1637],{"type":51,"value":1623},"Command Palette is a quick way to access some useful features of the DevTools such as easy navigation, run commands and Nuxt Documentations. You can open it with ",{"type":46,"tag":54,"props":1625,"children":1627},{"className":1626},[],[1628],{"type":51,"value":1629},"Ctrl+K",{"type":51,"value":927},{"type":46,"tag":54,"props":1632,"children":1634},{"className":1633},[],[1635],{"type":51,"value":1636},"Cmd+K",{"type":51,"value":1638}," shortcut.",{"type":46,"tag":727,"props":1640,"children":1642},{"id":1641},"split-screen",[1643],{"type":51,"value":1589},{"type":46,"tag":47,"props":1645,"children":1646},{},[1647,1649,1654,1656,1661],{"type":51,"value":1648},"Split Screen is a useful feature to use multiple tabs at the same time. You can open it from ",{"type":46,"tag":54,"props":1650,"children":1652},{"className":1651},[],[1653],{"type":51,"value":1618},{"type":51,"value":1655}," or by clicking the ",{"type":46,"tag":54,"props":1657,"children":1659},{"className":1658},[],[1660],{"type":51,"value":1564},{"type":51,"value":1662}," in the top left corner of the DevTools and activate it from there.",{"type":46,"tag":727,"props":1664,"children":1666},{"id":1665},"popup",[1667],{"type":51,"value":1596},{"type":46,"tag":47,"props":1669,"children":1670},{},[1671,1673,1678],{"type":51,"value":1672},"Popup is very useful for those who has a second screen, you can open it by clicking the ",{"type":46,"tag":54,"props":1674,"children":1676},{"className":1675},[],[1677],{"type":51,"value":1564},{"type":51,"value":1662},{"type":46,"tag":431,"props":1680,"children":1681},{},[1682],{"type":51,"value":435},{"title":40,"searchDepth":103,"depth":103,"links":1684},[1685,1686,1687,1688,1689,1690,1691,1692,1693,1694,1695,1696,1697,1698,1699,1700,1706,1707,1708,1709,1710],{"id":467,"depth":103,"text":470},{"id":485,"depth":103,"text":488},{"id":501,"depth":103,"text":504},{"id":537,"depth":103,"text":540},{"id":553,"depth":103,"text":556},{"id":574,"depth":103,"text":577},{"id":590,"depth":103,"text":593},{"id":601,"depth":103,"text":604},{"id":612,"depth":103,"text":615},{"id":623,"depth":103,"text":626},{"id":634,"depth":103,"text":637},{"id":645,"depth":103,"text":648},{"id":656,"depth":103,"text":659},{"id":667,"depth":103,"text":670},{"id":690,"depth":103,"text":693},{"id":712,"depth":103,"text":715,"children":1701},[1702,1703,1704,1705],{"id":729,"depth":113,"text":732},{"id":903,"depth":113,"text":906},{"id":1239,"depth":113,"text":1242},{"id":1450,"depth":113,"text":1453},{"id":1489,"depth":103,"text":1492},{"id":1505,"depth":103,"text":1508},{"id":1521,"depth":103,"text":1524},{"id":1550,"depth":103,"text":1553},{"id":1561,"depth":103,"text":1564,"children":1711},[1712,1713,1714],{"id":1615,"depth":113,"text":1618},{"id":1641,"depth":113,"text":1589},{"id":1665,"depth":113,"text":1596},"content:1.guide:1.features.md","1.guide/1.features.md","1.guide/1.features",{"_path":23,"_dir":1719,"_draft":39,"_partial":39,"_locale":40,"title":22,"description":1720,"body":1721,"_type":438,"_id":4492,"_source":440,"_file":4493,"_stem":4494,"_extension":443},"module","Add your own modules integration to the Nuxt DevTools.",{"type":43,"children":1722,"toc":4481},[1723,1728,1734,1739,1782,1787,1793,1798,1803,2083,2088,2402,2408,2437,2619,2632,2642,2648,2653,3299,3312,3332,3338,3350,3356,3361,3366,3519,3524,4017,4022,4380,4386,4391,4401,4407,4412,4477],{"type":46,"tag":47,"props":1724,"children":1725},{},[1726],{"type":51,"value":1727},"Nuxt DevTools is designed to be extensible. You can add your own modules integration to the DevTools.",{"type":46,"tag":465,"props":1729,"children":1731},{"id":1730},"starter-template",[1732],{"type":51,"value":1733},"Starter Template",{"type":46,"tag":47,"props":1735,"children":1736},{},[1737],{"type":51,"value":1738},"If you want to try integrating with Nuxt DevTools, you can run",{"type":46,"tag":63,"props":1740,"children":1744},{"className":1741,"code":1742,"language":1743,"meta":40,"style":40},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx nuxi init my-module -t module-devtools\n","bash",[1745],{"type":46,"tag":54,"props":1746,"children":1747},{"__ignoreMap":40},[1748],{"type":46,"tag":73,"props":1749,"children":1750},{"class":75,"line":76},[1751,1757,1762,1767,1772,1777],{"type":46,"tag":73,"props":1752,"children":1754},{"style":1753},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1755],{"type":51,"value":1756},"npx",{"type":46,"tag":73,"props":1758,"children":1759},{"style":291},[1760],{"type":51,"value":1761}," nuxi",{"type":46,"tag":73,"props":1763,"children":1764},{"style":291},[1765],{"type":51,"value":1766}," init",{"type":46,"tag":73,"props":1768,"children":1769},{"style":291},[1770],{"type":51,"value":1771}," my-module",{"type":46,"tag":73,"props":1773,"children":1774},{"style":291},[1775],{"type":51,"value":1776}," -t",{"type":46,"tag":73,"props":1778,"children":1779},{"style":291},[1780],{"type":51,"value":1781}," module-devtools\n",{"type":46,"tag":47,"props":1783,"children":1784},{},[1785],{"type":51,"value":1786},"to create a new module starter with Nuxt DevTools integration pre-configured (contributing a fully custom view as a tab).",{"type":46,"tag":465,"props":1788,"children":1790},{"id":1789},"contributing-to-view",[1791],{"type":51,"value":1792},"Contributing to View",{"type":46,"tag":47,"props":1794,"children":1795},{},[1796],{"type":51,"value":1797},"Currently the only way to contribute to Nuxt DevTools View is via iframe. You need to serve your module's view yourself and then register it to the DevTools.",{"type":46,"tag":47,"props":1799,"children":1800},{},[1801],{"type":51,"value":1802},"You can use the utility kit provided by Nuxt DevTools to register your custom tab:",{"type":46,"tag":63,"props":1804,"children":1806},{"className":376,"code":1805,"language":378,"meta":40,"style":40},"import { addCustomTab } from '@nuxt/devtools-kit'\n\naddCustomTab({\n  // unique identifier\n  name: 'my-module',\n  // title to display in the tab\n  title: 'My Module',\n  // any icon from Iconify, or a URL to an image\n  icon: 'carbon:apps',\n  // iframe view\n  view: {\n    type: 'iframe',\n    src: '/url-to-your-module-view',\n  },\n})\n",[1807],{"type":46,"tag":54,"props":1808,"children":1809},{"__ignoreMap":40},[1810,1847,1854,1870,1878,1907,1915,1944,1952,1981,1989,2005,2034,2063,2071],{"type":46,"tag":73,"props":1811,"children":1812},{"class":75,"line":76},[1813,1817,1821,1826,1830,1834,1838,1843],{"type":46,"tag":73,"props":1814,"children":1815},{"style":211},[1816],{"type":51,"value":390},{"type":46,"tag":73,"props":1818,"children":1819},{"style":80},[1820],{"type":51,"value":395},{"type":46,"tag":73,"props":1822,"children":1823},{"style":122},[1824],{"type":51,"value":1825}," addCustomTab",{"type":46,"tag":73,"props":1827,"children":1828},{"style":80},[1829],{"type":51,"value":404},{"type":46,"tag":73,"props":1831,"children":1832},{"style":211},[1833],{"type":51,"value":409},{"type":46,"tag":73,"props":1835,"children":1836},{"style":80},[1837],{"type":51,"value":414},{"type":46,"tag":73,"props":1839,"children":1840},{"style":291},[1841],{"type":51,"value":1842},"@nuxt/devtools-kit",{"type":46,"tag":73,"props":1844,"children":1845},{"style":80},[1846],{"type":51,"value":424},{"type":46,"tag":73,"props":1848,"children":1849},{"class":75,"line":103},[1850],{"type":46,"tag":73,"props":1851,"children":1852},{"emptyLinePlaceholder":170},[1853],{"type":51,"value":173},{"type":46,"tag":73,"props":1855,"children":1856},{"class":75,"line":113},[1857,1862,1866],{"type":46,"tag":73,"props":1858,"children":1859},{"style":133},[1860],{"type":51,"value":1861},"addCustomTab",{"type":46,"tag":73,"props":1863,"children":1864},{"style":122},[1865],{"type":51,"value":283},{"type":46,"tag":73,"props":1867,"children":1868},{"style":80},[1869],{"type":51,"value":796},{"type":46,"tag":73,"props":1871,"children":1872},{"class":75,"line":149},[1873],{"type":46,"tag":73,"props":1874,"children":1875},{"style":107},[1876],{"type":51,"value":1877},"  // unique identifier\n",{"type":46,"tag":73,"props":1879,"children":1880},{"class":75,"line":166},[1881,1886,1890,1894,1899,1903],{"type":46,"tag":73,"props":1882,"children":1883},{"style":86},[1884],{"type":51,"value":1885},"  name",{"type":46,"tag":73,"props":1887,"children":1888},{"style":80},[1889],{"type":51,"value":809},{"type":46,"tag":73,"props":1891,"children":1892},{"style":80},[1893],{"type":51,"value":414},{"type":46,"tag":73,"props":1895,"children":1896},{"style":291},[1897],{"type":51,"value":1898},"my-module",{"type":46,"tag":73,"props":1900,"children":1901},{"style":80},[1902],{"type":51,"value":288},{"type":46,"tag":73,"props":1904,"children":1905},{"style":80},[1906],{"type":51,"value":853},{"type":46,"tag":73,"props":1908,"children":1909},{"class":75,"line":176},[1910],{"type":46,"tag":73,"props":1911,"children":1912},{"style":107},[1913],{"type":51,"value":1914},"  // title to display in the tab\n",{"type":46,"tag":73,"props":1916,"children":1917},{"class":75,"line":193},[1918,1923,1927,1931,1936,1940],{"type":46,"tag":73,"props":1919,"children":1920},{"style":86},[1921],{"type":51,"value":1922},"  title",{"type":46,"tag":73,"props":1924,"children":1925},{"style":80},[1926],{"type":51,"value":809},{"type":46,"tag":73,"props":1928,"children":1929},{"style":80},[1930],{"type":51,"value":414},{"type":46,"tag":73,"props":1932,"children":1933},{"style":291},[1934],{"type":51,"value":1935},"My Module",{"type":46,"tag":73,"props":1937,"children":1938},{"style":80},[1939],{"type":51,"value":288},{"type":46,"tag":73,"props":1941,"children":1942},{"style":80},[1943],{"type":51,"value":853},{"type":46,"tag":73,"props":1945,"children":1946},{"class":75,"line":207},[1947],{"type":46,"tag":73,"props":1948,"children":1949},{"style":107},[1950],{"type":51,"value":1951},"  // any icon from Iconify, or a URL to an image\n",{"type":46,"tag":73,"props":1953,"children":1954},{"class":75,"line":236},[1955,1960,1964,1968,1973,1977],{"type":46,"tag":73,"props":1956,"children":1957},{"style":86},[1958],{"type":51,"value":1959},"  icon",{"type":46,"tag":73,"props":1961,"children":1962},{"style":80},[1963],{"type":51,"value":809},{"type":46,"tag":73,"props":1965,"children":1966},{"style":80},[1967],{"type":51,"value":414},{"type":46,"tag":73,"props":1969,"children":1970},{"style":291},[1971],{"type":51,"value":1972},"carbon:apps",{"type":46,"tag":73,"props":1974,"children":1975},{"style":80},[1976],{"type":51,"value":288},{"type":46,"tag":73,"props":1978,"children":1979},{"style":80},[1980],{"type":51,"value":853},{"type":46,"tag":73,"props":1982,"children":1983},{"class":75,"line":310},[1984],{"type":46,"tag":73,"props":1985,"children":1986},{"style":107},[1987],{"type":51,"value":1988},"  // iframe view\n",{"type":46,"tag":73,"props":1990,"children":1991},{"class":75,"line":319},[1992,1997,2001],{"type":46,"tag":73,"props":1993,"children":1994},{"style":86},[1995],{"type":51,"value":1996},"  view",{"type":46,"tag":73,"props":1998,"children":1999},{"style":80},[2000],{"type":51,"value":809},{"type":46,"tag":73,"props":2002,"children":2003},{"style":80},[2004],{"type":51,"value":814},{"type":46,"tag":73,"props":2006,"children":2007},{"class":75,"line":328},[2008,2013,2017,2021,2026,2030],{"type":46,"tag":73,"props":2009,"children":2010},{"style":86},[2011],{"type":51,"value":2012},"    type",{"type":46,"tag":73,"props":2014,"children":2015},{"style":80},[2016],{"type":51,"value":809},{"type":46,"tag":73,"props":2018,"children":2019},{"style":80},[2020],{"type":51,"value":414},{"type":46,"tag":73,"props":2022,"children":2023},{"style":291},[2024],{"type":51,"value":2025},"iframe",{"type":46,"tag":73,"props":2027,"children":2028},{"style":80},[2029],{"type":51,"value":288},{"type":46,"tag":73,"props":2031,"children":2032},{"style":80},[2033],{"type":51,"value":853},{"type":46,"tag":73,"props":2035,"children":2036},{"class":75,"line":337},[2037,2042,2046,2050,2055,2059],{"type":46,"tag":73,"props":2038,"children":2039},{"style":86},[2040],{"type":51,"value":2041},"    src",{"type":46,"tag":73,"props":2043,"children":2044},{"style":80},[2045],{"type":51,"value":809},{"type":46,"tag":73,"props":2047,"children":2048},{"style":80},[2049],{"type":51,"value":414},{"type":46,"tag":73,"props":2051,"children":2052},{"style":291},[2053],{"type":51,"value":2054},"/url-to-your-module-view",{"type":46,"tag":73,"props":2056,"children":2057},{"style":80},[2058],{"type":51,"value":288},{"type":46,"tag":73,"props":2060,"children":2061},{"style":80},[2062],{"type":51,"value":853},{"type":46,"tag":73,"props":2064,"children":2065},{"class":75,"line":355},[2066],{"type":46,"tag":73,"props":2067,"children":2068},{"style":80},[2069],{"type":51,"value":2070},"  },\n",{"type":46,"tag":73,"props":2072,"children":2074},{"class":75,"line":2073},15,[2075,2079],{"type":46,"tag":73,"props":2076,"children":2077},{"style":80},[2078],{"type":51,"value":895},{"type":46,"tag":73,"props":2080,"children":2081},{"style":122},[2082],{"type":51,"value":900},{"type":46,"tag":47,"props":2084,"children":2085},{},[2086],{"type":51,"value":2087},"Or if you prefer to use Nuxt hooks:",{"type":46,"tag":63,"props":2089,"children":2091},{"className":376,"code":2090,"language":378,"meta":40,"style":40},"nuxt.hook('devtools:customTabs', (tabs) => {\n  tabs.push({\n    // unique identifier\n    name: 'my-module',\n    // title to display in the tab\n    title: 'My Module',\n    // any icon from Iconify, or a URL to an image\n    icon: 'carbon:apps',\n    // iframe view\n    view: {\n      type: 'iframe',\n      src: '/url-to-your-module-view',\n    },\n  })\n})\n",[2092],{"type":46,"tag":54,"props":2093,"children":2094},{"__ignoreMap":40},[2095,2158,2183,2191,2219,2227,2255,2263,2291,2299,2315,2343,2371,2379,2391],{"type":46,"tag":73,"props":2096,"children":2097},{"class":75,"line":76},[2098,2103,2107,2112,2116,2120,2125,2129,2134,2139,2145,2149,2154],{"type":46,"tag":73,"props":2099,"children":2100},{"style":122},[2101],{"type":51,"value":2102},"nuxt",{"type":46,"tag":73,"props":2104,"children":2105},{"style":80},[2106],{"type":51,"value":264},{"type":46,"tag":73,"props":2108,"children":2109},{"style":133},[2110],{"type":51,"value":2111},"hook",{"type":46,"tag":73,"props":2113,"children":2114},{"style":122},[2115],{"type":51,"value":283},{"type":46,"tag":73,"props":2117,"children":2118},{"style":80},[2119],{"type":51,"value":288},{"type":46,"tag":73,"props":2121,"children":2122},{"style":291},[2123],{"type":51,"value":2124},"devtools:customTabs",{"type":46,"tag":73,"props":2126,"children":2127},{"style":80},[2128],{"type":51,"value":288},{"type":46,"tag":73,"props":2130,"children":2131},{"style":80},[2132],{"type":51,"value":2133},",",{"type":46,"tag":73,"props":2135,"children":2136},{"style":80},[2137],{"type":51,"value":2138}," (",{"type":46,"tag":73,"props":2140,"children":2142},{"style":2141},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[2143],{"type":51,"value":2144},"tabs",{"type":46,"tag":73,"props":2146,"children":2147},{"style":80},[2148],{"type":51,"value":303},{"type":46,"tag":73,"props":2150,"children":2151},{"style":92},[2152],{"type":51,"value":2153}," =>",{"type":46,"tag":73,"props":2155,"children":2156},{"style":80},[2157],{"type":51,"value":814},{"type":46,"tag":73,"props":2159,"children":2160},{"class":75,"line":103},[2161,2166,2170,2175,2179],{"type":46,"tag":73,"props":2162,"children":2163},{"style":122},[2164],{"type":51,"value":2165},"  tabs",{"type":46,"tag":73,"props":2167,"children":2168},{"style":80},[2169],{"type":51,"value":264},{"type":46,"tag":73,"props":2171,"children":2172},{"style":133},[2173],{"type":51,"value":2174},"push",{"type":46,"tag":73,"props":2176,"children":2177},{"style":86},[2178],{"type":51,"value":283},{"type":46,"tag":73,"props":2180,"children":2181},{"style":80},[2182],{"type":51,"value":796},{"type":46,"tag":73,"props":2184,"children":2185},{"class":75,"line":113},[2186],{"type":46,"tag":73,"props":2187,"children":2188},{"style":107},[2189],{"type":51,"value":2190},"    // unique identifier\n",{"type":46,"tag":73,"props":2192,"children":2193},{"class":75,"line":149},[2194,2199,2203,2207,2211,2215],{"type":46,"tag":73,"props":2195,"children":2196},{"style":86},[2197],{"type":51,"value":2198},"    name",{"type":46,"tag":73,"props":2200,"children":2201},{"style":80},[2202],{"type":51,"value":809},{"type":46,"tag":73,"props":2204,"children":2205},{"style":80},[2206],{"type":51,"value":414},{"type":46,"tag":73,"props":2208,"children":2209},{"style":291},[2210],{"type":51,"value":1898},{"type":46,"tag":73,"props":2212,"children":2213},{"style":80},[2214],{"type":51,"value":288},{"type":46,"tag":73,"props":2216,"children":2217},{"style":80},[2218],{"type":51,"value":853},{"type":46,"tag":73,"props":2220,"children":2221},{"class":75,"line":166},[2222],{"type":46,"tag":73,"props":2223,"children":2224},{"style":107},[2225],{"type":51,"value":2226},"    // title to display in the tab\n",{"type":46,"tag":73,"props":2228,"children":2229},{"class":75,"line":176},[2230,2235,2239,2243,2247,2251],{"type":46,"tag":73,"props":2231,"children":2232},{"style":86},[2233],{"type":51,"value":2234},"    title",{"type":46,"tag":73,"props":2236,"children":2237},{"style":80},[2238],{"type":51,"value":809},{"type":46,"tag":73,"props":2240,"children":2241},{"style":80},[2242],{"type":51,"value":414},{"type":46,"tag":73,"props":2244,"children":2245},{"style":291},[2246],{"type":51,"value":1935},{"type":46,"tag":73,"props":2248,"children":2249},{"style":80},[2250],{"type":51,"value":288},{"type":46,"tag":73,"props":2252,"children":2253},{"style":80},[2254],{"type":51,"value":853},{"type":46,"tag":73,"props":2256,"children":2257},{"class":75,"line":193},[2258],{"type":46,"tag":73,"props":2259,"children":2260},{"style":107},[2261],{"type":51,"value":2262},"    // any icon from Iconify, or a URL to an image\n",{"type":46,"tag":73,"props":2264,"children":2265},{"class":75,"line":207},[2266,2271,2275,2279,2283,2287],{"type":46,"tag":73,"props":2267,"children":2268},{"style":86},[2269],{"type":51,"value":2270},"    icon",{"type":46,"tag":73,"props":2272,"children":2273},{"style":80},[2274],{"type":51,"value":809},{"type":46,"tag":73,"props":2276,"children":2277},{"style":80},[2278],{"type":51,"value":414},{"type":46,"tag":73,"props":2280,"children":2281},{"style":291},[2282],{"type":51,"value":1972},{"type":46,"tag":73,"props":2284,"children":2285},{"style":80},[2286],{"type":51,"value":288},{"type":46,"tag":73,"props":2288,"children":2289},{"style":80},[2290],{"type":51,"value":853},{"type":46,"tag":73,"props":2292,"children":2293},{"class":75,"line":236},[2294],{"type":46,"tag":73,"props":2295,"children":2296},{"style":107},[2297],{"type":51,"value":2298},"    // iframe view\n",{"type":46,"tag":73,"props":2300,"children":2301},{"class":75,"line":310},[2302,2307,2311],{"type":46,"tag":73,"props":2303,"children":2304},{"style":86},[2305],{"type":51,"value":2306},"    view",{"type":46,"tag":73,"props":2308,"children":2309},{"style":80},[2310],{"type":51,"value":809},{"type":46,"tag":73,"props":2312,"children":2313},{"style":80},[2314],{"type":51,"value":814},{"type":46,"tag":73,"props":2316,"children":2317},{"class":75,"line":319},[2318,2323,2327,2331,2335,2339],{"type":46,"tag":73,"props":2319,"children":2320},{"style":86},[2321],{"type":51,"value":2322},"      type",{"type":46,"tag":73,"props":2324,"children":2325},{"style":80},[2326],{"type":51,"value":809},{"type":46,"tag":73,"props":2328,"children":2329},{"style":80},[2330],{"type":51,"value":414},{"type":46,"tag":73,"props":2332,"children":2333},{"style":291},[2334],{"type":51,"value":2025},{"type":46,"tag":73,"props":2336,"children":2337},{"style":80},[2338],{"type":51,"value":288},{"type":46,"tag":73,"props":2340,"children":2341},{"style":80},[2342],{"type":51,"value":853},{"type":46,"tag":73,"props":2344,"children":2345},{"class":75,"line":328},[2346,2351,2355,2359,2363,2367],{"type":46,"tag":73,"props":2347,"children":2348},{"style":86},[2349],{"type":51,"value":2350},"      src",{"type":46,"tag":73,"props":2352,"children":2353},{"style":80},[2354],{"type":51,"value":809},{"type":46,"tag":73,"props":2356,"children":2357},{"style":80},[2358],{"type":51,"value":414},{"type":46,"tag":73,"props":2360,"children":2361},{"style":291},[2362],{"type":51,"value":2054},{"type":46,"tag":73,"props":2364,"children":2365},{"style":80},[2366],{"type":51,"value":288},{"type":46,"tag":73,"props":2368,"children":2369},{"style":80},[2370],{"type":51,"value":853},{"type":46,"tag":73,"props":2372,"children":2373},{"class":75,"line":337},[2374],{"type":46,"tag":73,"props":2375,"children":2376},{"style":80},[2377],{"type":51,"value":2378},"    },\n",{"type":46,"tag":73,"props":2380,"children":2381},{"class":75,"line":355},[2382,2387],{"type":46,"tag":73,"props":2383,"children":2384},{"style":80},[2385],{"type":51,"value":2386},"  }",{"type":46,"tag":73,"props":2388,"children":2389},{"style":86},[2390],{"type":51,"value":900},{"type":46,"tag":73,"props":2392,"children":2393},{"class":75,"line":2073},[2394,2398],{"type":46,"tag":73,"props":2395,"children":2396},{"style":80},[2397],{"type":51,"value":895},{"type":46,"tag":73,"props":2399,"children":2400},{"style":122},[2401],{"type":51,"value":900},{"type":46,"tag":727,"props":2403,"children":2405},{"id":2404},"iframe-permissions",[2406],{"type":51,"value":2407},"Iframe Permissions",{"type":46,"tag":47,"props":2409,"children":2410},{},[2411,2413,2419,2421,2427,2429,2435],{"type":51,"value":2412},"By default, iframes have ",{"type":46,"tag":54,"props":2414,"children":2416},{"className":2415},[],[2417],{"type":51,"value":2418},"clipboard-write",{"type":51,"value":2420}," and ",{"type":46,"tag":54,"props":2422,"children":2424},{"className":2423},[],[2425],{"type":51,"value":2426},"clipboard-read",{"type":51,"value":2428}," permissions enabled. You can add additional permissions using the ",{"type":46,"tag":54,"props":2430,"children":2432},{"className":2431},[],[2433],{"type":51,"value":2434},"permissions",{"type":51,"value":2436}," option:",{"type":46,"tag":63,"props":2438,"children":2440},{"className":376,"code":2439,"language":378,"meta":40,"style":40},"const view: ModuleIframeView = {\n  type: 'iframe',\n  src: '/url-to-your-module-view',\n  // Additional permissions to allow in the iframe\n  permissions: ['camera', 'microphone', 'geolocation'],\n}\n",[2441],{"type":46,"tag":54,"props":2442,"children":2443},{"__ignoreMap":40},[2444,2474,2502,2530,2538,2611],{"type":46,"tag":73,"props":2445,"children":2446},{"class":75,"line":76},[2447,2451,2456,2460,2465,2470],{"type":46,"tag":73,"props":2448,"children":2449},{"style":92},[2450],{"type":51,"value":119},{"type":46,"tag":73,"props":2452,"children":2453},{"style":122},[2454],{"type":51,"value":2455}," view",{"type":46,"tag":73,"props":2457,"children":2458},{"style":80},[2459],{"type":51,"value":809},{"type":46,"tag":73,"props":2461,"children":2462},{"style":1753},[2463],{"type":51,"value":2464}," ModuleIframeView",{"type":46,"tag":73,"props":2466,"children":2467},{"style":80},[2468],{"type":51,"value":2469}," =",{"type":46,"tag":73,"props":2471,"children":2472},{"style":80},[2473],{"type":51,"value":814},{"type":46,"tag":73,"props":2475,"children":2476},{"class":75,"line":103},[2477,2482,2486,2490,2494,2498],{"type":46,"tag":73,"props":2478,"children":2479},{"style":86},[2480],{"type":51,"value":2481},"  type",{"type":46,"tag":73,"props":2483,"children":2484},{"style":80},[2485],{"type":51,"value":809},{"type":46,"tag":73,"props":2487,"children":2488},{"style":80},[2489],{"type":51,"value":414},{"type":46,"tag":73,"props":2491,"children":2492},{"style":291},[2493],{"type":51,"value":2025},{"type":46,"tag":73,"props":2495,"children":2496},{"style":80},[2497],{"type":51,"value":288},{"type":46,"tag":73,"props":2499,"children":2500},{"style":80},[2501],{"type":51,"value":853},{"type":46,"tag":73,"props":2503,"children":2504},{"class":75,"line":113},[2505,2510,2514,2518,2522,2526],{"type":46,"tag":73,"props":2506,"children":2507},{"style":86},[2508],{"type":51,"value":2509},"  src",{"type":46,"tag":73,"props":2511,"children":2512},{"style":80},[2513],{"type":51,"value":809},{"type":46,"tag":73,"props":2515,"children":2516},{"style":80},[2517],{"type":51,"value":414},{"type":46,"tag":73,"props":2519,"children":2520},{"style":291},[2521],{"type":51,"value":2054},{"type":46,"tag":73,"props":2523,"children":2524},{"style":80},[2525],{"type":51,"value":288},{"type":46,"tag":73,"props":2527,"children":2528},{"style":80},[2529],{"type":51,"value":853},{"type":46,"tag":73,"props":2531,"children":2532},{"class":75,"line":149},[2533],{"type":46,"tag":73,"props":2534,"children":2535},{"style":107},[2536],{"type":51,"value":2537},"  // Additional permissions to allow in the iframe\n",{"type":46,"tag":73,"props":2539,"children":2540},{"class":75,"line":166},[2541,2546,2550,2555,2559,2564,2568,2572,2576,2581,2585,2589,2593,2598,2602,2607],{"type":46,"tag":73,"props":2542,"children":2543},{"style":86},[2544],{"type":51,"value":2545},"  permissions",{"type":46,"tag":73,"props":2547,"children":2548},{"style":80},[2549],{"type":51,"value":809},{"type":46,"tag":73,"props":2551,"children":2552},{"style":122},[2553],{"type":51,"value":2554}," [",{"type":46,"tag":73,"props":2556,"children":2557},{"style":80},[2558],{"type":51,"value":288},{"type":46,"tag":73,"props":2560,"children":2561},{"style":291},[2562],{"type":51,"value":2563},"camera",{"type":46,"tag":73,"props":2565,"children":2566},{"style":80},[2567],{"type":51,"value":288},{"type":46,"tag":73,"props":2569,"children":2570},{"style":80},[2571],{"type":51,"value":2133},{"type":46,"tag":73,"props":2573,"children":2574},{"style":80},[2575],{"type":51,"value":414},{"type":46,"tag":73,"props":2577,"children":2578},{"style":291},[2579],{"type":51,"value":2580},"microphone",{"type":46,"tag":73,"props":2582,"children":2583},{"style":80},[2584],{"type":51,"value":288},{"type":46,"tag":73,"props":2586,"children":2587},{"style":80},[2588],{"type":51,"value":2133},{"type":46,"tag":73,"props":2590,"children":2591},{"style":80},[2592],{"type":51,"value":414},{"type":46,"tag":73,"props":2594,"children":2595},{"style":291},[2596],{"type":51,"value":2597},"geolocation",{"type":46,"tag":73,"props":2599,"children":2600},{"style":80},[2601],{"type":51,"value":288},{"type":46,"tag":73,"props":2603,"children":2604},{"style":122},[2605],{"type":51,"value":2606},"]",{"type":46,"tag":73,"props":2608,"children":2609},{"style":80},[2610],{"type":51,"value":853},{"type":46,"tag":73,"props":2612,"children":2613},{"class":75,"line":176},[2614],{"type":46,"tag":73,"props":2615,"children":2616},{"style":80},[2617],{"type":51,"value":2618},"}\n",{"type":46,"tag":47,"props":2620,"children":2621},{},[2622,2624,2630],{"type":51,"value":2623},"These permissions will be merged with the default ones and set on the iframe's ",{"type":46,"tag":54,"props":2625,"children":2627},{"className":2626},[],[2628],{"type":51,"value":2629},"allow",{"type":51,"value":2631}," attribute.",{"type":46,"tag":47,"props":2633,"children":2634},{},[2635,2636,2641],{"type":51,"value":680},{"type":46,"tag":455,"props":2637,"children":2638},{"href":26},[2639],{"type":51,"value":2640},"DevTools Utility Kit",{"type":51,"value":264},{"type":46,"tag":465,"props":2643,"children":2645},{"id":2644},"lazy-service-launching",[2646],{"type":51,"value":2647},"Lazy Service Launching",{"type":46,"tag":47,"props":2649,"children":2650},{},[2651],{"type":51,"value":2652},"If the view you are contributing is heavy to load, you can have the tab first and let user launch it when they need it.",{"type":46,"tag":63,"props":2654,"children":2656},{"className":376,"code":2655,"language":378,"meta":40,"style":40},"let isReady = false\nconst promise: Promise\u003Cany> | null = null\n\nasync function launchService() {\n  // ...launch your service\n  isReady = true\n}\n\nnuxt.hook('devtools:customTabs', (tabs) => {\n  tabs.push({\n    name: 'my-module',\n    title: 'My Module',\n    view: isReady\n      ? {\n          type: 'iframe',\n          src: '/url-to-your-module-view',\n        }\n      : {\n          type: 'launch',\n          description: 'Launch My Module',\n          actions: [{\n            label: 'Start',\n            async handle() {\n              if (!promise)\n                promise = launchService()\n              await promise\n            },\n          }]\n        },\n  })\n})\n",[2657],{"type":46,"tag":54,"props":2658,"children":2659},{"__ignoreMap":40},[2660,2682,2736,2743,2770,2778,2795,2802,2809,2864,2887,2914,2941,2957,2969,2997,3026,3035,3048,3077,3107,3128,3158,3180,3207,3229,3243,3252,3266,3275,3287],{"type":46,"tag":73,"props":2661,"children":2662},{"class":75,"line":76},[2663,2668,2673,2677],{"type":46,"tag":73,"props":2664,"children":2665},{"style":92},[2666],{"type":51,"value":2667},"let",{"type":46,"tag":73,"props":2669,"children":2670},{"style":122},[2671],{"type":51,"value":2672}," isReady ",{"type":46,"tag":73,"props":2674,"children":2675},{"style":80},[2676],{"type":51,"value":130},{"type":46,"tag":73,"props":2678,"children":2679},{"style":845},[2680],{"type":51,"value":2681}," false\n",{"type":46,"tag":73,"props":2683,"children":2684},{"class":75,"line":103},[2685,2689,2694,2698,2703,2707,2712,2717,2722,2727,2731],{"type":46,"tag":73,"props":2686,"children":2687},{"style":92},[2688],{"type":51,"value":119},{"type":46,"tag":73,"props":2690,"children":2691},{"style":122},[2692],{"type":51,"value":2693}," promise",{"type":46,"tag":73,"props":2695,"children":2696},{"style":80},[2697],{"type":51,"value":809},{"type":46,"tag":73,"props":2699,"children":2700},{"style":1753},[2701],{"type":51,"value":2702}," Promise",{"type":46,"tag":73,"props":2704,"children":2705},{"style":80},[2706],{"type":51,"value":83},{"type":46,"tag":73,"props":2708,"children":2709},{"style":1753},[2710],{"type":51,"value":2711},"any",{"type":46,"tag":73,"props":2713,"children":2714},{"style":80},[2715],{"type":51,"value":2716},">",{"type":46,"tag":73,"props":2718,"children":2719},{"style":80},[2720],{"type":51,"value":2721}," |",{"type":46,"tag":73,"props":2723,"children":2724},{"style":1753},[2725],{"type":51,"value":2726}," null",{"type":46,"tag":73,"props":2728,"children":2729},{"style":80},[2730],{"type":51,"value":2469},{"type":46,"tag":73,"props":2732,"children":2733},{"style":80},[2734],{"type":51,"value":2735}," null\n",{"type":46,"tag":73,"props":2737,"children":2738},{"class":75,"line":113},[2739],{"type":46,"tag":73,"props":2740,"children":2741},{"emptyLinePlaceholder":170},[2742],{"type":51,"value":173},{"type":46,"tag":73,"props":2744,"children":2745},{"class":75,"line":149},[2746,2751,2756,2761,2766],{"type":46,"tag":73,"props":2747,"children":2748},{"style":92},[2749],{"type":51,"value":2750},"async",{"type":46,"tag":73,"props":2752,"children":2753},{"style":92},[2754],{"type":51,"value":2755}," function",{"type":46,"tag":73,"props":2757,"children":2758},{"style":133},[2759],{"type":51,"value":2760}," launchService",{"type":46,"tag":73,"props":2762,"children":2763},{"style":80},[2764],{"type":51,"value":2765},"()",{"type":46,"tag":73,"props":2767,"children":2768},{"style":80},[2769],{"type":51,"value":814},{"type":46,"tag":73,"props":2771,"children":2772},{"class":75,"line":166},[2773],{"type":46,"tag":73,"props":2774,"children":2775},{"style":107},[2776],{"type":51,"value":2777},"  // ...launch your service\n",{"type":46,"tag":73,"props":2779,"children":2780},{"class":75,"line":176},[2781,2786,2790],{"type":46,"tag":73,"props":2782,"children":2783},{"style":122},[2784],{"type":51,"value":2785},"  isReady",{"type":46,"tag":73,"props":2787,"children":2788},{"style":80},[2789],{"type":51,"value":2469},{"type":46,"tag":73,"props":2791,"children":2792},{"style":845},[2793],{"type":51,"value":2794}," true\n",{"type":46,"tag":73,"props":2796,"children":2797},{"class":75,"line":193},[2798],{"type":46,"tag":73,"props":2799,"children":2800},{"style":80},[2801],{"type":51,"value":2618},{"type":46,"tag":73,"props":2803,"children":2804},{"class":75,"line":207},[2805],{"type":46,"tag":73,"props":2806,"children":2807},{"emptyLinePlaceholder":170},[2808],{"type":51,"value":173},{"type":46,"tag":73,"props":2810,"children":2811},{"class":75,"line":236},[2812,2816,2820,2824,2828,2832,2836,2840,2844,2848,2852,2856,2860],{"type":46,"tag":73,"props":2813,"children":2814},{"style":122},[2815],{"type":51,"value":2102},{"type":46,"tag":73,"props":2817,"children":2818},{"style":80},[2819],{"type":51,"value":264},{"type":46,"tag":73,"props":2821,"children":2822},{"style":133},[2823],{"type":51,"value":2111},{"type":46,"tag":73,"props":2825,"children":2826},{"style":122},[2827],{"type":51,"value":283},{"type":46,"tag":73,"props":2829,"children":2830},{"style":80},[2831],{"type":51,"value":288},{"type":46,"tag":73,"props":2833,"children":2834},{"style":291},[2835],{"type":51,"value":2124},{"type":46,"tag":73,"props":2837,"children":2838},{"style":80},[2839],{"type":51,"value":288},{"type":46,"tag":73,"props":2841,"children":2842},{"style":80},[2843],{"type":51,"value":2133},{"type":46,"tag":73,"props":2845,"children":2846},{"style":80},[2847],{"type":51,"value":2138},{"type":46,"tag":73,"props":2849,"children":2850},{"style":2141},[2851],{"type":51,"value":2144},{"type":46,"tag":73,"props":2853,"children":2854},{"style":80},[2855],{"type":51,"value":303},{"type":46,"tag":73,"props":2857,"children":2858},{"style":92},[2859],{"type":51,"value":2153},{"type":46,"tag":73,"props":2861,"children":2862},{"style":80},[2863],{"type":51,"value":814},{"type":46,"tag":73,"props":2865,"children":2866},{"class":75,"line":310},[2867,2871,2875,2879,2883],{"type":46,"tag":73,"props":2868,"children":2869},{"style":122},[2870],{"type":51,"value":2165},{"type":46,"tag":73,"props":2872,"children":2873},{"style":80},[2874],{"type":51,"value":264},{"type":46,"tag":73,"props":2876,"children":2877},{"style":133},[2878],{"type":51,"value":2174},{"type":46,"tag":73,"props":2880,"children":2881},{"style":86},[2882],{"type":51,"value":283},{"type":46,"tag":73,"props":2884,"children":2885},{"style":80},[2886],{"type":51,"value":796},{"type":46,"tag":73,"props":2888,"children":2889},{"class":75,"line":319},[2890,2894,2898,2902,2906,2910],{"type":46,"tag":73,"props":2891,"children":2892},{"style":86},[2893],{"type":51,"value":2198},{"type":46,"tag":73,"props":2895,"children":2896},{"style":80},[2897],{"type":51,"value":809},{"type":46,"tag":73,"props":2899,"children":2900},{"style":80},[2901],{"type":51,"value":414},{"type":46,"tag":73,"props":2903,"children":2904},{"style":291},[2905],{"type":51,"value":1898},{"type":46,"tag":73,"props":2907,"children":2908},{"style":80},[2909],{"type":51,"value":288},{"type":46,"tag":73,"props":2911,"children":2912},{"style":80},[2913],{"type":51,"value":853},{"type":46,"tag":73,"props":2915,"children":2916},{"class":75,"line":328},[2917,2921,2925,2929,2933,2937],{"type":46,"tag":73,"props":2918,"children":2919},{"style":86},[2920],{"type":51,"value":2234},{"type":46,"tag":73,"props":2922,"children":2923},{"style":80},[2924],{"type":51,"value":809},{"type":46,"tag":73,"props":2926,"children":2927},{"style":80},[2928],{"type":51,"value":414},{"type":46,"tag":73,"props":2930,"children":2931},{"style":291},[2932],{"type":51,"value":1935},{"type":46,"tag":73,"props":2934,"children":2935},{"style":80},[2936],{"type":51,"value":288},{"type":46,"tag":73,"props":2938,"children":2939},{"style":80},[2940],{"type":51,"value":853},{"type":46,"tag":73,"props":2942,"children":2943},{"class":75,"line":337},[2944,2948,2952],{"type":46,"tag":73,"props":2945,"children":2946},{"style":86},[2947],{"type":51,"value":2306},{"type":46,"tag":73,"props":2949,"children":2950},{"style":80},[2951],{"type":51,"value":809},{"type":46,"tag":73,"props":2953,"children":2954},{"style":122},[2955],{"type":51,"value":2956}," isReady\n",{"type":46,"tag":73,"props":2958,"children":2959},{"class":75,"line":355},[2960,2965],{"type":46,"tag":73,"props":2961,"children":2962},{"style":80},[2963],{"type":51,"value":2964},"      ?",{"type":46,"tag":73,"props":2966,"children":2967},{"style":80},[2968],{"type":51,"value":814},{"type":46,"tag":73,"props":2970,"children":2971},{"class":75,"line":2073},[2972,2977,2981,2985,2989,2993],{"type":46,"tag":73,"props":2973,"children":2974},{"style":86},[2975],{"type":51,"value":2976},"          type",{"type":46,"tag":73,"props":2978,"children":2979},{"style":80},[2980],{"type":51,"value":809},{"type":46,"tag":73,"props":2982,"children":2983},{"style":80},[2984],{"type":51,"value":414},{"type":46,"tag":73,"props":2986,"children":2987},{"style":291},[2988],{"type":51,"value":2025},{"type":46,"tag":73,"props":2990,"children":2991},{"style":80},[2992],{"type":51,"value":288},{"type":46,"tag":73,"props":2994,"children":2995},{"style":80},[2996],{"type":51,"value":853},{"type":46,"tag":73,"props":2998,"children":3000},{"class":75,"line":2999},16,[3001,3006,3010,3014,3018,3022],{"type":46,"tag":73,"props":3002,"children":3003},{"style":86},[3004],{"type":51,"value":3005},"          src",{"type":46,"tag":73,"props":3007,"children":3008},{"style":80},[3009],{"type":51,"value":809},{"type":46,"tag":73,"props":3011,"children":3012},{"style":80},[3013],{"type":51,"value":414},{"type":46,"tag":73,"props":3015,"children":3016},{"style":291},[3017],{"type":51,"value":2054},{"type":46,"tag":73,"props":3019,"children":3020},{"style":80},[3021],{"type":51,"value":288},{"type":46,"tag":73,"props":3023,"children":3024},{"style":80},[3025],{"type":51,"value":853},{"type":46,"tag":73,"props":3027,"children":3029},{"class":75,"line":3028},17,[3030],{"type":46,"tag":73,"props":3031,"children":3032},{"style":80},[3033],{"type":51,"value":3034},"        }\n",{"type":46,"tag":73,"props":3036,"children":3038},{"class":75,"line":3037},18,[3039,3044],{"type":46,"tag":73,"props":3040,"children":3041},{"style":80},[3042],{"type":51,"value":3043},"      :",{"type":46,"tag":73,"props":3045,"children":3046},{"style":80},[3047],{"type":51,"value":814},{"type":46,"tag":73,"props":3049,"children":3051},{"class":75,"line":3050},19,[3052,3056,3060,3064,3069,3073],{"type":46,"tag":73,"props":3053,"children":3054},{"style":86},[3055],{"type":51,"value":2976},{"type":46,"tag":73,"props":3057,"children":3058},{"style":80},[3059],{"type":51,"value":809},{"type":46,"tag":73,"props":3061,"children":3062},{"style":80},[3063],{"type":51,"value":414},{"type":46,"tag":73,"props":3065,"children":3066},{"style":291},[3067],{"type":51,"value":3068},"launch",{"type":46,"tag":73,"props":3070,"children":3071},{"style":80},[3072],{"type":51,"value":288},{"type":46,"tag":73,"props":3074,"children":3075},{"style":80},[3076],{"type":51,"value":853},{"type":46,"tag":73,"props":3078,"children":3080},{"class":75,"line":3079},20,[3081,3086,3090,3094,3099,3103],{"type":46,"tag":73,"props":3082,"children":3083},{"style":86},[3084],{"type":51,"value":3085},"          description",{"type":46,"tag":73,"props":3087,"children":3088},{"style":80},[3089],{"type":51,"value":809},{"type":46,"tag":73,"props":3091,"children":3092},{"style":80},[3093],{"type":51,"value":414},{"type":46,"tag":73,"props":3095,"children":3096},{"style":291},[3097],{"type":51,"value":3098},"Launch My Module",{"type":46,"tag":73,"props":3100,"children":3101},{"style":80},[3102],{"type":51,"value":288},{"type":46,"tag":73,"props":3104,"children":3105},{"style":80},[3106],{"type":51,"value":853},{"type":46,"tag":73,"props":3108,"children":3110},{"class":75,"line":3109},21,[3111,3116,3120,3124],{"type":46,"tag":73,"props":3112,"children":3113},{"style":86},[3114],{"type":51,"value":3115},"          actions",{"type":46,"tag":73,"props":3117,"children":3118},{"style":80},[3119],{"type":51,"value":809},{"type":46,"tag":73,"props":3121,"children":3122},{"style":86},[3123],{"type":51,"value":2554},{"type":46,"tag":73,"props":3125,"children":3126},{"style":80},[3127],{"type":51,"value":796},{"type":46,"tag":73,"props":3129,"children":3131},{"class":75,"line":3130},22,[3132,3137,3141,3145,3150,3154],{"type":46,"tag":73,"props":3133,"children":3134},{"style":86},[3135],{"type":51,"value":3136},"            label",{"type":46,"tag":73,"props":3138,"children":3139},{"style":80},[3140],{"type":51,"value":809},{"type":46,"tag":73,"props":3142,"children":3143},{"style":80},[3144],{"type":51,"value":414},{"type":46,"tag":73,"props":3146,"children":3147},{"style":291},[3148],{"type":51,"value":3149},"Start",{"type":46,"tag":73,"props":3151,"children":3152},{"style":80},[3153],{"type":51,"value":288},{"type":46,"tag":73,"props":3155,"children":3156},{"style":80},[3157],{"type":51,"value":853},{"type":46,"tag":73,"props":3159,"children":3161},{"class":75,"line":3160},23,[3162,3167,3172,3176],{"type":46,"tag":73,"props":3163,"children":3164},{"style":92},[3165],{"type":51,"value":3166},"            async",{"type":46,"tag":73,"props":3168,"children":3169},{"style":86},[3170],{"type":51,"value":3171}," handle",{"type":46,"tag":73,"props":3173,"children":3174},{"style":80},[3175],{"type":51,"value":2765},{"type":46,"tag":73,"props":3177,"children":3178},{"style":80},[3179],{"type":51,"value":814},{"type":46,"tag":73,"props":3181,"children":3183},{"class":75,"line":3182},24,[3184,3189,3193,3198,3203],{"type":46,"tag":73,"props":3185,"children":3186},{"style":211},[3187],{"type":51,"value":3188},"              if",{"type":46,"tag":73,"props":3190,"children":3191},{"style":86},[3192],{"type":51,"value":2138},{"type":46,"tag":73,"props":3194,"children":3195},{"style":80},[3196],{"type":51,"value":3197},"!",{"type":46,"tag":73,"props":3199,"children":3200},{"style":122},[3201],{"type":51,"value":3202},"promise",{"type":46,"tag":73,"props":3204,"children":3205},{"style":86},[3206],{"type":51,"value":900},{"type":46,"tag":73,"props":3208,"children":3210},{"class":75,"line":3209},25,[3211,3216,3220,3224],{"type":46,"tag":73,"props":3212,"children":3213},{"style":122},[3214],{"type":51,"value":3215},"                promise",{"type":46,"tag":73,"props":3217,"children":3218},{"style":80},[3219],{"type":51,"value":2469},{"type":46,"tag":73,"props":3221,"children":3222},{"style":133},[3223],{"type":51,"value":2760},{"type":46,"tag":73,"props":3225,"children":3226},{"style":86},[3227],{"type":51,"value":3228},"()\n",{"type":46,"tag":73,"props":3230,"children":3232},{"class":75,"line":3231},26,[3233,3238],{"type":46,"tag":73,"props":3234,"children":3235},{"style":211},[3236],{"type":51,"value":3237},"              await",{"type":46,"tag":73,"props":3239,"children":3240},{"style":122},[3241],{"type":51,"value":3242}," promise\n",{"type":46,"tag":73,"props":3244,"children":3246},{"class":75,"line":3245},27,[3247],{"type":46,"tag":73,"props":3248,"children":3249},{"style":80},[3250],{"type":51,"value":3251},"            },\n",{"type":46,"tag":73,"props":3253,"children":3255},{"class":75,"line":3254},28,[3256,3261],{"type":46,"tag":73,"props":3257,"children":3258},{"style":80},[3259],{"type":51,"value":3260},"          }",{"type":46,"tag":73,"props":3262,"children":3263},{"style":86},[3264],{"type":51,"value":3265},"]\n",{"type":46,"tag":73,"props":3267,"children":3269},{"class":75,"line":3268},29,[3270],{"type":46,"tag":73,"props":3271,"children":3272},{"style":80},[3273],{"type":51,"value":3274},"        },\n",{"type":46,"tag":73,"props":3276,"children":3278},{"class":75,"line":3277},30,[3279,3283],{"type":46,"tag":73,"props":3280,"children":3281},{"style":80},[3282],{"type":51,"value":2386},{"type":46,"tag":73,"props":3284,"children":3285},{"style":86},[3286],{"type":51,"value":900},{"type":46,"tag":73,"props":3288,"children":3290},{"class":75,"line":3289},31,[3291,3295],{"type":46,"tag":73,"props":3292,"children":3293},{"style":80},[3294],{"type":51,"value":895},{"type":46,"tag":73,"props":3296,"children":3297},{"style":122},[3298],{"type":51,"value":900},{"type":46,"tag":47,"props":3300,"children":3301},{},[3302,3304,3310],{"type":51,"value":3303},"It will first display a launch page with a button to start the service. When user click the button, the ",{"type":46,"tag":54,"props":3305,"children":3307},{"className":3306},[],[3308],{"type":51,"value":3309},"handle()",{"type":51,"value":3311}," will be called, and the view will be updated to iframe.",{"type":46,"tag":47,"props":3313,"children":3314},{},[3315,3317,3323,3325,3330],{"type":51,"value":3316},"When you need to refresh the custom tabs, you can call ",{"type":46,"tag":54,"props":3318,"children":3320},{"className":3319},[],[3321],{"type":51,"value":3322},"nuxt.callHook('devtools:customTabs:refresh')",{"type":51,"value":3324}," and the hooks on ",{"type":46,"tag":54,"props":3326,"children":3328},{"className":3327},[],[3329],{"type":51,"value":2124},{"type":51,"value":3331}," will be revaluated again.",{"type":46,"tag":465,"props":3333,"children":3335},{"id":3334},"api-for-custom-view",[3336],{"type":51,"value":3337},"API for Custom View",{"type":46,"tag":47,"props":3339,"children":3340},{},[3341,3343,3349],{"type":51,"value":3342},"Please refer to ",{"type":46,"tag":455,"props":3344,"children":3346},{"href":3345},"/module/utils-kit#nuxtdevtools-kitiframe-client",[3347],{"type":51,"value":3348},"Iframe Client",{"type":51,"value":264},{"type":46,"tag":465,"props":3351,"children":3353},{"id":3352},"custom-rpc-functions",[3354],{"type":51,"value":3355},"Custom RPC Functions",{"type":46,"tag":47,"props":3357,"children":3358},{},[3359],{"type":51,"value":3360},"Nuxt DevTools uses Remote Procedure Call (RPC) to communicate between the server and client. For modules you can also leverage that to communicate your server code.",{"type":46,"tag":47,"props":3362,"children":3363},{},[3364],{"type":51,"value":3365},"To do that, we recommend to define your types in a shared TypeScript file first:",{"type":46,"tag":63,"props":3367,"children":3369},{"className":376,"code":3368,"language":378,"meta":40,"style":40},"// rpc-types.ts\n\nexport interface ServerFunctions {\n  getMyModuleOptions: () => MyModuleOptions\n}\n\nexport interface ClientFunctions {\n  showNotification: (message: string) => void\n}\n",[3370],{"type":46,"tag":54,"props":3371,"children":3372},{"__ignoreMap":40},[3373,3381,3388,3409,3435,3442,3449,3469,3512],{"type":46,"tag":73,"props":3374,"children":3375},{"class":75,"line":76},[3376],{"type":46,"tag":73,"props":3377,"children":3378},{"style":107},[3379],{"type":51,"value":3380},"// rpc-types.ts\n",{"type":46,"tag":73,"props":3382,"children":3383},{"class":75,"line":103},[3384],{"type":46,"tag":73,"props":3385,"children":3386},{"emptyLinePlaceholder":170},[3387],{"type":51,"value":173},{"type":46,"tag":73,"props":3389,"children":3390},{"class":75,"line":113},[3391,3395,3400,3405],{"type":46,"tag":73,"props":3392,"children":3393},{"style":211},[3394],{"type":51,"value":777},{"type":46,"tag":73,"props":3396,"children":3397},{"style":92},[3398],{"type":51,"value":3399}," interface",{"type":46,"tag":73,"props":3401,"children":3402},{"style":1753},[3403],{"type":51,"value":3404}," ServerFunctions",{"type":46,"tag":73,"props":3406,"children":3407},{"style":80},[3408],{"type":51,"value":814},{"type":46,"tag":73,"props":3410,"children":3411},{"class":75,"line":149},[3412,3417,3421,3426,3430],{"type":46,"tag":73,"props":3413,"children":3414},{"style":86},[3415],{"type":51,"value":3416},"  getMyModuleOptions",{"type":46,"tag":73,"props":3418,"children":3419},{"style":80},[3420],{"type":51,"value":809},{"type":46,"tag":73,"props":3422,"children":3423},{"style":80},[3424],{"type":51,"value":3425}," ()",{"type":46,"tag":73,"props":3427,"children":3428},{"style":92},[3429],{"type":51,"value":2153},{"type":46,"tag":73,"props":3431,"children":3432},{"style":1753},[3433],{"type":51,"value":3434}," MyModuleOptions\n",{"type":46,"tag":73,"props":3436,"children":3437},{"class":75,"line":166},[3438],{"type":46,"tag":73,"props":3439,"children":3440},{"style":80},[3441],{"type":51,"value":2618},{"type":46,"tag":73,"props":3443,"children":3444},{"class":75,"line":176},[3445],{"type":46,"tag":73,"props":3446,"children":3447},{"emptyLinePlaceholder":170},[3448],{"type":51,"value":173},{"type":46,"tag":73,"props":3450,"children":3451},{"class":75,"line":193},[3452,3456,3460,3465],{"type":46,"tag":73,"props":3453,"children":3454},{"style":211},[3455],{"type":51,"value":777},{"type":46,"tag":73,"props":3457,"children":3458},{"style":92},[3459],{"type":51,"value":3399},{"type":46,"tag":73,"props":3461,"children":3462},{"style":1753},[3463],{"type":51,"value":3464}," ClientFunctions",{"type":46,"tag":73,"props":3466,"children":3467},{"style":80},[3468],{"type":51,"value":814},{"type":46,"tag":73,"props":3470,"children":3471},{"class":75,"line":207},[3472,3477,3481,3485,3490,3494,3499,3503,3507],{"type":46,"tag":73,"props":3473,"children":3474},{"style":86},[3475],{"type":51,"value":3476},"  showNotification",{"type":46,"tag":73,"props":3478,"children":3479},{"style":80},[3480],{"type":51,"value":809},{"type":46,"tag":73,"props":3482,"children":3483},{"style":80},[3484],{"type":51,"value":2138},{"type":46,"tag":73,"props":3486,"children":3487},{"style":2141},[3488],{"type":51,"value":3489},"message",{"type":46,"tag":73,"props":3491,"children":3492},{"style":80},[3493],{"type":51,"value":809},{"type":46,"tag":73,"props":3495,"children":3496},{"style":1753},[3497],{"type":51,"value":3498}," string",{"type":46,"tag":73,"props":3500,"children":3501},{"style":80},[3502],{"type":51,"value":303},{"type":46,"tag":73,"props":3504,"children":3505},{"style":92},[3506],{"type":51,"value":2153},{"type":46,"tag":73,"props":3508,"children":3509},{"style":1753},[3510],{"type":51,"value":3511}," void\n",{"type":46,"tag":73,"props":3513,"children":3514},{"class":75,"line":236},[3515],{"type":46,"tag":73,"props":3516,"children":3517},{"style":80},[3518],{"type":51,"value":2618},{"type":46,"tag":47,"props":3520,"children":3521},{},[3522],{"type":51,"value":3523},"And then in your module code:",{"type":46,"tag":63,"props":3525,"children":3527},{"className":376,"code":3526,"language":378,"meta":40,"style":40},"import type { ClientFunctions, ServerFunctions } from './rpc-types'\nimport { extendServerRpc, onDevToolsInitialized } from '@nuxt/devtools-kit'\nimport { defineNuxtModule } from '@nuxt/kit'\n\nconst RPC_NAMESPACE = 'my-module-rpc'\n\nexport default defineNuxtModule({\n  setup(options, nuxt) {\n    // wait for DevTools to be initialized\n    onDevToolsInitialized(async () => {\n      const rpc = extendServerRpc\u003CClientFunctions, ServerFunctions>(RPC_NAMESPACE, {\n        // register server RPC functions\n        getMyModuleOptions() {\n          return options\n        },\n      })\n\n      // call client RPC functions\n      // since it might have multiple clients connected, we use `broadcast` to call all of them\n      await rpc.broadcast.showNotification('Hello from My Module!')\n    })\n  }\n})\n",[3528],{"type":46,"tag":54,"props":3529,"children":3530},{"__ignoreMap":40},[3531,3580,3625,3662,3669,3698,3705,3728,3762,3770,3798,3857,3865,3881,3894,3901,3913,3920,3928,3936,3987,3999,4006],{"type":46,"tag":73,"props":3532,"children":3533},{"class":75,"line":76},[3534,3538,3543,3547,3551,3555,3559,3563,3567,3571,3576],{"type":46,"tag":73,"props":3535,"children":3536},{"style":211},[3537],{"type":51,"value":390},{"type":46,"tag":73,"props":3539,"children":3540},{"style":211},[3541],{"type":51,"value":3542}," type",{"type":46,"tag":73,"props":3544,"children":3545},{"style":80},[3546],{"type":51,"value":395},{"type":46,"tag":73,"props":3548,"children":3549},{"style":122},[3550],{"type":51,"value":3464},{"type":46,"tag":73,"props":3552,"children":3553},{"style":80},[3554],{"type":51,"value":2133},{"type":46,"tag":73,"props":3556,"children":3557},{"style":122},[3558],{"type":51,"value":3404},{"type":46,"tag":73,"props":3560,"children":3561},{"style":80},[3562],{"type":51,"value":404},{"type":46,"tag":73,"props":3564,"children":3565},{"style":211},[3566],{"type":51,"value":409},{"type":46,"tag":73,"props":3568,"children":3569},{"style":80},[3570],{"type":51,"value":414},{"type":46,"tag":73,"props":3572,"children":3573},{"style":291},[3574],{"type":51,"value":3575},"./rpc-types",{"type":46,"tag":73,"props":3577,"children":3578},{"style":80},[3579],{"type":51,"value":424},{"type":46,"tag":73,"props":3581,"children":3582},{"class":75,"line":103},[3583,3587,3591,3596,3600,3605,3609,3613,3617,3621],{"type":46,"tag":73,"props":3584,"children":3585},{"style":211},[3586],{"type":51,"value":390},{"type":46,"tag":73,"props":3588,"children":3589},{"style":80},[3590],{"type":51,"value":395},{"type":46,"tag":73,"props":3592,"children":3593},{"style":122},[3594],{"type":51,"value":3595}," extendServerRpc",{"type":46,"tag":73,"props":3597,"children":3598},{"style":80},[3599],{"type":51,"value":2133},{"type":46,"tag":73,"props":3601,"children":3602},{"style":122},[3603],{"type":51,"value":3604}," onDevToolsInitialized",{"type":46,"tag":73,"props":3606,"children":3607},{"style":80},[3608],{"type":51,"value":404},{"type":46,"tag":73,"props":3610,"children":3611},{"style":211},[3612],{"type":51,"value":409},{"type":46,"tag":73,"props":3614,"children":3615},{"style":80},[3616],{"type":51,"value":414},{"type":46,"tag":73,"props":3618,"children":3619},{"style":291},[3620],{"type":51,"value":1842},{"type":46,"tag":73,"props":3622,"children":3623},{"style":80},[3624],{"type":51,"value":424},{"type":46,"tag":73,"props":3626,"children":3627},{"class":75,"line":113},[3628,3632,3636,3641,3645,3649,3653,3658],{"type":46,"tag":73,"props":3629,"children":3630},{"style":211},[3631],{"type":51,"value":390},{"type":46,"tag":73,"props":3633,"children":3634},{"style":80},[3635],{"type":51,"value":395},{"type":46,"tag":73,"props":3637,"children":3638},{"style":122},[3639],{"type":51,"value":3640}," defineNuxtModule",{"type":46,"tag":73,"props":3642,"children":3643},{"style":80},[3644],{"type":51,"value":404},{"type":46,"tag":73,"props":3646,"children":3647},{"style":211},[3648],{"type":51,"value":409},{"type":46,"tag":73,"props":3650,"children":3651},{"style":80},[3652],{"type":51,"value":414},{"type":46,"tag":73,"props":3654,"children":3655},{"style":291},[3656],{"type":51,"value":3657},"@nuxt/kit",{"type":46,"tag":73,"props":3659,"children":3660},{"style":80},[3661],{"type":51,"value":424},{"type":46,"tag":73,"props":3663,"children":3664},{"class":75,"line":149},[3665],{"type":46,"tag":73,"props":3666,"children":3667},{"emptyLinePlaceholder":170},[3668],{"type":51,"value":173},{"type":46,"tag":73,"props":3670,"children":3671},{"class":75,"line":166},[3672,3676,3681,3685,3689,3694],{"type":46,"tag":73,"props":3673,"children":3674},{"style":92},[3675],{"type":51,"value":119},{"type":46,"tag":73,"props":3677,"children":3678},{"style":122},[3679],{"type":51,"value":3680}," RPC_NAMESPACE ",{"type":46,"tag":73,"props":3682,"children":3683},{"style":80},[3684],{"type":51,"value":130},{"type":46,"tag":73,"props":3686,"children":3687},{"style":80},[3688],{"type":51,"value":414},{"type":46,"tag":73,"props":3690,"children":3691},{"style":291},[3692],{"type":51,"value":3693},"my-module-rpc",{"type":46,"tag":73,"props":3695,"children":3696},{"style":80},[3697],{"type":51,"value":424},{"type":46,"tag":73,"props":3699,"children":3700},{"class":75,"line":176},[3701],{"type":46,"tag":73,"props":3702,"children":3703},{"emptyLinePlaceholder":170},[3704],{"type":51,"value":173},{"type":46,"tag":73,"props":3706,"children":3707},{"class":75,"line":193},[3708,3712,3716,3720,3724],{"type":46,"tag":73,"props":3709,"children":3710},{"style":211},[3711],{"type":51,"value":777},{"type":46,"tag":73,"props":3713,"children":3714},{"style":211},[3715],{"type":51,"value":782},{"type":46,"tag":73,"props":3717,"children":3718},{"style":133},[3719],{"type":51,"value":3640},{"type":46,"tag":73,"props":3721,"children":3722},{"style":122},[3723],{"type":51,"value":283},{"type":46,"tag":73,"props":3725,"children":3726},{"style":80},[3727],{"type":51,"value":796},{"type":46,"tag":73,"props":3729,"children":3730},{"class":75,"line":207},[3731,3736,3740,3745,3749,3754,3758],{"type":46,"tag":73,"props":3732,"children":3733},{"style":86},[3734],{"type":51,"value":3735},"  setup",{"type":46,"tag":73,"props":3737,"children":3738},{"style":80},[3739],{"type":51,"value":283},{"type":46,"tag":73,"props":3741,"children":3742},{"style":2141},[3743],{"type":51,"value":3744},"options",{"type":46,"tag":73,"props":3746,"children":3747},{"style":80},[3748],{"type":51,"value":2133},{"type":46,"tag":73,"props":3750,"children":3751},{"style":2141},[3752],{"type":51,"value":3753}," nuxt",{"type":46,"tag":73,"props":3755,"children":3756},{"style":80},[3757],{"type":51,"value":303},{"type":46,"tag":73,"props":3759,"children":3760},{"style":80},[3761],{"type":51,"value":814},{"type":46,"tag":73,"props":3763,"children":3764},{"class":75,"line":236},[3765],{"type":46,"tag":73,"props":3766,"children":3767},{"style":107},[3768],{"type":51,"value":3769},"    // wait for DevTools to be initialized\n",{"type":46,"tag":73,"props":3771,"children":3772},{"class":75,"line":310},[3773,3778,3782,3786,3790,3794],{"type":46,"tag":73,"props":3774,"children":3775},{"style":133},[3776],{"type":51,"value":3777},"    onDevToolsInitialized",{"type":46,"tag":73,"props":3779,"children":3780},{"style":86},[3781],{"type":51,"value":283},{"type":46,"tag":73,"props":3783,"children":3784},{"style":92},[3785],{"type":51,"value":2750},{"type":46,"tag":73,"props":3787,"children":3788},{"style":80},[3789],{"type":51,"value":3425},{"type":46,"tag":73,"props":3791,"children":3792},{"style":92},[3793],{"type":51,"value":2153},{"type":46,"tag":73,"props":3795,"children":3796},{"style":80},[3797],{"type":51,"value":814},{"type":46,"tag":73,"props":3799,"children":3800},{"class":75,"line":319},[3801,3806,3811,3815,3819,3823,3828,3832,3836,3840,3844,3849,3853],{"type":46,"tag":73,"props":3802,"children":3803},{"style":92},[3804],{"type":51,"value":3805},"      const",{"type":46,"tag":73,"props":3807,"children":3808},{"style":122},[3809],{"type":51,"value":3810}," rpc",{"type":46,"tag":73,"props":3812,"children":3813},{"style":80},[3814],{"type":51,"value":2469},{"type":46,"tag":73,"props":3816,"children":3817},{"style":133},[3818],{"type":51,"value":3595},{"type":46,"tag":73,"props":3820,"children":3821},{"style":80},[3822],{"type":51,"value":83},{"type":46,"tag":73,"props":3824,"children":3825},{"style":1753},[3826],{"type":51,"value":3827},"ClientFunctions",{"type":46,"tag":73,"props":3829,"children":3830},{"style":80},[3831],{"type":51,"value":2133},{"type":46,"tag":73,"props":3833,"children":3834},{"style":1753},[3835],{"type":51,"value":3404},{"type":46,"tag":73,"props":3837,"children":3838},{"style":80},[3839],{"type":51,"value":2716},{"type":46,"tag":73,"props":3841,"children":3842},{"style":86},[3843],{"type":51,"value":283},{"type":46,"tag":73,"props":3845,"children":3846},{"style":122},[3847],{"type":51,"value":3848},"RPC_NAMESPACE",{"type":46,"tag":73,"props":3850,"children":3851},{"style":80},[3852],{"type":51,"value":2133},{"type":46,"tag":73,"props":3854,"children":3855},{"style":80},[3856],{"type":51,"value":814},{"type":46,"tag":73,"props":3858,"children":3859},{"class":75,"line":328},[3860],{"type":46,"tag":73,"props":3861,"children":3862},{"style":107},[3863],{"type":51,"value":3864},"        // register server RPC functions\n",{"type":46,"tag":73,"props":3866,"children":3867},{"class":75,"line":337},[3868,3873,3877],{"type":46,"tag":73,"props":3869,"children":3870},{"style":86},[3871],{"type":51,"value":3872},"        getMyModuleOptions",{"type":46,"tag":73,"props":3874,"children":3875},{"style":80},[3876],{"type":51,"value":2765},{"type":46,"tag":73,"props":3878,"children":3879},{"style":80},[3880],{"type":51,"value":814},{"type":46,"tag":73,"props":3882,"children":3883},{"class":75,"line":355},[3884,3889],{"type":46,"tag":73,"props":3885,"children":3886},{"style":211},[3887],{"type":51,"value":3888},"          return",{"type":46,"tag":73,"props":3890,"children":3891},{"style":122},[3892],{"type":51,"value":3893}," options\n",{"type":46,"tag":73,"props":3895,"children":3896},{"class":75,"line":2073},[3897],{"type":46,"tag":73,"props":3898,"children":3899},{"style":80},[3900],{"type":51,"value":3274},{"type":46,"tag":73,"props":3902,"children":3903},{"class":75,"line":2999},[3904,3909],{"type":46,"tag":73,"props":3905,"children":3906},{"style":80},[3907],{"type":51,"value":3908},"      }",{"type":46,"tag":73,"props":3910,"children":3911},{"style":86},[3912],{"type":51,"value":900},{"type":46,"tag":73,"props":3914,"children":3915},{"class":75,"line":3028},[3916],{"type":46,"tag":73,"props":3917,"children":3918},{"emptyLinePlaceholder":170},[3919],{"type":51,"value":173},{"type":46,"tag":73,"props":3921,"children":3922},{"class":75,"line":3037},[3923],{"type":46,"tag":73,"props":3924,"children":3925},{"style":107},[3926],{"type":51,"value":3927},"      // call client RPC functions\n",{"type":46,"tag":73,"props":3929,"children":3930},{"class":75,"line":3050},[3931],{"type":46,"tag":73,"props":3932,"children":3933},{"style":107},[3934],{"type":51,"value":3935},"      // since it might have multiple clients connected, we use `broadcast` to call all of them\n",{"type":46,"tag":73,"props":3937,"children":3938},{"class":75,"line":3079},[3939,3944,3948,3952,3957,3961,3966,3970,3974,3979,3983],{"type":46,"tag":73,"props":3940,"children":3941},{"style":211},[3942],{"type":51,"value":3943},"      await",{"type":46,"tag":73,"props":3945,"children":3946},{"style":122},[3947],{"type":51,"value":3810},{"type":46,"tag":73,"props":3949,"children":3950},{"style":80},[3951],{"type":51,"value":264},{"type":46,"tag":73,"props":3953,"children":3954},{"style":122},[3955],{"type":51,"value":3956},"broadcast",{"type":46,"tag":73,"props":3958,"children":3959},{"style":80},[3960],{"type":51,"value":264},{"type":46,"tag":73,"props":3962,"children":3963},{"style":133},[3964],{"type":51,"value":3965},"showNotification",{"type":46,"tag":73,"props":3967,"children":3968},{"style":86},[3969],{"type":51,"value":283},{"type":46,"tag":73,"props":3971,"children":3972},{"style":80},[3973],{"type":51,"value":288},{"type":46,"tag":73,"props":3975,"children":3976},{"style":291},[3977],{"type":51,"value":3978},"Hello from My Module!",{"type":46,"tag":73,"props":3980,"children":3981},{"style":80},[3982],{"type":51,"value":288},{"type":46,"tag":73,"props":3984,"children":3985},{"style":86},[3986],{"type":51,"value":900},{"type":46,"tag":73,"props":3988,"children":3989},{"class":75,"line":3109},[3990,3995],{"type":46,"tag":73,"props":3991,"children":3992},{"style":80},[3993],{"type":51,"value":3994},"    }",{"type":46,"tag":73,"props":3996,"children":3997},{"style":86},[3998],{"type":51,"value":900},{"type":46,"tag":73,"props":4000,"children":4001},{"class":75,"line":3130},[4002],{"type":46,"tag":73,"props":4003,"children":4004},{"style":80},[4005],{"type":51,"value":887},{"type":46,"tag":73,"props":4007,"children":4008},{"class":75,"line":3160},[4009,4013],{"type":46,"tag":73,"props":4010,"children":4011},{"style":80},[4012],{"type":51,"value":895},{"type":46,"tag":73,"props":4014,"children":4015},{"style":122},[4016],{"type":51,"value":900},{"type":46,"tag":47,"props":4018,"children":4019},{},[4020],{"type":51,"value":4021},"And on the embedded iframe client side, you can do:",{"type":46,"tag":63,"props":4023,"children":4025},{"className":376,"code":4024,"language":378,"meta":40,"style":40},"import type { ClientFunctions, ServerFunctions } from './rpc-types'\nimport { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'\n\nconst RPC_NAMESPACE = 'my-module-rpc'\n\nonDevtoolsClientConnected(async (client) => {\n  const rpc = client.devtools.extendClientRpc(RPC_NAMESPACE, {\n    showNotification(message) {\n      console.log(message)\n    },\n  })\n\n  // call server RPC functions\n  const options = await rpc.getMyModuleOptions()\n})\n",[4026],{"type":46,"tag":54,"props":4027,"children":4028},{"__ignoreMap":40},[4029,4076,4113,4120,4147,4154,4191,4245,4269,4298,4305,4316,4323,4331,4369],{"type":46,"tag":73,"props":4030,"children":4031},{"class":75,"line":76},[4032,4036,4040,4044,4048,4052,4056,4060,4064,4068,4072],{"type":46,"tag":73,"props":4033,"children":4034},{"style":211},[4035],{"type":51,"value":390},{"type":46,"tag":73,"props":4037,"children":4038},{"style":211},[4039],{"type":51,"value":3542},{"type":46,"tag":73,"props":4041,"children":4042},{"style":80},[4043],{"type":51,"value":395},{"type":46,"tag":73,"props":4045,"children":4046},{"style":122},[4047],{"type":51,"value":3464},{"type":46,"tag":73,"props":4049,"children":4050},{"style":80},[4051],{"type":51,"value":2133},{"type":46,"tag":73,"props":4053,"children":4054},{"style":122},[4055],{"type":51,"value":3404},{"type":46,"tag":73,"props":4057,"children":4058},{"style":80},[4059],{"type":51,"value":404},{"type":46,"tag":73,"props":4061,"children":4062},{"style":211},[4063],{"type":51,"value":409},{"type":46,"tag":73,"props":4065,"children":4066},{"style":80},[4067],{"type":51,"value":414},{"type":46,"tag":73,"props":4069,"children":4070},{"style":291},[4071],{"type":51,"value":3575},{"type":46,"tag":73,"props":4073,"children":4074},{"style":80},[4075],{"type":51,"value":424},{"type":46,"tag":73,"props":4077,"children":4078},{"class":75,"line":103},[4079,4083,4087,4092,4096,4100,4104,4109],{"type":46,"tag":73,"props":4080,"children":4081},{"style":211},[4082],{"type":51,"value":390},{"type":46,"tag":73,"props":4084,"children":4085},{"style":80},[4086],{"type":51,"value":395},{"type":46,"tag":73,"props":4088,"children":4089},{"style":122},[4090],{"type":51,"value":4091}," onDevtoolsClientConnected",{"type":46,"tag":73,"props":4093,"children":4094},{"style":80},[4095],{"type":51,"value":404},{"type":46,"tag":73,"props":4097,"children":4098},{"style":211},[4099],{"type":51,"value":409},{"type":46,"tag":73,"props":4101,"children":4102},{"style":80},[4103],{"type":51,"value":414},{"type":46,"tag":73,"props":4105,"children":4106},{"style":291},[4107],{"type":51,"value":4108},"@nuxt/devtools-kit/iframe-client",{"type":46,"tag":73,"props":4110,"children":4111},{"style":80},[4112],{"type":51,"value":424},{"type":46,"tag":73,"props":4114,"children":4115},{"class":75,"line":113},[4116],{"type":46,"tag":73,"props":4117,"children":4118},{"emptyLinePlaceholder":170},[4119],{"type":51,"value":173},{"type":46,"tag":73,"props":4121,"children":4122},{"class":75,"line":149},[4123,4127,4131,4135,4139,4143],{"type":46,"tag":73,"props":4124,"children":4125},{"style":92},[4126],{"type":51,"value":119},{"type":46,"tag":73,"props":4128,"children":4129},{"style":122},[4130],{"type":51,"value":3680},{"type":46,"tag":73,"props":4132,"children":4133},{"style":80},[4134],{"type":51,"value":130},{"type":46,"tag":73,"props":4136,"children":4137},{"style":80},[4138],{"type":51,"value":414},{"type":46,"tag":73,"props":4140,"children":4141},{"style":291},[4142],{"type":51,"value":3693},{"type":46,"tag":73,"props":4144,"children":4145},{"style":80},[4146],{"type":51,"value":424},{"type":46,"tag":73,"props":4148,"children":4149},{"class":75,"line":166},[4150],{"type":46,"tag":73,"props":4151,"children":4152},{"emptyLinePlaceholder":170},[4153],{"type":51,"value":173},{"type":46,"tag":73,"props":4155,"children":4156},{"class":75,"line":176},[4157,4162,4166,4170,4174,4179,4183,4187],{"type":46,"tag":73,"props":4158,"children":4159},{"style":133},[4160],{"type":51,"value":4161},"onDevtoolsClientConnected",{"type":46,"tag":73,"props":4163,"children":4164},{"style":122},[4165],{"type":51,"value":283},{"type":46,"tag":73,"props":4167,"children":4168},{"style":92},[4169],{"type":51,"value":2750},{"type":46,"tag":73,"props":4171,"children":4172},{"style":80},[4173],{"type":51,"value":2138},{"type":46,"tag":73,"props":4175,"children":4176},{"style":2141},[4177],{"type":51,"value":4178},"client",{"type":46,"tag":73,"props":4180,"children":4181},{"style":80},[4182],{"type":51,"value":303},{"type":46,"tag":73,"props":4184,"children":4185},{"style":92},[4186],{"type":51,"value":2153},{"type":46,"tag":73,"props":4188,"children":4189},{"style":80},[4190],{"type":51,"value":814},{"type":46,"tag":73,"props":4192,"children":4193},{"class":75,"line":193},[4194,4199,4203,4207,4212,4216,4220,4224,4229,4233,4237,4241],{"type":46,"tag":73,"props":4195,"children":4196},{"style":92},[4197],{"type":51,"value":4198},"  const",{"type":46,"tag":73,"props":4200,"children":4201},{"style":122},[4202],{"type":51,"value":3810},{"type":46,"tag":73,"props":4204,"children":4205},{"style":80},[4206],{"type":51,"value":2469},{"type":46,"tag":73,"props":4208,"children":4209},{"style":122},[4210],{"type":51,"value":4211}," client",{"type":46,"tag":73,"props":4213,"children":4214},{"style":80},[4215],{"type":51,"value":264},{"type":46,"tag":73,"props":4217,"children":4218},{"style":122},[4219],{"type":51,"value":269},{"type":46,"tag":73,"props":4221,"children":4222},{"style":80},[4223],{"type":51,"value":264},{"type":46,"tag":73,"props":4225,"children":4226},{"style":133},[4227],{"type":51,"value":4228},"extendClientRpc",{"type":46,"tag":73,"props":4230,"children":4231},{"style":86},[4232],{"type":51,"value":283},{"type":46,"tag":73,"props":4234,"children":4235},{"style":122},[4236],{"type":51,"value":3848},{"type":46,"tag":73,"props":4238,"children":4239},{"style":80},[4240],{"type":51,"value":2133},{"type":46,"tag":73,"props":4242,"children":4243},{"style":80},[4244],{"type":51,"value":814},{"type":46,"tag":73,"props":4246,"children":4247},{"class":75,"line":207},[4248,4253,4257,4261,4265],{"type":46,"tag":73,"props":4249,"children":4250},{"style":86},[4251],{"type":51,"value":4252},"    showNotification",{"type":46,"tag":73,"props":4254,"children":4255},{"style":80},[4256],{"type":51,"value":283},{"type":46,"tag":73,"props":4258,"children":4259},{"style":2141},[4260],{"type":51,"value":3489},{"type":46,"tag":73,"props":4262,"children":4263},{"style":80},[4264],{"type":51,"value":303},{"type":46,"tag":73,"props":4266,"children":4267},{"style":80},[4268],{"type":51,"value":814},{"type":46,"tag":73,"props":4270,"children":4271},{"class":75,"line":236},[4272,4277,4281,4286,4290,4294],{"type":46,"tag":73,"props":4273,"children":4274},{"style":122},[4275],{"type":51,"value":4276},"      console",{"type":46,"tag":73,"props":4278,"children":4279},{"style":80},[4280],{"type":51,"value":264},{"type":46,"tag":73,"props":4282,"children":4283},{"style":133},[4284],{"type":51,"value":4285},"log",{"type":46,"tag":73,"props":4287,"children":4288},{"style":86},[4289],{"type":51,"value":283},{"type":46,"tag":73,"props":4291,"children":4292},{"style":122},[4293],{"type":51,"value":3489},{"type":46,"tag":73,"props":4295,"children":4296},{"style":86},[4297],{"type":51,"value":900},{"type":46,"tag":73,"props":4299,"children":4300},{"class":75,"line":310},[4301],{"type":46,"tag":73,"props":4302,"children":4303},{"style":80},[4304],{"type":51,"value":2378},{"type":46,"tag":73,"props":4306,"children":4307},{"class":75,"line":319},[4308,4312],{"type":46,"tag":73,"props":4309,"children":4310},{"style":80},[4311],{"type":51,"value":2386},{"type":46,"tag":73,"props":4313,"children":4314},{"style":86},[4315],{"type":51,"value":900},{"type":46,"tag":73,"props":4317,"children":4318},{"class":75,"line":328},[4319],{"type":46,"tag":73,"props":4320,"children":4321},{"emptyLinePlaceholder":170},[4322],{"type":51,"value":173},{"type":46,"tag":73,"props":4324,"children":4325},{"class":75,"line":337},[4326],{"type":46,"tag":73,"props":4327,"children":4328},{"style":107},[4329],{"type":51,"value":4330},"  // call server RPC functions\n",{"type":46,"tag":73,"props":4332,"children":4333},{"class":75,"line":355},[4334,4338,4343,4347,4352,4356,4360,4365],{"type":46,"tag":73,"props":4335,"children":4336},{"style":92},[4337],{"type":51,"value":4198},{"type":46,"tag":73,"props":4339,"children":4340},{"style":122},[4341],{"type":51,"value":4342}," options",{"type":46,"tag":73,"props":4344,"children":4345},{"style":80},[4346],{"type":51,"value":2469},{"type":46,"tag":73,"props":4348,"children":4349},{"style":211},[4350],{"type":51,"value":4351}," await",{"type":46,"tag":73,"props":4353,"children":4354},{"style":122},[4355],{"type":51,"value":3810},{"type":46,"tag":73,"props":4357,"children":4358},{"style":80},[4359],{"type":51,"value":264},{"type":46,"tag":73,"props":4361,"children":4362},{"style":133},[4363],{"type":51,"value":4364},"getMyModuleOptions",{"type":46,"tag":73,"props":4366,"children":4367},{"style":86},[4368],{"type":51,"value":3228},{"type":46,"tag":73,"props":4370,"children":4371},{"class":75,"line":2073},[4372,4376],{"type":46,"tag":73,"props":4373,"children":4374},{"style":80},[4375],{"type":51,"value":895},{"type":46,"tag":73,"props":4377,"children":4378},{"style":122},[4379],{"type":51,"value":900},{"type":46,"tag":465,"props":4381,"children":4383},{"id":4382},"trying-local-changes",[4384],{"type":51,"value":4385},"Trying Local Changes",{"type":46,"tag":47,"props":4387,"children":4388},{},[4389],{"type":51,"value":4390},"You can clone Nuxt DevTools repo and try your changes locally.",{"type":46,"tag":47,"props":4392,"children":4393},{},[4394,4395,4400],{"type":51,"value":3342},{"type":46,"tag":455,"props":4396,"children":4398},{"href":4397},"/development/contributing#trying-local-changes",[4399],{"type":51,"value":4385},{"type":51,"value":264},{"type":46,"tag":465,"props":4402,"children":4404},{"id":4403},"examples",[4405],{"type":51,"value":4406},"Examples",{"type":46,"tag":47,"props":4408,"children":4409},{},[4410],{"type":51,"value":4411},"Here are a few examples of how to integrate Nuxt DevTools in modules:",{"type":46,"tag":4413,"props":4414,"children":4415},"ul",{},[4416,4427,4437,4447,4457,4467],{"type":46,"tag":4417,"props":4418,"children":4419},"li",{},[4420],{"type":46,"tag":455,"props":4421,"children":4424},{"href":4422,"rel":4423},"https://github.com/nuxt/devtools/blob/a8d372bd10d34d8c2fba2613558df2b9b99d6ff9/packages/devtools/src/integrations/vscode.ts#L140-L172",[459],[4425],{"type":51,"value":4426},"Built-in VS Code integration with lazy initialize",{"type":46,"tag":4417,"props":4428,"children":4429},{},[4430],{"type":46,"tag":455,"props":4431,"children":4434},{"href":4432,"rel":4433},"https://github.com/vueuse/vueuse/blob/ce28cef154489c73abe308104bef8568594a9bcd/packages/nuxt/index.ts#L89-L99",[459],[4435],{"type":51,"value":4436},"VueUse adds a docs tab",{"type":46,"tag":4417,"props":4438,"children":4439},{},[4440],{"type":46,"tag":455,"props":4441,"children":4444},{"href":4442,"rel":4443},"https://github.com/unocss/unocss/blob/25021a751494e99e85cfd82cca3855cdf78f6a12/packages/nuxt/src/index.ts#L81-L94",[459],[4445],{"type":51,"value":4446},"UnoCSS Inspector",{"type":46,"tag":4417,"props":4448,"children":4449},{},[4450],{"type":46,"tag":455,"props":4451,"children":4454},{"href":4452,"rel":4453},"https://github.com/nuxt/test-utils/blob/fd024f45f752c2faa4c9e0cc1fc1f8b3eae59553/src/module.ts#L150-L192",[459],[4455],{"type":51,"value":4456},"Nuxt Test Utils",{"type":46,"tag":4417,"props":4458,"children":4459},{},[4460],{"type":46,"tag":455,"props":4461,"children":4464},{"href":4462,"rel":4463},"https://github.com/nuxt-modules/og-image/blob/551b5474b44b8ff3190643e861c0b453813683b0/src/build/devtools.ts#L65-L80",[459],[4465],{"type":51,"value":4466},"Nuxt OG Image Playground",{"type":46,"tag":4417,"props":4468,"children":4469},{},[4470],{"type":46,"tag":455,"props":4471,"children":4474},{"href":4472,"rel":4473},"https://github.com/arashsheyda/nuxt-mongoose/blob/89d50bd977de0f4edfdbe3ed150d0dca4d040709/src/devtools.ts#L38-L48",[459],[4475],{"type":51,"value":4476},"Nuxt Mongoose",{"type":46,"tag":431,"props":4478,"children":4479},{},[4480],{"type":51,"value":435},{"title":40,"searchDepth":103,"depth":103,"links":4482},[4483,4484,4487,4488,4489,4490,4491],{"id":1730,"depth":103,"text":1733},{"id":1789,"depth":103,"text":1792,"children":4485},[4486],{"id":2404,"depth":113,"text":2407},{"id":2644,"depth":103,"text":2647},{"id":3334,"depth":103,"text":3337},{"id":3352,"depth":103,"text":3355},{"id":4382,"depth":103,"text":4385},{"id":4403,"depth":103,"text":4406},"content:2.module:0.guide.md","2.module/0.guide.md","2.module/0.guide",1784868587466]