[{"data":1,"prerenderedAt":3419},["Reactive",2],{"navigation":3,"docs-/guide/composables":37,"docs-/guide/composables-surround":395},[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":390,"_id":391,"_source":392,"_file":393,"_extension":394},"guide",false,"","Open or control Nuxt DevTools with the useNuxtDevtools composable.",{"type":43,"children":44,"toc":388},"root",[45,61,320,325,377,382],{"type":46,"tag":47,"props":48,"children":49},"element","p",{},[50,53,59],{"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":56},"code",{"className":40},[57],{"type":51,"value":58},"useNuxtDevtools",{"type":51,"value":60}," is registered with auto-import.",{"type":46,"tag":62,"props":63,"children":67},"pre",{"className":64,"code":65,"language":66,"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",[68],{"type":46,"tag":54,"props":69,"children":70},{"__ignoreMap":40},[71,100,110,146,163,173,190,204,233,259,268,277,286,304],{"type":46,"tag":72,"props":73,"children":76},"span",{"class":74,"line":75},"line",1,[77,83,89,95],{"type":46,"tag":72,"props":78,"children":80},{"style":79},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[81],{"type":51,"value":82},"\u003C",{"type":46,"tag":72,"props":84,"children":86},{"style":85},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[87],{"type":51,"value":88},"script",{"type":46,"tag":72,"props":90,"children":92},{"style":91},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[93],{"type":51,"value":94}," setup",{"type":46,"tag":72,"props":96,"children":97},{"style":79},[98],{"type":51,"value":99},">\n",{"type":46,"tag":72,"props":101,"children":103},{"class":74,"line":102},2,[104],{"type":46,"tag":72,"props":105,"children":107},{"style":106},"--shiki-light:#90A4AE;--shiki-default:#546E7A;--shiki-dark:#676E95;--shiki-light-font-style:italic;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[108],{"type":51,"value":109},"// Returns undefined in production mode or when the DevTools are not enabled\n",{"type":46,"tag":72,"props":111,"children":113},{"class":74,"line":112},3,[114,119,125,130,136,141],{"type":46,"tag":72,"props":115,"children":116},{"style":91},[117],{"type":51,"value":118},"const",{"type":46,"tag":72,"props":120,"children":122},{"style":121},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[123],{"type":51,"value":124}," devtoolsClient ",{"type":46,"tag":72,"props":126,"children":127},{"style":79},[128],{"type":51,"value":129},"=",{"type":46,"tag":72,"props":131,"children":133},{"style":132},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[134],{"type":51,"value":135}," useNuxtDevTools",{"type":46,"tag":72,"props":137,"children":138},{"style":121},[139],{"type":51,"value":140},"() ",{"type":46,"tag":72,"props":142,"children":143},{"style":106},[144],{"type":51,"value":145},"// NuxtDevToolsHostClient | undefined\n",{"type":46,"tag":72,"props":147,"children":149},{"class":74,"line":148},4,[150,155,159],{"type":46,"tag":72,"props":151,"children":152},{"style":79},[153],{"type":51,"value":154},"\u003C/",{"type":46,"tag":72,"props":156,"children":157},{"style":85},[158],{"type":51,"value":88},{"type":46,"tag":72,"props":160,"children":161},{"style":79},[162],{"type":51,"value":99},{"type":46,"tag":72,"props":164,"children":166},{"class":74,"line":165},5,[167],{"type":46,"tag":72,"props":168,"children":170},{"emptyLinePlaceholder":169},true,[171],{"type":51,"value":172},"\n",{"type":46,"tag":72,"props":174,"children":176},{"class":74,"line":175},6,[177,181,186],{"type":46,"tag":72,"props":178,"children":179},{"style":79},[180],{"type":51,"value":82},{"type":46,"tag":72,"props":182,"children":183},{"style":85},[184],{"type":51,"value":185},"template",{"type":46,"tag":72,"props":187,"children":188},{"style":79},[189],{"type":51,"value":99},{"type":46,"tag":72,"props":191,"children":193},{"class":74,"line":192},7,[194,199],{"type":46,"tag":72,"props":195,"children":196},{"style":79},[197],{"type":51,"value":198},"  \u003C",{"type":46,"tag":72,"props":200,"children":201},{"style":85},[202],{"type":51,"value":203},"button\n",{"type":46,"tag":72,"props":205,"children":207},{"class":74,"line":206},8,[208,213,217,222,228],{"type":46,"tag":72,"props":209,"children":210},{"style":91},[211],{"type":51,"value":212},"    v-if",{"type":46,"tag":72,"props":214,"children":215},{"style":79},[216],{"type":51,"value":129},{"type":46,"tag":72,"props":218,"children":219},{"style":79},[220],{"type":51,"value":221},"\"",{"type":46,"tag":72,"props":223,"children":225},{"style":224},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[226],{"type":51,"value":227},"devtoolsClient",{"type":46,"tag":72,"props":229,"children":230},{"style":79},[231],{"type":51,"value":232},"\"\n",{"type":46,"tag":72,"props":234,"children":236},{"class":74,"line":235},9,[237,242,246,250,255],{"type":46,"tag":72,"props":238,"children":239},{"style":91},[240],{"type":51,"value":241},"    @click",{"type":46,"tag":72,"props":243,"children":244},{"style":79},[245],{"type":51,"value":129},{"type":46,"tag":72,"props":247,"children":248},{"style":79},[249],{"type":51,"value":221},{"type":46,"tag":72,"props":251,"children":252},{"style":224},[253],{"type":51,"value":254},"devtoolsClient.devtools.navigate('/modules/components')",{"type":46,"tag":72,"props":256,"children":257},{"style":79},[258],{"type":51,"value":232},{"type":46,"tag":72,"props":260,"children":262},{"class":74,"line":261},10,[263],{"type":46,"tag":72,"props":264,"children":265},{"style":79},[266],{"type":51,"value":267},"  >\n",{"type":46,"tag":72,"props":269,"children":271},{"class":74,"line":270},11,[272],{"type":46,"tag":72,"props":273,"children":274},{"style":106},[275],{"type":51,"value":276},"    \u003C!-- Open the DevTools and navigate to the components tab -->\n",{"type":46,"tag":72,"props":278,"children":280},{"class":74,"line":279},12,[281],{"type":46,"tag":72,"props":282,"children":283},{"style":121},[284],{"type":51,"value":285},"    Open DevTools\n",{"type":46,"tag":72,"props":287,"children":289},{"class":74,"line":288},13,[290,295,300],{"type":46,"tag":72,"props":291,"children":292},{"style":79},[293],{"type":51,"value":294},"  \u003C/",{"type":46,"tag":72,"props":296,"children":297},{"style":85},[298],{"type":51,"value":299},"button",{"type":46,"tag":72,"props":301,"children":302},{"style":79},[303],{"type":51,"value":99},{"type":46,"tag":72,"props":305,"children":307},{"class":74,"line":306},14,[308,312,316],{"type":46,"tag":72,"props":309,"children":310},{"style":79},[311],{"type":51,"value":154},{"type":46,"tag":72,"props":313,"children":314},{"style":85},[315],{"type":51,"value":185},{"type":46,"tag":72,"props":317,"children":318},{"style":79},[319],{"type":51,"value":99},{"type":46,"tag":47,"props":321,"children":322},{},[323],{"type":51,"value":324},"When you have auto-import disabled, you can also import it explicitly:",{"type":46,"tag":62,"props":326,"children":330},{"className":327,"code":328,"language":329,"meta":40,"style":40},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useNuxtDevTools } from '#imports'\n","ts",[331],{"type":46,"tag":54,"props":332,"children":333},{"__ignoreMap":40},[334],{"type":46,"tag":72,"props":335,"children":336},{"class":74,"line":75},[337,343,348,352,357,362,367,372],{"type":46,"tag":72,"props":338,"children":340},{"style":339},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF;--shiki-light-font-style:italic;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[341],{"type":51,"value":342},"import",{"type":46,"tag":72,"props":344,"children":345},{"style":79},[346],{"type":51,"value":347}," {",{"type":46,"tag":72,"props":349,"children":350},{"style":121},[351],{"type":51,"value":135},{"type":46,"tag":72,"props":353,"children":354},{"style":79},[355],{"type":51,"value":356}," }",{"type":46,"tag":72,"props":358,"children":359},{"style":339},[360],{"type":51,"value":361}," from",{"type":46,"tag":72,"props":363,"children":364},{"style":79},[365],{"type":51,"value":366}," '",{"type":46,"tag":72,"props":368,"children":369},{"style":224},[370],{"type":51,"value":371},"#imports",{"type":46,"tag":72,"props":373,"children":374},{"style":79},[375],{"type":51,"value":376},"'\n",{"type":46,"tag":47,"props":378,"children":379},{},[380],{"type":51,"value":381},"Checkout it's type definition for more available methods.",{"type":46,"tag":383,"props":384,"children":385},"style",{},[386],{"type":51,"value":387},"html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":40,"searchDepth":102,"depth":102,"links":389},[],"markdown","content:1.guide:2.composables.md","content","1.guide/2.composables.md","md",[396,875],{"_path":13,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":12,"description":397,"body":398,"_type":390,"_id":873,"_source":392,"_file":874,"_extension":394},"Discover all the features the Nuxt Devtools can offer.",{"type":43,"children":399,"toc":847},[400,416,423,428,434,440,445,449,455,460,464,469,473,478,482,488,493,497,503,508,512,517,523,528,533,539,544,550,555,561,566,572,577,583,588,594,599,605,610,616,621,633,639,644,656,668,674,679,683,689,694,698,704,721,725,731,736,742,784,791,810,815,832,837],{"type":46,"tag":47,"props":401,"children":402},{},[403,405,414],{"type":51,"value":404},"You can learn more in our ",{"type":46,"tag":406,"props":407,"children":411},"a",{"href":408,"rel":409},"https://github.com/nuxt/devtools/discussions/31",[410],"nofollow",[412],{"type":51,"value":413},"roadmap",{"type":51,"value":415},".",{"type":46,"tag":417,"props":418,"children":420},"h2",{"id":419},"overview",[421],{"type":51,"value":422},"Overview",{"type":46,"tag":47,"props":424,"children":425},{},[426],{"type":51,"value":427},"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":429,"props":430,"children":433},"img",{"width":431,"src":432},1284,"https://user-images.githubusercontent.com/11247099/217670797-12c33a03-ca4f-490d-a18a-ab9008b89c15.png",[],{"type":46,"tag":417,"props":435,"children":437},{"id":436},"pages",[438],{"type":51,"value":439},"Pages",{"type":46,"tag":47,"props":441,"children":442},{},[443],{"type":51,"value":444},"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":429,"props":446,"children":448},{"width":431,"src":447},"https://user-images.githubusercontent.com/11247099/217670804-e48482af-de37-47be-88d8-d9515e796d5f.png",[],{"type":46,"tag":417,"props":450,"children":452},{"id":451},"components",[453],{"type":51,"value":454},"Components",{"type":46,"tag":47,"props":456,"children":457},{},[458],{"type":51,"value":459},"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":429,"props":461,"children":463},{"width":431,"src":462},"https://user-images.githubusercontent.com/11247099/217670805-726eafd1-5364-4b11-9c2b-9253d068e7e3.png",[],{"type":46,"tag":47,"props":465,"children":466},{},[467],{"type":51,"value":468},"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":429,"props":470,"children":472},{"width":431,"src":471},"https://user-images.githubusercontent.com/11247099/217670806-fb39aeff-3881-44e5-b9c8-6c757f5925fc.png",[],{"type":46,"tag":47,"props":474,"children":475},{},[476],{"type":51,"value":477},"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":429,"props":479,"children":481},{"width":431,"src":480},"https://user-images.githubusercontent.com/11247099/217670809-7dcb4198-5a74-4818-95b1-b62ea6c04a6c.png",[],{"type":46,"tag":417,"props":483,"children":485},{"id":484},"imports",[486],{"type":51,"value":487},"Imports",{"type":46,"tag":47,"props":489,"children":490},{},[491],{"type":51,"value":492},"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":429,"props":494,"children":496},{"width":431,"src":495},"https://user-images.githubusercontent.com/11247099/217670811-fa7c7249-5a21-48c9-abe8-ca02b2518a3a.png",[],{"type":46,"tag":417,"props":498,"children":500},{"id":499},"modules",[501],{"type":51,"value":502},"Modules",{"type":46,"tag":47,"props":504,"children":505},{},[506],{"type":51,"value":507},"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":429,"props":509,"children":511},{"width":431,"src":510},"https://user-images.githubusercontent.com/11247099/217670813-ce3da4b6-269c-430e-abb5-a2263ffe4938.png",[],{"type":46,"tag":47,"props":513,"children":514},{},[515],{"type":51,"value":516},"You can install or even remove any Nuxt module with one-click!",{"type":46,"tag":417,"props":518,"children":520},{"id":519},"assets",[521],{"type":51,"value":522},"Assets",{"type":46,"tag":47,"props":524,"children":525},{},[526],{"type":51,"value":527},"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":529,"children":530},{},[531],{"type":51,"value":532},"You can also upload files with Drag & Drop ability",{"type":46,"tag":417,"props":534,"children":536},{"id":535},"terminals",[537],{"type":51,"value":538},"Terminals",{"type":46,"tag":47,"props":540,"children":541},{},[542],{"type":51,"value":543},"Terminals tab shows the active terminal processes.",{"type":46,"tag":417,"props":545,"children":547},{"id":546},"runtime-config",[548],{"type":51,"value":549},"Runtime Config",{"type":46,"tag":47,"props":551,"children":552},{},[553],{"type":51,"value":554},"Runtime Config tab shows all the runtime config of your project, with the ability to edit them.",{"type":46,"tag":417,"props":556,"children":558},{"id":557},"payload",[559],{"type":51,"value":560},"Payload",{"type":46,"tag":47,"props":562,"children":563},{},[564],{"type":51,"value":565},"Payloads tab shows all the state and data payloads of your project.",{"type":46,"tag":417,"props":567,"children":569},{"id":568},"build-analyze",[570],{"type":51,"value":571},"Build Analyze",{"type":46,"tag":47,"props":573,"children":574},{},[575],{"type":51,"value":576},"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":417,"props":578,"children":580},{"id":579},"open-graph",[581],{"type":51,"value":582},"Open Graph",{"type":46,"tag":47,"props":584,"children":585},{},[586],{"type":51,"value":587},"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":417,"props":589,"children":591},{"id":590},"plugins",[592],{"type":51,"value":593},"Plugins",{"type":46,"tag":47,"props":595,"children":596},{},[597],{"type":51,"value":598},"Plugins tab shows all the plugins your project is using, with some information such as plugin's initialization time.",{"type":46,"tag":417,"props":600,"children":602},{"id":601},"server-routes",[603],{"type":51,"value":604},"Server Routes",{"type":46,"tag":47,"props":606,"children":607},{},[608],{"type":51,"value":609},"Server Routes tab shows all nitro routes in your project. It provides a playground to send and test your endpoints.",{"type":46,"tag":417,"props":611,"children":613},{"id":612},"storage",[614],{"type":51,"value":615},"Storage",{"type":46,"tag":47,"props":617,"children":618},{},[619],{"type":51,"value":620},"Storage tab shows all the nitro storage in your project. You can create, edit, and delete files.",{"type":46,"tag":47,"props":622,"children":623},{},[624,626],{"type":51,"value":625},"Learn more about ",{"type":46,"tag":406,"props":627,"children":630},{"href":628,"rel":629},"https://nitro.unjs.io/guide/storage",[410],[631],{"type":51,"value":632},"Nitro Storage",{"type":46,"tag":417,"props":634,"children":636},{"id":635},"vs-code-server",[637],{"type":51,"value":638},"VS Code Server",{"type":46,"tag":47,"props":640,"children":641},{},[642],{"type":51,"value":643},"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":645,"children":646},{},[647,649],{"type":51,"value":648},"To get started with VS Code Server, follow the installation instructions provided by ",{"type":46,"tag":406,"props":650,"children":653},{"href":651,"rel":652},"https://coder.com/docs/code-server/latest/install",[410],[654],{"type":51,"value":655},"Code Server Installation Guide",{"type":46,"tag":47,"props":657,"children":658},{},[659,661],{"type":51,"value":660},"For more information on the benefits and features of VS Code Server, refer to ",{"type":46,"tag":406,"props":662,"children":665},{"href":663,"rel":664},"https://code.visualstudio.com/blogs/2022/07/07/vscode-server",[410],[666],{"type":51,"value":667},"the official Visual Studio Code blog",{"type":46,"tag":417,"props":669,"children":671},{"id":670},"hooks",[672],{"type":51,"value":673},"Hooks",{"type":46,"tag":47,"props":675,"children":676},{},[677],{"type":51,"value":678},"Hooks tab can help you to monitor the time spent in each hook. It can be helpful to find performance bottlenecks.",{"type":46,"tag":429,"props":680,"children":682},{"width":431,"src":681},"https://user-images.githubusercontent.com/11247099/217670815-80ec0ec3-7df1-4a07-96fb-4161fb6562a7.png",[],{"type":46,"tag":417,"props":684,"children":686},{"id":685},"virtual-files",[687],{"type":51,"value":688},"Virtual Files",{"type":46,"tag":47,"props":690,"children":691},{},[692],{"type":51,"value":693},"Virtual Files tab shows the virtual files generated by Nuxt to support the conventions.",{"type":46,"tag":429,"props":695,"children":697},{"width":431,"src":696},"https://user-images.githubusercontent.com/11247099/217670817-abb0315a-6d92-4c5e-a4da-2327f22e0e8b.png",[],{"type":46,"tag":417,"props":699,"children":701},{"id":700},"inspect",[702],{"type":51,"value":703},"Inspect",{"type":46,"tag":47,"props":705,"children":706},{},[707,709,719],{"type":51,"value":708},"Inspect expose the ",{"type":46,"tag":406,"props":710,"children":713},{"href":711,"rel":712},"https://github.com/antfu/vite-plugin-inspect",[410],[714],{"type":46,"tag":54,"props":715,"children":716},{"className":40},[717],{"type":51,"value":718},"vite-plugin-inspect",{"type":51,"value":720}," integration, allowing you to inspect transformation steps of Vite.",{"type":46,"tag":429,"props":722,"children":724},{"width":431,"src":723},"https://user-images.githubusercontent.com/11247099/217670818-77f91135-7318-462e-9148-4ad504c82555.png",[],{"type":46,"tag":417,"props":726,"children":728},{"id":727},"settings",[729],{"type":51,"value":730},"Settings",{"type":46,"tag":47,"props":732,"children":733},{},[734],{"type":51,"value":735},"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":417,"props":737,"children":739},{"id":738},"nuxt-icon",[740],{"type":51,"value":741},"Nuxt Icon",{"type":46,"tag":47,"props":743,"children":744},{},[745,747,752,754,758,759,764,765,770,771,776,777,782],{"type":51,"value":746},"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":748,"children":749},{"className":40},[750],{"type":51,"value":751},"Toggle Theme",{"type":51,"value":753},", ",{"type":46,"tag":54,"props":755,"children":756},{"className":40},[757],{"type":51,"value":730},{"type":51,"value":753},{"type":46,"tag":54,"props":760,"children":761},{"className":40},[762],{"type":51,"value":763},"Split Screen",{"type":51,"value":753},{"type":46,"tag":54,"props":766,"children":767},{"className":40},[768],{"type":51,"value":769},"Popup",{"type":51,"value":753},{"type":46,"tag":54,"props":772,"children":773},{"className":40},[774],{"type":51,"value":775},"Refresh Data",{"type":51,"value":753},{"type":46,"tag":54,"props":778,"children":779},{"className":40},[780],{"type":51,"value":781},"Refresh Page",{"type":51,"value":783},". you can simply click on it and see the them yourself.",{"type":46,"tag":785,"props":786,"children":788},"h3",{"id":787},"command-palette",[789],{"type":51,"value":790},"Command Palette",{"type":46,"tag":47,"props":792,"children":793},{},[794,796,801,803,808],{"type":51,"value":795},"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":797,"children":798},{"className":40},[799],{"type":51,"value":800},"Ctrl+Shift+K",{"type":51,"value":802}," or ",{"type":46,"tag":54,"props":804,"children":805},{"className":40},[806],{"type":51,"value":807},"Cmd+Shift+K",{"type":51,"value":809}," shortcut.",{"type":46,"tag":785,"props":811,"children":813},{"id":812},"split-screen",[814],{"type":51,"value":763},{"type":46,"tag":47,"props":816,"children":817},{},[818,820,824,826,830],{"type":51,"value":819},"Split Screen is a useful feature to use multiple tabs at the same time. You can open it from ",{"type":46,"tag":54,"props":821,"children":822},{"className":40},[823],{"type":51,"value":790},{"type":51,"value":825}," or by clicking the ",{"type":46,"tag":54,"props":827,"children":828},{"className":40},[829],{"type":51,"value":741},{"type":51,"value":831}," in the top left corner of the DevTools and activate it from there.",{"type":46,"tag":785,"props":833,"children":835},{"id":834},"popup",[836],{"type":51,"value":769},{"type":46,"tag":47,"props":838,"children":839},{},[840,842,846],{"type":51,"value":841},"Popup is very useful for those who has a second screen, you can open it by clicking the ",{"type":46,"tag":54,"props":843,"children":844},{"className":40},[845],{"type":51,"value":741},{"type":51,"value":831},{"title":40,"searchDepth":102,"depth":102,"links":848},[849,850,851,852,853,854,855,856,857,858,859,860,861,862,863,864,865,866,867,868],{"id":419,"depth":102,"text":422},{"id":436,"depth":102,"text":439},{"id":451,"depth":102,"text":454},{"id":484,"depth":102,"text":487},{"id":499,"depth":102,"text":502},{"id":519,"depth":102,"text":522},{"id":535,"depth":102,"text":538},{"id":546,"depth":102,"text":549},{"id":557,"depth":102,"text":560},{"id":568,"depth":102,"text":571},{"id":579,"depth":102,"text":582},{"id":590,"depth":102,"text":593},{"id":601,"depth":102,"text":604},{"id":612,"depth":102,"text":615},{"id":635,"depth":102,"text":638},{"id":670,"depth":102,"text":673},{"id":685,"depth":102,"text":688},{"id":700,"depth":102,"text":703},{"id":727,"depth":102,"text":730},{"id":738,"depth":102,"text":741,"children":869},[870,871,872],{"id":787,"depth":112,"text":790},{"id":812,"depth":112,"text":763},{"id":834,"depth":112,"text":769},"content:1.guide:1.features.md","1.guide/1.features.md",{"_path":23,"_dir":876,"_draft":39,"_partial":39,"_locale":40,"title":22,"description":877,"body":878,"_type":390,"_id":3417,"_source":392,"_file":3418,"_extension":394},"module","Add your own modules integration to the Nuxt DevTools.",{"type":43,"children":879,"toc":3408},[880,885,891,896,939,944,950,955,960,1248,1253,1568,1578,1584,1589,2239,2251,2269,2275,2287,2293,2298,2303,2442,2447,2943,2948,3307,3313,3318,3328,3334,3339,3404],{"type":46,"tag":47,"props":881,"children":882},{},[883],{"type":51,"value":884},"Nuxt DevTools is designed to be extensible. You can add your own modules integration to the DevTools.",{"type":46,"tag":417,"props":886,"children":888},{"id":887},"starter-template",[889],{"type":51,"value":890},"Starter Template",{"type":46,"tag":47,"props":892,"children":893},{},[894],{"type":51,"value":895},"If you want to try integrating with Nuxt DevTools, you can run",{"type":46,"tag":62,"props":897,"children":901},{"className":898,"code":899,"language":900,"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",[902],{"type":46,"tag":54,"props":903,"children":904},{"__ignoreMap":40},[905],{"type":46,"tag":72,"props":906,"children":907},{"class":74,"line":75},[908,914,919,924,929,934],{"type":46,"tag":72,"props":909,"children":911},{"style":910},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[912],{"type":51,"value":913},"npx",{"type":46,"tag":72,"props":915,"children":916},{"style":224},[917],{"type":51,"value":918}," nuxi",{"type":46,"tag":72,"props":920,"children":921},{"style":224},[922],{"type":51,"value":923}," init",{"type":46,"tag":72,"props":925,"children":926},{"style":224},[927],{"type":51,"value":928}," my-module",{"type":46,"tag":72,"props":930,"children":931},{"style":224},[932],{"type":51,"value":933}," -t",{"type":46,"tag":72,"props":935,"children":936},{"style":224},[937],{"type":51,"value":938}," module-devtools\n",{"type":46,"tag":47,"props":940,"children":941},{},[942],{"type":51,"value":943},"to create a new module starter with Nuxt DevTools integration pre-configured (contributing a fully custom view as a tab).",{"type":46,"tag":417,"props":945,"children":947},{"id":946},"contributing-to-view",[948],{"type":51,"value":949},"Contributing to View",{"type":46,"tag":47,"props":951,"children":952},{},[953],{"type":51,"value":954},"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":956,"children":957},{},[958],{"type":51,"value":959},"You can use the utility kit provided by Nuxt DevTools to register your custom tab:",{"type":46,"tag":62,"props":961,"children":963},{"className":327,"code":962,"language":329,"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",[964],{"type":46,"tag":54,"props":965,"children":966},{"__ignoreMap":40},[967,1004,1011,1029,1037,1069,1077,1106,1114,1143,1151,1168,1197,1226,1234],{"type":46,"tag":72,"props":968,"children":969},{"class":74,"line":75},[970,974,978,983,987,991,995,1000],{"type":46,"tag":72,"props":971,"children":972},{"style":339},[973],{"type":51,"value":342},{"type":46,"tag":72,"props":975,"children":976},{"style":79},[977],{"type":51,"value":347},{"type":46,"tag":72,"props":979,"children":980},{"style":121},[981],{"type":51,"value":982}," addCustomTab",{"type":46,"tag":72,"props":984,"children":985},{"style":79},[986],{"type":51,"value":356},{"type":46,"tag":72,"props":988,"children":989},{"style":339},[990],{"type":51,"value":361},{"type":46,"tag":72,"props":992,"children":993},{"style":79},[994],{"type":51,"value":366},{"type":46,"tag":72,"props":996,"children":997},{"style":224},[998],{"type":51,"value":999},"@nuxt/devtools-kit",{"type":46,"tag":72,"props":1001,"children":1002},{"style":79},[1003],{"type":51,"value":376},{"type":46,"tag":72,"props":1005,"children":1006},{"class":74,"line":102},[1007],{"type":46,"tag":72,"props":1008,"children":1009},{"emptyLinePlaceholder":169},[1010],{"type":51,"value":172},{"type":46,"tag":72,"props":1012,"children":1013},{"class":74,"line":112},[1014,1019,1024],{"type":46,"tag":72,"props":1015,"children":1016},{"style":132},[1017],{"type":51,"value":1018},"addCustomTab",{"type":46,"tag":72,"props":1020,"children":1021},{"style":121},[1022],{"type":51,"value":1023},"(",{"type":46,"tag":72,"props":1025,"children":1026},{"style":79},[1027],{"type":51,"value":1028},"{\n",{"type":46,"tag":72,"props":1030,"children":1031},{"class":74,"line":148},[1032],{"type":46,"tag":72,"props":1033,"children":1034},{"style":106},[1035],{"type":51,"value":1036},"  // unique identifier\n",{"type":46,"tag":72,"props":1038,"children":1039},{"class":74,"line":165},[1040,1045,1050,1054,1059,1064],{"type":46,"tag":72,"props":1041,"children":1042},{"style":85},[1043],{"type":51,"value":1044},"  name",{"type":46,"tag":72,"props":1046,"children":1047},{"style":79},[1048],{"type":51,"value":1049},":",{"type":46,"tag":72,"props":1051,"children":1052},{"style":79},[1053],{"type":51,"value":366},{"type":46,"tag":72,"props":1055,"children":1056},{"style":224},[1057],{"type":51,"value":1058},"my-module",{"type":46,"tag":72,"props":1060,"children":1061},{"style":79},[1062],{"type":51,"value":1063},"'",{"type":46,"tag":72,"props":1065,"children":1066},{"style":79},[1067],{"type":51,"value":1068},",\n",{"type":46,"tag":72,"props":1070,"children":1071},{"class":74,"line":175},[1072],{"type":46,"tag":72,"props":1073,"children":1074},{"style":106},[1075],{"type":51,"value":1076},"  // title to display in the tab\n",{"type":46,"tag":72,"props":1078,"children":1079},{"class":74,"line":192},[1080,1085,1089,1093,1098,1102],{"type":46,"tag":72,"props":1081,"children":1082},{"style":85},[1083],{"type":51,"value":1084},"  title",{"type":46,"tag":72,"props":1086,"children":1087},{"style":79},[1088],{"type":51,"value":1049},{"type":46,"tag":72,"props":1090,"children":1091},{"style":79},[1092],{"type":51,"value":366},{"type":46,"tag":72,"props":1094,"children":1095},{"style":224},[1096],{"type":51,"value":1097},"My Module",{"type":46,"tag":72,"props":1099,"children":1100},{"style":79},[1101],{"type":51,"value":1063},{"type":46,"tag":72,"props":1103,"children":1104},{"style":79},[1105],{"type":51,"value":1068},{"type":46,"tag":72,"props":1107,"children":1108},{"class":74,"line":206},[1109],{"type":46,"tag":72,"props":1110,"children":1111},{"style":106},[1112],{"type":51,"value":1113},"  // any icon from Iconify, or a URL to an image\n",{"type":46,"tag":72,"props":1115,"children":1116},{"class":74,"line":235},[1117,1122,1126,1130,1135,1139],{"type":46,"tag":72,"props":1118,"children":1119},{"style":85},[1120],{"type":51,"value":1121},"  icon",{"type":46,"tag":72,"props":1123,"children":1124},{"style":79},[1125],{"type":51,"value":1049},{"type":46,"tag":72,"props":1127,"children":1128},{"style":79},[1129],{"type":51,"value":366},{"type":46,"tag":72,"props":1131,"children":1132},{"style":224},[1133],{"type":51,"value":1134},"carbon:apps",{"type":46,"tag":72,"props":1136,"children":1137},{"style":79},[1138],{"type":51,"value":1063},{"type":46,"tag":72,"props":1140,"children":1141},{"style":79},[1142],{"type":51,"value":1068},{"type":46,"tag":72,"props":1144,"children":1145},{"class":74,"line":261},[1146],{"type":46,"tag":72,"props":1147,"children":1148},{"style":106},[1149],{"type":51,"value":1150},"  // iframe view\n",{"type":46,"tag":72,"props":1152,"children":1153},{"class":74,"line":270},[1154,1159,1163],{"type":46,"tag":72,"props":1155,"children":1156},{"style":85},[1157],{"type":51,"value":1158},"  view",{"type":46,"tag":72,"props":1160,"children":1161},{"style":79},[1162],{"type":51,"value":1049},{"type":46,"tag":72,"props":1164,"children":1165},{"style":79},[1166],{"type":51,"value":1167}," {\n",{"type":46,"tag":72,"props":1169,"children":1170},{"class":74,"line":279},[1171,1176,1180,1184,1189,1193],{"type":46,"tag":72,"props":1172,"children":1173},{"style":85},[1174],{"type":51,"value":1175},"    type",{"type":46,"tag":72,"props":1177,"children":1178},{"style":79},[1179],{"type":51,"value":1049},{"type":46,"tag":72,"props":1181,"children":1182},{"style":79},[1183],{"type":51,"value":366},{"type":46,"tag":72,"props":1185,"children":1186},{"style":224},[1187],{"type":51,"value":1188},"iframe",{"type":46,"tag":72,"props":1190,"children":1191},{"style":79},[1192],{"type":51,"value":1063},{"type":46,"tag":72,"props":1194,"children":1195},{"style":79},[1196],{"type":51,"value":1068},{"type":46,"tag":72,"props":1198,"children":1199},{"class":74,"line":288},[1200,1205,1209,1213,1218,1222],{"type":46,"tag":72,"props":1201,"children":1202},{"style":85},[1203],{"type":51,"value":1204},"    src",{"type":46,"tag":72,"props":1206,"children":1207},{"style":79},[1208],{"type":51,"value":1049},{"type":46,"tag":72,"props":1210,"children":1211},{"style":79},[1212],{"type":51,"value":366},{"type":46,"tag":72,"props":1214,"children":1215},{"style":224},[1216],{"type":51,"value":1217},"/url-to-your-module-view",{"type":46,"tag":72,"props":1219,"children":1220},{"style":79},[1221],{"type":51,"value":1063},{"type":46,"tag":72,"props":1223,"children":1224},{"style":79},[1225],{"type":51,"value":1068},{"type":46,"tag":72,"props":1227,"children":1228},{"class":74,"line":306},[1229],{"type":46,"tag":72,"props":1230,"children":1231},{"style":79},[1232],{"type":51,"value":1233},"  },\n",{"type":46,"tag":72,"props":1235,"children":1237},{"class":74,"line":1236},15,[1238,1243],{"type":46,"tag":72,"props":1239,"children":1240},{"style":79},[1241],{"type":51,"value":1242},"}",{"type":46,"tag":72,"props":1244,"children":1245},{"style":121},[1246],{"type":51,"value":1247},")\n",{"type":46,"tag":47,"props":1249,"children":1250},{},[1251],{"type":51,"value":1252},"Or if you prefer to use Nuxt hooks:",{"type":46,"tag":62,"props":1254,"children":1256},{"className":327,"code":1255,"language":329,"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",[1257],{"type":46,"tag":54,"props":1258,"children":1259},{"__ignoreMap":40},[1260,1324,1349,1357,1385,1393,1421,1429,1457,1465,1481,1509,1537,1545,1557],{"type":46,"tag":72,"props":1261,"children":1262},{"class":74,"line":75},[1263,1268,1272,1277,1281,1285,1290,1294,1299,1304,1310,1315,1320],{"type":46,"tag":72,"props":1264,"children":1265},{"style":121},[1266],{"type":51,"value":1267},"nuxt",{"type":46,"tag":72,"props":1269,"children":1270},{"style":79},[1271],{"type":51,"value":415},{"type":46,"tag":72,"props":1273,"children":1274},{"style":132},[1275],{"type":51,"value":1276},"hook",{"type":46,"tag":72,"props":1278,"children":1279},{"style":121},[1280],{"type":51,"value":1023},{"type":46,"tag":72,"props":1282,"children":1283},{"style":79},[1284],{"type":51,"value":1063},{"type":46,"tag":72,"props":1286,"children":1287},{"style":224},[1288],{"type":51,"value":1289},"devtools:customTabs",{"type":46,"tag":72,"props":1291,"children":1292},{"style":79},[1293],{"type":51,"value":1063},{"type":46,"tag":72,"props":1295,"children":1296},{"style":79},[1297],{"type":51,"value":1298},",",{"type":46,"tag":72,"props":1300,"children":1301},{"style":79},[1302],{"type":51,"value":1303}," (",{"type":46,"tag":72,"props":1305,"children":1307},{"style":1306},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8;--shiki-light-font-style:italic;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[1308],{"type":51,"value":1309},"tabs",{"type":46,"tag":72,"props":1311,"children":1312},{"style":79},[1313],{"type":51,"value":1314},")",{"type":46,"tag":72,"props":1316,"children":1317},{"style":91},[1318],{"type":51,"value":1319}," =>",{"type":46,"tag":72,"props":1321,"children":1322},{"style":79},[1323],{"type":51,"value":1167},{"type":46,"tag":72,"props":1325,"children":1326},{"class":74,"line":102},[1327,1332,1336,1341,1345],{"type":46,"tag":72,"props":1328,"children":1329},{"style":121},[1330],{"type":51,"value":1331},"  tabs",{"type":46,"tag":72,"props":1333,"children":1334},{"style":79},[1335],{"type":51,"value":415},{"type":46,"tag":72,"props":1337,"children":1338},{"style":132},[1339],{"type":51,"value":1340},"push",{"type":46,"tag":72,"props":1342,"children":1343},{"style":85},[1344],{"type":51,"value":1023},{"type":46,"tag":72,"props":1346,"children":1347},{"style":79},[1348],{"type":51,"value":1028},{"type":46,"tag":72,"props":1350,"children":1351},{"class":74,"line":112},[1352],{"type":46,"tag":72,"props":1353,"children":1354},{"style":106},[1355],{"type":51,"value":1356},"    // unique identifier\n",{"type":46,"tag":72,"props":1358,"children":1359},{"class":74,"line":148},[1360,1365,1369,1373,1377,1381],{"type":46,"tag":72,"props":1361,"children":1362},{"style":85},[1363],{"type":51,"value":1364},"    name",{"type":46,"tag":72,"props":1366,"children":1367},{"style":79},[1368],{"type":51,"value":1049},{"type":46,"tag":72,"props":1370,"children":1371},{"style":79},[1372],{"type":51,"value":366},{"type":46,"tag":72,"props":1374,"children":1375},{"style":224},[1376],{"type":51,"value":1058},{"type":46,"tag":72,"props":1378,"children":1379},{"style":79},[1380],{"type":51,"value":1063},{"type":46,"tag":72,"props":1382,"children":1383},{"style":79},[1384],{"type":51,"value":1068},{"type":46,"tag":72,"props":1386,"children":1387},{"class":74,"line":165},[1388],{"type":46,"tag":72,"props":1389,"children":1390},{"style":106},[1391],{"type":51,"value":1392},"    // title to display in the tab\n",{"type":46,"tag":72,"props":1394,"children":1395},{"class":74,"line":175},[1396,1401,1405,1409,1413,1417],{"type":46,"tag":72,"props":1397,"children":1398},{"style":85},[1399],{"type":51,"value":1400},"    title",{"type":46,"tag":72,"props":1402,"children":1403},{"style":79},[1404],{"type":51,"value":1049},{"type":46,"tag":72,"props":1406,"children":1407},{"style":79},[1408],{"type":51,"value":366},{"type":46,"tag":72,"props":1410,"children":1411},{"style":224},[1412],{"type":51,"value":1097},{"type":46,"tag":72,"props":1414,"children":1415},{"style":79},[1416],{"type":51,"value":1063},{"type":46,"tag":72,"props":1418,"children":1419},{"style":79},[1420],{"type":51,"value":1068},{"type":46,"tag":72,"props":1422,"children":1423},{"class":74,"line":192},[1424],{"type":46,"tag":72,"props":1425,"children":1426},{"style":106},[1427],{"type":51,"value":1428},"    // any icon from Iconify, or a URL to an image\n",{"type":46,"tag":72,"props":1430,"children":1431},{"class":74,"line":206},[1432,1437,1441,1445,1449,1453],{"type":46,"tag":72,"props":1433,"children":1434},{"style":85},[1435],{"type":51,"value":1436},"    icon",{"type":46,"tag":72,"props":1438,"children":1439},{"style":79},[1440],{"type":51,"value":1049},{"type":46,"tag":72,"props":1442,"children":1443},{"style":79},[1444],{"type":51,"value":366},{"type":46,"tag":72,"props":1446,"children":1447},{"style":224},[1448],{"type":51,"value":1134},{"type":46,"tag":72,"props":1450,"children":1451},{"style":79},[1452],{"type":51,"value":1063},{"type":46,"tag":72,"props":1454,"children":1455},{"style":79},[1456],{"type":51,"value":1068},{"type":46,"tag":72,"props":1458,"children":1459},{"class":74,"line":235},[1460],{"type":46,"tag":72,"props":1461,"children":1462},{"style":106},[1463],{"type":51,"value":1464},"    // iframe view\n",{"type":46,"tag":72,"props":1466,"children":1467},{"class":74,"line":261},[1468,1473,1477],{"type":46,"tag":72,"props":1469,"children":1470},{"style":85},[1471],{"type":51,"value":1472},"    view",{"type":46,"tag":72,"props":1474,"children":1475},{"style":79},[1476],{"type":51,"value":1049},{"type":46,"tag":72,"props":1478,"children":1479},{"style":79},[1480],{"type":51,"value":1167},{"type":46,"tag":72,"props":1482,"children":1483},{"class":74,"line":270},[1484,1489,1493,1497,1501,1505],{"type":46,"tag":72,"props":1485,"children":1486},{"style":85},[1487],{"type":51,"value":1488},"      type",{"type":46,"tag":72,"props":1490,"children":1491},{"style":79},[1492],{"type":51,"value":1049},{"type":46,"tag":72,"props":1494,"children":1495},{"style":79},[1496],{"type":51,"value":366},{"type":46,"tag":72,"props":1498,"children":1499},{"style":224},[1500],{"type":51,"value":1188},{"type":46,"tag":72,"props":1502,"children":1503},{"style":79},[1504],{"type":51,"value":1063},{"type":46,"tag":72,"props":1506,"children":1507},{"style":79},[1508],{"type":51,"value":1068},{"type":46,"tag":72,"props":1510,"children":1511},{"class":74,"line":279},[1512,1517,1521,1525,1529,1533],{"type":46,"tag":72,"props":1513,"children":1514},{"style":85},[1515],{"type":51,"value":1516},"      src",{"type":46,"tag":72,"props":1518,"children":1519},{"style":79},[1520],{"type":51,"value":1049},{"type":46,"tag":72,"props":1522,"children":1523},{"style":79},[1524],{"type":51,"value":366},{"type":46,"tag":72,"props":1526,"children":1527},{"style":224},[1528],{"type":51,"value":1217},{"type":46,"tag":72,"props":1530,"children":1531},{"style":79},[1532],{"type":51,"value":1063},{"type":46,"tag":72,"props":1534,"children":1535},{"style":79},[1536],{"type":51,"value":1068},{"type":46,"tag":72,"props":1538,"children":1539},{"class":74,"line":288},[1540],{"type":46,"tag":72,"props":1541,"children":1542},{"style":79},[1543],{"type":51,"value":1544},"    },\n",{"type":46,"tag":72,"props":1546,"children":1547},{"class":74,"line":306},[1548,1553],{"type":46,"tag":72,"props":1549,"children":1550},{"style":79},[1551],{"type":51,"value":1552},"  }",{"type":46,"tag":72,"props":1554,"children":1555},{"style":85},[1556],{"type":51,"value":1247},{"type":46,"tag":72,"props":1558,"children":1559},{"class":74,"line":1236},[1560,1564],{"type":46,"tag":72,"props":1561,"children":1562},{"style":79},[1563],{"type":51,"value":1242},{"type":46,"tag":72,"props":1565,"children":1566},{"style":121},[1567],{"type":51,"value":1247},{"type":46,"tag":47,"props":1569,"children":1570},{},[1571,1572,1577],{"type":51,"value":625},{"type":46,"tag":406,"props":1573,"children":1574},{"href":26},[1575],{"type":51,"value":1576},"DevTools Utility Kit",{"type":51,"value":415},{"type":46,"tag":417,"props":1579,"children":1581},{"id":1580},"lazy-service-launching",[1582],{"type":51,"value":1583},"Lazy Service Launching",{"type":46,"tag":47,"props":1585,"children":1586},{},[1587],{"type":51,"value":1588},"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":62,"props":1590,"children":1592},{"className":327,"code":1591,"language":329,"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",[1593],{"type":46,"tag":54,"props":1594,"children":1595},{"__ignoreMap":40},[1596,1619,1674,1681,1708,1716,1733,1741,1748,1803,1826,1853,1880,1896,1908,1936,1965,1974,1987,2016,2046,2068,2098,2120,2147,2169,2183,2192,2206,2215,2227],{"type":46,"tag":72,"props":1597,"children":1598},{"class":74,"line":75},[1599,1604,1609,1613],{"type":46,"tag":72,"props":1600,"children":1601},{"style":91},[1602],{"type":51,"value":1603},"let",{"type":46,"tag":72,"props":1605,"children":1606},{"style":121},[1607],{"type":51,"value":1608}," isReady ",{"type":46,"tag":72,"props":1610,"children":1611},{"style":79},[1612],{"type":51,"value":129},{"type":46,"tag":72,"props":1614,"children":1616},{"style":1615},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[1617],{"type":51,"value":1618}," false\n",{"type":46,"tag":72,"props":1620,"children":1621},{"class":74,"line":102},[1622,1626,1631,1635,1640,1644,1649,1654,1659,1664,1669],{"type":46,"tag":72,"props":1623,"children":1624},{"style":91},[1625],{"type":51,"value":118},{"type":46,"tag":72,"props":1627,"children":1628},{"style":121},[1629],{"type":51,"value":1630}," promise",{"type":46,"tag":72,"props":1632,"children":1633},{"style":79},[1634],{"type":51,"value":1049},{"type":46,"tag":72,"props":1636,"children":1637},{"style":910},[1638],{"type":51,"value":1639}," Promise",{"type":46,"tag":72,"props":1641,"children":1642},{"style":79},[1643],{"type":51,"value":82},{"type":46,"tag":72,"props":1645,"children":1646},{"style":910},[1647],{"type":51,"value":1648},"any",{"type":46,"tag":72,"props":1650,"children":1651},{"style":79},[1652],{"type":51,"value":1653},">",{"type":46,"tag":72,"props":1655,"children":1656},{"style":79},[1657],{"type":51,"value":1658}," |",{"type":46,"tag":72,"props":1660,"children":1661},{"style":910},[1662],{"type":51,"value":1663}," null",{"type":46,"tag":72,"props":1665,"children":1666},{"style":79},[1667],{"type":51,"value":1668}," =",{"type":46,"tag":72,"props":1670,"children":1671},{"style":79},[1672],{"type":51,"value":1673}," null\n",{"type":46,"tag":72,"props":1675,"children":1676},{"class":74,"line":112},[1677],{"type":46,"tag":72,"props":1678,"children":1679},{"emptyLinePlaceholder":169},[1680],{"type":51,"value":172},{"type":46,"tag":72,"props":1682,"children":1683},{"class":74,"line":148},[1684,1689,1694,1699,1704],{"type":46,"tag":72,"props":1685,"children":1686},{"style":91},[1687],{"type":51,"value":1688},"async",{"type":46,"tag":72,"props":1690,"children":1691},{"style":91},[1692],{"type":51,"value":1693}," function",{"type":46,"tag":72,"props":1695,"children":1696},{"style":132},[1697],{"type":51,"value":1698}," launchService",{"type":46,"tag":72,"props":1700,"children":1701},{"style":79},[1702],{"type":51,"value":1703},"()",{"type":46,"tag":72,"props":1705,"children":1706},{"style":79},[1707],{"type":51,"value":1167},{"type":46,"tag":72,"props":1709,"children":1710},{"class":74,"line":165},[1711],{"type":46,"tag":72,"props":1712,"children":1713},{"style":106},[1714],{"type":51,"value":1715},"  // ...launch your service\n",{"type":46,"tag":72,"props":1717,"children":1718},{"class":74,"line":175},[1719,1724,1728],{"type":46,"tag":72,"props":1720,"children":1721},{"style":121},[1722],{"type":51,"value":1723},"  isReady",{"type":46,"tag":72,"props":1725,"children":1726},{"style":79},[1727],{"type":51,"value":1668},{"type":46,"tag":72,"props":1729,"children":1730},{"style":1615},[1731],{"type":51,"value":1732}," true\n",{"type":46,"tag":72,"props":1734,"children":1735},{"class":74,"line":192},[1736],{"type":46,"tag":72,"props":1737,"children":1738},{"style":79},[1739],{"type":51,"value":1740},"}\n",{"type":46,"tag":72,"props":1742,"children":1743},{"class":74,"line":206},[1744],{"type":46,"tag":72,"props":1745,"children":1746},{"emptyLinePlaceholder":169},[1747],{"type":51,"value":172},{"type":46,"tag":72,"props":1749,"children":1750},{"class":74,"line":235},[1751,1755,1759,1763,1767,1771,1775,1779,1783,1787,1791,1795,1799],{"type":46,"tag":72,"props":1752,"children":1753},{"style":121},[1754],{"type":51,"value":1267},{"type":46,"tag":72,"props":1756,"children":1757},{"style":79},[1758],{"type":51,"value":415},{"type":46,"tag":72,"props":1760,"children":1761},{"style":132},[1762],{"type":51,"value":1276},{"type":46,"tag":72,"props":1764,"children":1765},{"style":121},[1766],{"type":51,"value":1023},{"type":46,"tag":72,"props":1768,"children":1769},{"style":79},[1770],{"type":51,"value":1063},{"type":46,"tag":72,"props":1772,"children":1773},{"style":224},[1774],{"type":51,"value":1289},{"type":46,"tag":72,"props":1776,"children":1777},{"style":79},[1778],{"type":51,"value":1063},{"type":46,"tag":72,"props":1780,"children":1781},{"style":79},[1782],{"type":51,"value":1298},{"type":46,"tag":72,"props":1784,"children":1785},{"style":79},[1786],{"type":51,"value":1303},{"type":46,"tag":72,"props":1788,"children":1789},{"style":1306},[1790],{"type":51,"value":1309},{"type":46,"tag":72,"props":1792,"children":1793},{"style":79},[1794],{"type":51,"value":1314},{"type":46,"tag":72,"props":1796,"children":1797},{"style":91},[1798],{"type":51,"value":1319},{"type":46,"tag":72,"props":1800,"children":1801},{"style":79},[1802],{"type":51,"value":1167},{"type":46,"tag":72,"props":1804,"children":1805},{"class":74,"line":261},[1806,1810,1814,1818,1822],{"type":46,"tag":72,"props":1807,"children":1808},{"style":121},[1809],{"type":51,"value":1331},{"type":46,"tag":72,"props":1811,"children":1812},{"style":79},[1813],{"type":51,"value":415},{"type":46,"tag":72,"props":1815,"children":1816},{"style":132},[1817],{"type":51,"value":1340},{"type":46,"tag":72,"props":1819,"children":1820},{"style":85},[1821],{"type":51,"value":1023},{"type":46,"tag":72,"props":1823,"children":1824},{"style":79},[1825],{"type":51,"value":1028},{"type":46,"tag":72,"props":1827,"children":1828},{"class":74,"line":270},[1829,1833,1837,1841,1845,1849],{"type":46,"tag":72,"props":1830,"children":1831},{"style":85},[1832],{"type":51,"value":1364},{"type":46,"tag":72,"props":1834,"children":1835},{"style":79},[1836],{"type":51,"value":1049},{"type":46,"tag":72,"props":1838,"children":1839},{"style":79},[1840],{"type":51,"value":366},{"type":46,"tag":72,"props":1842,"children":1843},{"style":224},[1844],{"type":51,"value":1058},{"type":46,"tag":72,"props":1846,"children":1847},{"style":79},[1848],{"type":51,"value":1063},{"type":46,"tag":72,"props":1850,"children":1851},{"style":79},[1852],{"type":51,"value":1068},{"type":46,"tag":72,"props":1854,"children":1855},{"class":74,"line":279},[1856,1860,1864,1868,1872,1876],{"type":46,"tag":72,"props":1857,"children":1858},{"style":85},[1859],{"type":51,"value":1400},{"type":46,"tag":72,"props":1861,"children":1862},{"style":79},[1863],{"type":51,"value":1049},{"type":46,"tag":72,"props":1865,"children":1866},{"style":79},[1867],{"type":51,"value":366},{"type":46,"tag":72,"props":1869,"children":1870},{"style":224},[1871],{"type":51,"value":1097},{"type":46,"tag":72,"props":1873,"children":1874},{"style":79},[1875],{"type":51,"value":1063},{"type":46,"tag":72,"props":1877,"children":1878},{"style":79},[1879],{"type":51,"value":1068},{"type":46,"tag":72,"props":1881,"children":1882},{"class":74,"line":288},[1883,1887,1891],{"type":46,"tag":72,"props":1884,"children":1885},{"style":85},[1886],{"type":51,"value":1472},{"type":46,"tag":72,"props":1888,"children":1889},{"style":79},[1890],{"type":51,"value":1049},{"type":46,"tag":72,"props":1892,"children":1893},{"style":121},[1894],{"type":51,"value":1895}," isReady\n",{"type":46,"tag":72,"props":1897,"children":1898},{"class":74,"line":306},[1899,1904],{"type":46,"tag":72,"props":1900,"children":1901},{"style":79},[1902],{"type":51,"value":1903},"      ?",{"type":46,"tag":72,"props":1905,"children":1906},{"style":79},[1907],{"type":51,"value":1167},{"type":46,"tag":72,"props":1909,"children":1910},{"class":74,"line":1236},[1911,1916,1920,1924,1928,1932],{"type":46,"tag":72,"props":1912,"children":1913},{"style":85},[1914],{"type":51,"value":1915},"          type",{"type":46,"tag":72,"props":1917,"children":1918},{"style":79},[1919],{"type":51,"value":1049},{"type":46,"tag":72,"props":1921,"children":1922},{"style":79},[1923],{"type":51,"value":366},{"type":46,"tag":72,"props":1925,"children":1926},{"style":224},[1927],{"type":51,"value":1188},{"type":46,"tag":72,"props":1929,"children":1930},{"style":79},[1931],{"type":51,"value":1063},{"type":46,"tag":72,"props":1933,"children":1934},{"style":79},[1935],{"type":51,"value":1068},{"type":46,"tag":72,"props":1937,"children":1939},{"class":74,"line":1938},16,[1940,1945,1949,1953,1957,1961],{"type":46,"tag":72,"props":1941,"children":1942},{"style":85},[1943],{"type":51,"value":1944},"          src",{"type":46,"tag":72,"props":1946,"children":1947},{"style":79},[1948],{"type":51,"value":1049},{"type":46,"tag":72,"props":1950,"children":1951},{"style":79},[1952],{"type":51,"value":366},{"type":46,"tag":72,"props":1954,"children":1955},{"style":224},[1956],{"type":51,"value":1217},{"type":46,"tag":72,"props":1958,"children":1959},{"style":79},[1960],{"type":51,"value":1063},{"type":46,"tag":72,"props":1962,"children":1963},{"style":79},[1964],{"type":51,"value":1068},{"type":46,"tag":72,"props":1966,"children":1968},{"class":74,"line":1967},17,[1969],{"type":46,"tag":72,"props":1970,"children":1971},{"style":79},[1972],{"type":51,"value":1973},"        }\n",{"type":46,"tag":72,"props":1975,"children":1977},{"class":74,"line":1976},18,[1978,1983],{"type":46,"tag":72,"props":1979,"children":1980},{"style":79},[1981],{"type":51,"value":1982},"      :",{"type":46,"tag":72,"props":1984,"children":1985},{"style":79},[1986],{"type":51,"value":1167},{"type":46,"tag":72,"props":1988,"children":1990},{"class":74,"line":1989},19,[1991,1995,1999,2003,2008,2012],{"type":46,"tag":72,"props":1992,"children":1993},{"style":85},[1994],{"type":51,"value":1915},{"type":46,"tag":72,"props":1996,"children":1997},{"style":79},[1998],{"type":51,"value":1049},{"type":46,"tag":72,"props":2000,"children":2001},{"style":79},[2002],{"type":51,"value":366},{"type":46,"tag":72,"props":2004,"children":2005},{"style":224},[2006],{"type":51,"value":2007},"launch",{"type":46,"tag":72,"props":2009,"children":2010},{"style":79},[2011],{"type":51,"value":1063},{"type":46,"tag":72,"props":2013,"children":2014},{"style":79},[2015],{"type":51,"value":1068},{"type":46,"tag":72,"props":2017,"children":2019},{"class":74,"line":2018},20,[2020,2025,2029,2033,2038,2042],{"type":46,"tag":72,"props":2021,"children":2022},{"style":85},[2023],{"type":51,"value":2024},"          description",{"type":46,"tag":72,"props":2026,"children":2027},{"style":79},[2028],{"type":51,"value":1049},{"type":46,"tag":72,"props":2030,"children":2031},{"style":79},[2032],{"type":51,"value":366},{"type":46,"tag":72,"props":2034,"children":2035},{"style":224},[2036],{"type":51,"value":2037},"Launch My Module",{"type":46,"tag":72,"props":2039,"children":2040},{"style":79},[2041],{"type":51,"value":1063},{"type":46,"tag":72,"props":2043,"children":2044},{"style":79},[2045],{"type":51,"value":1068},{"type":46,"tag":72,"props":2047,"children":2049},{"class":74,"line":2048},21,[2050,2055,2059,2064],{"type":46,"tag":72,"props":2051,"children":2052},{"style":85},[2053],{"type":51,"value":2054},"          actions",{"type":46,"tag":72,"props":2056,"children":2057},{"style":79},[2058],{"type":51,"value":1049},{"type":46,"tag":72,"props":2060,"children":2061},{"style":85},[2062],{"type":51,"value":2063}," [",{"type":46,"tag":72,"props":2065,"children":2066},{"style":79},[2067],{"type":51,"value":1028},{"type":46,"tag":72,"props":2069,"children":2071},{"class":74,"line":2070},22,[2072,2077,2081,2085,2090,2094],{"type":46,"tag":72,"props":2073,"children":2074},{"style":85},[2075],{"type":51,"value":2076},"            label",{"type":46,"tag":72,"props":2078,"children":2079},{"style":79},[2080],{"type":51,"value":1049},{"type":46,"tag":72,"props":2082,"children":2083},{"style":79},[2084],{"type":51,"value":366},{"type":46,"tag":72,"props":2086,"children":2087},{"style":224},[2088],{"type":51,"value":2089},"Start",{"type":46,"tag":72,"props":2091,"children":2092},{"style":79},[2093],{"type":51,"value":1063},{"type":46,"tag":72,"props":2095,"children":2096},{"style":79},[2097],{"type":51,"value":1068},{"type":46,"tag":72,"props":2099,"children":2101},{"class":74,"line":2100},23,[2102,2107,2112,2116],{"type":46,"tag":72,"props":2103,"children":2104},{"style":91},[2105],{"type":51,"value":2106},"            async",{"type":46,"tag":72,"props":2108,"children":2109},{"style":85},[2110],{"type":51,"value":2111}," handle",{"type":46,"tag":72,"props":2113,"children":2114},{"style":79},[2115],{"type":51,"value":1703},{"type":46,"tag":72,"props":2117,"children":2118},{"style":79},[2119],{"type":51,"value":1167},{"type":46,"tag":72,"props":2121,"children":2123},{"class":74,"line":2122},24,[2124,2129,2133,2138,2143],{"type":46,"tag":72,"props":2125,"children":2126},{"style":339},[2127],{"type":51,"value":2128},"              if",{"type":46,"tag":72,"props":2130,"children":2131},{"style":85},[2132],{"type":51,"value":1303},{"type":46,"tag":72,"props":2134,"children":2135},{"style":79},[2136],{"type":51,"value":2137},"!",{"type":46,"tag":72,"props":2139,"children":2140},{"style":121},[2141],{"type":51,"value":2142},"promise",{"type":46,"tag":72,"props":2144,"children":2145},{"style":85},[2146],{"type":51,"value":1247},{"type":46,"tag":72,"props":2148,"children":2150},{"class":74,"line":2149},25,[2151,2156,2160,2164],{"type":46,"tag":72,"props":2152,"children":2153},{"style":121},[2154],{"type":51,"value":2155},"                promise",{"type":46,"tag":72,"props":2157,"children":2158},{"style":79},[2159],{"type":51,"value":1668},{"type":46,"tag":72,"props":2161,"children":2162},{"style":132},[2163],{"type":51,"value":1698},{"type":46,"tag":72,"props":2165,"children":2166},{"style":85},[2167],{"type":51,"value":2168},"()\n",{"type":46,"tag":72,"props":2170,"children":2172},{"class":74,"line":2171},26,[2173,2178],{"type":46,"tag":72,"props":2174,"children":2175},{"style":339},[2176],{"type":51,"value":2177},"              await",{"type":46,"tag":72,"props":2179,"children":2180},{"style":121},[2181],{"type":51,"value":2182}," promise\n",{"type":46,"tag":72,"props":2184,"children":2186},{"class":74,"line":2185},27,[2187],{"type":46,"tag":72,"props":2188,"children":2189},{"style":79},[2190],{"type":51,"value":2191},"            },\n",{"type":46,"tag":72,"props":2193,"children":2195},{"class":74,"line":2194},28,[2196,2201],{"type":46,"tag":72,"props":2197,"children":2198},{"style":79},[2199],{"type":51,"value":2200},"          }",{"type":46,"tag":72,"props":2202,"children":2203},{"style":85},[2204],{"type":51,"value":2205},"]\n",{"type":46,"tag":72,"props":2207,"children":2209},{"class":74,"line":2208},29,[2210],{"type":46,"tag":72,"props":2211,"children":2212},{"style":79},[2213],{"type":51,"value":2214},"        },\n",{"type":46,"tag":72,"props":2216,"children":2218},{"class":74,"line":2217},30,[2219,2223],{"type":46,"tag":72,"props":2220,"children":2221},{"style":79},[2222],{"type":51,"value":1552},{"type":46,"tag":72,"props":2224,"children":2225},{"style":85},[2226],{"type":51,"value":1247},{"type":46,"tag":72,"props":2228,"children":2230},{"class":74,"line":2229},31,[2231,2235],{"type":46,"tag":72,"props":2232,"children":2233},{"style":79},[2234],{"type":51,"value":1242},{"type":46,"tag":72,"props":2236,"children":2237},{"style":121},[2238],{"type":51,"value":1247},{"type":46,"tag":47,"props":2240,"children":2241},{},[2242,2244,2249],{"type":51,"value":2243},"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":2245,"children":2246},{"className":40},[2247],{"type":51,"value":2248},"handle()",{"type":51,"value":2250}," will be called, and the view will be updated to iframe.",{"type":46,"tag":47,"props":2252,"children":2253},{},[2254,2256,2261,2263,2267],{"type":51,"value":2255},"When you need to refresh the custom tabs, you can call ",{"type":46,"tag":54,"props":2257,"children":2258},{"className":40},[2259],{"type":51,"value":2260},"nuxt.callHook('devtools:customTabs:refresh')",{"type":51,"value":2262}," and the hooks on ",{"type":46,"tag":54,"props":2264,"children":2265},{"className":40},[2266],{"type":51,"value":1289},{"type":51,"value":2268}," will be revaluated again.",{"type":46,"tag":417,"props":2270,"children":2272},{"id":2271},"api-for-custom-view",[2273],{"type":51,"value":2274},"API for Custom View",{"type":46,"tag":47,"props":2276,"children":2277},{},[2278,2280,2286],{"type":51,"value":2279},"Please refer to ",{"type":46,"tag":406,"props":2281,"children":2283},{"href":2282},"/module/utils-kit#nuxtdevtools-kitiframe-client",[2284],{"type":51,"value":2285},"Iframe Client",{"type":51,"value":415},{"type":46,"tag":417,"props":2288,"children":2290},{"id":2289},"custom-rpc-functions",[2291],{"type":51,"value":2292},"Custom RPC Functions",{"type":46,"tag":47,"props":2294,"children":2295},{},[2296],{"type":51,"value":2297},"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":2299,"children":2300},{},[2301],{"type":51,"value":2302},"To do that, we recommend to define your types in a shared TypeScript file first:",{"type":46,"tag":62,"props":2304,"children":2306},{"className":327,"code":2305,"language":329,"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",[2307],{"type":46,"tag":54,"props":2308,"children":2309},{"__ignoreMap":40},[2310,2318,2325,2347,2365,2372,2379,2399,2435],{"type":46,"tag":72,"props":2311,"children":2312},{"class":74,"line":75},[2313],{"type":46,"tag":72,"props":2314,"children":2315},{"style":106},[2316],{"type":51,"value":2317},"// rpc-types.ts\n",{"type":46,"tag":72,"props":2319,"children":2320},{"class":74,"line":102},[2321],{"type":46,"tag":72,"props":2322,"children":2323},{"emptyLinePlaceholder":169},[2324],{"type":51,"value":172},{"type":46,"tag":72,"props":2326,"children":2327},{"class":74,"line":112},[2328,2333,2338,2343],{"type":46,"tag":72,"props":2329,"children":2330},{"style":339},[2331],{"type":51,"value":2332},"export",{"type":46,"tag":72,"props":2334,"children":2335},{"style":91},[2336],{"type":51,"value":2337}," interface",{"type":46,"tag":72,"props":2339,"children":2340},{"style":910},[2341],{"type":51,"value":2342}," ServerFunctions",{"type":46,"tag":72,"props":2344,"children":2345},{"style":79},[2346],{"type":51,"value":1167},{"type":46,"tag":72,"props":2348,"children":2349},{"class":74,"line":148},[2350,2355,2360],{"type":46,"tag":72,"props":2351,"children":2352},{"style":85},[2353],{"type":51,"value":2354},"  getMyModuleOptions",{"type":46,"tag":72,"props":2356,"children":2357},{"style":79},[2358],{"type":51,"value":2359},"():",{"type":46,"tag":72,"props":2361,"children":2362},{"style":910},[2363],{"type":51,"value":2364}," MyModuleOptions\n",{"type":46,"tag":72,"props":2366,"children":2367},{"class":74,"line":165},[2368],{"type":46,"tag":72,"props":2369,"children":2370},{"style":79},[2371],{"type":51,"value":1740},{"type":46,"tag":72,"props":2373,"children":2374},{"class":74,"line":175},[2375],{"type":46,"tag":72,"props":2376,"children":2377},{"emptyLinePlaceholder":169},[2378],{"type":51,"value":172},{"type":46,"tag":72,"props":2380,"children":2381},{"class":74,"line":192},[2382,2386,2390,2395],{"type":46,"tag":72,"props":2383,"children":2384},{"style":339},[2385],{"type":51,"value":2332},{"type":46,"tag":72,"props":2387,"children":2388},{"style":91},[2389],{"type":51,"value":2337},{"type":46,"tag":72,"props":2391,"children":2392},{"style":910},[2393],{"type":51,"value":2394}," ClientFunctions",{"type":46,"tag":72,"props":2396,"children":2397},{"style":79},[2398],{"type":51,"value":1167},{"type":46,"tag":72,"props":2400,"children":2401},{"class":74,"line":206},[2402,2407,2411,2416,2420,2425,2430],{"type":46,"tag":72,"props":2403,"children":2404},{"style":85},[2405],{"type":51,"value":2406},"  showNotification",{"type":46,"tag":72,"props":2408,"children":2409},{"style":79},[2410],{"type":51,"value":1023},{"type":46,"tag":72,"props":2412,"children":2413},{"style":1306},[2414],{"type":51,"value":2415},"message",{"type":46,"tag":72,"props":2417,"children":2418},{"style":79},[2419],{"type":51,"value":1049},{"type":46,"tag":72,"props":2421,"children":2422},{"style":910},[2423],{"type":51,"value":2424}," string",{"type":46,"tag":72,"props":2426,"children":2427},{"style":79},[2428],{"type":51,"value":2429},"):",{"type":46,"tag":72,"props":2431,"children":2432},{"style":910},[2433],{"type":51,"value":2434}," void\n",{"type":46,"tag":72,"props":2436,"children":2437},{"class":74,"line":235},[2438],{"type":46,"tag":72,"props":2439,"children":2440},{"style":79},[2441],{"type":51,"value":1740},{"type":46,"tag":47,"props":2443,"children":2444},{},[2445],{"type":51,"value":2446},"And then in your module code:",{"type":46,"tag":62,"props":2448,"children":2450},{"className":327,"code":2449,"language":329,"meta":40,"style":40},"import { defineNuxtModule } from '@nuxt/kit'\nimport { extendServerRpc, onDevToolsInitialized } from '@nuxt/devtools-kit'\nimport type { ClientFunctions, ServerFunctions } from './rpc-types'\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",[2451],{"type":46,"tag":54,"props":2452,"children":2453},{"__ignoreMap":40},[2454,2491,2536,2585,2592,2621,2628,2652,2686,2694,2723,2782,2790,2806,2819,2826,2838,2845,2853,2861,2912,2924,2932],{"type":46,"tag":72,"props":2455,"children":2456},{"class":74,"line":75},[2457,2461,2465,2470,2474,2478,2482,2487],{"type":46,"tag":72,"props":2458,"children":2459},{"style":339},[2460],{"type":51,"value":342},{"type":46,"tag":72,"props":2462,"children":2463},{"style":79},[2464],{"type":51,"value":347},{"type":46,"tag":72,"props":2466,"children":2467},{"style":121},[2468],{"type":51,"value":2469}," defineNuxtModule",{"type":46,"tag":72,"props":2471,"children":2472},{"style":79},[2473],{"type":51,"value":356},{"type":46,"tag":72,"props":2475,"children":2476},{"style":339},[2477],{"type":51,"value":361},{"type":46,"tag":72,"props":2479,"children":2480},{"style":79},[2481],{"type":51,"value":366},{"type":46,"tag":72,"props":2483,"children":2484},{"style":224},[2485],{"type":51,"value":2486},"@nuxt/kit",{"type":46,"tag":72,"props":2488,"children":2489},{"style":79},[2490],{"type":51,"value":376},{"type":46,"tag":72,"props":2492,"children":2493},{"class":74,"line":102},[2494,2498,2502,2507,2511,2516,2520,2524,2528,2532],{"type":46,"tag":72,"props":2495,"children":2496},{"style":339},[2497],{"type":51,"value":342},{"type":46,"tag":72,"props":2499,"children":2500},{"style":79},[2501],{"type":51,"value":347},{"type":46,"tag":72,"props":2503,"children":2504},{"style":121},[2505],{"type":51,"value":2506}," extendServerRpc",{"type":46,"tag":72,"props":2508,"children":2509},{"style":79},[2510],{"type":51,"value":1298},{"type":46,"tag":72,"props":2512,"children":2513},{"style":121},[2514],{"type":51,"value":2515}," onDevToolsInitialized",{"type":46,"tag":72,"props":2517,"children":2518},{"style":79},[2519],{"type":51,"value":356},{"type":46,"tag":72,"props":2521,"children":2522},{"style":339},[2523],{"type":51,"value":361},{"type":46,"tag":72,"props":2525,"children":2526},{"style":79},[2527],{"type":51,"value":366},{"type":46,"tag":72,"props":2529,"children":2530},{"style":224},[2531],{"type":51,"value":999},{"type":46,"tag":72,"props":2533,"children":2534},{"style":79},[2535],{"type":51,"value":376},{"type":46,"tag":72,"props":2537,"children":2538},{"class":74,"line":112},[2539,2543,2548,2552,2556,2560,2564,2568,2572,2576,2581],{"type":46,"tag":72,"props":2540,"children":2541},{"style":339},[2542],{"type":51,"value":342},{"type":46,"tag":72,"props":2544,"children":2545},{"style":339},[2546],{"type":51,"value":2547}," type",{"type":46,"tag":72,"props":2549,"children":2550},{"style":79},[2551],{"type":51,"value":347},{"type":46,"tag":72,"props":2553,"children":2554},{"style":121},[2555],{"type":51,"value":2394},{"type":46,"tag":72,"props":2557,"children":2558},{"style":79},[2559],{"type":51,"value":1298},{"type":46,"tag":72,"props":2561,"children":2562},{"style":121},[2563],{"type":51,"value":2342},{"type":46,"tag":72,"props":2565,"children":2566},{"style":79},[2567],{"type":51,"value":356},{"type":46,"tag":72,"props":2569,"children":2570},{"style":339},[2571],{"type":51,"value":361},{"type":46,"tag":72,"props":2573,"children":2574},{"style":79},[2575],{"type":51,"value":366},{"type":46,"tag":72,"props":2577,"children":2578},{"style":224},[2579],{"type":51,"value":2580},"./rpc-types",{"type":46,"tag":72,"props":2582,"children":2583},{"style":79},[2584],{"type":51,"value":376},{"type":46,"tag":72,"props":2586,"children":2587},{"class":74,"line":148},[2588],{"type":46,"tag":72,"props":2589,"children":2590},{"emptyLinePlaceholder":169},[2591],{"type":51,"value":172},{"type":46,"tag":72,"props":2593,"children":2594},{"class":74,"line":165},[2595,2599,2604,2608,2612,2617],{"type":46,"tag":72,"props":2596,"children":2597},{"style":91},[2598],{"type":51,"value":118},{"type":46,"tag":72,"props":2600,"children":2601},{"style":121},[2602],{"type":51,"value":2603}," RPC_NAMESPACE ",{"type":46,"tag":72,"props":2605,"children":2606},{"style":79},[2607],{"type":51,"value":129},{"type":46,"tag":72,"props":2609,"children":2610},{"style":79},[2611],{"type":51,"value":366},{"type":46,"tag":72,"props":2613,"children":2614},{"style":224},[2615],{"type":51,"value":2616},"my-module-rpc",{"type":46,"tag":72,"props":2618,"children":2619},{"style":79},[2620],{"type":51,"value":376},{"type":46,"tag":72,"props":2622,"children":2623},{"class":74,"line":175},[2624],{"type":46,"tag":72,"props":2625,"children":2626},{"emptyLinePlaceholder":169},[2627],{"type":51,"value":172},{"type":46,"tag":72,"props":2629,"children":2630},{"class":74,"line":192},[2631,2635,2640,2644,2648],{"type":46,"tag":72,"props":2632,"children":2633},{"style":339},[2634],{"type":51,"value":2332},{"type":46,"tag":72,"props":2636,"children":2637},{"style":339},[2638],{"type":51,"value":2639}," default",{"type":46,"tag":72,"props":2641,"children":2642},{"style":132},[2643],{"type":51,"value":2469},{"type":46,"tag":72,"props":2645,"children":2646},{"style":121},[2647],{"type":51,"value":1023},{"type":46,"tag":72,"props":2649,"children":2650},{"style":79},[2651],{"type":51,"value":1028},{"type":46,"tag":72,"props":2653,"children":2654},{"class":74,"line":206},[2655,2660,2664,2669,2673,2678,2682],{"type":46,"tag":72,"props":2656,"children":2657},{"style":85},[2658],{"type":51,"value":2659},"  setup",{"type":46,"tag":72,"props":2661,"children":2662},{"style":79},[2663],{"type":51,"value":1023},{"type":46,"tag":72,"props":2665,"children":2666},{"style":1306},[2667],{"type":51,"value":2668},"options",{"type":46,"tag":72,"props":2670,"children":2671},{"style":79},[2672],{"type":51,"value":1298},{"type":46,"tag":72,"props":2674,"children":2675},{"style":1306},[2676],{"type":51,"value":2677}," nuxt",{"type":46,"tag":72,"props":2679,"children":2680},{"style":79},[2681],{"type":51,"value":1314},{"type":46,"tag":72,"props":2683,"children":2684},{"style":79},[2685],{"type":51,"value":1167},{"type":46,"tag":72,"props":2687,"children":2688},{"class":74,"line":235},[2689],{"type":46,"tag":72,"props":2690,"children":2691},{"style":106},[2692],{"type":51,"value":2693},"    // wait for DevTools to be initialized\n",{"type":46,"tag":72,"props":2695,"children":2696},{"class":74,"line":261},[2697,2702,2706,2710,2715,2719],{"type":46,"tag":72,"props":2698,"children":2699},{"style":132},[2700],{"type":51,"value":2701},"    onDevToolsInitialized",{"type":46,"tag":72,"props":2703,"children":2704},{"style":85},[2705],{"type":51,"value":1023},{"type":46,"tag":72,"props":2707,"children":2708},{"style":91},[2709],{"type":51,"value":1688},{"type":46,"tag":72,"props":2711,"children":2712},{"style":79},[2713],{"type":51,"value":2714}," ()",{"type":46,"tag":72,"props":2716,"children":2717},{"style":91},[2718],{"type":51,"value":1319},{"type":46,"tag":72,"props":2720,"children":2721},{"style":79},[2722],{"type":51,"value":1167},{"type":46,"tag":72,"props":2724,"children":2725},{"class":74,"line":270},[2726,2731,2736,2740,2744,2748,2753,2757,2761,2765,2769,2774,2778],{"type":46,"tag":72,"props":2727,"children":2728},{"style":91},[2729],{"type":51,"value":2730},"      const",{"type":46,"tag":72,"props":2732,"children":2733},{"style":121},[2734],{"type":51,"value":2735}," rpc",{"type":46,"tag":72,"props":2737,"children":2738},{"style":79},[2739],{"type":51,"value":1668},{"type":46,"tag":72,"props":2741,"children":2742},{"style":132},[2743],{"type":51,"value":2506},{"type":46,"tag":72,"props":2745,"children":2746},{"style":79},[2747],{"type":51,"value":82},{"type":46,"tag":72,"props":2749,"children":2750},{"style":910},[2751],{"type":51,"value":2752},"ClientFunctions",{"type":46,"tag":72,"props":2754,"children":2755},{"style":79},[2756],{"type":51,"value":1298},{"type":46,"tag":72,"props":2758,"children":2759},{"style":910},[2760],{"type":51,"value":2342},{"type":46,"tag":72,"props":2762,"children":2763},{"style":79},[2764],{"type":51,"value":1653},{"type":46,"tag":72,"props":2766,"children":2767},{"style":85},[2768],{"type":51,"value":1023},{"type":46,"tag":72,"props":2770,"children":2771},{"style":121},[2772],{"type":51,"value":2773},"RPC_NAMESPACE",{"type":46,"tag":72,"props":2775,"children":2776},{"style":79},[2777],{"type":51,"value":1298},{"type":46,"tag":72,"props":2779,"children":2780},{"style":79},[2781],{"type":51,"value":1167},{"type":46,"tag":72,"props":2783,"children":2784},{"class":74,"line":279},[2785],{"type":46,"tag":72,"props":2786,"children":2787},{"style":106},[2788],{"type":51,"value":2789},"        // register server RPC functions\n",{"type":46,"tag":72,"props":2791,"children":2792},{"class":74,"line":288},[2793,2798,2802],{"type":46,"tag":72,"props":2794,"children":2795},{"style":85},[2796],{"type":51,"value":2797},"        getMyModuleOptions",{"type":46,"tag":72,"props":2799,"children":2800},{"style":79},[2801],{"type":51,"value":1703},{"type":46,"tag":72,"props":2803,"children":2804},{"style":79},[2805],{"type":51,"value":1167},{"type":46,"tag":72,"props":2807,"children":2808},{"class":74,"line":306},[2809,2814],{"type":46,"tag":72,"props":2810,"children":2811},{"style":339},[2812],{"type":51,"value":2813},"          return",{"type":46,"tag":72,"props":2815,"children":2816},{"style":121},[2817],{"type":51,"value":2818}," options\n",{"type":46,"tag":72,"props":2820,"children":2821},{"class":74,"line":1236},[2822],{"type":46,"tag":72,"props":2823,"children":2824},{"style":79},[2825],{"type":51,"value":2214},{"type":46,"tag":72,"props":2827,"children":2828},{"class":74,"line":1938},[2829,2834],{"type":46,"tag":72,"props":2830,"children":2831},{"style":79},[2832],{"type":51,"value":2833},"      }",{"type":46,"tag":72,"props":2835,"children":2836},{"style":85},[2837],{"type":51,"value":1247},{"type":46,"tag":72,"props":2839,"children":2840},{"class":74,"line":1967},[2841],{"type":46,"tag":72,"props":2842,"children":2843},{"emptyLinePlaceholder":169},[2844],{"type":51,"value":172},{"type":46,"tag":72,"props":2846,"children":2847},{"class":74,"line":1976},[2848],{"type":46,"tag":72,"props":2849,"children":2850},{"style":106},[2851],{"type":51,"value":2852},"      // call client RPC functions\n",{"type":46,"tag":72,"props":2854,"children":2855},{"class":74,"line":1989},[2856],{"type":46,"tag":72,"props":2857,"children":2858},{"style":106},[2859],{"type":51,"value":2860},"      // since it might have multiple clients connected, we use `broadcast` to call all of them\n",{"type":46,"tag":72,"props":2862,"children":2863},{"class":74,"line":2018},[2864,2869,2873,2877,2882,2886,2891,2895,2899,2904,2908],{"type":46,"tag":72,"props":2865,"children":2866},{"style":339},[2867],{"type":51,"value":2868},"      await",{"type":46,"tag":72,"props":2870,"children":2871},{"style":121},[2872],{"type":51,"value":2735},{"type":46,"tag":72,"props":2874,"children":2875},{"style":79},[2876],{"type":51,"value":415},{"type":46,"tag":72,"props":2878,"children":2879},{"style":121},[2880],{"type":51,"value":2881},"broadcast",{"type":46,"tag":72,"props":2883,"children":2884},{"style":79},[2885],{"type":51,"value":415},{"type":46,"tag":72,"props":2887,"children":2888},{"style":132},[2889],{"type":51,"value":2890},"showNotification",{"type":46,"tag":72,"props":2892,"children":2893},{"style":85},[2894],{"type":51,"value":1023},{"type":46,"tag":72,"props":2896,"children":2897},{"style":79},[2898],{"type":51,"value":1063},{"type":46,"tag":72,"props":2900,"children":2901},{"style":224},[2902],{"type":51,"value":2903},"Hello from My Module!",{"type":46,"tag":72,"props":2905,"children":2906},{"style":79},[2907],{"type":51,"value":1063},{"type":46,"tag":72,"props":2909,"children":2910},{"style":85},[2911],{"type":51,"value":1247},{"type":46,"tag":72,"props":2913,"children":2914},{"class":74,"line":2048},[2915,2920],{"type":46,"tag":72,"props":2916,"children":2917},{"style":79},[2918],{"type":51,"value":2919},"    }",{"type":46,"tag":72,"props":2921,"children":2922},{"style":85},[2923],{"type":51,"value":1247},{"type":46,"tag":72,"props":2925,"children":2926},{"class":74,"line":2070},[2927],{"type":46,"tag":72,"props":2928,"children":2929},{"style":79},[2930],{"type":51,"value":2931},"  }\n",{"type":46,"tag":72,"props":2933,"children":2934},{"class":74,"line":2100},[2935,2939],{"type":46,"tag":72,"props":2936,"children":2937},{"style":79},[2938],{"type":51,"value":1242},{"type":46,"tag":72,"props":2940,"children":2941},{"style":121},[2942],{"type":51,"value":1247},{"type":46,"tag":47,"props":2944,"children":2945},{},[2946],{"type":51,"value":2947},"And on the client side, you can do:",{"type":46,"tag":62,"props":2949,"children":2951},{"className":327,"code":2950,"language":329,"meta":40,"style":40},"import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'\nimport type { ClientFunctions, ServerFunctions } from './rpc-types'\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",[2952],{"type":46,"tag":54,"props":2953,"children":2954},{"__ignoreMap":40},[2955,2992,3039,3046,3073,3080,3117,3172,3196,3225,3232,3243,3250,3258,3296],{"type":46,"tag":72,"props":2956,"children":2957},{"class":74,"line":75},[2958,2962,2966,2971,2975,2979,2983,2988],{"type":46,"tag":72,"props":2959,"children":2960},{"style":339},[2961],{"type":51,"value":342},{"type":46,"tag":72,"props":2963,"children":2964},{"style":79},[2965],{"type":51,"value":347},{"type":46,"tag":72,"props":2967,"children":2968},{"style":121},[2969],{"type":51,"value":2970}," onDevtoolsClientConnected",{"type":46,"tag":72,"props":2972,"children":2973},{"style":79},[2974],{"type":51,"value":356},{"type":46,"tag":72,"props":2976,"children":2977},{"style":339},[2978],{"type":51,"value":361},{"type":46,"tag":72,"props":2980,"children":2981},{"style":79},[2982],{"type":51,"value":366},{"type":46,"tag":72,"props":2984,"children":2985},{"style":224},[2986],{"type":51,"value":2987},"@nuxt/devtools-kit/iframe-client",{"type":46,"tag":72,"props":2989,"children":2990},{"style":79},[2991],{"type":51,"value":376},{"type":46,"tag":72,"props":2993,"children":2994},{"class":74,"line":102},[2995,2999,3003,3007,3011,3015,3019,3023,3027,3031,3035],{"type":46,"tag":72,"props":2996,"children":2997},{"style":339},[2998],{"type":51,"value":342},{"type":46,"tag":72,"props":3000,"children":3001},{"style":339},[3002],{"type":51,"value":2547},{"type":46,"tag":72,"props":3004,"children":3005},{"style":79},[3006],{"type":51,"value":347},{"type":46,"tag":72,"props":3008,"children":3009},{"style":121},[3010],{"type":51,"value":2394},{"type":46,"tag":72,"props":3012,"children":3013},{"style":79},[3014],{"type":51,"value":1298},{"type":46,"tag":72,"props":3016,"children":3017},{"style":121},[3018],{"type":51,"value":2342},{"type":46,"tag":72,"props":3020,"children":3021},{"style":79},[3022],{"type":51,"value":356},{"type":46,"tag":72,"props":3024,"children":3025},{"style":339},[3026],{"type":51,"value":361},{"type":46,"tag":72,"props":3028,"children":3029},{"style":79},[3030],{"type":51,"value":366},{"type":46,"tag":72,"props":3032,"children":3033},{"style":224},[3034],{"type":51,"value":2580},{"type":46,"tag":72,"props":3036,"children":3037},{"style":79},[3038],{"type":51,"value":376},{"type":46,"tag":72,"props":3040,"children":3041},{"class":74,"line":112},[3042],{"type":46,"tag":72,"props":3043,"children":3044},{"emptyLinePlaceholder":169},[3045],{"type":51,"value":172},{"type":46,"tag":72,"props":3047,"children":3048},{"class":74,"line":148},[3049,3053,3057,3061,3065,3069],{"type":46,"tag":72,"props":3050,"children":3051},{"style":91},[3052],{"type":51,"value":118},{"type":46,"tag":72,"props":3054,"children":3055},{"style":121},[3056],{"type":51,"value":2603},{"type":46,"tag":72,"props":3058,"children":3059},{"style":79},[3060],{"type":51,"value":129},{"type":46,"tag":72,"props":3062,"children":3063},{"style":79},[3064],{"type":51,"value":366},{"type":46,"tag":72,"props":3066,"children":3067},{"style":224},[3068],{"type":51,"value":2616},{"type":46,"tag":72,"props":3070,"children":3071},{"style":79},[3072],{"type":51,"value":376},{"type":46,"tag":72,"props":3074,"children":3075},{"class":74,"line":165},[3076],{"type":46,"tag":72,"props":3077,"children":3078},{"emptyLinePlaceholder":169},[3079],{"type":51,"value":172},{"type":46,"tag":72,"props":3081,"children":3082},{"class":74,"line":175},[3083,3088,3092,3096,3100,3105,3109,3113],{"type":46,"tag":72,"props":3084,"children":3085},{"style":132},[3086],{"type":51,"value":3087},"onDevtoolsClientConnected",{"type":46,"tag":72,"props":3089,"children":3090},{"style":121},[3091],{"type":51,"value":1023},{"type":46,"tag":72,"props":3093,"children":3094},{"style":91},[3095],{"type":51,"value":1688},{"type":46,"tag":72,"props":3097,"children":3098},{"style":79},[3099],{"type":51,"value":1303},{"type":46,"tag":72,"props":3101,"children":3102},{"style":1306},[3103],{"type":51,"value":3104},"client",{"type":46,"tag":72,"props":3106,"children":3107},{"style":79},[3108],{"type":51,"value":1314},{"type":46,"tag":72,"props":3110,"children":3111},{"style":91},[3112],{"type":51,"value":1319},{"type":46,"tag":72,"props":3114,"children":3115},{"style":79},[3116],{"type":51,"value":1167},{"type":46,"tag":72,"props":3118,"children":3119},{"class":74,"line":192},[3120,3125,3129,3133,3138,3142,3147,3151,3156,3160,3164,3168],{"type":46,"tag":72,"props":3121,"children":3122},{"style":91},[3123],{"type":51,"value":3124},"  const",{"type":46,"tag":72,"props":3126,"children":3127},{"style":121},[3128],{"type":51,"value":2735},{"type":46,"tag":72,"props":3130,"children":3131},{"style":79},[3132],{"type":51,"value":1668},{"type":46,"tag":72,"props":3134,"children":3135},{"style":121},[3136],{"type":51,"value":3137}," client",{"type":46,"tag":72,"props":3139,"children":3140},{"style":79},[3141],{"type":51,"value":415},{"type":46,"tag":72,"props":3143,"children":3144},{"style":121},[3145],{"type":51,"value":3146},"devtools",{"type":46,"tag":72,"props":3148,"children":3149},{"style":79},[3150],{"type":51,"value":415},{"type":46,"tag":72,"props":3152,"children":3153},{"style":132},[3154],{"type":51,"value":3155},"extendClientRpc",{"type":46,"tag":72,"props":3157,"children":3158},{"style":85},[3159],{"type":51,"value":1023},{"type":46,"tag":72,"props":3161,"children":3162},{"style":121},[3163],{"type":51,"value":2773},{"type":46,"tag":72,"props":3165,"children":3166},{"style":79},[3167],{"type":51,"value":1298},{"type":46,"tag":72,"props":3169,"children":3170},{"style":79},[3171],{"type":51,"value":1167},{"type":46,"tag":72,"props":3173,"children":3174},{"class":74,"line":206},[3175,3180,3184,3188,3192],{"type":46,"tag":72,"props":3176,"children":3177},{"style":85},[3178],{"type":51,"value":3179},"    showNotification",{"type":46,"tag":72,"props":3181,"children":3182},{"style":79},[3183],{"type":51,"value":1023},{"type":46,"tag":72,"props":3185,"children":3186},{"style":1306},[3187],{"type":51,"value":2415},{"type":46,"tag":72,"props":3189,"children":3190},{"style":79},[3191],{"type":51,"value":1314},{"type":46,"tag":72,"props":3193,"children":3194},{"style":79},[3195],{"type":51,"value":1167},{"type":46,"tag":72,"props":3197,"children":3198},{"class":74,"line":235},[3199,3204,3208,3213,3217,3221],{"type":46,"tag":72,"props":3200,"children":3201},{"style":121},[3202],{"type":51,"value":3203},"      console",{"type":46,"tag":72,"props":3205,"children":3206},{"style":79},[3207],{"type":51,"value":415},{"type":46,"tag":72,"props":3209,"children":3210},{"style":132},[3211],{"type":51,"value":3212},"log",{"type":46,"tag":72,"props":3214,"children":3215},{"style":85},[3216],{"type":51,"value":1023},{"type":46,"tag":72,"props":3218,"children":3219},{"style":121},[3220],{"type":51,"value":2415},{"type":46,"tag":72,"props":3222,"children":3223},{"style":85},[3224],{"type":51,"value":1247},{"type":46,"tag":72,"props":3226,"children":3227},{"class":74,"line":261},[3228],{"type":46,"tag":72,"props":3229,"children":3230},{"style":79},[3231],{"type":51,"value":1544},{"type":46,"tag":72,"props":3233,"children":3234},{"class":74,"line":270},[3235,3239],{"type":46,"tag":72,"props":3236,"children":3237},{"style":79},[3238],{"type":51,"value":1552},{"type":46,"tag":72,"props":3240,"children":3241},{"style":85},[3242],{"type":51,"value":1247},{"type":46,"tag":72,"props":3244,"children":3245},{"class":74,"line":279},[3246],{"type":46,"tag":72,"props":3247,"children":3248},{"emptyLinePlaceholder":169},[3249],{"type":51,"value":172},{"type":46,"tag":72,"props":3251,"children":3252},{"class":74,"line":288},[3253],{"type":46,"tag":72,"props":3254,"children":3255},{"style":106},[3256],{"type":51,"value":3257},"  // call server RPC functions\n",{"type":46,"tag":72,"props":3259,"children":3260},{"class":74,"line":306},[3261,3265,3270,3274,3279,3283,3287,3292],{"type":46,"tag":72,"props":3262,"children":3263},{"style":91},[3264],{"type":51,"value":3124},{"type":46,"tag":72,"props":3266,"children":3267},{"style":121},[3268],{"type":51,"value":3269}," options",{"type":46,"tag":72,"props":3271,"children":3272},{"style":79},[3273],{"type":51,"value":1668},{"type":46,"tag":72,"props":3275,"children":3276},{"style":339},[3277],{"type":51,"value":3278}," await",{"type":46,"tag":72,"props":3280,"children":3281},{"style":121},[3282],{"type":51,"value":2735},{"type":46,"tag":72,"props":3284,"children":3285},{"style":79},[3286],{"type":51,"value":415},{"type":46,"tag":72,"props":3288,"children":3289},{"style":132},[3290],{"type":51,"value":3291},"getMyModuleOptions",{"type":46,"tag":72,"props":3293,"children":3294},{"style":85},[3295],{"type":51,"value":2168},{"type":46,"tag":72,"props":3297,"children":3298},{"class":74,"line":1236},[3299,3303],{"type":46,"tag":72,"props":3300,"children":3301},{"style":79},[3302],{"type":51,"value":1242},{"type":46,"tag":72,"props":3304,"children":3305},{"style":121},[3306],{"type":51,"value":1247},{"type":46,"tag":417,"props":3308,"children":3310},{"id":3309},"trying-local-changes",[3311],{"type":51,"value":3312},"Trying Local Changes",{"type":46,"tag":47,"props":3314,"children":3315},{},[3316],{"type":51,"value":3317},"You can clone Nuxt DevTools repo and try your changes locally.",{"type":46,"tag":47,"props":3319,"children":3320},{},[3321,3322,3327],{"type":51,"value":2279},{"type":46,"tag":406,"props":3323,"children":3325},{"href":3324},"/development/contributing#trying-local-changes",[3326],{"type":51,"value":3312},{"type":51,"value":415},{"type":46,"tag":417,"props":3329,"children":3331},{"id":3330},"examples",[3332],{"type":51,"value":3333},"Examples",{"type":46,"tag":47,"props":3335,"children":3336},{},[3337],{"type":51,"value":3338},"Here are a few examples of how to integrate Nuxt DevTools in modules:",{"type":46,"tag":3340,"props":3341,"children":3342},"ul",{},[3343,3354,3364,3374,3384,3394],{"type":46,"tag":3344,"props":3345,"children":3346},"li",{},[3347],{"type":46,"tag":406,"props":3348,"children":3351},{"href":3349,"rel":3350},"https://github.com/nuxt/devtools/blob/main/packages/devtools/src/integrations/vscode.ts",[410],[3352],{"type":51,"value":3353},"Built-in VS Code integration with lazy initialize",{"type":46,"tag":3344,"props":3355,"children":3356},{},[3357],{"type":46,"tag":406,"props":3358,"children":3361},{"href":3359,"rel":3360},"https://github.com/vueuse/vueuse/blob/ce28cef154489c73abe308104bef8568594a9bcd/packages/nuxt/index.ts#L89-L99",[410],[3362],{"type":51,"value":3363},"VueUse adds a docs tab",{"type":46,"tag":3344,"props":3365,"children":3366},{},[3367],{"type":46,"tag":406,"props":3368,"children":3371},{"href":3369,"rel":3370},"https://github.com/unocss/unocss/blob/25021a751494e99e85cfd82cca3855cdf78f6a12/packages/nuxt/src/index.ts#L81-L94",[410],[3372],{"type":51,"value":3373},"UnoCSS Inspector",{"type":46,"tag":3344,"props":3375,"children":3376},{},[3377],{"type":46,"tag":406,"props":3378,"children":3381},{"href":3379,"rel":3380},"https://github.com/danielroe/nuxt-vitest/blob/7bac68d96f27dea6c30c198b7caaaf0b495574ab/packages/nuxt-vitest/src/module.ts#L139-L181",[410],[3382],{"type":51,"value":3383},"Nuxt Vitest runner",{"type":46,"tag":3344,"props":3385,"children":3386},{},[3387],{"type":46,"tag":406,"props":3388,"children":3391},{"href":3389,"rel":3390},"https://github.com/harlan-zw/nuxt-og-image/blob/main/src/module.ts#L136",[410],[3392],{"type":51,"value":3393},"Nuxt OG Image Playground",{"type":46,"tag":3344,"props":3395,"children":3396},{},[3397],{"type":46,"tag":406,"props":3398,"children":3401},{"href":3399,"rel":3400},"https://github.com/arashsheyda/nuxt-mongoose/blob/main/src/devtools.ts",[410],[3402],{"type":51,"value":3403},"Nuxt Mongoose",{"type":46,"tag":383,"props":3405,"children":3406},{},[3407],{"type":51,"value":387},{"title":40,"searchDepth":102,"depth":102,"links":3409},[3410,3411,3412,3413,3414,3415,3416],{"id":887,"depth":102,"text":890},{"id":946,"depth":102,"text":949},{"id":1580,"depth":102,"text":1583},{"id":2271,"depth":102,"text":2274},{"id":2289,"depth":102,"text":2292},{"id":3309,"depth":102,"text":3312},{"id":3330,"depth":102,"text":3333},"content:2.module:0.guide.md","2.module/0.guide.md",1702058987185]