[{"data":1,"prerenderedAt":99},["ShallowReactive",2],{"quirekit-doc:\u002Fen\u002Fguide\u002Fvue":3},{"id":4,"title":5,"body":6,"description":87,"extension":88,"keywords":89,"locale":90,"meta":91,"navigation":92,"order":93,"path":94,"section":95,"seo":96,"stem":97,"__hash__":98},"docs\u002Fguide\u002Fvue.en.md","Vue integration",{"type":7,"value":8,"toc":80},"minimark",[9,13,18,36,40,47,51,54,62,66,73],[10,11,12],"p",{},"Vue owns the page and interface; Editor owns editable content. A minimal integration needs an element reference and two lifecycle hooks, without copying the document into Vue state.",[14,15,17],"h2",{"id":16},"start-with-one-component","Start with one component",[10,19,20,21,25,26,29,30,35],{},"Create Editor in ",[22,23,24],"code",{},"onMounted",", using the element reference, and destroy it in ",[22,27,28],{},"onBeforeUnmount",". This single-file example is runnable; installation and a walkthrough are in ",[31,32,34],"a",{"href":33},"\u002Fen\u002Fbuild\u002Fproject","your first editor",".",[37,38],"docs-demo",{"name":39},"tutorial\u002Feditor",[10,41,42,43,46],{},"A local variable holds the instance. Use ",[22,44,45],{},"shallowRef\u003CEditor>()"," when templates or other components need it; internal document and view objects do not need deep reactivity.",[14,48,50],{"id":49},"let-vue-manage-interface-state","Let Vue manage interface state",[10,52,53],{},"For a Bold button, subscribe to Editor events and synchronize only the required boolean into Vue. Click handlers run commands rather than editing a second document and writing it back.",[10,55,56,57,61],{},"See the ",[31,58,60],{"href":59},"\u002Fen\u002Fbuild\u002Fcommands","toolbar tutorial",". Replace content explicitly when genuinely opening another document.",[14,63,65],{"id":64},"nuxt-and-asynchronous-loading","Nuxt and asynchronous loading",[10,67,68,69,72],{},"The server has no mounted element, so create DOM-backed Editor after browser mounting. Use a client component or ",[22,70,71],{},"ClientOnly"," for browser-specific capabilities. If asynchronous imports finish after unmount, do not create the instance.",[10,74,75,76,35],{},"Locale changes should update controls without replacing content, and theme changes should preserve undo history. For an existing paginated interface, see ",[31,77,79],{"href":78},"\u002Fen\u002Fclassic\u002Fquick-start","Classic Vue integration",{"title":81,"searchDepth":82,"depth":82,"links":83},"",2,[84,85,86],{"id":16,"depth":82,"text":17},{"id":49,"depth":82,"text":50},{"id":64,"depth":82,"text":65},"Let Vue supply the container and create and release Editor with component lifecycle.","md",null,"en",{},true,4,"\u002Fen\u002Fguide\u002Fvue","Getting started",{"title":5,"description":87},"guide\u002Fvue.en","yrTnrRDEf6WCPb-OasNWz_9DISMZMqU13OEu6yZ1LPc",1793045210160]