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