go to vuera

babel.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
-  ],
-  plugins: ["transform-react-jsx"]
+  ]
 }

package-lock.json

@@ -2713,16 +2713,6 @@
         "resolve": "^1.12.0"
       }
     },
-    "babel-helper-builder-react-jsx": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz",
-      "integrity": "sha1-Of+DE7dci2Xc7/HzHTg+D/KkCKA=",
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "esutils": "^2.0.2"
-      }
-    },
     "babel-loader": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
@@ -2823,16 +2813,6 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
       "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
-    "babel-plugin-transform-react-jsx": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz",
-      "integrity": "sha1-hAoCjn30YN/DotKfDA2R9jduZqM=",
-      "requires": {
-        "babel-helper-builder-react-jsx": "^6.24.1",
-        "babel-plugin-syntax-jsx": "^6.8.0",
-        "babel-runtime": "^6.22.0"
-      }
-    },
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -2854,24 +2834,6 @@
         }
       }
     },
-    "babel-types": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
-      "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "esutils": "^2.0.2",
-        "lodash": "^4.17.4",
-        "to-fast-properties": "^1.0.3"
-      },
-      "dependencies": {
-        "to-fast-properties": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
-          "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
-        }
-      }
-    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -15937,11 +15899,6 @@
         }
       }
     },
-    "vue-react": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/vue-react/-/vue-react-1.2.0.tgz",
-      "integrity": "sha512-WvhBQZwSQ/LhPAkpOU9KAPkHuenkQRZ5fTUYUgFosPgnwcunoKIyYIgz2RZcfzmEInYiprf3G1ndoZ4iMR5uhg=="
-    },
     "vue-router": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz",
@@ -15986,6 +15943,11 @@
       "resolved": "https://registry.npmjs.org/vuejs-paginate/-/vuejs-paginate-2.1.0.tgz",
       "integrity": "sha512-gnwyXlmCiDOu9MLWxN5UJ4PGijKGNOMpHG8ujsrynCzTJljn/rp7Jq0WiDGDAMi5/u0AHuYIHhced+tUW4jblA=="
     },
+    "vuera": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/vuera/-/vuera-0.2.7.tgz",
+      "integrity": "sha512-MZErNEK+xXjxBzIDFL9cdEtX3TDZk4pMJGB+WLrlFOVro9okS/FeOSpdPFkpdyZUImZN/or4CrmztA932ChGEQ=="
+    },
     "vuex": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",

package.json

@@ -9,7 +9,6 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "babel-plugin-transform-react-jsx": "^6.24.1",
     "codemirror": "^5.57.0",
     "core-js": "^3.6.5",
     "plotly.js": "^1.54.6",
@@ -20,9 +19,9 @@
     "sqlite-parser": "^1.0.1",
     "vue": "^2.6.11",
     "vue-codemirror": "^4.0.6",
-    "vue-react": "^1.2.0",
     "vue-router": "^3.2.0",
     "vuejs-paginate": "^2.1.0",
+    "vuera": "^0.2.7",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/components/TabContent.vue

@@ -57,6 +57,8 @@ import 'codemirror/addon/hint/show-hint.js'
 import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/hint/sql-hint.js'
 
+import PlotlyEditor from 'react-chart-editor'
+
 export default {
   name: 'TabContent',
   props: ['id', 'initName', 'initQuery', 'initPlotly', 'tabIndex'],
@@ -64,7 +66,8 @@ export default {
     codemirror,
     SqlTable,
     Splitpanes,
-    ViewSwitcher
+    ViewSwitcher,
+    PlotlyEditor
   },
   data () {
     return {

src/main.js

@@ -2,16 +2,14 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import VueReact from 'vue-react'
-import PlotlyEditor from 'react-chart-editor'
+import { VuePlugin } from 'vuera'
 
 import '@/assets/styles/variables.css'
 import '@/assets/styles/buttons.css'
 import '@/assets/styles/textFields.css'
 import '@/assets/styles/tables.css'
 
-Vue.use(VueReact)
-Vue.react('PlotlyEditor', PlotlyEditor)
+Vue.use(VuePlugin)
 
 Vue.config.productionTip = false