[{"data":1,"prerenderedAt":906},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fversion-2":111,"\u002Fblog\u002Fversion-2-surround":900},[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":113,"authors":114,"body":120,"category":888,"date":889,"description":890,"extension":891,"image":892,"meta":893,"navigation":220,"path":894,"seo":895,"stem":896,"tags":897,"__hash__":899},"blog\u002Fblog\u002Fversion-2.md","Nuxt Realtime 0.2",[115],{"name":116,"avatar":117,"to":119},"Daan van Geloven",{"src":118},"https:\u002F\u002Fgithub.com\u002Fdaanvangeloven.png","https:\u002F\u002Fgithub.com\u002Fdaanvangeloven",{"type":121,"value":122,"toc":878},"minimark",[123,127,132,141,367,374,378,385,457,464,470,475,478,485,599,604,609,613,620,630,635,639,658,663,667,678,840,845,849,859,863,874],[124,125,126],"p",{},"Nuxt Realtime 0.2 is out. Here's what's new since the last release.",[128,129,131],"h2",{"id":130},"rooms","Rooms",[124,133,134,140],{},[135,136,137],"a",{"href":74},[138,139,73],"code",{}," ties state, events, presence, and locks together under one room id, with server-side lifecycle hooks and a single auth checkpoint instead of gating every handler individually.",[142,143,148],"pre",{"className":144,"code":145,"language":146,"meta":147,"style":147},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst room = useRealtimeRoom('document:123')\n\nconst doc = room.state('content', '')\nconst { members } = room.presence({ info: { name: 'Alice' } })\nconst { claim, release, ownedByMe } = room.lock('editing')\n\u003C\u002Fscript>\n","vue","",[138,149,150,185,215,222,258,315,357],{"__ignoreMap":147},[151,152,155,159,163,167,170,173,176,180,182],"span",{"class":153,"line":154},"line",1,[151,156,158],{"class":157},"sMK4o","\u003C",[151,160,162],{"class":161},"swJcz","script",[151,164,166],{"class":165},"spNyl"," setup",[151,168,169],{"class":165}," lang",[151,171,172],{"class":157},"=",[151,174,175],{"class":157},"\"",[151,177,179],{"class":178},"sfazB","ts",[151,181,175],{"class":157},[151,183,184],{"class":157},">\n",[151,186,188,191,195,197,201,204,207,210,212],{"class":153,"line":187},2,[151,189,190],{"class":165},"const",[151,192,194],{"class":193},"sTEyZ"," room ",[151,196,172],{"class":157},[151,198,200],{"class":199},"s2Zo4"," useRealtimeRoom",[151,202,203],{"class":193},"(",[151,205,206],{"class":157},"'",[151,208,209],{"class":178},"document:123",[151,211,206],{"class":157},[151,213,214],{"class":193},")\n",[151,216,218],{"class":153,"line":217},3,[151,219,221],{"emptyLinePlaceholder":220},true,"\n",[151,223,225,227,230,232,235,238,241,243,245,248,250,253,256],{"class":153,"line":224},4,[151,226,190],{"class":165},[151,228,229],{"class":193}," doc ",[151,231,172],{"class":157},[151,233,234],{"class":193}," room",[151,236,237],{"class":157},".",[151,239,240],{"class":199},"state",[151,242,203],{"class":193},[151,244,206],{"class":157},[151,246,247],{"class":178},"content",[151,249,206],{"class":157},[151,251,252],{"class":157},",",[151,254,255],{"class":157}," ''",[151,257,214],{"class":193},[151,259,261,263,266,269,272,275,277,279,282,284,287,290,293,295,298,300,303,306,308,311,313],{"class":153,"line":260},5,[151,262,190],{"class":165},[151,264,265],{"class":157}," {",[151,267,268],{"class":193}," members ",[151,270,271],{"class":157},"}",[151,273,274],{"class":157}," =",[151,276,234],{"class":193},[151,278,237],{"class":157},[151,280,281],{"class":199},"presence",[151,283,203],{"class":193},[151,285,286],{"class":157},"{",[151,288,289],{"class":161}," info",[151,291,292],{"class":157},":",[151,294,265],{"class":157},[151,296,297],{"class":161}," name",[151,299,292],{"class":157},[151,301,302],{"class":157}," '",[151,304,305],{"class":178},"Alice",[151,307,206],{"class":157},[151,309,310],{"class":157}," }",[151,312,310],{"class":157},[151,314,214],{"class":193},[151,316,318,320,322,325,327,330,332,335,337,339,341,343,346,348,350,353,355],{"class":153,"line":317},6,[151,319,190],{"class":165},[151,321,265],{"class":157},[151,323,324],{"class":193}," claim",[151,326,252],{"class":157},[151,328,329],{"class":193}," release",[151,331,252],{"class":157},[151,333,334],{"class":193}," ownedByMe ",[151,336,271],{"class":157},[151,338,274],{"class":157},[151,340,234],{"class":193},[151,342,237],{"class":157},[151,344,345],{"class":199},"lock",[151,347,203],{"class":193},[151,349,206],{"class":157},[151,351,352],{"class":178},"editing",[151,354,206],{"class":157},[151,356,214],{"class":193},[151,358,360,363,365],{"class":153,"line":359},7,[151,361,362],{"class":157},"\u003C\u002F",[151,364,162],{"class":161},[151,366,184],{"class":157},[124,368,369,370,373],{},"See the ",[135,371,372],{"href":74},"rooms docs"," for details.",[128,375,377],{"id":376},"locking","Locking",[124,379,380,384],{},[135,381,382],{"href":65},[138,383,64],{}," claims exclusive ownership of a key across all connected clients, so only one user edits a record or drags a card at a time.",[142,386,388],{"className":144,"code":387,"language":146,"meta":147,"style":147},"\u003Cscript setup lang=\"ts\">\nconst { claim, release, ownedByMe, locked } = useRealtimeLock('document:123')\n\u003C\u002Fscript>\n",[138,389,390,410,449],{"__ignoreMap":147},[151,391,392,394,396,398,400,402,404,406,408],{"class":153,"line":154},[151,393,158],{"class":157},[151,395,162],{"class":161},[151,397,166],{"class":165},[151,399,169],{"class":165},[151,401,172],{"class":157},[151,403,175],{"class":157},[151,405,179],{"class":178},[151,407,175],{"class":157},[151,409,184],{"class":157},[151,411,412,414,416,418,420,422,424,427,429,432,434,436,439,441,443,445,447],{"class":153,"line":187},[151,413,190],{"class":165},[151,415,265],{"class":157},[151,417,324],{"class":193},[151,419,252],{"class":157},[151,421,329],{"class":193},[151,423,252],{"class":157},[151,425,426],{"class":193}," ownedByMe",[151,428,252],{"class":157},[151,430,431],{"class":193}," locked ",[151,433,271],{"class":157},[151,435,274],{"class":157},[151,437,438],{"class":199}," useRealtimeLock",[151,440,203],{"class":193},[151,442,206],{"class":157},[151,444,209],{"class":178},[151,446,206],{"class":157},[151,448,214],{"class":193},[151,450,451,453,455],{"class":153,"line":217},[151,452,362],{"class":157},[151,454,162],{"class":161},[151,456,184],{"class":157},[124,458,459,463],{},[135,460,461],{"href":69},[138,462,68],{}," pairs with it for a bulk, read-only view of every lock tagged with a room, without subscribing to each key individually.",[124,465,466],{},[467,468],"video",{"src":469,"autoPlay":220,"loop":220,"muted":220,"playsInline":220},"\u002Flock-demo.mp4",[124,471,369,472,373],{},[135,473,474],{"href":65},"locking docs",[128,476,477],{"id":281},"Presence",[124,479,480,484],{},[135,481,482],{"href":60},[138,483,59],{}," tracks which clients are currently present in a room, with optional info about each one (a name, avatar, cursor position). Useful for \"who's viewing this page\" indicators and avatar stacks.",[142,486,488],{"className":144,"code":487,"language":146,"meta":147,"style":147},"\u003Cscript setup lang=\"ts\">\nconst { members, join, leave } = useRealtimePresence('document:123', {\n  info: { name: 'Alice', avatarUrl: '\u002Falice.png' },\n})\n\u003C\u002Fscript>\n",[138,489,490,510,549,585,591],{"__ignoreMap":147},[151,491,492,494,496,498,500,502,504,506,508],{"class":153,"line":154},[151,493,158],{"class":157},[151,495,162],{"class":161},[151,497,166],{"class":165},[151,499,169],{"class":165},[151,501,172],{"class":157},[151,503,175],{"class":157},[151,505,179],{"class":178},[151,507,175],{"class":157},[151,509,184],{"class":157},[151,511,512,514,516,519,521,524,526,529,531,533,536,538,540,542,544,546],{"class":153,"line":187},[151,513,190],{"class":165},[151,515,265],{"class":157},[151,517,518],{"class":193}," members",[151,520,252],{"class":157},[151,522,523],{"class":193}," join",[151,525,252],{"class":157},[151,527,528],{"class":193}," leave ",[151,530,271],{"class":157},[151,532,274],{"class":157},[151,534,535],{"class":199}," useRealtimePresence",[151,537,203],{"class":193},[151,539,206],{"class":157},[151,541,209],{"class":178},[151,543,206],{"class":157},[151,545,252],{"class":157},[151,547,548],{"class":157}," {\n",[151,550,551,554,556,558,560,562,564,566,568,570,573,575,577,580,582],{"class":153,"line":217},[151,552,553],{"class":161},"  info",[151,555,292],{"class":157},[151,557,265],{"class":157},[151,559,297],{"class":161},[151,561,292],{"class":157},[151,563,302],{"class":157},[151,565,305],{"class":178},[151,567,206],{"class":157},[151,569,252],{"class":157},[151,571,572],{"class":161}," avatarUrl",[151,574,292],{"class":157},[151,576,302],{"class":157},[151,578,579],{"class":178},"\u002Falice.png",[151,581,206],{"class":157},[151,583,584],{"class":157}," },\n",[151,586,587,589],{"class":153,"line":224},[151,588,271],{"class":157},[151,590,214],{"class":193},[151,592,593,595,597],{"class":153,"line":260},[151,594,362],{"class":157},[151,596,162],{"class":161},[151,598,184],{"class":157},[124,600,601],{},[467,602],{"src":603,"autoPlay":220,"loop":220,"muted":220,"playsInline":220},"\u002Fpresence-demo.mp4",[124,605,369,606,373],{},[135,607,608],{"href":60},"presence docs",[128,610,612],{"id":611},"realtime-devtools","Realtime DevTools",[124,614,615],{},[616,617],"img",{"alt":618,"src":619},"image","\u002Frealtime-devtools.png",[124,621,622,623,629],{},"A \"Realtime\" tab in ",[135,624,628],{"href":625,"rel":626},"https:\u002F\u002Fdevtools.nuxt.com\u002F",[627],"nofollow","Nuxt DevTools"," shows 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. It's dev-only and never ships in production.",[124,631,369,632,373],{},[135,633,634],{"href":34},"DevTools docs",[128,636,638],{"id":637},"connection-authentication","Connection authentication",[124,640,641,642,645,646,649,650,653,654,657],{},"A new ",[138,643,644],{},"nuxt-realtime:io"," Nitro hook exposes the Socket.IO ",[138,647,648],{},"Server"," before any connections are accepted, so you can register ",[138,651,652],{},"io.use()"," middleware to authenticate or authorize clients — JWT, session cookies, or anything else. A matching ",[138,655,656],{},"nuxt-realtime:auth"," app hook lets the client attach a fresh token on every connection attempt, including reconnects.",[124,659,369,660,373],{},[135,661,662],{"href":29},"Authentication docs",[128,664,666],{"id":665},"redis-cluster-support","Redis Cluster support",[124,668,669,670,673,674,677],{},"The Redis driver now accepts a ",[138,671,672],{},"cluster"," option, so ",[138,675,676],{},"reactiveRedisDriver()"," can talk to a Redis Cluster instead of a single node:",[142,679,682],{"className":680,"code":681,"language":179,"meta":147,"style":147},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { reactiveRedisDriver } from 'nuxt-realtime\u002Fdrivers\u002Fredis'\n\nexport default defineNuxtConfig({\n  nuxtRealtime: {\n    storage: reactiveRedisDriver({\n      cluster: [{ host: 'redis-1', port: 6379 }, { host: 'redis-2', port: 6379 }],\n    }),\n  },\n})\n",[138,683,684,708,712,728,737,750,817,827,833],{"__ignoreMap":147},[151,685,686,690,692,695,697,700,702,705],{"class":153,"line":154},[151,687,689],{"class":688},"s7zQu","import",[151,691,265],{"class":157},[151,693,694],{"class":193}," reactiveRedisDriver",[151,696,310],{"class":157},[151,698,699],{"class":688}," from",[151,701,302],{"class":157},[151,703,704],{"class":178},"nuxt-realtime\u002Fdrivers\u002Fredis",[151,706,707],{"class":157},"'\n",[151,709,710],{"class":153,"line":187},[151,711,221],{"emptyLinePlaceholder":220},[151,713,714,717,720,723,725],{"class":153,"line":217},[151,715,716],{"class":688},"export",[151,718,719],{"class":688}," default",[151,721,722],{"class":199}," defineNuxtConfig",[151,724,203],{"class":193},[151,726,727],{"class":157},"{\n",[151,729,730,733,735],{"class":153,"line":224},[151,731,732],{"class":161},"  nuxtRealtime",[151,734,292],{"class":157},[151,736,548],{"class":157},[151,738,739,742,744,746,748],{"class":153,"line":260},[151,740,741],{"class":161},"    storage",[151,743,292],{"class":157},[151,745,694],{"class":199},[151,747,203],{"class":193},[151,749,727],{"class":157},[151,751,752,755,757,760,762,765,767,769,772,774,776,779,781,785,788,790,792,794,796,799,801,803,805,807,809,811,814],{"class":153,"line":317},[151,753,754],{"class":161},"      cluster",[151,756,292],{"class":157},[151,758,759],{"class":193}," [",[151,761,286],{"class":157},[151,763,764],{"class":161}," host",[151,766,292],{"class":157},[151,768,302],{"class":157},[151,770,771],{"class":178},"redis-1",[151,773,206],{"class":157},[151,775,252],{"class":157},[151,777,778],{"class":161}," port",[151,780,292],{"class":157},[151,782,784],{"class":783},"sbssI"," 6379",[151,786,787],{"class":157}," },",[151,789,265],{"class":157},[151,791,764],{"class":161},[151,793,292],{"class":157},[151,795,302],{"class":157},[151,797,798],{"class":178},"redis-2",[151,800,206],{"class":157},[151,802,252],{"class":157},[151,804,778],{"class":161},[151,806,292],{"class":157},[151,808,784],{"class":783},[151,810,310],{"class":157},[151,812,813],{"class":193},"]",[151,815,816],{"class":157},",\n",[151,818,819,822,825],{"class":153,"line":359},[151,820,821],{"class":157},"    }",[151,823,824],{"class":193},")",[151,826,816],{"class":157},[151,828,830],{"class":153,"line":829},8,[151,831,832],{"class":157},"  },\n",[151,834,836,838],{"class":153,"line":835},9,[151,837,271],{"class":157},[151,839,214],{"class":193},[124,841,369,842,373],{},[135,843,844],{"href":19},"configuration docs",[128,846,848],{"id":847},"configurable-socketio-path","Configurable Socket.IO path",[124,850,851,854,855,858],{},[138,852,853],{},"socketio.path"," lets you move the Socket.IO endpoint off the ",[138,856,857],{},"\u002Fsocket.io"," default (useful behind a reverse proxy that already owns that path). The client and server now derive the same path from this single option.",[128,860,862],{"id":861},"fixes","Fixes",[864,865,866],"ul",{},[867,868,869,870,873],"li",{},"Client-supplied storage keys can no longer read or write the internal ",[138,871,872],{},"_lease:"," namespace used for storage expiry.",[875,876,877],"style",{},"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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);}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":147,"searchDepth":154,"depth":187,"links":879},[880,881,882,883,884,885,886,887],{"id":130,"depth":187,"text":131},{"id":376,"depth":187,"text":377},{"id":281,"depth":187,"text":477},{"id":611,"depth":187,"text":612},{"id":637,"depth":187,"text":638},{"id":665,"depth":187,"text":666},{"id":847,"depth":187,"text":848},{"id":861,"depth":187,"text":862},"Release","2026-07-31T00:00:00.000Z","DevTools, connection auth, and presence\u002Flocking\u002Frooms land in Nuxt Realtime 0.2.","md",null,{},"\u002Fblog\u002Fversion-2",{"title":113,"description":890},"blog\u002Fversion-2",[898],"release","ULNE3Stv56E2HMjCzWUU0Vxpifh5RM5FDUsnUY-WPTA",[892,901],{"title":902,"path":903,"stem":904,"description":905,"children":-1},"Welcome to the Nuxt Realtime blog","\u002Fblog\u002Fwelcome-to-the-blog","blog\u002Fwelcome-to-the-blog","Articles, release notes, and updates about Nuxt Realtime.",1787657972695]