go to vuera

Author: lana-k

babel.config.js

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

package-lock.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": {

package.json

@@ -57,14 +57,17 @@ 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'],
   components: {
     codemirror,
     SqlTable,
     Splitpanes,
-    ViewSwitcher
+    ViewSwitcher,
+    PlotlyEditor
   },
   data () {
     return {

src/components/TabContent.vue

@@ -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