Nuxt3でToast UI Editorを使う方法

Toast UI EditorをNuxt２で使っていました
いい加減Nuxt3に引っ越さないといけないということだったのですが、
このToast UI Editor自体はVue2まででVue3をサポートしておりません。

普通ですとQuillとかtiptap、その他のエディタを使うべきですが
リソースやその他の制限によりどうしてもNuxt3で使いたいという要望があると思います。
またToastUIEditorには標準で表がついておりこれがなかなか優秀なのです。

以下Nuxt3で使えるようにしたメモです。

1. まずインストール

npm install @toast-ui/editor @toast-ui/editor/dist/toastui-editor.css

1. 次にcomponents/ToastEditor.vueを作成

<!-- components/ToastEditor.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';

const props = defineProps({
  modelValue: {
    type: String,
    required: false,
    default: '',
  },
});

const emit = defineEmits(['update:modelValue']);

const editor = ref(null);

onMounted(() => {
  const e = new Editor({
    el: editor.value,
    height: '500px',
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    initialValue: props.modelValue,
    events: {
      change: () => emit('update:modelValue', e.getMarkdown()),
    },
  });
});
</script>

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

1. 使用方法
   pages/index.vue

<!-- pages/index.vue -->
<script setup>
import { ref } from 'vue';
import ToastEditor from '~/components/ToastEditor.vue';

const content = ref('## Hello, Toast UI Editor!');
</script>

<template>
  <div>
    <h1>Toast UI Editor in Nuxt3</h1>
    <ToastEditor v-model="content" />
    <div>
      <h2>Output:</h2>
      <pre>{{ content }}</pre>
    </div>
  </div>
</template>

以上