[{"data":1,"prerenderedAt":376},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fintegrations\u002Fvue-nuxt":3},{"id":4,"title":5,"body":6,"description":366,"extension":367,"meta":368,"navigation":371,"path":372,"seo":373,"stem":374,"__hash__":375},"docs\u002Fdocs\u002Fintegrations\u002Fvue-nuxt.md","Vue и Nuxt",{"type":7,"value":8,"toc":363},"minimark",[9,14,23,350,359],[10,11,13],"h2",{"id":12},"компонент-приложения","Компонент приложения",[15,16,17,18,22],"p",{},"Установите ",[19,20,21],"code",{},"@vitext-ru\u002Feditor@beta"," из npm. Это интеграция обычного JavaScript-пакета, не отдельная Vue-обёртка. В SSR не создавайте ViText на сервере.",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"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: 'ru', preset: 'base' });\n});\nonBeforeUnmount(() => { disposed = true; editor?.destroy(); });\n\u003C\u002Fscript>\n\u003Ctemplate>\u003Cdiv ref=\"host\" \u002F>\u003C\u002Ftemplate>\n","vue","",[19,31,32,62,81,99,109,133,156,171,192,223,246,274,280,308,318],{"__ignoreMap":29},[33,34,37,41,45,49,52,55,59],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"s95oV","\u003C",[33,42,44],{"class":43},"s4JwU","script",[33,46,48],{"class":47},"svObZ"," setup",[33,50,51],{"class":47}," lang",[33,53,54],{"class":39},"=",[33,56,58],{"class":57},"sU2Wk","\"ts\"",[33,60,61],{"class":39},">\n",[33,63,65,69,72,75,78],{"class":35,"line":64},2,[33,66,68],{"class":67},"snl16","import",[33,70,71],{"class":39}," { ref, onMounted, onBeforeUnmount } ",[33,73,74],{"class":67},"from",[33,76,77],{"class":57}," 'vue'",[33,79,80],{"class":39},";\n",[33,82,84,86,89,92,94,97],{"class":35,"line":83},3,[33,85,68],{"class":67},[33,87,88],{"class":67}," type",[33,90,91],{"class":39}," { ViText } ",[33,93,74],{"class":67},[33,95,96],{"class":57}," '@vitext-ru\u002Feditor'",[33,98,80],{"class":39},[33,100,102,104,107],{"class":35,"line":101},4,[33,103,68],{"class":67},[33,105,106],{"class":57}," '@vitext-ru\u002Feditor\u002Fstyle.css'",[33,108,80],{"class":39},[33,110,112,115,119,122,125,127,130],{"class":35,"line":111},5,[33,113,114],{"class":67},"const",[33,116,118],{"class":117},"sDLfK"," host",[33,120,121],{"class":67}," =",[33,123,124],{"class":47}," ref",[33,126,40],{"class":39},[33,128,129],{"class":47},"HTMLElement",[33,131,132],{"class":39},">();\n",[33,134,136,139,142,145,148,151,154],{"class":35,"line":135},6,[33,137,138],{"class":67},"let",[33,140,141],{"class":39}," editor",[33,143,144],{"class":67},":",[33,146,147],{"class":47}," ViText",[33,149,150],{"class":67}," |",[33,152,153],{"class":117}," undefined",[33,155,80],{"class":39},[33,157,159,161,164,166,169],{"class":35,"line":158},7,[33,160,138],{"class":67},[33,162,163],{"class":39}," disposed ",[33,165,54],{"class":67},[33,167,168],{"class":117}," false",[33,170,80],{"class":39},[33,172,174,177,180,183,186,189],{"class":35,"line":173},8,[33,175,176],{"class":47},"onMounted",[33,178,179],{"class":39},"(",[33,181,182],{"class":67},"async",[33,184,185],{"class":39}," () ",[33,187,188],{"class":67},"=>",[33,190,191],{"class":39}," {\n",[33,193,195,198,201,204,207,209,212,215,217,220],{"class":35,"line":194},9,[33,196,197],{"class":67},"  const",[33,199,200],{"class":39}," { ",[33,202,203],{"class":117},"ViText",[33,205,206],{"class":39}," } ",[33,208,54],{"class":67},[33,210,211],{"class":67}," await",[33,213,214],{"class":67}," import",[33,216,179],{"class":39},[33,218,219],{"class":57},"'@vitext-ru\u002Feditor'",[33,221,222],{"class":39},");\n",[33,224,226,229,232,235,238,241,244],{"class":35,"line":225},10,[33,227,228],{"class":67},"  if",[33,230,231],{"class":39}," (disposed ",[33,233,234],{"class":67},"||",[33,236,237],{"class":67}," !",[33,239,240],{"class":39},"host.value) ",[33,242,243],{"class":67},"return",[33,245,80],{"class":39},[33,247,249,252,254,257,259,262,265,268,271],{"class":35,"line":248},11,[33,250,251],{"class":39},"  editor ",[33,253,54],{"class":67},[33,255,256],{"class":67}," new",[33,258,147],{"class":47},[33,260,261],{"class":39},"(host.value, { language: ",[33,263,264],{"class":57},"'ru'",[33,266,267],{"class":39},", preset: ",[33,269,270],{"class":57},"'base'",[33,272,273],{"class":39}," });\n",[33,275,277],{"class":35,"line":276},12,[33,278,279],{"class":39},"});\n",[33,281,283,286,289,291,294,296,299,302,305],{"class":35,"line":282},13,[33,284,285],{"class":47},"onBeforeUnmount",[33,287,288],{"class":39},"(() ",[33,290,188],{"class":67},[33,292,293],{"class":39}," { disposed ",[33,295,54],{"class":67},[33,297,298],{"class":117}," true",[33,300,301],{"class":39},"; editor?.",[33,303,304],{"class":47},"destroy",[33,306,307],{"class":39},"(); });\n",[33,309,311,314,316],{"class":35,"line":310},14,[33,312,313],{"class":39},"\u003C\u002F",[33,315,44],{"class":43},[33,317,61],{"class":39},[33,319,321,323,326,329,332,334,336,339,343,346,348],{"class":35,"line":320},15,[33,322,40],{"class":39},[33,324,325],{"class":43},"template",[33,327,328],{"class":39},">\u003C",[33,330,331],{"class":43},"div",[33,333,124],{"class":47},[33,335,54],{"class":39},[33,337,338],{"class":57},"\"host\"",[33,340,342],{"class":341},"s6RL2"," \u002F",[33,344,345],{"class":39},">\u003C\u002F",[33,347,325],{"class":43},[33,349,61],{"class":39},[15,351,352,353,358],{},"При ленивом импорте флаг disposed предотвращает создание после ухода со страницы. Обработайте ошибку импорта в UI приложения и обеспечьте доступность source\u002Fcodecs на сервере статики. ",[354,355,357],"a",{"href":356},"\u002Fdocs\u002Fguides\u002Flifecycle","Lifecycle",".",[360,361,362],"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":29,"searchDepth":64,"depth":64,"links":364},[365],{"id":12,"depth":64,"text":13},"Клиентское монтирование редактора и освобождение экземпляра.","md",{"group":369,"order":370},"Интеграции",60,true,"\u002Fdocs\u002Fintegrations\u002Fvue-nuxt",{"title":5,"description":366},"docs\u002Fintegrations\u002Fvue-nuxt","1sTOho_FonZTSsikEaGjnJsh0ot1-4o8WeP6w3n9p-A",1792670389278]