feat✨: Support vue3.0

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }

example/App.vue

@@ -4,15 +4,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import Example from './components/example.vue'
-
-export default {
-  name: 'app',
-  components: {
-    Example
-  }
-}
 </script>
 
 <style>

example/components/example.vue

@@ -5,23 +5,26 @@
       class="md-body" 
       :content="content" 
       :options="options" 
-      @render-complete=hdlCmplete 
+      @render-complete="hdlCmplete" 
     />
   </div>
 </template>
 
 <script>
+import {defineComponent, ref} from 'vue'
 import MarkdownText from './example'
 import MarkdownItVue from '../../src'
-export default {
+
+export default defineComponent({
   components: {
     MarkdownItVue
   },
-  data () {
-    return {
-      content: MarkdownText,
-      options: {
-        markdownIt: {
+  setup() {
+
+    const options = ref(
+      {
+        markdownIt: 
+        {
           linkify: true
         },
         linkAttributes: {
@@ -31,14 +34,21 @@ export default {
           }
         }
       }
-    }
-  },
-  methods: {
-    hdlCmplete() {
+    )
+
+    const content = ref(MarkdownText)
+
+    const hdlCmplete = () => {
       console.log('reder complete')
     }
+
+    return {
+      content,
+      options,
+      hdlCmplete,
+    }
   }
-}
+})
 </script>
 
 <style scoped>

example/main.js

@@ -1,8 +1,4 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+createApp(App).mount('#app')

package.json

@@ -1,18 +1,19 @@
 {
   "name": "markdown-it-vue",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "private": false,
-  "description": "The vue lib for markdown-it",
+  "description": "The vue3.0 lib for markdown-it",
   "author": {
-    "name": "ravenq",
+    "name": "yauzn",
     "e-mail": "flw_dream@126.com"
   },
   "keywords": [
     "markdown",
     "markdown-it",
     "markdown-it-plugin",
     "vue",
-    "markdown-it-vue"
+    "markdown-it-vue",
+    "vue3.0"
   ],
   "files": [
     "dist",
@@ -31,6 +32,8 @@
   },
   "main": "dist/markdown-it-vue.umd.min.js",
   "dependencies": {
+    "@iktakahiro/markdown-it-katex": "^4.0.1",
+    "core-js": "^3.6.5",
     "echarts": "^5.1.0",
     "flowchart.js": "^1.15.0",
     "font-awesome-icon-chars": "^2.6.0",
@@ -44,7 +47,7 @@
     "markdown-it-footnote": "^3.0.2",
     "markdown-it-github-toc": "^3.2.4",
     "markdown-it-ins": "^3.0.1",
-    "@iktakahiro/markdown-it-katex": "^4.0.1",
+    "markdown-it-katex": "^2.0.3",
     "markdown-it-latex": "^0.2.0",
     "markdown-it-mark": "^3.0.1",
     "markdown-it-regex": "^0.2.0",
@@ -54,42 +57,35 @@
     "markdown-it-task-lists": "^2.1.1",
     "markdown-it-toc-and-anchor": "^4.2.0",
     "mermaid": "^8.9.2",
-    "vue": "^2.6.12"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.12",
-    "@vue/cli-plugin-eslint": "^4.5.12",
-    "@vue/cli-service": "^4.5.12",
+    "@vue/cli-plugin-babel": "~4.5.9",
+    "@vue/cli-plugin-eslint": "~4.5.9",
+    "@vue/cli-service": "~4.5.9",
+    "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.24.0",
-    "eslint-plugin-vue": "^7.9.0",
-    "vue-cli-plugin-component-lib": "^0.1.6",
-    "vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0",
-    "vue-template-compiler": "^2.6.12"
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0"
   },
   "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
-    "rules": {},
     "parserOptions": {
       "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
+    },
+    "rules": {}
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not ie <= 8"
+    "not dead"
   ],
   "bugs": {
     "url": "https://github.com/ravenq/markdown-it-vueissues"