Vue и Nuxt

Клиентское монтирование редактора и освобождение экземпляра.

1.0.0-beta.6 · Локальная поставка · desktop

Компонент приложения

Установите @vitext-ru/editor@beta из npm. Это интеграция обычного JavaScript-пакета, не отдельная Vue-обёртка. В SSR не создавайте ViText на сервере.

<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: 'ru', preset: 'base' });
});
onBeforeUnmount(() => { disposed = true; editor?.destroy(); });
</script>
<template><div ref="host" /></template>

При ленивом импорте флаг disposed предотвращает создание после ухода со страницы. Обработайте ошибку импорта в UI приложения и обеспечьте доступность source/codecs на сервере статики. Lifecycle.