Support Vue.js 3 using vue-demi

demo/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import App from './Demo'
 
 import Editor from '../src'
+
 Vue.use(Editor)
 
 

package.json

@@ -8,7 +8,8 @@
     "vue.js",
     "vue-editor",
     "vue-composition-api",
-    "vue3"
+    "vue3",
+    "vue-demi"
   ],
   "repository": {
     "type": "git",
@@ -17,7 +18,7 @@
   "bugs": {
     "url": "https://github.com/changjoo-park/vue-editor-js/issues"
   },
-  "version": "2.0.2",
+  "version": "2.1.5",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -36,36 +37,41 @@
     "src"
   ],
   "dependencies": {
-    "@editorjs/editorjs": "^2.18.0",
-    "@vue/composition-api": "^0.5.0"
+    "@editorjs/editorjs": "^2.19.1",
+    "vue-demi": "latest",
+    "@vue/composition-api": "latest"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-beta.1",
+    "vue": "^2.0.0 || >=3.0.0-rc.0"
   },
   "devDependencies": {
-    "@editorjs/warning": "^1.1.1",
-    "@editorjs/checklist": "^1.1.0",
-    "@editorjs/code": "^2.5.0",
-    "@editorjs/delimiter": "^1.1.0",
-    "@editorjs/embed": "^2.3.1",
-    "@editorjs/header": "^2.4.1",
-    "@editorjs/image": "^2.4.1",
+    "@editorjs/warning": "^1.2.0",
+    "@editorjs/checklist": "^1.3.0",
+    "@editorjs/code": "^2.6.0",
+    "@editorjs/delimiter": "^1.2.0",
+    "@editorjs/embed": "^2.4.0",
+    "@editorjs/header": "^2.6.1",
+    "@editorjs/image": "^2.6.0",
     "@editorjs/inline-code": "^1.3.1",
-    "@editorjs/link": "^2.2.0",
-    "@editorjs/list": "^1.4.0",
+    "@editorjs/link": "^2.3.1",
+    "@editorjs/list": "^1.6.2",
     "@editorjs/marker": "^1.2.2",
-    "@editorjs/paragraph": "^2.6.1",
-    "@editorjs/personality": "^2.0.1",
-    "@editorjs/quote": "^2.3.0",
-    "@editorjs/raw": "^2.1.2",
-    "@editorjs/simple-image": "^1.3.3",
-    "@editorjs/table": "^1.2.2",
-    "@vue/cli-plugin-babel": "^4.4.1",
-    "@vue/cli-plugin-eslint": "^4.4.1",
-    "@vue/cli-service": "^4.4.1",
+    "@editorjs/paragraph": "^2.8.0",
+    "@editorjs/personality": "^2.0.2",
+    "@editorjs/quote": "^2.4.0",
+    "@editorjs/raw": "^2.3.0",
+    "@editorjs/simple-image": "^1.4.0",
+    "@editorjs/table": "^1.3.0",
+    "@vue/cli-plugin-babel": "^4.5.11",
+    "@vue/cli-plugin-eslint": "^4.5.11",
+    "@vue/cli-service": "^4.5.11",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.1.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue": "^2.6.11",
+    "eslint": "^7.20.0",
+    "eslint-plugin-vue": "^7.6.0",
+    "vue": "^2.6.12",
     "vue-cli-plugin-p11n": "^0.4.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.12"
   },
   "jsdelivr": "dist/vue-editor-js.umd.min.js",
   "sideeffects": false

src/index.js

@@ -1,31 +1,62 @@
-const version = '__VERSION__'
-import VueCompositionApi from '@vue/composition-api';
-import EditorComponent from './Editor.vue'
+import { reactive, defineComponent, onMounted, h } from "vue-demi";
+import EditorJS from "@editorjs/editorjs";
 
-export function install(Vue) {
-  if (install.installed) return;
-  install.installed = true;
-  Vue.use(VueCompositionApi)
-  Vue.component('Editor', EditorComponent)
-}
+export const Editor = defineComponent({
+  props: {
+    holder: {
+      type: String,
+      default: () => "vue-editor-js",
+      require: true,
+    },
+    config: {
+      type: Object,
+      default: () => ({}),
+      require: true,
+    },
+    initialized: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  setup: (props) => {
+    const state = reactive({ editor: null });
 
-const plugin = {
-  install,
-  version
-}
+    function initEditor(props) {
+      destroyEditor();
+      state.editor = new EditorJS({
+        holder: props.holder || "vue-editor-js",
+        ...props.config,
+      });
+      props.initialized(state.editor);
+    }
 
-export const Editor = EditorComponent
+    function destroyEditor() {
+      if (state.editor) {
+        state.editor.destroy();
+        state.editor = null;
+      }
+    }
 
-let GlobalVue = null
+    onMounted(() => {
+      console.log('on mounted')
+      initEditor(props)
+    });
 
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue
-}
+    return { props, state };
+  },
+  render(props) {
+    console.log('render')
+    return h(
+      'div',
+      {
+        id: props.holder
+      },
+    )
+  }
+});
 
-if (GlobalVue) {
-  GlobalVue.use(plugin)
-}
-
-export default plugin
+export default {
+  install (Vue) {
+    Vue.component('Editor', Editor)
+  }
+}