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