[{"data":1,"prerenderedAt":398},["ShallowReactive",2],{"docs:\u002Fen\u002Fdocs\u002Fintegrations\u002Fvue-nuxt":3},{"id":4,"title":5,"body":6,"description":388,"extension":389,"meta":390,"navigation":393,"path":394,"seo":395,"stem":396,"__hash__":397},"docs_en\u002Fen\u002Fdocs\u002Fintegrations\u002Fvue-nuxt.md","Vue and Nuxt",{"type":7,"value":8,"toc":382},"minimark",[9,14,18,22,25,29,32,36,50,378],[10,11,13],"h2",{"id":12},"client-only-integration","Client-only integration",[15,16,17],"p",{},"The editor is independent of Vue, but can be mounted from onMounted into an element ref. Import the stylesheet as application CSS. In Nuxt, keep editor construction and browser-only code outside server execution; ClientOnly can host the UI.",[10,19,21],{"id":20},"dynamic-imports","Dynamic imports",[15,23,24],{},"A local workspace import works after npm run build. This is an integration recipe, not a published Vue wrapper. Await a dynamic import, then check whether the component has already unmounted before constructing the editor.",[10,26,28],{"id":27},"cleanup","Cleanup",[15,30,31],{},"onBeforeUnmount marks the component disposed, destroys the instance and aborts application-owned requests. Avoid duplicate mounts on the same element. Initial Markdown\u002FCSS needs whenReady; asynchronous changes need awaiting as well.",[10,33,35],{"id":34},"controlled-content","Controlled content",[15,37,38,39,44,45,49],{},"Use onChange to propagate applied HTML\u002FJSON\u002FCSS and a revision. Do not call setContent for every selection event or echo each update back into the editor without checking ownership; that can reset history or create loops. ",[40,41,43],"a",{"href":42},"\u002Fen\u002Fdocs\u002Fguides\u002Flifecycle","Lifecycle",", ",[40,46,48],{"href":47},"\u002Fen\u002Fdocs\u002Fguides\u002Fstorage","storage",".",[51,52,57],"pre",{"className":53,"code":54,"language":55,"meta":56,"style":56},"language-vue shiki shiki-themes github-dark","\u003Cscript setup lang=\"ts\">\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\nimport type { ViText } from '@vitext-ru\u002Feditor';\nimport '@vitext-ru\u002Feditor\u002Fstyle.css';\nconst host = ref\u003CHTMLElement>();\nlet editor: ViText | undefined;\nlet disposed = false;\nonMounted(async () => {\n  const { ViText } = await import('@vitext-ru\u002Feditor');\n  if (disposed || !host.value) return;\n  editor = new ViText(host.value, { language: 'en', preset: 'base' });\n});\nonBeforeUnmount(() => { disposed = true; editor?.destroy(); });\n\u003C\u002Fscript>\n\u003Ctemplate>\u003Cdiv ref=\"host\" \u002F>\u003C\u002Ftemplate>\n","vue","",[58,59,60,90,109,127,137,161,184,199,220,251,274,302,308,336,346],"code",{"__ignoreMap":56},[61,62,65,69,73,77,80,83,87],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"s95oV","\u003C",[61,70,72],{"class":71},"s4JwU","script",[61,74,76],{"class":75},"svObZ"," setup",[61,78,79],{"class":75}," lang",[61,81,82],{"class":67},"=",[61,84,86],{"class":85},"sU2Wk","\"ts\"",[61,88,89],{"class":67},">\n",[61,91,93,97,100,103,106],{"class":63,"line":92},2,[61,94,96],{"class":95},"snl16","import",[61,98,99],{"class":67}," { ref, onMounted, onBeforeUnmount } ",[61,101,102],{"class":95},"from",[61,104,105],{"class":85}," 'vue'",[61,107,108],{"class":67},";\n",[61,110,112,114,117,120,122,125],{"class":63,"line":111},3,[61,113,96],{"class":95},[61,115,116],{"class":95}," type",[61,118,119],{"class":67}," { ViText } ",[61,121,102],{"class":95},[61,123,124],{"class":85}," '@vitext-ru\u002Feditor'",[61,126,108],{"class":67},[61,128,130,132,135],{"class":63,"line":129},4,[61,131,96],{"class":95},[61,133,134],{"class":85}," '@vitext-ru\u002Feditor\u002Fstyle.css'",[61,136,108],{"class":67},[61,138,140,143,147,150,153,155,158],{"class":63,"line":139},5,[61,141,142],{"class":95},"const",[61,144,146],{"class":145},"sDLfK"," host",[61,148,149],{"class":95}," =",[61,151,152],{"class":75}," ref",[61,154,68],{"class":67},[61,156,157],{"class":75},"HTMLElement",[61,159,160],{"class":67},">();\n",[61,162,164,167,170,173,176,179,182],{"class":63,"line":163},6,[61,165,166],{"class":95},"let",[61,168,169],{"class":67}," editor",[61,171,172],{"class":95},":",[61,174,175],{"class":75}," ViText",[61,177,178],{"class":95}," |",[61,180,181],{"class":145}," undefined",[61,183,108],{"class":67},[61,185,187,189,192,194,197],{"class":63,"line":186},7,[61,188,166],{"class":95},[61,190,191],{"class":67}," disposed ",[61,193,82],{"class":95},[61,195,196],{"class":145}," false",[61,198,108],{"class":67},[61,200,202,205,208,211,214,217],{"class":63,"line":201},8,[61,203,204],{"class":75},"onMounted",[61,206,207],{"class":67},"(",[61,209,210],{"class":95},"async",[61,212,213],{"class":67}," () ",[61,215,216],{"class":95},"=>",[61,218,219],{"class":67}," {\n",[61,221,223,226,229,232,235,237,240,243,245,248],{"class":63,"line":222},9,[61,224,225],{"class":95},"  const",[61,227,228],{"class":67}," { ",[61,230,231],{"class":145},"ViText",[61,233,234],{"class":67}," } ",[61,236,82],{"class":95},[61,238,239],{"class":95}," await",[61,241,242],{"class":95}," import",[61,244,207],{"class":67},[61,246,247],{"class":85},"'@vitext-ru\u002Feditor'",[61,249,250],{"class":67},");\n",[61,252,254,257,260,263,266,269,272],{"class":63,"line":253},10,[61,255,256],{"class":95},"  if",[61,258,259],{"class":67}," (disposed ",[61,261,262],{"class":95},"||",[61,264,265],{"class":95}," !",[61,267,268],{"class":67},"host.value) ",[61,270,271],{"class":95},"return",[61,273,108],{"class":67},[61,275,277,280,282,285,287,290,293,296,299],{"class":63,"line":276},11,[61,278,279],{"class":67},"  editor ",[61,281,82],{"class":95},[61,283,284],{"class":95}," new",[61,286,175],{"class":75},[61,288,289],{"class":67},"(host.value, { language: ",[61,291,292],{"class":85},"'en'",[61,294,295],{"class":67},", preset: ",[61,297,298],{"class":85},"'base'",[61,300,301],{"class":67}," });\n",[61,303,305],{"class":63,"line":304},12,[61,306,307],{"class":67},"});\n",[61,309,311,314,317,319,322,324,327,330,333],{"class":63,"line":310},13,[61,312,313],{"class":75},"onBeforeUnmount",[61,315,316],{"class":67},"(() ",[61,318,216],{"class":95},[61,320,321],{"class":67}," { disposed ",[61,323,82],{"class":95},[61,325,326],{"class":145}," true",[61,328,329],{"class":67},"; editor?.",[61,331,332],{"class":75},"destroy",[61,334,335],{"class":67},"(); });\n",[61,337,339,342,344],{"class":63,"line":338},14,[61,340,341],{"class":67},"\u003C\u002F",[61,343,72],{"class":71},[61,345,89],{"class":67},[61,347,349,351,354,357,360,362,364,367,371,374,376],{"class":63,"line":348},15,[61,350,68],{"class":67},[61,352,353],{"class":71},"template",[61,355,356],{"class":67},">\u003C",[61,358,359],{"class":71},"div",[61,361,152],{"class":75},[61,363,82],{"class":67},[61,365,366],{"class":85},"\"host\"",[61,368,370],{"class":369},"s6RL2"," \u002F",[61,372,373],{"class":67},">\u003C\u002F",[61,375,353],{"class":71},[61,377,89],{"class":67},[379,380,381],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}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);}",{"title":56,"searchDepth":92,"depth":92,"links":383},[384,385,386,387],{"id":12,"depth":92,"text":13},{"id":20,"depth":92,"text":21},{"id":27,"depth":92,"text":28},{"id":34,"depth":92,"text":35},"Browser-only mounting and reliable instance disposal.","md",{"group":391,"order":392},"Integrations",60,true,"\u002Fen\u002Fdocs\u002Fintegrations\u002Fvue-nuxt",{"title":5,"description":388},"en\u002Fdocs\u002Fintegrations\u002Fvue-nuxt","JI3k5Fn_kp9KE7KwjM7IJmvIwBbC1o9MTGbqYK_UJtY",1792670389528]