[{"data":1,"prerenderedAt":3346},["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,867],{"_path":13,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":12,"description":389,"body":390,"_type":382,"_id":865,"_source":384,"_file":866,"_extension":386},"Discover all the features the Nuxt Devtools can offer.",{"type":43,"children":391,"toc":839},[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,648,660,666,671,675,681,686,690,696,713,717,723,728,734,776,783,802,807,824,829],{"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},"vs-code-server",[629],{"type":51,"value":630},"VS Code Server",{"type":46,"tag":47,"props":632,"children":633},{},[634],{"type":51,"value":635},"The VS Code Server integration in Nuxt DevTools enhances your development experience by bringing the power of Visual Studio Code directly into your browser. With this feature, you can seamlessly edit and debug your Nuxt projects using the familiar interface of VS Code.",{"type":46,"tag":47,"props":637,"children":638},{},[639,641],{"type":51,"value":640},"To get started with VS Code Server, follow the installation instructions provided by ",{"type":46,"tag":398,"props":642,"children":645},{"href":643,"rel":644},"https://coder.com/docs/code-server/latest/install",[402],[646],{"type":51,"value":647},"Code Server Installation Guide",{"type":46,"tag":47,"props":649,"children":650},{},[651,653],{"type":51,"value":652},"For more information on the benefits and features of VS Code Server, refer to ",{"type":46,"tag":398,"props":654,"children":657},{"href":655,"rel":656},"https://code.visualstudio.com/blogs/2022/07/07/vscode-server",[402],[658],{"type":51,"value":659},"the official Visual Studio Code blog",{"type":46,"tag":409,"props":661,"children":663},{"id":662},"hooks",[664],{"type":51,"value":665},"Hooks",{"type":46,"tag":47,"props":667,"children":668},{},[669],{"type":51,"value":670},"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":672,"children":674},{"width":423,"src":673},"https://user-images.githubusercontent.com/11247099/217670815-80ec0ec3-7df1-4a07-96fb-4161fb6562a7.png",[],{"type":46,"tag":409,"props":676,"children":678},{"id":677},"virtual-files",[679],{"type":51,"value":680},"Virtual Files",{"type":46,"tag":47,"props":682,"children":683},{},[684],{"type":51,"value":685},"Virtual Files tab shows the virtual files generated by Nuxt to support the conventions.",{"type":46,"tag":421,"props":687,"children":689},{"width":423,"src":688},"https://user-images.githubusercontent.com/11247099/217670817-abb0315a-6d92-4c5e-a4da-2327f22e0e8b.png",[],{"type":46,"tag":409,"props":691,"children":693},{"id":692},"inspect",[694],{"type":51,"value":695},"Inspect",{"type":46,"tag":47,"props":697,"children":698},{},[699,701,711],{"type":51,"value":700},"Inspect expose the ",{"type":46,"tag":398,"props":702,"children":705},{"href":703,"rel":704},"https://github.com/antfu/vite-plugin-inspect",[402],[706],{"type":46,"tag":54,"props":707,"children":708},{"className":40},[709],{"type":51,"value":710},"vite-plugin-inspect",{"type":51,"value":712}," integration, allowing you to inspect transformation steps of Vite.",{"type":46,"tag":421,"props":714,"children":716},{"width":423,"src":715},"https://user-images.githubusercontent.com/11247099/217670818-77f91135-7318-462e-9148-4ad504c82555.png",[],{"type":46,"tag":409,"props":718,"children":720},{"id":719},"settings",[721],{"type":51,"value":722},"Settings",{"type":46,"tag":47,"props":724,"children":725},{},[726],{"type":51,"value":727},"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":729,"children":731},{"id":730},"nuxt-icon",[732],{"type":51,"value":733},"Nuxt Icon",{"type":46,"tag":47,"props":735,"children":736},{},[737,739,744,746,750,751,756,757,762,763,768,769,774],{"type":51,"value":738},"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":740,"children":741},{"className":40},[742],{"type":51,"value":743},"Toggle Theme",{"type":51,"value":745},", ",{"type":46,"tag":54,"props":747,"children":748},{"className":40},[749],{"type":51,"value":722},{"type":51,"value":745},{"type":46,"tag":54,"props":752,"children":753},{"className":40},[754],{"type":51,"value":755},"Split Screen",{"type":51,"value":745},{"type":46,"tag":54,"props":758,"children":759},{"className":40},[760],{"type":51,"value":761},"Popup",{"type":51,"value":745},{"type":46,"tag":54,"props":764,"children":765},{"className":40},[766],{"type":51,"value":767},"Refresh Data",{"type":51,"value":745},{"type":46,"tag":54,"props":770,"children":771},{"className":40},[772],{"type":51,"value":773},"Refresh Page",{"type":51,"value":775},". you can simply click on it and see the them yourself.",{"type":46,"tag":777,"props":778,"children":780},"h3",{"id":779},"command-palette",[781],{"type":51,"value":782},"Command Palette",{"type":46,"tag":47,"props":784,"children":785},{},[786,788,793,795,800],{"type":51,"value":787},"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":789,"children":790},{"className":40},[791],{"type":51,"value":792},"Ctrl+Shift+K",{"type":51,"value":794}," or ",{"type":46,"tag":54,"props":796,"children":797},{"className":40},[798],{"type":51,"value":799},"Cmd+Shift+K",{"type":51,"value":801}," shortcut.",{"type":46,"tag":777,"props":803,"children":805},{"id":804},"split-screen",[806],{"type":51,"value":755},{"type":46,"tag":47,"props":808,"children":809},{},[810,812,816,818,822],{"type":51,"value":811},"Split Screen is a useful feature to use multiple tabs at the same time. You can open it from ",{"type":46,"tag":54,"props":813,"children":814},{"className":40},[815],{"type":51,"value":782},{"type":51,"value":817}," or by clicking the ",{"type":46,"tag":54,"props":819,"children":820},{"className":40},[821],{"type":51,"value":733},{"type":51,"value":823}," in the top left corner of the DevTools and activate it from there.",{"type":46,"tag":777,"props":825,"children":827},{"id":826},"popup",[828],{"type":51,"value":761},{"type":46,"tag":47,"props":830,"children":831},{},[832,834,838],{"type":51,"value":833},"Popup is very useful for those who has a second screen, you can open it by clicking the ",{"type":46,"tag":54,"props":835,"children":836},{"className":40},[837],{"type":51,"value":733},{"type":51,"value":823},{"title":40,"searchDepth":102,"depth":102,"links":840},[841,842,843,844,845,846,847,848,849,850,851,852,853,854,855,856,857,858,859,860],{"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":662,"depth":102,"text":665},{"id":677,"depth":102,"text":680},{"id":692,"depth":102,"text":695},{"id":719,"depth":102,"text":722},{"id":730,"depth":102,"text":733,"children":861},[862,863,864],{"id":779,"depth":112,"text":782},{"id":804,"depth":112,"text":755},{"id":826,"depth":112,"text":761},"content:1.guide:1.features.md","1.guide/1.features.md",{"_path":23,"_dir":868,"_draft":39,"_partial":39,"_locale":40,"title":22,"description":869,"body":870,"_type":382,"_id":3344,"_source":384,"_file":3345,"_extension":386},"module","Add your own modules integration to the Nuxt DevTools.",{"type":43,"children":871,"toc":3335},[872,877,883,888,931,936,942,947,952,1234,1239,1552,1562,1568,1573,2210,2222,2240,2246,2258,2264,2269,2274,2405,2410,2893,2898,3244,3250,3255,3265,3271,3276,3331],{"type":46,"tag":47,"props":873,"children":874},{},[875],{"type":51,"value":876},"Nuxt DevTools is designed to be extensible. You can add your own modules integration to the DevTools.",{"type":46,"tag":409,"props":878,"children":880},{"id":879},"starter-template",[881],{"type":51,"value":882},"Starter Template",{"type":46,"tag":47,"props":884,"children":885},{},[886],{"type":51,"value":887},"If you want to try integrating with Nuxt DevTools, you can run",{"type":46,"tag":62,"props":889,"children":893},{"className":890,"code":891,"language":892,"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",[894],{"type":46,"tag":54,"props":895,"children":896},{"__ignoreMap":40},[897],{"type":46,"tag":72,"props":898,"children":899},{"class":74,"line":75},[900,906,911,916,921,926],{"type":46,"tag":72,"props":901,"children":903},{"style":902},"color:#FFCB6B;--shiki-dark:#FFCB6B;--shiki-light:#E2931D",[904],{"type":51,"value":905},"npx",{"type":46,"tag":72,"props":907,"children":908},{"style":218},[909],{"type":51,"value":910}," nuxi",{"type":46,"tag":72,"props":912,"children":913},{"style":218},[914],{"type":51,"value":915}," init",{"type":46,"tag":72,"props":917,"children":918},{"style":218},[919],{"type":51,"value":920}," my-module",{"type":46,"tag":72,"props":922,"children":923},{"style":218},[924],{"type":51,"value":925}," -t",{"type":46,"tag":72,"props":927,"children":928},{"style":218},[929],{"type":51,"value":930}," module-devtools",{"type":46,"tag":47,"props":932,"children":933},{},[934],{"type":51,"value":935},"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":937,"children":939},{"id":938},"contributing-to-view",[940],{"type":51,"value":941},"Contributing to View",{"type":46,"tag":47,"props":943,"children":944},{},[945],{"type":51,"value":946},"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":948,"children":949},{},[950],{"type":51,"value":951},"You can use the utility kit provided by Nuxt DevTools to register your custom tab:",{"type":46,"tag":62,"props":953,"children":955},{"className":319,"code":954,"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",[956],{"type":46,"tag":54,"props":957,"children":958},{"__ignoreMap":40},[959,996,999,1017,1025,1056,1064,1093,1101,1130,1138,1154,1183,1212,1220],{"type":46,"tag":72,"props":960,"children":961},{"class":74,"line":75},[962,966,970,975,979,983,987,992],{"type":46,"tag":72,"props":963,"children":964},{"style":331},[965],{"type":51,"value":334},{"type":46,"tag":72,"props":967,"children":968},{"style":79},[969],{"type":51,"value":339},{"type":46,"tag":72,"props":971,"children":972},{"style":121},[973],{"type":51,"value":974}," addCustomTab",{"type":46,"tag":72,"props":976,"children":977},{"style":79},[978],{"type":51,"value":348},{"type":46,"tag":72,"props":980,"children":981},{"style":331},[982],{"type":51,"value":353},{"type":46,"tag":72,"props":984,"children":985},{"style":79},[986],{"type":51,"value":358},{"type":46,"tag":72,"props":988,"children":989},{"style":218},[990],{"type":51,"value":991},"@nuxt/devtools-kit",{"type":46,"tag":72,"props":993,"children":994},{"style":79},[995],{"type":51,"value":368},{"type":46,"tag":72,"props":997,"children":998},{"class":74,"line":102},[],{"type":46,"tag":72,"props":1000,"children":1001},{"class":74,"line":112},[1002,1007,1012],{"type":46,"tag":72,"props":1003,"children":1004},{"style":132},[1005],{"type":51,"value":1006},"addCustomTab",{"type":46,"tag":72,"props":1008,"children":1009},{"style":121},[1010],{"type":51,"value":1011},"(",{"type":46,"tag":72,"props":1013,"children":1014},{"style":79},[1015],{"type":51,"value":1016},"{",{"type":46,"tag":72,"props":1018,"children":1019},{"class":74,"line":148},[1020],{"type":46,"tag":72,"props":1021,"children":1022},{"style":106},[1023],{"type":51,"value":1024}," // unique identifier",{"type":46,"tag":72,"props":1026,"children":1027},{"class":74,"line":165},[1028,1033,1038,1042,1047,1051],{"type":46,"tag":72,"props":1029,"children":1030},{"style":85},[1031],{"type":51,"value":1032}," name",{"type":46,"tag":72,"props":1034,"children":1035},{"style":79},[1036],{"type":51,"value":1037},":",{"type":46,"tag":72,"props":1039,"children":1040},{"style":79},[1041],{"type":51,"value":358},{"type":46,"tag":72,"props":1043,"children":1044},{"style":218},[1045],{"type":51,"value":1046},"my-module",{"type":46,"tag":72,"props":1048,"children":1049},{"style":79},[1050],{"type":51,"value":368},{"type":46,"tag":72,"props":1052,"children":1053},{"style":79},[1054],{"type":51,"value":1055},",",{"type":46,"tag":72,"props":1057,"children":1058},{"class":74,"line":169},[1059],{"type":46,"tag":72,"props":1060,"children":1061},{"style":106},[1062],{"type":51,"value":1063}," // title to display in the tab",{"type":46,"tag":72,"props":1065,"children":1066},{"class":74,"line":186},[1067,1072,1076,1080,1085,1089],{"type":46,"tag":72,"props":1068,"children":1069},{"style":85},[1070],{"type":51,"value":1071}," title",{"type":46,"tag":72,"props":1073,"children":1074},{"style":79},[1075],{"type":51,"value":1037},{"type":46,"tag":72,"props":1077,"children":1078},{"style":79},[1079],{"type":51,"value":358},{"type":46,"tag":72,"props":1081,"children":1082},{"style":218},[1083],{"type":51,"value":1084},"My Module",{"type":46,"tag":72,"props":1086,"children":1087},{"style":79},[1088],{"type":51,"value":368},{"type":46,"tag":72,"props":1090,"children":1091},{"style":79},[1092],{"type":51,"value":1055},{"type":46,"tag":72,"props":1094,"children":1095},{"class":74,"line":200},[1096],{"type":46,"tag":72,"props":1097,"children":1098},{"style":106},[1099],{"type":51,"value":1100}," // any icon from Iconify, or a URL to an image",{"type":46,"tag":72,"props":1102,"children":1103},{"class":74,"line":228},[1104,1109,1113,1117,1122,1126],{"type":46,"tag":72,"props":1105,"children":1106},{"style":85},[1107],{"type":51,"value":1108}," icon",{"type":46,"tag":72,"props":1110,"children":1111},{"style":79},[1112],{"type":51,"value":1037},{"type":46,"tag":72,"props":1114,"children":1115},{"style":79},[1116],{"type":51,"value":358},{"type":46,"tag":72,"props":1118,"children":1119},{"style":218},[1120],{"type":51,"value":1121},"carbon:apps",{"type":46,"tag":72,"props":1123,"children":1124},{"style":79},[1125],{"type":51,"value":368},{"type":46,"tag":72,"props":1127,"children":1128},{"style":79},[1129],{"type":51,"value":1055},{"type":46,"tag":72,"props":1131,"children":1132},{"class":74,"line":254},[1133],{"type":46,"tag":72,"props":1134,"children":1135},{"style":106},[1136],{"type":51,"value":1137}," // iframe view",{"type":46,"tag":72,"props":1139,"children":1140},{"class":74,"line":263},[1141,1146,1150],{"type":46,"tag":72,"props":1142,"children":1143},{"style":85},[1144],{"type":51,"value":1145}," view",{"type":46,"tag":72,"props":1147,"children":1148},{"style":79},[1149],{"type":51,"value":1037},{"type":46,"tag":72,"props":1151,"children":1152},{"style":79},[1153],{"type":51,"value":339},{"type":46,"tag":72,"props":1155,"children":1156},{"class":74,"line":272},[1157,1162,1166,1170,1175,1179],{"type":46,"tag":72,"props":1158,"children":1159},{"style":85},[1160],{"type":51,"value":1161}," type",{"type":46,"tag":72,"props":1163,"children":1164},{"style":79},[1165],{"type":51,"value":1037},{"type":46,"tag":72,"props":1167,"children":1168},{"style":79},[1169],{"type":51,"value":358},{"type":46,"tag":72,"props":1171,"children":1172},{"style":218},[1173],{"type":51,"value":1174},"iframe",{"type":46,"tag":72,"props":1176,"children":1177},{"style":79},[1178],{"type":51,"value":368},{"type":46,"tag":72,"props":1180,"children":1181},{"style":79},[1182],{"type":51,"value":1055},{"type":46,"tag":72,"props":1184,"children":1185},{"class":74,"line":281},[1186,1191,1195,1199,1204,1208],{"type":46,"tag":72,"props":1187,"children":1188},{"style":85},[1189],{"type":51,"value":1190}," src",{"type":46,"tag":72,"props":1192,"children":1193},{"style":79},[1194],{"type":51,"value":1037},{"type":46,"tag":72,"props":1196,"children":1197},{"style":79},[1198],{"type":51,"value":358},{"type":46,"tag":72,"props":1200,"children":1201},{"style":218},[1202],{"type":51,"value":1203},"/url-to-your-module-view",{"type":46,"tag":72,"props":1205,"children":1206},{"style":79},[1207],{"type":51,"value":368},{"type":46,"tag":72,"props":1209,"children":1210},{"style":79},[1211],{"type":51,"value":1055},{"type":46,"tag":72,"props":1213,"children":1214},{"class":74,"line":298},[1215],{"type":46,"tag":72,"props":1216,"children":1217},{"style":79},[1218],{"type":51,"value":1219}," },",{"type":46,"tag":72,"props":1221,"children":1223},{"class":74,"line":1222},15,[1224,1229],{"type":46,"tag":72,"props":1225,"children":1226},{"style":79},[1227],{"type":51,"value":1228},"}",{"type":46,"tag":72,"props":1230,"children":1231},{"style":121},[1232],{"type":51,"value":1233},")",{"type":46,"tag":47,"props":1235,"children":1236},{},[1237],{"type":51,"value":1238},"Or if you prefer to use Nuxt hooks:",{"type":46,"tag":62,"props":1240,"children":1242},{"className":319,"code":1241,"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",[1243],{"type":46,"tag":54,"props":1244,"children":1245},{"__ignoreMap":40},[1246,1308,1333,1341,1369,1377,1405,1413,1441,1449,1465,1493,1521,1529,1541],{"type":46,"tag":72,"props":1247,"children":1248},{"class":74,"line":75},[1249,1254,1258,1263,1267,1271,1276,1280,1284,1289,1295,1299,1304],{"type":46,"tag":72,"props":1250,"children":1251},{"style":121},[1252],{"type":51,"value":1253},"nuxt",{"type":46,"tag":72,"props":1255,"children":1256},{"style":79},[1257],{"type":51,"value":407},{"type":46,"tag":72,"props":1259,"children":1260},{"style":132},[1261],{"type":51,"value":1262},"hook",{"type":46,"tag":72,"props":1264,"children":1265},{"style":121},[1266],{"type":51,"value":1011},{"type":46,"tag":72,"props":1268,"children":1269},{"style":79},[1270],{"type":51,"value":368},{"type":46,"tag":72,"props":1272,"children":1273},{"style":218},[1274],{"type":51,"value":1275},"devtools:customTabs",{"type":46,"tag":72,"props":1277,"children":1278},{"style":79},[1279],{"type":51,"value":368},{"type":46,"tag":72,"props":1281,"children":1282},{"style":79},[1283],{"type":51,"value":1055},{"type":46,"tag":72,"props":1285,"children":1286},{"style":79},[1287],{"type":51,"value":1288}," (",{"type":46,"tag":72,"props":1290,"children":1292},{"style":1291},"color:#EEFFFF;--shiki-dark:#BABED8;--shiki-light:#90A4AE;font-style:italic;--shiki-dark-font-style:italic;--shiki-light-font-style:italic",[1293],{"type":51,"value":1294},"tabs",{"type":46,"tag":72,"props":1296,"children":1297},{"style":79},[1298],{"type":51,"value":1233},{"type":46,"tag":72,"props":1300,"children":1301},{"style":91},[1302],{"type":51,"value":1303}," =>",{"type":46,"tag":72,"props":1305,"children":1306},{"style":79},[1307],{"type":51,"value":339},{"type":46,"tag":72,"props":1309,"children":1310},{"class":74,"line":102},[1311,1316,1320,1325,1329],{"type":46,"tag":72,"props":1312,"children":1313},{"style":121},[1314],{"type":51,"value":1315}," tabs",{"type":46,"tag":72,"props":1317,"children":1318},{"style":79},[1319],{"type":51,"value":407},{"type":46,"tag":72,"props":1321,"children":1322},{"style":132},[1323],{"type":51,"value":1324},"push",{"type":46,"tag":72,"props":1326,"children":1327},{"style":85},[1328],{"type":51,"value":1011},{"type":46,"tag":72,"props":1330,"children":1331},{"style":79},[1332],{"type":51,"value":1016},{"type":46,"tag":72,"props":1334,"children":1335},{"class":74,"line":112},[1336],{"type":46,"tag":72,"props":1337,"children":1338},{"style":106},[1339],{"type":51,"value":1340}," // unique identifier",{"type":46,"tag":72,"props":1342,"children":1343},{"class":74,"line":148},[1344,1349,1353,1357,1361,1365],{"type":46,"tag":72,"props":1345,"children":1346},{"style":85},[1347],{"type":51,"value":1348}," name",{"type":46,"tag":72,"props":1350,"children":1351},{"style":79},[1352],{"type":51,"value":1037},{"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":1046},{"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":1055},{"type":46,"tag":72,"props":1370,"children":1371},{"class":74,"line":165},[1372],{"type":46,"tag":72,"props":1373,"children":1374},{"style":106},[1375],{"type":51,"value":1376}," // title to display in the tab",{"type":46,"tag":72,"props":1378,"children":1379},{"class":74,"line":169},[1380,1385,1389,1393,1397,1401],{"type":46,"tag":72,"props":1381,"children":1382},{"style":85},[1383],{"type":51,"value":1384}," title",{"type":46,"tag":72,"props":1386,"children":1387},{"style":79},[1388],{"type":51,"value":1037},{"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":1084},{"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":1055},{"type":46,"tag":72,"props":1406,"children":1407},{"class":74,"line":186},[1408],{"type":46,"tag":72,"props":1409,"children":1410},{"style":106},[1411],{"type":51,"value":1412}," // any icon from Iconify, or a URL to an image",{"type":46,"tag":72,"props":1414,"children":1415},{"class":74,"line":200},[1416,1421,1425,1429,1433,1437],{"type":46,"tag":72,"props":1417,"children":1418},{"style":85},[1419],{"type":51,"value":1420}," icon",{"type":46,"tag":72,"props":1422,"children":1423},{"style":79},[1424],{"type":51,"value":1037},{"type":46,"tag":72,"props":1426,"children":1427},{"style":79},[1428],{"type":51,"value":358},{"type":46,"tag":72,"props":1430,"children":1431},{"style":218},[1432],{"type":51,"value":1121},{"type":46,"tag":72,"props":1434,"children":1435},{"style":79},[1436],{"type":51,"value":368},{"type":46,"tag":72,"props":1438,"children":1439},{"style":79},[1440],{"type":51,"value":1055},{"type":46,"tag":72,"props":1442,"children":1443},{"class":74,"line":228},[1444],{"type":46,"tag":72,"props":1445,"children":1446},{"style":106},[1447],{"type":51,"value":1448}," // iframe view",{"type":46,"tag":72,"props":1450,"children":1451},{"class":74,"line":254},[1452,1457,1461],{"type":46,"tag":72,"props":1453,"children":1454},{"style":85},[1455],{"type":51,"value":1456}," view",{"type":46,"tag":72,"props":1458,"children":1459},{"style":79},[1460],{"type":51,"value":1037},{"type":46,"tag":72,"props":1462,"children":1463},{"style":79},[1464],{"type":51,"value":339},{"type":46,"tag":72,"props":1466,"children":1467},{"class":74,"line":263},[1468,1473,1477,1481,1485,1489],{"type":46,"tag":72,"props":1469,"children":1470},{"style":85},[1471],{"type":51,"value":1472}," type",{"type":46,"tag":72,"props":1474,"children":1475},{"style":79},[1476],{"type":51,"value":1037},{"type":46,"tag":72,"props":1478,"children":1479},{"style":79},[1480],{"type":51,"value":358},{"type":46,"tag":72,"props":1482,"children":1483},{"style":218},[1484],{"type":51,"value":1174},{"type":46,"tag":72,"props":1486,"children":1487},{"style":79},[1488],{"type":51,"value":368},{"type":46,"tag":72,"props":1490,"children":1491},{"style":79},[1492],{"type":51,"value":1055},{"type":46,"tag":72,"props":1494,"children":1495},{"class":74,"line":272},[1496,1501,1505,1509,1513,1517],{"type":46,"tag":72,"props":1497,"children":1498},{"style":85},[1499],{"type":51,"value":1500}," src",{"type":46,"tag":72,"props":1502,"children":1503},{"style":79},[1504],{"type":51,"value":1037},{"type":46,"tag":72,"props":1506,"children":1507},{"style":79},[1508],{"type":51,"value":358},{"type":46,"tag":72,"props":1510,"children":1511},{"style":218},[1512],{"type":51,"value":1203},{"type":46,"tag":72,"props":1514,"children":1515},{"style":79},[1516],{"type":51,"value":368},{"type":46,"tag":72,"props":1518,"children":1519},{"style":79},[1520],{"type":51,"value":1055},{"type":46,"tag":72,"props":1522,"children":1523},{"class":74,"line":281},[1524],{"type":46,"tag":72,"props":1525,"children":1526},{"style":79},[1527],{"type":51,"value":1528}," },",{"type":46,"tag":72,"props":1530,"children":1531},{"class":74,"line":298},[1532,1537],{"type":46,"tag":72,"props":1533,"children":1534},{"style":79},[1535],{"type":51,"value":1536}," }",{"type":46,"tag":72,"props":1538,"children":1539},{"style":85},[1540],{"type":51,"value":1233},{"type":46,"tag":72,"props":1542,"children":1543},{"class":74,"line":1222},[1544,1548],{"type":46,"tag":72,"props":1545,"children":1546},{"style":79},[1547],{"type":51,"value":1228},{"type":46,"tag":72,"props":1549,"children":1550},{"style":121},[1551],{"type":51,"value":1233},{"type":46,"tag":47,"props":1553,"children":1554},{},[1555,1556,1561],{"type":51,"value":617},{"type":46,"tag":398,"props":1557,"children":1558},{"href":26},[1559],{"type":51,"value":1560},"DevTools Utility Kit",{"type":51,"value":407},{"type":46,"tag":409,"props":1563,"children":1565},{"id":1564},"lazy-service-launching",[1566],{"type":51,"value":1567},"Lazy Service Launching",{"type":46,"tag":47,"props":1569,"children":1570},{},[1571],{"type":51,"value":1572},"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":1574,"children":1576},{"className":319,"code":1575,"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",[1577],{"type":46,"tag":54,"props":1578,"children":1579},{"__ignoreMap":40},[1580,1603,1656,1659,1686,1694,1711,1718,1721,1776,1799,1826,1853,1869,1881,1909,1938,1947,1960,1989,2019,2041,2071,2093,2120,2141,2154,2163,2177,2186,2198],{"type":46,"tag":72,"props":1581,"children":1582},{"class":74,"line":75},[1583,1588,1593,1597],{"type":46,"tag":72,"props":1584,"children":1585},{"style":91},[1586],{"type":51,"value":1587},"let",{"type":46,"tag":72,"props":1589,"children":1590},{"style":121},[1591],{"type":51,"value":1592}," isReady ",{"type":46,"tag":72,"props":1594,"children":1595},{"style":79},[1596],{"type":51,"value":129},{"type":46,"tag":72,"props":1598,"children":1600},{"style":1599},"color:#FF9CAC;--shiki-dark:#FF9CAC;--shiki-light:#FF5370",[1601],{"type":51,"value":1602}," false",{"type":46,"tag":72,"props":1604,"children":1605},{"class":74,"line":102},[1606,1610,1615,1619,1624,1628,1633,1637,1642,1647,1652],{"type":46,"tag":72,"props":1607,"children":1608},{"style":91},[1609],{"type":51,"value":118},{"type":46,"tag":72,"props":1611,"children":1612},{"style":121},[1613],{"type":51,"value":1614}," promise",{"type":46,"tag":72,"props":1616,"children":1617},{"style":79},[1618],{"type":51,"value":1037},{"type":46,"tag":72,"props":1620,"children":1621},{"style":902},[1622],{"type":51,"value":1623}," Promise",{"type":46,"tag":72,"props":1625,"children":1626},{"style":79},[1627],{"type":51,"value":82},{"type":46,"tag":72,"props":1629,"children":1630},{"style":902},[1631],{"type":51,"value":1632},"any",{"type":46,"tag":72,"props":1634,"children":1635},{"style":79},[1636],{"type":51,"value":99},{"type":46,"tag":72,"props":1638,"children":1639},{"style":79},[1640],{"type":51,"value":1641}," |",{"type":46,"tag":72,"props":1643,"children":1644},{"style":902},[1645],{"type":51,"value":1646}," null",{"type":46,"tag":72,"props":1648,"children":1649},{"style":79},[1650],{"type":51,"value":1651}," =",{"type":46,"tag":72,"props":1653,"children":1654},{"style":79},[1655],{"type":51,"value":1646},{"type":46,"tag":72,"props":1657,"children":1658},{"class":74,"line":112},[],{"type":46,"tag":72,"props":1660,"children":1661},{"class":74,"line":148},[1662,1667,1672,1677,1682],{"type":46,"tag":72,"props":1663,"children":1664},{"style":91},[1665],{"type":51,"value":1666},"async",{"type":46,"tag":72,"props":1668,"children":1669},{"style":91},[1670],{"type":51,"value":1671}," function",{"type":46,"tag":72,"props":1673,"children":1674},{"style":132},[1675],{"type":51,"value":1676}," launchService",{"type":46,"tag":72,"props":1678,"children":1679},{"style":79},[1680],{"type":51,"value":1681},"()",{"type":46,"tag":72,"props":1683,"children":1684},{"style":79},[1685],{"type":51,"value":339},{"type":46,"tag":72,"props":1687,"children":1688},{"class":74,"line":165},[1689],{"type":46,"tag":72,"props":1690,"children":1691},{"style":106},[1692],{"type":51,"value":1693}," // ...launch your service",{"type":46,"tag":72,"props":1695,"children":1696},{"class":74,"line":169},[1697,1702,1706],{"type":46,"tag":72,"props":1698,"children":1699},{"style":121},[1700],{"type":51,"value":1701}," isReady",{"type":46,"tag":72,"props":1703,"children":1704},{"style":79},[1705],{"type":51,"value":1651},{"type":46,"tag":72,"props":1707,"children":1708},{"style":1599},[1709],{"type":51,"value":1710}," true",{"type":46,"tag":72,"props":1712,"children":1713},{"class":74,"line":186},[1714],{"type":46,"tag":72,"props":1715,"children":1716},{"style":79},[1717],{"type":51,"value":1228},{"type":46,"tag":72,"props":1719,"children":1720},{"class":74,"line":200},[],{"type":46,"tag":72,"props":1722,"children":1723},{"class":74,"line":228},[1724,1728,1732,1736,1740,1744,1748,1752,1756,1760,1764,1768,1772],{"type":46,"tag":72,"props":1725,"children":1726},{"style":121},[1727],{"type":51,"value":1253},{"type":46,"tag":72,"props":1729,"children":1730},{"style":79},[1731],{"type":51,"value":407},{"type":46,"tag":72,"props":1733,"children":1734},{"style":132},[1735],{"type":51,"value":1262},{"type":46,"tag":72,"props":1737,"children":1738},{"style":121},[1739],{"type":51,"value":1011},{"type":46,"tag":72,"props":1741,"children":1742},{"style":79},[1743],{"type":51,"value":368},{"type":46,"tag":72,"props":1745,"children":1746},{"style":218},[1747],{"type":51,"value":1275},{"type":46,"tag":72,"props":1749,"children":1750},{"style":79},[1751],{"type":51,"value":368},{"type":46,"tag":72,"props":1753,"children":1754},{"style":79},[1755],{"type":51,"value":1055},{"type":46,"tag":72,"props":1757,"children":1758},{"style":79},[1759],{"type":51,"value":1288},{"type":46,"tag":72,"props":1761,"children":1762},{"style":1291},[1763],{"type":51,"value":1294},{"type":46,"tag":72,"props":1765,"children":1766},{"style":79},[1767],{"type":51,"value":1233},{"type":46,"tag":72,"props":1769,"children":1770},{"style":91},[1771],{"type":51,"value":1303},{"type":46,"tag":72,"props":1773,"children":1774},{"style":79},[1775],{"type":51,"value":339},{"type":46,"tag":72,"props":1777,"children":1778},{"class":74,"line":254},[1779,1783,1787,1791,1795],{"type":46,"tag":72,"props":1780,"children":1781},{"style":121},[1782],{"type":51,"value":1315},{"type":46,"tag":72,"props":1784,"children":1785},{"style":79},[1786],{"type":51,"value":407},{"type":46,"tag":72,"props":1788,"children":1789},{"style":132},[1790],{"type":51,"value":1324},{"type":46,"tag":72,"props":1792,"children":1793},{"style":85},[1794],{"type":51,"value":1011},{"type":46,"tag":72,"props":1796,"children":1797},{"style":79},[1798],{"type":51,"value":1016},{"type":46,"tag":72,"props":1800,"children":1801},{"class":74,"line":263},[1802,1806,1810,1814,1818,1822],{"type":46,"tag":72,"props":1803,"children":1804},{"style":85},[1805],{"type":51,"value":1348},{"type":46,"tag":72,"props":1807,"children":1808},{"style":79},[1809],{"type":51,"value":1037},{"type":46,"tag":72,"props":1811,"children":1812},{"style":79},[1813],{"type":51,"value":358},{"type":46,"tag":72,"props":1815,"children":1816},{"style":218},[1817],{"type":51,"value":1046},{"type":46,"tag":72,"props":1819,"children":1820},{"style":79},[1821],{"type":51,"value":368},{"type":46,"tag":72,"props":1823,"children":1824},{"style":79},[1825],{"type":51,"value":1055},{"type":46,"tag":72,"props":1827,"children":1828},{"class":74,"line":272},[1829,1833,1837,1841,1845,1849],{"type":46,"tag":72,"props":1830,"children":1831},{"style":85},[1832],{"type":51,"value":1384},{"type":46,"tag":72,"props":1834,"children":1835},{"style":79},[1836],{"type":51,"value":1037},{"type":46,"tag":72,"props":1838,"children":1839},{"style":79},[1840],{"type":51,"value":358},{"type":46,"tag":72,"props":1842,"children":1843},{"style":218},[1844],{"type":51,"value":1084},{"type":46,"tag":72,"props":1846,"children":1847},{"style":79},[1848],{"type":51,"value":368},{"type":46,"tag":72,"props":1850,"children":1851},{"style":79},[1852],{"type":51,"value":1055},{"type":46,"tag":72,"props":1854,"children":1855},{"class":74,"line":281},[1856,1860,1864],{"type":46,"tag":72,"props":1857,"children":1858},{"style":85},[1859],{"type":51,"value":1456},{"type":46,"tag":72,"props":1861,"children":1862},{"style":79},[1863],{"type":51,"value":1037},{"type":46,"tag":72,"props":1865,"children":1866},{"style":121},[1867],{"type":51,"value":1868}," isReady",{"type":46,"tag":72,"props":1870,"children":1871},{"class":74,"line":298},[1872,1877],{"type":46,"tag":72,"props":1873,"children":1874},{"style":79},[1875],{"type":51,"value":1876}," ?",{"type":46,"tag":72,"props":1878,"children":1879},{"style":79},[1880],{"type":51,"value":339},{"type":46,"tag":72,"props":1882,"children":1883},{"class":74,"line":1222},[1884,1889,1893,1897,1901,1905],{"type":46,"tag":72,"props":1885,"children":1886},{"style":85},[1887],{"type":51,"value":1888}," type",{"type":46,"tag":72,"props":1890,"children":1891},{"style":79},[1892],{"type":51,"value":1037},{"type":46,"tag":72,"props":1894,"children":1895},{"style":79},[1896],{"type":51,"value":358},{"type":46,"tag":72,"props":1898,"children":1899},{"style":218},[1900],{"type":51,"value":1174},{"type":46,"tag":72,"props":1902,"children":1903},{"style":79},[1904],{"type":51,"value":368},{"type":46,"tag":72,"props":1906,"children":1907},{"style":79},[1908],{"type":51,"value":1055},{"type":46,"tag":72,"props":1910,"children":1912},{"class":74,"line":1911},16,[1913,1918,1922,1926,1930,1934],{"type":46,"tag":72,"props":1914,"children":1915},{"style":85},[1916],{"type":51,"value":1917}," src",{"type":46,"tag":72,"props":1919,"children":1920},{"style":79},[1921],{"type":51,"value":1037},{"type":46,"tag":72,"props":1923,"children":1924},{"style":79},[1925],{"type":51,"value":358},{"type":46,"tag":72,"props":1927,"children":1928},{"style":218},[1929],{"type":51,"value":1203},{"type":46,"tag":72,"props":1931,"children":1932},{"style":79},[1933],{"type":51,"value":368},{"type":46,"tag":72,"props":1935,"children":1936},{"style":79},[1937],{"type":51,"value":1055},{"type":46,"tag":72,"props":1939,"children":1941},{"class":74,"line":1940},17,[1942],{"type":46,"tag":72,"props":1943,"children":1944},{"style":79},[1945],{"type":51,"value":1946}," }",{"type":46,"tag":72,"props":1948,"children":1950},{"class":74,"line":1949},18,[1951,1956],{"type":46,"tag":72,"props":1952,"children":1953},{"style":79},[1954],{"type":51,"value":1955}," :",{"type":46,"tag":72,"props":1957,"children":1958},{"style":79},[1959],{"type":51,"value":339},{"type":46,"tag":72,"props":1961,"children":1963},{"class":74,"line":1962},19,[1964,1968,1972,1976,1981,1985],{"type":46,"tag":72,"props":1965,"children":1966},{"style":85},[1967],{"type":51,"value":1888},{"type":46,"tag":72,"props":1969,"children":1970},{"style":79},[1971],{"type":51,"value":1037},{"type":46,"tag":72,"props":1973,"children":1974},{"style":79},[1975],{"type":51,"value":358},{"type":46,"tag":72,"props":1977,"children":1978},{"style":218},[1979],{"type":51,"value":1980},"launch",{"type":46,"tag":72,"props":1982,"children":1983},{"style":79},[1984],{"type":51,"value":368},{"type":46,"tag":72,"props":1986,"children":1987},{"style":79},[1988],{"type":51,"value":1055},{"type":46,"tag":72,"props":1990,"children":1992},{"class":74,"line":1991},20,[1993,1998,2002,2006,2011,2015],{"type":46,"tag":72,"props":1994,"children":1995},{"style":85},[1996],{"type":51,"value":1997}," description",{"type":46,"tag":72,"props":1999,"children":2000},{"style":79},[2001],{"type":51,"value":1037},{"type":46,"tag":72,"props":2003,"children":2004},{"style":79},[2005],{"type":51,"value":358},{"type":46,"tag":72,"props":2007,"children":2008},{"style":218},[2009],{"type":51,"value":2010},"Launch My Module",{"type":46,"tag":72,"props":2012,"children":2013},{"style":79},[2014],{"type":51,"value":368},{"type":46,"tag":72,"props":2016,"children":2017},{"style":79},[2018],{"type":51,"value":1055},{"type":46,"tag":72,"props":2020,"children":2022},{"class":74,"line":2021},21,[2023,2028,2032,2037],{"type":46,"tag":72,"props":2024,"children":2025},{"style":85},[2026],{"type":51,"value":2027}," actions",{"type":46,"tag":72,"props":2029,"children":2030},{"style":79},[2031],{"type":51,"value":1037},{"type":46,"tag":72,"props":2033,"children":2034},{"style":85},[2035],{"type":51,"value":2036}," [",{"type":46,"tag":72,"props":2038,"children":2039},{"style":79},[2040],{"type":51,"value":1016},{"type":46,"tag":72,"props":2042,"children":2044},{"class":74,"line":2043},22,[2045,2050,2054,2058,2063,2067],{"type":46,"tag":72,"props":2046,"children":2047},{"style":85},[2048],{"type":51,"value":2049}," label",{"type":46,"tag":72,"props":2051,"children":2052},{"style":79},[2053],{"type":51,"value":1037},{"type":46,"tag":72,"props":2055,"children":2056},{"style":79},[2057],{"type":51,"value":358},{"type":46,"tag":72,"props":2059,"children":2060},{"style":218},[2061],{"type":51,"value":2062},"Start",{"type":46,"tag":72,"props":2064,"children":2065},{"style":79},[2066],{"type":51,"value":368},{"type":46,"tag":72,"props":2068,"children":2069},{"style":79},[2070],{"type":51,"value":1055},{"type":46,"tag":72,"props":2072,"children":2074},{"class":74,"line":2073},23,[2075,2080,2085,2089],{"type":46,"tag":72,"props":2076,"children":2077},{"style":91},[2078],{"type":51,"value":2079}," async",{"type":46,"tag":72,"props":2081,"children":2082},{"style":85},[2083],{"type":51,"value":2084}," handle",{"type":46,"tag":72,"props":2086,"children":2087},{"style":79},[2088],{"type":51,"value":1681},{"type":46,"tag":72,"props":2090,"children":2091},{"style":79},[2092],{"type":51,"value":339},{"type":46,"tag":72,"props":2094,"children":2096},{"class":74,"line":2095},24,[2097,2102,2106,2111,2116],{"type":46,"tag":72,"props":2098,"children":2099},{"style":331},[2100],{"type":51,"value":2101}," if",{"type":46,"tag":72,"props":2103,"children":2104},{"style":85},[2105],{"type":51,"value":1288},{"type":46,"tag":72,"props":2107,"children":2108},{"style":79},[2109],{"type":51,"value":2110},"!",{"type":46,"tag":72,"props":2112,"children":2113},{"style":121},[2114],{"type":51,"value":2115},"promise",{"type":46,"tag":72,"props":2117,"children":2118},{"style":85},[2119],{"type":51,"value":1233},{"type":46,"tag":72,"props":2121,"children":2123},{"class":74,"line":2122},25,[2124,2129,2133,2137],{"type":46,"tag":72,"props":2125,"children":2126},{"style":121},[2127],{"type":51,"value":2128}," promise",{"type":46,"tag":72,"props":2130,"children":2131},{"style":79},[2132],{"type":51,"value":1651},{"type":46,"tag":72,"props":2134,"children":2135},{"style":132},[2136],{"type":51,"value":1676},{"type":46,"tag":72,"props":2138,"children":2139},{"style":85},[2140],{"type":51,"value":1681},{"type":46,"tag":72,"props":2142,"children":2144},{"class":74,"line":2143},26,[2145,2150],{"type":46,"tag":72,"props":2146,"children":2147},{"style":331},[2148],{"type":51,"value":2149}," await",{"type":46,"tag":72,"props":2151,"children":2152},{"style":121},[2153],{"type":51,"value":1614},{"type":46,"tag":72,"props":2155,"children":2157},{"class":74,"line":2156},27,[2158],{"type":46,"tag":72,"props":2159,"children":2160},{"style":79},[2161],{"type":51,"value":2162}," },",{"type":46,"tag":72,"props":2164,"children":2166},{"class":74,"line":2165},28,[2167,2172],{"type":46,"tag":72,"props":2168,"children":2169},{"style":79},[2170],{"type":51,"value":2171}," }",{"type":46,"tag":72,"props":2173,"children":2174},{"style":85},[2175],{"type":51,"value":2176},"]",{"type":46,"tag":72,"props":2178,"children":2180},{"class":74,"line":2179},29,[2181],{"type":46,"tag":72,"props":2182,"children":2183},{"style":79},[2184],{"type":51,"value":2185}," },",{"type":46,"tag":72,"props":2187,"children":2189},{"class":74,"line":2188},30,[2190,2194],{"type":46,"tag":72,"props":2191,"children":2192},{"style":79},[2193],{"type":51,"value":1536},{"type":46,"tag":72,"props":2195,"children":2196},{"style":85},[2197],{"type":51,"value":1233},{"type":46,"tag":72,"props":2199,"children":2201},{"class":74,"line":2200},31,[2202,2206],{"type":46,"tag":72,"props":2203,"children":2204},{"style":79},[2205],{"type":51,"value":1228},{"type":46,"tag":72,"props":2207,"children":2208},{"style":121},[2209],{"type":51,"value":1233},{"type":46,"tag":47,"props":2211,"children":2212},{},[2213,2215,2220],{"type":51,"value":2214},"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":2216,"children":2217},{"className":40},[2218],{"type":51,"value":2219},"handle()",{"type":51,"value":2221}," will be called, and the view will be updated to iframe.",{"type":46,"tag":47,"props":2223,"children":2224},{},[2225,2227,2232,2234,2238],{"type":51,"value":2226},"When you need to refresh the custom tabs, you can call ",{"type":46,"tag":54,"props":2228,"children":2229},{"className":40},[2230],{"type":51,"value":2231},"nuxt.callHook('devtools:customTabs:refresh')",{"type":51,"value":2233}," and the hooks on ",{"type":46,"tag":54,"props":2235,"children":2236},{"className":40},[2237],{"type":51,"value":1275},{"type":51,"value":2239}," will be revaluated again.",{"type":46,"tag":409,"props":2241,"children":2243},{"id":2242},"api-for-custom-view",[2244],{"type":51,"value":2245},"API for Custom View",{"type":46,"tag":47,"props":2247,"children":2248},{},[2249,2251,2257],{"type":51,"value":2250},"Please refer to ",{"type":46,"tag":398,"props":2252,"children":2254},{"href":2253},"/module/utils-kit#nuxtdevtools-kitiframe-client",[2255],{"type":51,"value":2256},"Iframe Client",{"type":51,"value":407},{"type":46,"tag":409,"props":2259,"children":2261},{"id":2260},"custom-rpc-functions",[2262],{"type":51,"value":2263},"Custom RPC Functions",{"type":46,"tag":47,"props":2265,"children":2266},{},[2267],{"type":51,"value":2268},"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":2270,"children":2271},{},[2272],{"type":51,"value":2273},"To do that, we recommend to define your types in a shared TypeScript file first:",{"type":46,"tag":62,"props":2275,"children":2277},{"className":319,"code":2276,"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",[2278],{"type":46,"tag":54,"props":2279,"children":2280},{"__ignoreMap":40},[2281,2289,2292,2314,2332,2339,2342,2362,2398],{"type":46,"tag":72,"props":2282,"children":2283},{"class":74,"line":75},[2284],{"type":46,"tag":72,"props":2285,"children":2286},{"style":106},[2287],{"type":51,"value":2288},"// rpc-types.ts",{"type":46,"tag":72,"props":2290,"children":2291},{"class":74,"line":102},[],{"type":46,"tag":72,"props":2293,"children":2294},{"class":74,"line":112},[2295,2300,2305,2310],{"type":46,"tag":72,"props":2296,"children":2297},{"style":331},[2298],{"type":51,"value":2299},"export",{"type":46,"tag":72,"props":2301,"children":2302},{"style":91},[2303],{"type":51,"value":2304}," interface",{"type":46,"tag":72,"props":2306,"children":2307},{"style":902},[2308],{"type":51,"value":2309}," ServerFunctions",{"type":46,"tag":72,"props":2311,"children":2312},{"style":79},[2313],{"type":51,"value":339},{"type":46,"tag":72,"props":2315,"children":2316},{"class":74,"line":148},[2317,2322,2327],{"type":46,"tag":72,"props":2318,"children":2319},{"style":85},[2320],{"type":51,"value":2321}," getMyModuleOptions",{"type":46,"tag":72,"props":2323,"children":2324},{"style":79},[2325],{"type":51,"value":2326},"():",{"type":46,"tag":72,"props":2328,"children":2329},{"style":902},[2330],{"type":51,"value":2331}," MyModuleOptions",{"type":46,"tag":72,"props":2333,"children":2334},{"class":74,"line":165},[2335],{"type":46,"tag":72,"props":2336,"children":2337},{"style":79},[2338],{"type":51,"value":1228},{"type":46,"tag":72,"props":2340,"children":2341},{"class":74,"line":169},[],{"type":46,"tag":72,"props":2343,"children":2344},{"class":74,"line":186},[2345,2349,2353,2358],{"type":46,"tag":72,"props":2346,"children":2347},{"style":331},[2348],{"type":51,"value":2299},{"type":46,"tag":72,"props":2350,"children":2351},{"style":91},[2352],{"type":51,"value":2304},{"type":46,"tag":72,"props":2354,"children":2355},{"style":902},[2356],{"type":51,"value":2357}," ClientFunctions",{"type":46,"tag":72,"props":2359,"children":2360},{"style":79},[2361],{"type":51,"value":339},{"type":46,"tag":72,"props":2363,"children":2364},{"class":74,"line":200},[2365,2370,2374,2379,2383,2388,2393],{"type":46,"tag":72,"props":2366,"children":2367},{"style":85},[2368],{"type":51,"value":2369}," showNotification",{"type":46,"tag":72,"props":2371,"children":2372},{"style":79},[2373],{"type":51,"value":1011},{"type":46,"tag":72,"props":2375,"children":2376},{"style":1291},[2377],{"type":51,"value":2378},"message",{"type":46,"tag":72,"props":2380,"children":2381},{"style":79},[2382],{"type":51,"value":1037},{"type":46,"tag":72,"props":2384,"children":2385},{"style":902},[2386],{"type":51,"value":2387}," string",{"type":46,"tag":72,"props":2389,"children":2390},{"style":79},[2391],{"type":51,"value":2392},"):",{"type":46,"tag":72,"props":2394,"children":2395},{"style":902},[2396],{"type":51,"value":2397}," void",{"type":46,"tag":72,"props":2399,"children":2400},{"class":74,"line":228},[2401],{"type":46,"tag":72,"props":2402,"children":2403},{"style":79},[2404],{"type":51,"value":1228},{"type":46,"tag":47,"props":2406,"children":2407},{},[2408],{"type":51,"value":2409},"And then in your module code:",{"type":46,"tag":62,"props":2411,"children":2413},{"className":319,"code":2412,"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",[2414],{"type":46,"tag":54,"props":2415,"children":2416},{"__ignoreMap":40},[2417,2454,2499,2548,2551,2580,2583,2607,2641,2649,2678,2737,2745,2761,2774,2781,2793,2796,2804,2812,2863,2875,2882],{"type":46,"tag":72,"props":2418,"children":2419},{"class":74,"line":75},[2420,2424,2428,2433,2437,2441,2445,2450],{"type":46,"tag":72,"props":2421,"children":2422},{"style":331},[2423],{"type":51,"value":334},{"type":46,"tag":72,"props":2425,"children":2426},{"style":79},[2427],{"type":51,"value":339},{"type":46,"tag":72,"props":2429,"children":2430},{"style":121},[2431],{"type":51,"value":2432}," defineNuxtModule",{"type":46,"tag":72,"props":2434,"children":2435},{"style":79},[2436],{"type":51,"value":348},{"type":46,"tag":72,"props":2438,"children":2439},{"style":331},[2440],{"type":51,"value":353},{"type":46,"tag":72,"props":2442,"children":2443},{"style":79},[2444],{"type":51,"value":358},{"type":46,"tag":72,"props":2446,"children":2447},{"style":218},[2448],{"type":51,"value":2449},"@nuxt/kit",{"type":46,"tag":72,"props":2451,"children":2452},{"style":79},[2453],{"type":51,"value":368},{"type":46,"tag":72,"props":2455,"children":2456},{"class":74,"line":102},[2457,2461,2465,2470,2474,2479,2483,2487,2491,2495],{"type":46,"tag":72,"props":2458,"children":2459},{"style":331},[2460],{"type":51,"value":334},{"type":46,"tag":72,"props":2462,"children":2463},{"style":79},[2464],{"type":51,"value":339},{"type":46,"tag":72,"props":2466,"children":2467},{"style":121},[2468],{"type":51,"value":2469}," extendServerRpc",{"type":46,"tag":72,"props":2471,"children":2472},{"style":79},[2473],{"type":51,"value":1055},{"type":46,"tag":72,"props":2475,"children":2476},{"style":121},[2477],{"type":51,"value":2478}," onDevToolsInitialized",{"type":46,"tag":72,"props":2480,"children":2481},{"style":79},[2482],{"type":51,"value":348},{"type":46,"tag":72,"props":2484,"children":2485},{"style":331},[2486],{"type":51,"value":353},{"type":46,"tag":72,"props":2488,"children":2489},{"style":79},[2490],{"type":51,"value":358},{"type":46,"tag":72,"props":2492,"children":2493},{"style":218},[2494],{"type":51,"value":991},{"type":46,"tag":72,"props":2496,"children":2497},{"style":79},[2498],{"type":51,"value":368},{"type":46,"tag":72,"props":2500,"children":2501},{"class":74,"line":112},[2502,2506,2511,2515,2519,2523,2527,2531,2535,2539,2544],{"type":46,"tag":72,"props":2503,"children":2504},{"style":331},[2505],{"type":51,"value":334},{"type":46,"tag":72,"props":2507,"children":2508},{"style":331},[2509],{"type":51,"value":2510}," type",{"type":46,"tag":72,"props":2512,"children":2513},{"style":79},[2514],{"type":51,"value":339},{"type":46,"tag":72,"props":2516,"children":2517},{"style":121},[2518],{"type":51,"value":2357},{"type":46,"tag":72,"props":2520,"children":2521},{"style":79},[2522],{"type":51,"value":1055},{"type":46,"tag":72,"props":2524,"children":2525},{"style":121},[2526],{"type":51,"value":2309},{"type":46,"tag":72,"props":2528,"children":2529},{"style":79},[2530],{"type":51,"value":348},{"type":46,"tag":72,"props":2532,"children":2533},{"style":331},[2534],{"type":51,"value":353},{"type":46,"tag":72,"props":2536,"children":2537},{"style":79},[2538],{"type":51,"value":358},{"type":46,"tag":72,"props":2540,"children":2541},{"style":218},[2542],{"type":51,"value":2543},"./rpc-types",{"type":46,"tag":72,"props":2545,"children":2546},{"style":79},[2547],{"type":51,"value":368},{"type":46,"tag":72,"props":2549,"children":2550},{"class":74,"line":148},[],{"type":46,"tag":72,"props":2552,"children":2553},{"class":74,"line":165},[2554,2558,2563,2567,2571,2576],{"type":46,"tag":72,"props":2555,"children":2556},{"style":91},[2557],{"type":51,"value":118},{"type":46,"tag":72,"props":2559,"children":2560},{"style":121},[2561],{"type":51,"value":2562}," RPC_NAMESPACE ",{"type":46,"tag":72,"props":2564,"children":2565},{"style":79},[2566],{"type":51,"value":129},{"type":46,"tag":72,"props":2568,"children":2569},{"style":79},[2570],{"type":51,"value":358},{"type":46,"tag":72,"props":2572,"children":2573},{"style":218},[2574],{"type":51,"value":2575},"my-module-rpc",{"type":46,"tag":72,"props":2577,"children":2578},{"style":79},[2579],{"type":51,"value":368},{"type":46,"tag":72,"props":2581,"children":2582},{"class":74,"line":169},[],{"type":46,"tag":72,"props":2584,"children":2585},{"class":74,"line":186},[2586,2590,2595,2599,2603],{"type":46,"tag":72,"props":2587,"children":2588},{"style":331},[2589],{"type":51,"value":2299},{"type":46,"tag":72,"props":2591,"children":2592},{"style":331},[2593],{"type":51,"value":2594}," default",{"type":46,"tag":72,"props":2596,"children":2597},{"style":132},[2598],{"type":51,"value":2432},{"type":46,"tag":72,"props":2600,"children":2601},{"style":121},[2602],{"type":51,"value":1011},{"type":46,"tag":72,"props":2604,"children":2605},{"style":79},[2606],{"type":51,"value":1016},{"type":46,"tag":72,"props":2608,"children":2609},{"class":74,"line":200},[2610,2615,2619,2624,2628,2633,2637],{"type":46,"tag":72,"props":2611,"children":2612},{"style":85},[2613],{"type":51,"value":2614}," setup",{"type":46,"tag":72,"props":2616,"children":2617},{"style":79},[2618],{"type":51,"value":1011},{"type":46,"tag":72,"props":2620,"children":2621},{"style":1291},[2622],{"type":51,"value":2623},"options",{"type":46,"tag":72,"props":2625,"children":2626},{"style":79},[2627],{"type":51,"value":1055},{"type":46,"tag":72,"props":2629,"children":2630},{"style":1291},[2631],{"type":51,"value":2632}," nuxt",{"type":46,"tag":72,"props":2634,"children":2635},{"style":79},[2636],{"type":51,"value":1233},{"type":46,"tag":72,"props":2638,"children":2639},{"style":79},[2640],{"type":51,"value":339},{"type":46,"tag":72,"props":2642,"children":2643},{"class":74,"line":228},[2644],{"type":46,"tag":72,"props":2645,"children":2646},{"style":106},[2647],{"type":51,"value":2648}," // wait for DevTools to be initialized",{"type":46,"tag":72,"props":2650,"children":2651},{"class":74,"line":254},[2652,2657,2661,2665,2670,2674],{"type":46,"tag":72,"props":2653,"children":2654},{"style":132},[2655],{"type":51,"value":2656}," onDevToolsInitialized",{"type":46,"tag":72,"props":2658,"children":2659},{"style":85},[2660],{"type":51,"value":1011},{"type":46,"tag":72,"props":2662,"children":2663},{"style":91},[2664],{"type":51,"value":1666},{"type":46,"tag":72,"props":2666,"children":2667},{"style":79},[2668],{"type":51,"value":2669}," ()",{"type":46,"tag":72,"props":2671,"children":2672},{"style":91},[2673],{"type":51,"value":1303},{"type":46,"tag":72,"props":2675,"children":2676},{"style":79},[2677],{"type":51,"value":339},{"type":46,"tag":72,"props":2679,"children":2680},{"class":74,"line":263},[2681,2686,2691,2695,2699,2703,2708,2712,2716,2720,2724,2729,2733],{"type":46,"tag":72,"props":2682,"children":2683},{"style":91},[2684],{"type":51,"value":2685}," const",{"type":46,"tag":72,"props":2687,"children":2688},{"style":121},[2689],{"type":51,"value":2690}," rpc",{"type":46,"tag":72,"props":2692,"children":2693},{"style":79},[2694],{"type":51,"value":1651},{"type":46,"tag":72,"props":2696,"children":2697},{"style":132},[2698],{"type":51,"value":2469},{"type":46,"tag":72,"props":2700,"children":2701},{"style":79},[2702],{"type":51,"value":82},{"type":46,"tag":72,"props":2704,"children":2705},{"style":902},[2706],{"type":51,"value":2707},"ClientFunctions",{"type":46,"tag":72,"props":2709,"children":2710},{"style":79},[2711],{"type":51,"value":1055},{"type":46,"tag":72,"props":2713,"children":2714},{"style":902},[2715],{"type":51,"value":2309},{"type":46,"tag":72,"props":2717,"children":2718},{"style":79},[2719],{"type":51,"value":99},{"type":46,"tag":72,"props":2721,"children":2722},{"style":85},[2723],{"type":51,"value":1011},{"type":46,"tag":72,"props":2725,"children":2726},{"style":121},[2727],{"type":51,"value":2728},"RPC_NAMESPACE",{"type":46,"tag":72,"props":2730,"children":2731},{"style":79},[2732],{"type":51,"value":1055},{"type":46,"tag":72,"props":2734,"children":2735},{"style":79},[2736],{"type":51,"value":339},{"type":46,"tag":72,"props":2738,"children":2739},{"class":74,"line":272},[2740],{"type":46,"tag":72,"props":2741,"children":2742},{"style":106},[2743],{"type":51,"value":2744}," // register server RPC functions",{"type":46,"tag":72,"props":2746,"children":2747},{"class":74,"line":281},[2748,2753,2757],{"type":46,"tag":72,"props":2749,"children":2750},{"style":85},[2751],{"type":51,"value":2752}," getMyModuleOptions",{"type":46,"tag":72,"props":2754,"children":2755},{"style":79},[2756],{"type":51,"value":1681},{"type":46,"tag":72,"props":2758,"children":2759},{"style":79},[2760],{"type":51,"value":339},{"type":46,"tag":72,"props":2762,"children":2763},{"class":74,"line":298},[2764,2769],{"type":46,"tag":72,"props":2765,"children":2766},{"style":331},[2767],{"type":51,"value":2768}," return",{"type":46,"tag":72,"props":2770,"children":2771},{"style":121},[2772],{"type":51,"value":2773}," options",{"type":46,"tag":72,"props":2775,"children":2776},{"class":74,"line":1222},[2777],{"type":46,"tag":72,"props":2778,"children":2779},{"style":79},[2780],{"type":51,"value":2185},{"type":46,"tag":72,"props":2782,"children":2783},{"class":74,"line":1911},[2784,2789],{"type":46,"tag":72,"props":2785,"children":2786},{"style":79},[2787],{"type":51,"value":2788}," }",{"type":46,"tag":72,"props":2790,"children":2791},{"style":85},[2792],{"type":51,"value":1233},{"type":46,"tag":72,"props":2794,"children":2795},{"class":74,"line":1940},[],{"type":46,"tag":72,"props":2797,"children":2798},{"class":74,"line":1949},[2799],{"type":46,"tag":72,"props":2800,"children":2801},{"style":106},[2802],{"type":51,"value":2803}," // call client RPC functions",{"type":46,"tag":72,"props":2805,"children":2806},{"class":74,"line":1962},[2807],{"type":46,"tag":72,"props":2808,"children":2809},{"style":106},[2810],{"type":51,"value":2811}," // since it might have multiple clients connected, we use `broadcast` to call all of them",{"type":46,"tag":72,"props":2813,"children":2814},{"class":74,"line":1991},[2815,2820,2824,2828,2833,2837,2842,2846,2850,2855,2859],{"type":46,"tag":72,"props":2816,"children":2817},{"style":331},[2818],{"type":51,"value":2819}," await",{"type":46,"tag":72,"props":2821,"children":2822},{"style":121},[2823],{"type":51,"value":2690},{"type":46,"tag":72,"props":2825,"children":2826},{"style":79},[2827],{"type":51,"value":407},{"type":46,"tag":72,"props":2829,"children":2830},{"style":121},[2831],{"type":51,"value":2832},"broadcast",{"type":46,"tag":72,"props":2834,"children":2835},{"style":79},[2836],{"type":51,"value":407},{"type":46,"tag":72,"props":2838,"children":2839},{"style":132},[2840],{"type":51,"value":2841},"showNotification",{"type":46,"tag":72,"props":2843,"children":2844},{"style":85},[2845],{"type":51,"value":1011},{"type":46,"tag":72,"props":2847,"children":2848},{"style":79},[2849],{"type":51,"value":368},{"type":46,"tag":72,"props":2851,"children":2852},{"style":218},[2853],{"type":51,"value":2854},"Hello from My Module!",{"type":46,"tag":72,"props":2856,"children":2857},{"style":79},[2858],{"type":51,"value":368},{"type":46,"tag":72,"props":2860,"children":2861},{"style":85},[2862],{"type":51,"value":1233},{"type":46,"tag":72,"props":2864,"children":2865},{"class":74,"line":2021},[2866,2871],{"type":46,"tag":72,"props":2867,"children":2868},{"style":79},[2869],{"type":51,"value":2870}," }",{"type":46,"tag":72,"props":2872,"children":2873},{"style":85},[2874],{"type":51,"value":1233},{"type":46,"tag":72,"props":2876,"children":2877},{"class":74,"line":2043},[2878],{"type":46,"tag":72,"props":2879,"children":2880},{"style":79},[2881],{"type":51,"value":1536},{"type":46,"tag":72,"props":2883,"children":2884},{"class":74,"line":2073},[2885,2889],{"type":46,"tag":72,"props":2886,"children":2887},{"style":79},[2888],{"type":51,"value":1228},{"type":46,"tag":72,"props":2890,"children":2891},{"style":121},[2892],{"type":51,"value":1233},{"type":46,"tag":47,"props":2894,"children":2895},{},[2896],{"type":51,"value":2897},"And on the client side, you can do:",{"type":46,"tag":62,"props":2899,"children":2901},{"className":319,"code":2900,"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",[2902],{"type":46,"tag":54,"props":2903,"children":2904},{"__ignoreMap":40},[2905,2942,2989,2992,3019,3022,3059,3114,3138,3167,3174,3185,3188,3196,3233],{"type":46,"tag":72,"props":2906,"children":2907},{"class":74,"line":75},[2908,2912,2916,2921,2925,2929,2933,2938],{"type":46,"tag":72,"props":2909,"children":2910},{"style":331},[2911],{"type":51,"value":334},{"type":46,"tag":72,"props":2913,"children":2914},{"style":79},[2915],{"type":51,"value":339},{"type":46,"tag":72,"props":2917,"children":2918},{"style":121},[2919],{"type":51,"value":2920}," onDevtoolsClientConnected",{"type":46,"tag":72,"props":2922,"children":2923},{"style":79},[2924],{"type":51,"value":348},{"type":46,"tag":72,"props":2926,"children":2927},{"style":331},[2928],{"type":51,"value":353},{"type":46,"tag":72,"props":2930,"children":2931},{"style":79},[2932],{"type":51,"value":358},{"type":46,"tag":72,"props":2934,"children":2935},{"style":218},[2936],{"type":51,"value":2937},"@nuxt/devtools-kit/iframe-client",{"type":46,"tag":72,"props":2939,"children":2940},{"style":79},[2941],{"type":51,"value":368},{"type":46,"tag":72,"props":2943,"children":2944},{"class":74,"line":102},[2945,2949,2953,2957,2961,2965,2969,2973,2977,2981,2985],{"type":46,"tag":72,"props":2946,"children":2947},{"style":331},[2948],{"type":51,"value":334},{"type":46,"tag":72,"props":2950,"children":2951},{"style":331},[2952],{"type":51,"value":2510},{"type":46,"tag":72,"props":2954,"children":2955},{"style":79},[2956],{"type":51,"value":339},{"type":46,"tag":72,"props":2958,"children":2959},{"style":121},[2960],{"type":51,"value":2357},{"type":46,"tag":72,"props":2962,"children":2963},{"style":79},[2964],{"type":51,"value":1055},{"type":46,"tag":72,"props":2966,"children":2967},{"style":121},[2968],{"type":51,"value":2309},{"type":46,"tag":72,"props":2970,"children":2971},{"style":79},[2972],{"type":51,"value":348},{"type":46,"tag":72,"props":2974,"children":2975},{"style":331},[2976],{"type":51,"value":353},{"type":46,"tag":72,"props":2978,"children":2979},{"style":79},[2980],{"type":51,"value":358},{"type":46,"tag":72,"props":2982,"children":2983},{"style":218},[2984],{"type":51,"value":2543},{"type":46,"tag":72,"props":2986,"children":2987},{"style":79},[2988],{"type":51,"value":368},{"type":46,"tag":72,"props":2990,"children":2991},{"class":74,"line":112},[],{"type":46,"tag":72,"props":2993,"children":2994},{"class":74,"line":148},[2995,2999,3003,3007,3011,3015],{"type":46,"tag":72,"props":2996,"children":2997},{"style":91},[2998],{"type":51,"value":118},{"type":46,"tag":72,"props":3000,"children":3001},{"style":121},[3002],{"type":51,"value":2562},{"type":46,"tag":72,"props":3004,"children":3005},{"style":79},[3006],{"type":51,"value":129},{"type":46,"tag":72,"props":3008,"children":3009},{"style":79},[3010],{"type":51,"value":358},{"type":46,"tag":72,"props":3012,"children":3013},{"style":218},[3014],{"type":51,"value":2575},{"type":46,"tag":72,"props":3016,"children":3017},{"style":79},[3018],{"type":51,"value":368},{"type":46,"tag":72,"props":3020,"children":3021},{"class":74,"line":165},[],{"type":46,"tag":72,"props":3023,"children":3024},{"class":74,"line":169},[3025,3030,3034,3038,3042,3047,3051,3055],{"type":46,"tag":72,"props":3026,"children":3027},{"style":132},[3028],{"type":51,"value":3029},"onDevtoolsClientConnected",{"type":46,"tag":72,"props":3031,"children":3032},{"style":121},[3033],{"type":51,"value":1011},{"type":46,"tag":72,"props":3035,"children":3036},{"style":91},[3037],{"type":51,"value":1666},{"type":46,"tag":72,"props":3039,"children":3040},{"style":79},[3041],{"type":51,"value":1288},{"type":46,"tag":72,"props":3043,"children":3044},{"style":1291},[3045],{"type":51,"value":3046},"client",{"type":46,"tag":72,"props":3048,"children":3049},{"style":79},[3050],{"type":51,"value":1233},{"type":46,"tag":72,"props":3052,"children":3053},{"style":91},[3054],{"type":51,"value":1303},{"type":46,"tag":72,"props":3056,"children":3057},{"style":79},[3058],{"type":51,"value":339},{"type":46,"tag":72,"props":3060,"children":3061},{"class":74,"line":186},[3062,3067,3071,3075,3080,3084,3089,3093,3098,3102,3106,3110],{"type":46,"tag":72,"props":3063,"children":3064},{"style":91},[3065],{"type":51,"value":3066}," const",{"type":46,"tag":72,"props":3068,"children":3069},{"style":121},[3070],{"type":51,"value":2690},{"type":46,"tag":72,"props":3072,"children":3073},{"style":79},[3074],{"type":51,"value":1651},{"type":46,"tag":72,"props":3076,"children":3077},{"style":121},[3078],{"type":51,"value":3079}," client",{"type":46,"tag":72,"props":3081,"children":3082},{"style":79},[3083],{"type":51,"value":407},{"type":46,"tag":72,"props":3085,"children":3086},{"style":121},[3087],{"type":51,"value":3088},"devtools",{"type":46,"tag":72,"props":3090,"children":3091},{"style":79},[3092],{"type":51,"value":407},{"type":46,"tag":72,"props":3094,"children":3095},{"style":132},[3096],{"type":51,"value":3097},"extendClientRpc",{"type":46,"tag":72,"props":3099,"children":3100},{"style":85},[3101],{"type":51,"value":1011},{"type":46,"tag":72,"props":3103,"children":3104},{"style":121},[3105],{"type":51,"value":2728},{"type":46,"tag":72,"props":3107,"children":3108},{"style":79},[3109],{"type":51,"value":1055},{"type":46,"tag":72,"props":3111,"children":3112},{"style":79},[3113],{"type":51,"value":339},{"type":46,"tag":72,"props":3115,"children":3116},{"class":74,"line":200},[3117,3122,3126,3130,3134],{"type":46,"tag":72,"props":3118,"children":3119},{"style":85},[3120],{"type":51,"value":3121}," showNotification",{"type":46,"tag":72,"props":3123,"children":3124},{"style":79},[3125],{"type":51,"value":1011},{"type":46,"tag":72,"props":3127,"children":3128},{"style":1291},[3129],{"type":51,"value":2378},{"type":46,"tag":72,"props":3131,"children":3132},{"style":79},[3133],{"type":51,"value":1233},{"type":46,"tag":72,"props":3135,"children":3136},{"style":79},[3137],{"type":51,"value":339},{"type":46,"tag":72,"props":3139,"children":3140},{"class":74,"line":228},[3141,3146,3150,3155,3159,3163],{"type":46,"tag":72,"props":3142,"children":3143},{"style":121},[3144],{"type":51,"value":3145}," console",{"type":46,"tag":72,"props":3147,"children":3148},{"style":79},[3149],{"type":51,"value":407},{"type":46,"tag":72,"props":3151,"children":3152},{"style":132},[3153],{"type":51,"value":3154},"log",{"type":46,"tag":72,"props":3156,"children":3157},{"style":85},[3158],{"type":51,"value":1011},{"type":46,"tag":72,"props":3160,"children":3161},{"style":121},[3162],{"type":51,"value":2378},{"type":46,"tag":72,"props":3164,"children":3165},{"style":85},[3166],{"type":51,"value":1233},{"type":46,"tag":72,"props":3168,"children":3169},{"class":74,"line":254},[3170],{"type":46,"tag":72,"props":3171,"children":3172},{"style":79},[3173],{"type":51,"value":1528},{"type":46,"tag":72,"props":3175,"children":3176},{"class":74,"line":263},[3177,3181],{"type":46,"tag":72,"props":3178,"children":3179},{"style":79},[3180],{"type":51,"value":1536},{"type":46,"tag":72,"props":3182,"children":3183},{"style":85},[3184],{"type":51,"value":1233},{"type":46,"tag":72,"props":3186,"children":3187},{"class":74,"line":272},[],{"type":46,"tag":72,"props":3189,"children":3190},{"class":74,"line":281},[3191],{"type":46,"tag":72,"props":3192,"children":3193},{"style":106},[3194],{"type":51,"value":3195}," // call server RPC functions",{"type":46,"tag":72,"props":3197,"children":3198},{"class":74,"line":298},[3199,3203,3207,3211,3216,3220,3224,3229],{"type":46,"tag":72,"props":3200,"children":3201},{"style":91},[3202],{"type":51,"value":3066},{"type":46,"tag":72,"props":3204,"children":3205},{"style":121},[3206],{"type":51,"value":2773},{"type":46,"tag":72,"props":3208,"children":3209},{"style":79},[3210],{"type":51,"value":1651},{"type":46,"tag":72,"props":3212,"children":3213},{"style":331},[3214],{"type":51,"value":3215}," await",{"type":46,"tag":72,"props":3217,"children":3218},{"style":121},[3219],{"type":51,"value":2690},{"type":46,"tag":72,"props":3221,"children":3222},{"style":79},[3223],{"type":51,"value":407},{"type":46,"tag":72,"props":3225,"children":3226},{"style":132},[3227],{"type":51,"value":3228},"getMyModuleOptions",{"type":46,"tag":72,"props":3230,"children":3231},{"style":85},[3232],{"type":51,"value":1681},{"type":46,"tag":72,"props":3234,"children":3235},{"class":74,"line":1222},[3236,3240],{"type":46,"tag":72,"props":3237,"children":3238},{"style":79},[3239],{"type":51,"value":1228},{"type":46,"tag":72,"props":3241,"children":3242},{"style":121},[3243],{"type":51,"value":1233},{"type":46,"tag":409,"props":3245,"children":3247},{"id":3246},"trying-local-changes",[3248],{"type":51,"value":3249},"Trying Local Changes",{"type":46,"tag":47,"props":3251,"children":3252},{},[3253],{"type":51,"value":3254},"You can clone Nuxt DevTools repo and try your changes locally.",{"type":46,"tag":47,"props":3256,"children":3257},{},[3258,3259,3264],{"type":51,"value":2250},{"type":46,"tag":398,"props":3260,"children":3262},{"href":3261},"/development/contributing#trying-local-changes",[3263],{"type":51,"value":3249},{"type":51,"value":407},{"type":46,"tag":409,"props":3266,"children":3268},{"id":3267},"examples",[3269],{"type":51,"value":3270},"Examples",{"type":46,"tag":47,"props":3272,"children":3273},{},[3274],{"type":51,"value":3275},"Here are a few examples of how to integrate Nuxt DevTools in modules:",{"type":46,"tag":3277,"props":3278,"children":3279},"ul",{},[3280,3291,3301,3311,3321],{"type":46,"tag":3281,"props":3282,"children":3283},"li",{},[3284],{"type":46,"tag":398,"props":3285,"children":3288},{"href":3286,"rel":3287},"https://github.com/nuxt/devtools/blob/main/packages/devtools/src/integrations/vscode.ts",[402],[3289],{"type":51,"value":3290},"Built-in VS Code integration with lazy initialize",{"type":46,"tag":3281,"props":3292,"children":3293},{},[3294],{"type":46,"tag":398,"props":3295,"children":3298},{"href":3296,"rel":3297},"https://github.com/vueuse/vueuse/blob/ce28cef154489c73abe308104bef8568594a9bcd/packages/nuxt/index.ts#L89-L99",[402],[3299],{"type":51,"value":3300},"VueUse adds a docs tab",{"type":46,"tag":3281,"props":3302,"children":3303},{},[3304],{"type":46,"tag":398,"props":3305,"children":3308},{"href":3306,"rel":3307},"https://github.com/unocss/unocss/blob/25021a751494e99e85cfd82cca3855cdf78f6a12/packages/nuxt/src/index.ts#L81-L94",[402],[3309],{"type":51,"value":3310},"UnoCSS Inspector",{"type":46,"tag":3281,"props":3312,"children":3313},{},[3314],{"type":46,"tag":398,"props":3315,"children":3318},{"href":3316,"rel":3317},"https://github.com/danielroe/nuxt-vitest/blob/7bac68d96f27dea6c30c198b7caaaf0b495574ab/packages/nuxt-vitest/src/module.ts#L139-L181",[402],[3319],{"type":51,"value":3320},"Nuxt Vitest runner",{"type":46,"tag":3281,"props":3322,"children":3323},{},[3324],{"type":46,"tag":398,"props":3325,"children":3328},{"href":3326,"rel":3327},"https://github.com/harlan-zw/nuxt-og-image/blob/main/src/module.ts#L136",[402],[3329],{"type":51,"value":3330},"Nuxt OG Image Playground",{"type":46,"tag":375,"props":3332,"children":3333},{},[3334],{"type":51,"value":379},{"title":40,"searchDepth":102,"depth":102,"links":3336},[3337,3338,3339,3340,3341,3342,3343],{"id":879,"depth":102,"text":882},{"id":938,"depth":102,"text":941},{"id":1564,"depth":102,"text":1567},{"id":2242,"depth":102,"text":2245},{"id":2260,"depth":102,"text":2263},{"id":3246,"depth":102,"text":3249},{"id":3267,"depth":102,"text":3270},"content:2.module:0.guide.md","2.module/0.guide.md",1698729301900]