Upgrade to Vue 3

README.md

@@ -41,13 +41,14 @@ import 'froala-editor/css/froala_editor.pkgd.min.css';
 
 // Import and use Vue Froala lib.
 import VueFroala from 'vue-froala-wysiwyg'
-Vue.use(VueFroala)
-Vue.config.productionTip = false
 
-new Vue({
-  render: h => h(App),
-
-}).$mount('#app')
+let VueApp = createApp({
+  render: () => h(App)
+});
+
+VueApp.use(VueFroala);
+
+VueApp.mount('#app');
 
 ```
 
@@ -60,8 +61,6 @@ new Vue({
 </template>
 
 <script>
-import VueFroala from 'vue-froala-wysiwyg';
-
 export default {
   name: 'app',
   data () {
@@ -292,12 +291,12 @@ The object received by the function will contain the following methods:
 
 ## Displaying HTML
 
-To display content created with the froala editor use the `froalaView` component.
+To display content created with the froala editor use the `froala-view` component.
 
 ```javascript
 <froala v-model="content"></froala>
 
-<froalaView v-model="content"></froalaView>
+<froala-view v-model="content"></froala-view>
 ```
 
 

build/webpack.base.conf.js

@@ -3,7 +3,7 @@ var config = require('../config')
 var webpack = require('webpack')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const { VueLoaderPlugin } = require('vue-loader');
 module.exports = {
   entry: {
     main: './src/main.js',
@@ -35,7 +35,8 @@ module.exports = {
       },
       {
         test: /\.json$/,
-        loader: 'json-loader'
+        use: ['json-loader'],
+        type: 'javascript/auto'
       },
       {
         test: /\.html$/,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-froala-wysiwyg",
-  "version": "3.2.6-1",
+  "version": "4.0.0",
   "description": "Vue plugin for Froala WYSIWYG HTML rich text editor.",
   "author": "Froala Labs (https://www.froala.com/)",
   "license": "https://froala.com/wysiwyg-editor/terms/",
@@ -43,17 +43,17 @@
     "babel-runtime": "^6.26.0",
     "@babel/runtime-corejs2": "^7.7.7",
     "froala-editor": "^3.2.6-1",
-    "vue": "2.6.6"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
+    "@babel/core": "^7.4.0",
     "@babel/helpers": "^7.3.1",
     "@babel/plugin-transform-runtime": "^7.3.4",
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.4",
     "@babel/runtime": "^7.3.4",
-    "@babel/runtime-corejs2": "^7.3.4",
+    "@vue/compiler-sfc": "^3.0.7",
     "babel-helpers": "^6.24.1",
     "babel-loader": "^8.0.5",
     "connect-history-api-fallback": "^1.1.0",
@@ -79,7 +79,7 @@
     "url-loader": "^1.1.2",
     "vue-hot-reload-api": "^2.0.11",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "15.6.2",
+    "vue-loader": "^16.1.2",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "2.6.6",
     "webpack": "^4.29.3",

src/main.js

@@ -6,11 +6,13 @@ import 'froala-editor/css/froala_style.min.css';
 import 'froala-editor/js/plugins.pkgd.min.js';
 
 import App from './examples/App'
-import Vue from 'vue'
+import { createApp, h } from 'vue'
 import VueFroala from 'src';
 
-Vue.use(VueFroala);
-new Vue({
- render: h => h(App)
+let VueApp = createApp({
+ render: () => h(App)
+});
 
-}).$mount('#app')
+VueApp.use(VueFroala);
+
+VueApp.mount('#app');