[{"data":1,"prerenderedAt":394},["ShallowReactive",2],{"navigation_docs_en":3,"-en-guide-contextual-editing":88,"-en-guide-contextual-editing-surround":389},[4,18,51],{"title":5,"path":6,"stem":7,"children":8,"page":17},"Getting Started","\u002Fen\u002Fgetting-started","en\u002F1.getting-started",[9,13],{"title":10,"path":11,"stem":12},"Introduction","\u002Fen\u002Fgetting-started\u002Fintroduction","en\u002F1.getting-started\u002F1.introduction",{"title":14,"path":15,"stem":16},"Installation & Setup","\u002Fen\u002Fgetting-started\u002Finstallation","en\u002F1.getting-started\u002F2.installation",false,{"title":19,"path":20,"stem":21,"children":22,"page":17},"Guide","\u002Fen\u002Fguide","en\u002F2.guide",[23,27,31,35,39,43,47],{"title":24,"path":25,"stem":26},"Contextual Editing","\u002Fen\u002Fguide\u002Fcontextual-editing","en\u002F2.guide\u002F1.contextual-editing",{"title":28,"path":29,"stem":30},"Preview Mode","\u002Fen\u002Fguide\u002Fpreview-mode","en\u002F2.guide\u002F2.preview-mode",{"title":32,"path":33,"stem":34},"Tina Cloud & Editing Modes","\u002Fen\u002Fguide\u002Ftina-cloud","en\u002F2.guide\u002F3.tina-cloud",{"title":36,"path":37,"stem":38},"Nuxt Content Compatibility","\u002Fen\u002Fguide\u002Fnuxt-content","en\u002F2.guide\u002F4.nuxt-content",{"title":40,"path":41,"stem":42},"Media","\u002Fen\u002Fguide\u002Fmedia","en\u002F2.guide\u002F5.media",{"title":44,"path":45,"stem":46},"Advanced Rich-Text","\u002Fen\u002Fguide\u002Frich-text-advanced","en\u002F2.guide\u002F6.rich-text-advanced",{"title":48,"path":49,"stem":50},"Deployment","\u002Fen\u002Fguide\u002Fdeployment","en\u002F2.guide\u002F7.deployment",{"title":52,"path":53,"stem":54,"children":55,"page":17},"Api","\u002Fen\u002Fapi","en\u002F3.api",[56,60,64,68,72,76,80,84],{"title":57,"path":58,"stem":59},"useTina()","\u002Fen\u002Fapi\u002Fuse-tina","en\u002F3.api\u002F1.use-tina",{"title":61,"path":62,"stem":63},"useTinaBridge()","\u002Fen\u002Fapi\u002Fuse-tina-bridge","en\u002F3.api\u002F2.use-tina-bridge",{"title":65,"path":66,"stem":67},"useTinaPreview()","\u002Fen\u002Fapi\u002Fuse-tina-preview","en\u002F3.api\u002F3.use-tina-preview",{"title":69,"path":70,"stem":71},"\u003CTinaProvider>","\u002Fen\u002Fapi\u002Ftina-provider","en\u002F3.api\u002F4.tina-provider",{"title":73,"path":74,"stem":75},"\u003CTinaMarkdown>","\u002Fen\u002Fapi\u002Ftina-markdown","en\u002F3.api\u002F5.tina-markdown",{"title":77,"path":78,"stem":79},"\u003CTinaMermaid>","\u002Fen\u002Fapi\u002Ftina-mermaid","en\u002F3.api\u002F6.tina-mermaid",{"title":81,"path":82,"stem":83},"Module Configuration","\u002Fen\u002Fapi\u002Fconfiguration","en\u002F3.api\u002F7.configuration",{"title":85,"path":86,"stem":87},"Field Types","\u002Fen\u002Fapi\u002Ffield-types","en\u002F3.api\u002F8.field-types",{"id":89,"title":24,"body":90,"description":382,"extension":383,"links":384,"meta":385,"navigation":386,"path":25,"seo":387,"stem":26,"__hash__":388},"docs_en\u002Fen\u002F2.guide\u002F1.contextual-editing.md",{"type":91,"value":92,"toc":377},"minimark",[93,97,102,105,112,116,147,151,166,355,370,373],[94,95,96],"p",{},"Contextual editing lets an editor see their changes on the live page immediately, without hitting save or waiting for a rebuild.",[98,99,101],"h2",{"id":100},"communication-architecture","Communication architecture",[94,103,104],{},"Tina Admin and Nuxt talk to each other over a secure cross-window messaging protocol:",[94,106,107],{},[108,109],"img",{"alt":110,"src":111},"Tina Admin and Nuxt communicating over postMessage","\u002FpostMessage.png",[98,113,115],{"id":114},"event-lifecycle","Event lifecycle",[117,118,119,132,138],"ol",{},[120,121,122,126,127,131],"li",{},[123,124,125],"strong",{},"Client ready",": once the Nuxt page finishes loading inside the iframe, the bridge sends a ",[128,129,130],"code",{},"tinacms:client:ready"," event with the current URL to Tina Admin.",[120,133,134,137],{},[123,135,136],{},"Form sync",": Tina Admin detects the matching form for that URL and shows the editing sidebar.",[120,139,140,143,144,146],{},[123,141,142],{},"Reactive patching",": every keystroke or value change in the Tina form is sent as a payload to the iframe, picked up by the ",[128,145,57],{}," composable, and patched into the DOM.",[98,148,150],{"id":149},"configuring-the-preview-route","Configuring the preview route",[94,152,153,154,157,158,161,162,165],{},"Tina Admin needs to know which URL to load in the preview iframe before the handshake above can happen. It gets that URL from a ",[128,155,156],{},"router"," function you define per collection in ",[128,159,160],{},"tina\u002Fconfig.ts",", under ",[128,163,164],{},"ui.router",". Without one, clicking a document opens the internal edit form instead of the live preview.",[167,168,173],"pre",{"className":169,"code":170,"filename":160,"language":171,"meta":172,"style":172},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  name: 'post',\n  label: 'Posts',\n  path: 'content\u002Fposts',\n  ui: {\n    router: ({ document }) => `\u002Fblog\u002F${document._sys.breadcrumbs.join('\u002F')}`,\n  },\n  fields: [ \u002F* ... *\u002F ],\n}\n","ts","",[128,174,175,184,207,224,241,252,322,328,349],{"__ignoreMap":172},[176,177,180],"span",{"class":178,"line":179},"line",1,[176,181,183],{"class":182},"sMK4o","{\n",[176,185,187,191,194,197,201,204],{"class":178,"line":186},2,[176,188,190],{"class":189},"sBMFI","  name",[176,192,193],{"class":182},":",[176,195,196],{"class":182}," '",[176,198,200],{"class":199},"sfazB","post",[176,202,203],{"class":182},"'",[176,205,206],{"class":182},",\n",[176,208,210,213,215,217,220,222],{"class":178,"line":209},3,[176,211,212],{"class":189},"  label",[176,214,193],{"class":182},[176,216,196],{"class":182},[176,218,219],{"class":199},"Posts",[176,221,203],{"class":182},[176,223,206],{"class":182},[176,225,227,230,232,234,237,239],{"class":178,"line":226},4,[176,228,229],{"class":189},"  path",[176,231,193],{"class":182},[176,233,196],{"class":182},[176,235,236],{"class":199},"content\u002Fposts",[176,238,203],{"class":182},[176,240,206],{"class":182},[176,242,244,247,249],{"class":178,"line":243},5,[176,245,246],{"class":189},"  ui",[176,248,193],{"class":182},[176,250,251],{"class":182}," {\n",[176,253,255,258,260,263,267,270,274,277,280,283,287,290,293,295,298,300,304,307,309,312,314,317,320],{"class":178,"line":254},6,[176,256,257],{"class":189},"    router",[176,259,193],{"class":182},[176,261,262],{"class":182}," ({",[176,264,266],{"class":265},"sHdIc"," document",[176,268,269],{"class":182}," })",[176,271,273],{"class":272},"spNyl"," =>",[176,275,276],{"class":182}," `",[176,278,279],{"class":199},"\u002Fblog\u002F",[176,281,282],{"class":182},"${",[176,284,286],{"class":285},"sTEyZ","document",[176,288,289],{"class":182},".",[176,291,292],{"class":285},"_sys",[176,294,289],{"class":182},[176,296,297],{"class":285},"breadcrumbs",[176,299,289],{"class":182},[176,301,303],{"class":302},"s2Zo4","join",[176,305,306],{"class":285},"(",[176,308,203],{"class":182},[176,310,311],{"class":199},"\u002F",[176,313,203],{"class":182},[176,315,316],{"class":285},")",[176,318,319],{"class":182},"}`",[176,321,206],{"class":182},[176,323,325],{"class":178,"line":324},7,[176,326,327],{"class":182},"  },\n",[176,329,331,334,336,340,344,347],{"class":178,"line":330},8,[176,332,333],{"class":189},"  fields",[176,335,193],{"class":182},[176,337,339],{"class":338},"swJcz"," [ ",[176,341,343],{"class":342},"sHwdD","\u002F* ... *\u002F",[176,345,346],{"class":338}," ]",[176,348,206],{"class":182},[176,350,352],{"class":178,"line":351},9,[176,353,354],{"class":182},"}\n",[94,356,357,359,360,362,363,366,367,369],{},[128,358,156],{}," receives the ",[128,361,286],{}," and ",[128,364,365],{},"collection",", and returns the path your Nuxt app serves that document at. Tina Admin resolves that path against its own origin and loads it into the preview iframe, and the ",[128,368,130],{}," handshake takes over from there.",[94,371,372],{},"This mapping lives entirely in TinaCMS's schema, not in nuxt-tina. The module only implements the iframe side of the protocol once the preview page has loaded.",[374,375,376],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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":172,"searchDepth":186,"depth":186,"links":378},[379,380,381],{"id":100,"depth":186,"text":101},{"id":114,"depth":186,"text":115},{"id":149,"depth":186,"text":150},"How the postMessage communication flow and live preview work.","md",null,{},true,{"title":24,"description":382},"-Ahf8YJ1AFT-5sfjWp4XoiO4wXH_RGtcXZrBkHNJUuA",[390,392],{"title":14,"path":15,"stem":16,"description":391,"children":-1},"Install nuxt-tina in a Nuxt project and verify it works.",{"title":28,"path":29,"stem":30,"description":393,"children":-1},"Nuxt's usePreviewMode() and how it differs from the visual editing bridge.",1789757557168]