Как отобразить modelValue в EditorJs + Nuxt3 ssr?

Чтобы отобразить modelValue в EditorJs с использованием Nuxt.js и Nuxt3 с SSR (Server-Side Rendering), необходимо выполнить следующие шаги:

1. Установите необходимые зависимости. Для работы с EditorJs, вы должны установить пакет @editorjs/editorjs:

npm install @editorjs/editorjs

2. Создайте компонент Editor.vue, который будет отображать EditorJs и принимать modelValue в качестве входного параметра:

<template>
  <div ref="editorContainer"></div>
</template>

<script>
import EditorJS from '@editorjs/editorjs';

export default {
  props: {
    modelValue: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.editor = new EditorJS({
      holder: this.$refs.editorContainer,
      data: this.modelValue
    });
  },
  beforeUnmount() {
    this.editor.destroy();
  }
};
</script>

3. Используйте компонент Editor в нужном месте вашего приложения. Передайте modelValue через связывание данных:

<template>
  <div>
    <h1>Мой Статья</h1>
    <Editor :modelValue="editorData" />
  </div>
</template>

<script>
import Editor from '@/components/Editor.vue';

export default {
  data() {
    return {
      editorData: {}
    };
  },
  mounted() {
    // Здесь можно загрузить данные статьи с сервера или из API
    // и установить их в editorData
    // Например, this.editorData = await this.$axios.$get('/articles/123');
  }
};
</script>

4. Важно помнить, что EditorJs не работает на стороне сервера, поэтому в Nuxt3 вы должны использовать Hydration для того, чтобы корректно отображать содержимое EditorJs в процессе серверного рендеринга:

- Создайте папку hydrate внутри rootDir вашего проекта (по умолчанию, он находится в корне проекта)
- В папке hydrate создайте файл _id.js и добавьте следующий код:

import EditorJS from '@editorjs/editorjs';

export async function value({ id }) {
  // Загрузите данные статьи с сервера или из API
  const articleData = await this.$axios.$get(`/articles/${id}`);

  // Создайте экземпляр EditorJS
  const editor = new EditorJS({
    holder: 'editor',
    data: articleData
  });

  // Дождитесь завершения инициализации редактора
  await editor.isReady;

  // Получите html-контент из редактора
  const content = await editor.saver.save();

  // Отправьте html-контент в качестве результата
  return { content };
}

- В файле routes.json вашего проекта Nuxt3 добавьте следующую конфигурацию:

{
  "hydrate": {
    "/articles/:id": { "src": "~/hydrate/_id.js" }
  }
}

Это пример реализации EditorJs с использованием Nuxt.js и Nuxt3 для отображения modelValue при использовании SSR. Обратите внимание на то, что код может меняться в зависимости от вашего конкретного решения и требований проекта.