Any plans to support the newest VUE 3.0 ?

[swatchion]

Thanks for this great work, any further plan for vue 3.0?

[seonim-ryu]

@swatchion You seem to be using the Vue wrapper (@toast-ui/vue-edior) and you're asking if you want to update Vue 3.0. In the current wrapper, Vue is set to peer dependency. So, I think you can install and use 3.0 yourself. Would you like to update version 3.0 with peer dependency?

tui.editor/apps/vue-editor/package.json

Lines 50 to 52 in d3b7bf0

	"peerDependencies": {
	"vue": "^2.5.0"
	},

[Fubinator]

This does not work @seonim-ryu because of differences in vue internals, I think. Some warnings I get with Vue 3.0 as dependency:

[Vue warn]: `destroyed` has been renamed to `unmounted`. 
Property "$createElement" was accessed during render but is not defined on instance
Property "_self" was accessed during render but is not defined on instance. 
TypeError: Cannot read property '_c' of undefined

I have not worked with the editor ever, so it is possible that some of those warnings/errors are on my behalf.

My setup was:

<template>
  <Editor></Editor>
</template>
<script>
import "codemirror/lib/codemirror.css";
import "@toast-ui/editor/dist/toastui-editor.css";

import { Editor } from "@toast-ui/vue-editor";

export default {
  components: { Editor }
}
</script>

[Fubinator]

After playing around a little bit I got it working without the wrapper component for anyone interested:

<script>
import { onMounted, ref, h } from "vue";

import Editor from "@toast-ui/editor";
import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight";
import hljs from "highlight.js";

import "codemirror/lib/codemirror.css";
import "@toast-ui/editor/dist/toastui-editor.css";
import "highlight.js/styles/github.css";

export default {
  props: {
    modelValue: {
      type: String,
      required: false,
      default: ""
    }
  },
  setup(_, { emit }) {
    const editor = ref();

    onMounted(() => {
      const e = new Editor({
        el: editor.value,
        height: "500px",
        initialEditType: "markdown",
        previewStyle: "tab",
        plugins: [[codeSyntaxHighlight, { hljs }]],
        events: {
          change: () => emit("update:modelValue", e.getMarkdown())
        }
      });
    });

    return () =>
      h("div", {
        ref: editor
      });
  }
};
</script>

You can use it by importing the component and using v-model for two-way data binding.

[seonim-ryu]

@Fubinator

After playing around a little bit I got it working without the wrapper component for anyone interested:

<script>
import { onMounted, ref, h } from "vue";

import Editor from "@toast-ui/editor";
import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight";
import hljs from "highlight.js";

import "codemirror/lib/codemirror.css";
import "@toast-ui/editor/dist/toastui-editor.css";
import "highlight.js/styles/github.css";

export default {
  props: {
    modelValue: {
      type: String,
      required: false,
      default: ""
    }
  },
  setup(_, { emit }) {
    const editor = ref();

    onMounted(() => {
      const e = new Editor({
        el: editor.value,
        height: "500px",
        initialEditType: "markdown",
        previewStyle: "tab",
        plugins: [[codeSyntaxHighlight, { hljs }]],
        events: {
          change: () => emit("update:modelValue", e.getMarkdown())
        }
      });
    });

    return () =>
      h("div", {
        ref: editor
      });
  }
};
</script>

You can use it by importing the component and using v-model for two-way data binding.

Are you saying you get an error when you run this code using Vue 3.0? I'll check it out.

[Fubinator]

@seonim-ryu No, I get an error running the following code:

This does not work @seonim-ryu because of differences in vue internals, I think. Some warnings I get with Vue 3.0 as dependency:

[Vue warn]: `destroyed` has been renamed to `unmounted`. 
Property "$createElement" was accessed during render but is not defined on instance
Property "_self" was accessed during render but is not defined on instance. 
TypeError: Cannot read property '_c' of undefined

I have not worked with the editor ever, so it is possible that some of those warnings/errors are on my behalf.

My setup was:

<template>
  <Editor></Editor>
</template>
<script>
import "codemirror/lib/codemirror.css";
import "@toast-ui/editor/dist/toastui-editor.css";

import { Editor } from "@toast-ui/vue-editor";

export default {
  components: { Editor }
}
</script>

My second comment was a working example

[optiman]

Now that the @toast-ui/editor v3 is released, will there be a separate vue3-editor wrapper?
No pressure, just curious if everyone should write their own wrappers or maybe an official one is just around the corner.

[nick-zh]

Since it has been quiet around this, i wanted to ping @js87zz and @seonim-ryu to know if there are ongoing plans for an official Vue3 wrapper, i would also be interested and would highly appreciate support for this 🙏