[{"data":1,"prerenderedAt":374},["ShallowReactive",2],{"navigation":3,"\u002Fgetting-started\u002Fdevtools":111,"\u002Fgetting-started\u002Fdevtools-surround":369},[4,38,77,97,104],{"title":5,"path":6,"stem":7,"children":8,"icon":37},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,12,17,22,27,32],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Configuration","\u002Fgetting-started\u002Fconfiguration","1.getting-started\u002F3.configuration","i-lucide-settings",{"title":23,"path":24,"stem":25,"icon":26},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F4.usage","i-lucide-code",{"title":28,"path":29,"stem":30,"icon":31},"Authentication","\u002Fgetting-started\u002Fauthentication","1.getting-started\u002F5.authentication","i-lucide-lock",{"title":33,"path":34,"stem":35,"icon":36},"DevTools","\u002Fgetting-started\u002Fdevtools","1.getting-started\u002F6.devtools","i-lucide-radio-tower",false,{"title":39,"icon":26,"path":40,"stem":41,"children":42,"page":37},"Composables","\u002Fcomposables","2.composables",[43,48,53,58,63,67,72],{"title":44,"path":45,"stem":46,"icon":47},"useRealtimeState","\u002Fcomposables\u002Fuserealtimestate","2.composables\u002F1.useRealtimeState","i-lucide-refresh-cw",{"title":49,"path":50,"stem":51,"icon":52},"useRealtimeEvents","\u002Fcomposables\u002Fuserealtimeevents","2.composables\u002F2.useRealtimeEvents","i-lucide-radio",{"title":54,"path":55,"stem":56,"icon":57},"useRealtimeConnection","\u002Fcomposables\u002Fuserealtimeconnection","2.composables\u002F3.useRealtimeConnection","i-lucide-wifi",{"title":59,"path":60,"stem":61,"icon":62},"useRealtimePresence","\u002Fcomposables\u002Fuserealtimepresence","2.composables\u002F4.useRealtimePresence","i-lucide-users",{"title":64,"path":65,"stem":66,"icon":31},"useRealtimeLock","\u002Fcomposables\u002Fuserealtimelock","2.composables\u002F5.useRealtimeLock",{"title":68,"path":69,"stem":70,"icon":71},"useRealtimeLockRoom","\u002Fcomposables\u002Fuserealtimelockroom","2.composables\u002F6.useRealtimeLockRoom","i-lucide-list-checks",{"title":73,"path":74,"stem":75,"icon":76},"useRealtimeRoom","\u002Fcomposables\u002Fuserealtimeroom","2.composables\u002F7.useRealtimeRoom","i-lucide-door-open",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":37},"Technical","i-lucide-cpu","\u002Ftechnical","3.technical",[83,88,92],{"title":84,"path":85,"stem":86,"icon":87},"Architecture","\u002Ftechnical\u002Farchitecture","3.technical\u002F1.architecture","i-lucide-network",{"title":89,"path":90,"stem":91,"icon":52},"Notification Layer","\u002Ftechnical\u002Fpubsub","3.technical\u002F2.pubsub",{"title":93,"path":94,"stem":95,"icon":96},"Multi-Server Sync","\u002Ftechnical\u002Fcross-server-sync","3.technical\u002F3.cross-server-sync","i-lucide-server",{"title":98,"path":99,"stem":100,"children":101,"icon":103},"Blocks","\u002Fblocks","4.blocks\u002F1.index",[102],{"title":98,"path":99,"stem":100,"icon":103},"i-lucide-layout-grid",{"title":105,"path":106,"stem":107,"children":108,"icon":110},"Components","\u002Fcomponents","5.components\u002F1.index",[109],{"title":105,"path":106,"stem":107,"icon":110},"i-lucide-component",{"id":112,"title":33,"body":113,"description":362,"extension":363,"links":364,"meta":365,"navigation":366,"path":34,"seo":367,"stem":35,"__hash__":368},"docs\u002F1.getting-started\u002F6.devtools.md",{"type":114,"value":115,"toc":358},"minimark",[116,128,131,136,205,216,219,226,354],[117,118,119,120,127],"p",{},"Nuxt Realtime adds a \"Realtime\" tab to ",[121,122,126],"a",{"href":123,"rel":124},"https:\u002F\u002Fdevtools.nuxt.com\u002F",[125],"nofollow","Nuxt DevTools"," showing what's happening on the wire while you develop: active connections, subscribed channels and storage keys per socket, live storage values, and a scrolling event log.",[117,129,130],{},"It's dev-only: the tab, its backing route, and the event log are never present in production builds.",[132,133,135],"h2",{"id":134},"what-it-shows","What it shows",[137,138,139,147,163,173],"ul",{},[140,141,142,146],"li",{},[143,144,145],"strong",{},"Connections",": every currently connected socket, its address, transport, and how long it's been connected.",[140,148,149,152,153,156,157,159,160,162],{},[143,150,151],{},"Channels & storage keys",": per connection, which ",[154,155,49],"code",{}," channels and ",[154,158,44],{},"\u002F",[154,161,54],{}," storage keys it's subscribed to.",[140,164,165,168,169,172],{},[143,166,167],{},"Storage",": every key currently in the ",[154,170,171],{},"nuxt-realtime"," storage mount, its value, and how many sockets are subscribed to it.",[140,174,175,178,179,182,183,182,186,159,189,159,192,195,196,159,199,159,201,204],{},[143,176,177],{},"Event log",": a scrolling, in-memory log of ",[154,180,181],{},"connect",", ",[154,184,185],{},"disconnect",[154,187,188],{},"event:subscribe",[154,190,191],{},"unsubscribe",[154,193,194],{},"publish",", and ",[154,197,198],{},"storage:subscribe",[154,200,191],{},[154,202,203],{},"set",". The log never includes payload\u002Fvalue bodies, only channel\u002Fkey names, so it can't leak arbitrary application data.",[206,207,210],"callout",{"color":208,"icon":209},"warning","i-lucide-triangle-alert",[117,211,212,213,215],{},"The storage snapshot shown in the tab is served by an unauthenticated dev-only HTTP route. This is fine on a local dev server, but don't put secrets in ",[154,214,171],{}," storage.",[132,217,18],{"id":218},"configuration",[117,220,221,222,225],{},"The tab is on by default whenever your app is running in dev mode. Configure the event log size, or turn it off entirely, via the ",[154,223,224],{},"devtools"," option:",[227,228,234],"pre",{"className":229,"code":230,"filename":231,"language":232,"meta":233,"style":233},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['nuxt-realtime'],\n  nuxtRealtime: {\n    devtools: {\n      eventLogSize: 500, \u002F\u002F default: 200\n    },\n    \u002F\u002F or: devtools: false\n  }\n})\n","nuxt.config.ts","ts","",[154,235,236,260,287,298,308,327,333,339,345],{"__ignoreMap":233},[237,238,241,245,248,252,256],"span",{"class":239,"line":240},"line",1,[237,242,244],{"class":243},"s7zQu","export",[237,246,247],{"class":243}," default",[237,249,251],{"class":250},"s2Zo4"," defineNuxtConfig",[237,253,255],{"class":254},"sTEyZ","(",[237,257,259],{"class":258},"sMK4o","{\n",[237,261,263,267,270,273,276,279,281,284],{"class":239,"line":262},2,[237,264,266],{"class":265},"swJcz","  modules",[237,268,269],{"class":258},":",[237,271,272],{"class":254}," [",[237,274,275],{"class":258},"'",[237,277,171],{"class":278},"sfazB",[237,280,275],{"class":258},[237,282,283],{"class":254},"]",[237,285,286],{"class":258},",\n",[237,288,290,293,295],{"class":239,"line":289},3,[237,291,292],{"class":265},"  nuxtRealtime",[237,294,269],{"class":258},[237,296,297],{"class":258}," {\n",[237,299,301,304,306],{"class":239,"line":300},4,[237,302,303],{"class":265},"    devtools",[237,305,269],{"class":258},[237,307,297],{"class":258},[237,309,311,314,316,320,323],{"class":239,"line":310},5,[237,312,313],{"class":265},"      eventLogSize",[237,315,269],{"class":258},[237,317,319],{"class":318},"sbssI"," 500",[237,321,322],{"class":258},",",[237,324,326],{"class":325},"sHwdD"," \u002F\u002F default: 200\n",[237,328,330],{"class":239,"line":329},6,[237,331,332],{"class":258},"    },\n",[237,334,336],{"class":239,"line":335},7,[237,337,338],{"class":325},"    \u002F\u002F or: devtools: false\n",[237,340,342],{"class":239,"line":341},8,[237,343,344],{"class":258},"  }\n",[237,346,348,351],{"class":239,"line":347},9,[237,349,350],{"class":258},"}",[237,352,353],{"class":254},")\n",[355,356,357],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":233,"searchDepth":240,"depth":262,"links":359},[360,361],{"id":134,"depth":262,"text":135},{"id":218,"depth":262,"text":18},"The \"Realtime\" Nuxt DevTools tab for inspecting connections, storage, and events.","md",null,{},{"icon":36},{"title":33,"description":362},"10C9Bz3n7EPJmZ4iI5s1dptnQ2nEpxcfobS28ua5g5c",[370,372],{"title":28,"path":29,"stem":30,"description":371,"icon":31,"children":-1},"Authenticate and authorize Socket.IO clients using the nuxt-realtime:io hook.",{"title":44,"path":45,"stem":46,"description":373,"icon":47,"children":-1},"Share reactive state across all connected clients with configurable sync strategies.",1787657973112]