[{"data":1,"prerenderedAt":328},["ShallowReactive",2],{"navigation_docs_en":3,"-en-guide-preview-mode":88,"-en-guide-preview-mode-surround":323},[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":28,"body":90,"description":316,"extension":317,"links":318,"meta":319,"navigation":320,"path":29,"seo":321,"stem":30,"__hash__":322},"docs_en\u002Fen\u002F2.guide\u002F2.preview-mode.md",{"type":91,"value":92,"toc":310},"minimark",[93,101,110,139,189,196,212,248,293,306],[94,95,96,100],"p",{},[97,98,99],"code",{},"nuxt-tina"," has two different \"preview\" mechanisms with different purposes. Don't confuse them:",[102,103,105,106,109],"h2",{"id":104},"_1-contextual-editing-already-working-not-usepreviewmode","1. Contextual editing (already working, not ",[97,107,108],{},"usePreviewMode()",")",[94,111,112,113,116,117,120,121,123,124,127,128,132,133,135,136,138],{},"Live editing inside the Tina Admin iframe (",[97,114,115],{},"\u002Fadmin#\u002F~\u002F...",") is patched through a custom ",[97,118,119],{},"postMessage"," bridge (",[97,122,57],{}," + ",[97,125,126],{},"bridge.ts","), ",[129,130,131],"strong",{},"not"," Nuxt's ",[97,134,108],{},". As the editor types in the Tina form, the new data is sent straight to the page via ",[97,137,119],{}," and patched into reactive Vue state: no server refetch at all.",[140,141,146],"pre",{"className":142,"code":143,"language":144,"meta":145,"style":145},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const { data, isEditing, isInIframe } = useTina(response)\n","ts","",[97,147,148],{"__ignoreMap":145},[149,150,153,157,161,165,168,171,173,176,179,182,186],"span",{"class":151,"line":152},"line",1,[149,154,156],{"class":155},"spNyl","const",[149,158,160],{"class":159},"sMK4o"," {",[149,162,164],{"class":163},"sTEyZ"," data",[149,166,167],{"class":159},",",[149,169,170],{"class":163}," isEditing",[149,172,167],{"class":159},[149,174,175],{"class":163}," isInIframe ",[149,177,178],{"class":159},"}",[149,180,181],{"class":159}," =",[149,183,185],{"class":184},"s2Zo4"," useTina",[149,187,188],{"class":163},"(response)\n",[102,190,192,193,195],{"id":191},"_2-usetinapreview-shareable-preview-link","2. ",[97,194,65],{},": shareable preview link",[94,197,198,199,202,203,211],{},"A separate composable for a different case: ",[129,200,201],{},"sharing a draft link"," with a stakeholder who never opens Tina Admin at all. It's a thin wrapper over Nuxt's own ",[204,205,209],"a",{"href":206,"rel":207},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-preview-mode",[208],"nofollow",[97,210,108],{},".",[140,213,215],{"className":142,"code":214,"language":144,"meta":145,"style":145},"const { enabled, state } = useTinaPreview()\n\u002F\u002F state.branch is filled automatically from the ?tina-preview=\u003Cbranch> query param\n",[97,216,217,241],{"__ignoreMap":145},[149,218,219,221,223,226,228,231,233,235,238],{"class":151,"line":152},[149,220,156],{"class":155},[149,222,160],{"class":159},[149,224,225],{"class":163}," enabled",[149,227,167],{"class":159},[149,229,230],{"class":163}," state ",[149,232,178],{"class":159},[149,234,181],{"class":159},[149,236,237],{"class":184}," useTinaPreview",[149,239,240],{"class":163},"()\n",[149,242,244],{"class":151,"line":243},2,[149,245,247],{"class":246},"sHwdD","\u002F\u002F state.branch is filled automatically from the ?tina-preview=\u003Cbranch> query param\n",[249,250,251,263,280],"ul",{},[252,253,254,255,258,259,262],"li",{},"Enabled through the ",[97,256,257],{},"?tina-preview=\u003Cbranch>"," query param (the param name is configurable: ",[97,260,261],{},"useTinaPreview('custom-param')",").",[252,264,265,268,269,272,273,276,277,279],{},[97,266,267],{},"state.branch"," is filled automatically, and any existing ",[97,270,271],{},"useAsyncData","\u002F",[97,274,275],{},"useFetch"," re-runs automatically when preview status changes (built into ",[97,278,108],{},", no manual logic needed).",[252,281,282,283,123,286,289,290,211],{},"Tested with ",[97,284,285],{},"nuxt generate",[97,287,288],{},"nuxt preview",", not ",[97,291,292],{},"nuxt dev",[94,294,295,296,298,299,302,303,305],{},"The composable itself works (the Nuxt-side plumbing is done). What's ",[129,297,131],{}," wired up is the real Tina Cloud Editorial Workflow token protocol (a paid PRO feature), since that needs a PRO account to verify how the token actually maps to a branch\u002Fdraft on Tina Cloud's side. If you only need live editing inside Tina Admin, you ",[129,300,301],{},"don't need"," ",[97,304,65],{}," at all: it's purely for the \"send a link to someone else\" case.",[307,308,309],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .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}",{"title":145,"searchDepth":243,"depth":243,"links":311},[312,314],{"id":104,"depth":243,"text":313},"1. Contextual editing (already working, not usePreviewMode())",{"id":191,"depth":243,"text":315},"2. useTinaPreview(): shareable preview link","Nuxt's usePreviewMode() and how it differs from the visual editing bridge.","md",null,{},true,{"title":28,"description":316},"kcLNe1nYIAKJVcOeu1HxXETISRGTK1wIPM_PSuu4dtU",[324,326],{"title":24,"path":25,"stem":26,"description":325,"children":-1},"How the postMessage communication flow and live preview work.",{"title":32,"path":33,"stem":34,"description":327,"children":-1},"Setting up Tina Cloud auth, and two editing modes: basic CMS vs visual\u002Fcontextual.",1789757557409]