Vue and Nuxt

Client-only integration

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.

Dynamic imports

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.

Cleanup

onBeforeUnmount marks the component disposed, destroys the instance and aborts application-owned requests. Avoid duplicate mounts on the same element. Initial Markdown/CSS needs whenReady; asynchronous changes need awaiting as well.

Controlled content

Use onChange to propagate applied HTML/JSON/CSS 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. Lifecycle, storage.

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import type { ViText } from '@vitext-ru/editor';
import '@vitext-ru/editor/style.css';
const host = ref<HTMLElement>();
let editor: ViText | undefined;
let disposed = false;
onMounted(async () => {
  const { ViText } = await import('@vitext-ru/editor');
  if (disposed || !host.value) return;
  editor = new ViText(host.value, { language: 'en', preset: 'base' });
});
onBeforeUnmount(() => { disposed = true; editor?.destroy(); });
</script>
<template><div ref="host" /></template>