switched to vue3 compat build and vue3-runtime-template

jonasjabari · jonasjabari · commit e5a3bc27c55b · 2021-12-19T18:59:08.000+01:00
diff --git a/lib/matestack/ui/vue_js/app/app.js b/lib/matestack/ui/vue_js/app/app.js
@@ -1,5 +1,5 @@
-import Vue from 'vue/dist/vue.esm'
-import VRuntimeTemplate from "v-runtime-template"
+import Vue from 'vue'
+import VRuntimeTemplate from "vue3-runtime-template"
 import Vuex from 'vuex'
 
 import isNavigatingToAnotherPage from "./location"
diff --git a/lib/matestack/ui/vue_js/app/store.js b/lib/matestack/ui/vue_js/app/store.js
@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
 import matestackEventHub from '../event_hub'
diff --git a/lib/matestack/ui/vue_js/components/action.js b/lib/matestack/ui/vue_js/components/action.js
@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
 import matestackEventHub from '../event_hub'
diff --git a/lib/matestack/ui/vue_js/components/async.js b/lib/matestack/ui/vue_js/components/async.js
@@ -1,6 +1,6 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import axios from 'axios'
-import VRuntimeTemplate from "v-runtime-template"
+import VRuntimeTemplate from "vue3-runtime-template"
 import matestackEventHub from '../event_hub'
 import componentMixin from './mixin'
 
diff --git a/lib/matestack/ui/vue_js/components/cable.js b/lib/matestack/ui/vue_js/components/cable.js
@@ -1,5 +1,5 @@
-import Vue from 'vue/dist/vue.esm'
-import VRuntimeTemplate from "v-runtime-template"
+import Vue from 'vue'
+import VRuntimeTemplate from "vue3-runtime-template"
 import matestackEventHub from '../event_hub'
 import componentMixin from './mixin'
 
diff --git a/lib/matestack/ui/vue_js/components/collection/content.js b/lib/matestack/ui/vue_js/components/collection/content.js
@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import matestackEventHub from '../../event_hub'
 import queryParamsHelper from '../../helpers/query_params_helper'
 import componentMixin from '../mixin'
diff --git a/lib/matestack/ui/vue_js/components/collection/filter.js b/lib/matestack/ui/vue_js/components/collection/filter.js
@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import matestackEventHub from '../../event_hub'
 import queryParamsHelper from '../../helpers/query_params_helper'
 
diff --git a/lib/matestack/ui/vue_js/components/collection/order.js b/lib/matestack/ui/vue_js/components/collection/order.js
@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import matestackEventHub from '../../event_hub'
 import queryParamsHelper from '../../helpers/query_params_helper'
 import componentMixin from '../mixin'
diff --git a/lib/matestack/ui/vue_js/components/form/checkbox.js b/lib/matestack/ui/vue_js/components/form/checkbox.js
@@ -1,4 +1,4 @@
-import Vue from "vue/dist/vue.esm";
+import Vue from "vue";
 
 import formCheckboxMixin from "./checkbox_mixin";
 import componentMixin from "../mixin";
diff --git a/lib/matestack/ui/vue_js/components/form/form.js b/lib/matestack/ui/vue_js/components/form/form.js
@@ -1,6 +1,6 @@
-import Vue from "vue/dist/vue.esm";
+import Vue from "vue";
 import Vuex from "vuex";
-import VRuntimeTemplate from "v-runtime-template"
+import VRuntimeTemplate from "vue3-runtime-template"
 
 import axios from "axios";
 
diff --git a/lib/matestack/ui/vue_js/components/form/input.js b/lib/matestack/ui/vue_js/components/form/input.js
@@ -1,4 +1,4 @@
-import Vue from "vue/dist/vue.esm";
+import Vue from "vue";
 
 import formInputMixin from "./input_mixin";
 import componentMixin from "../mixin";
diff --git a/lib/matestack/ui/vue_js/components/form/radio.js b/lib/matestack/ui/vue_js/components/form/radio.js
@@ -1,4 +1,4 @@
-import Vue from "vue/dist/vue.esm";
+import Vue from "vue";
 
 import formRadioMixin from "./radio_mixin";
 import componentMixin from "../mixin";
diff --git a/lib/matestack/ui/vue_js/components/form/select.js b/lib/matestack/ui/vue_js/components/form/select.js
@@ -1,4 +1,4 @@
-import Vue from "vue/dist/vue.esm";
+import Vue from "vue";
 
 import formSelectMixin from "./select_mixin";
 import componentMixin from "../mixin";
diff --git a/lib/matestack/ui/vue_js/components/form/textarea.js b/lib/matestack/ui/vue_js/components/form/textarea.js
@@ -1,4 +1,4 @@
-import Vue from "vue/dist/vue.esm";
+import Vue from "vue";
 
 import formTextareaMixin from "./textarea_mixin";
 import componentMixin from "../mixin";
diff --git a/lib/matestack/ui/vue_js/components/isolated.js b/lib/matestack/ui/vue_js/components/isolated.js
@@ -1,6 +1,6 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import axios from 'axios'
-import VRuntimeTemplate from "v-runtime-template"
+import VRuntimeTemplate from "vue3-runtime-template"
 import matestackEventHub from '../event_hub'
 
 const componentDef = {
diff --git a/lib/matestack/ui/vue_js/components/onclick.js b/lib/matestack/ui/vue_js/components/onclick.js
@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import matestackEventHub from '../event_hub'
 import componentMixin from './mixin'
 
diff --git a/lib/matestack/ui/vue_js/components/toggle.js b/lib/matestack/ui/vue_js/components/toggle.js
@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import matestackEventHub from '../event_hub'
 import componentMixin from './mixin'
 
@@ -68,4 +68,4 @@ const componentDef = {
 
 let component = Vue.component('matestack-ui-core-toggle', componentDef)
 
-export default componentDef
+export default componentDef
diff --git a/lib/matestack/ui/vue_js/components/transition.js b/lib/matestack/ui/vue_js/components/transition.js
@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import Vuex from 'vuex'
 import componentMixin from './mixin'
 import matestackEventHub from '../event_hub'
diff --git a/lib/matestack/ui/vue_js/event_hub.js b/lib/matestack/ui/vue_js/event_hub.js
@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 
 const eventHub = new Vue();
 
diff --git a/lib/matestack/ui/vue_js/index.js b/lib/matestack/ui/vue_js/index.js
@@ -1,4 +1,4 @@
-// import Vue from 'vue/dist/vue.esm'
+// import Vue from 'vue'
 // import Vuex from 'vuex'
 // import axios from 'axios'
 
diff --git a/lib/matestack/ui/vue_js/page/content.js b/lib/matestack/ui/vue_js/page/content.js
@@ -1,8 +1,8 @@
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import Vuex from 'vuex'
 import componentMixin from '../components/mixin'
 
-import VRuntimeTemplate from "v-runtime-template"
+import VRuntimeTemplate from "vue3-runtime-template"
 
 const componentDef = {
   mixins: [componentMixin],
diff --git a/package.json b/package.json
@@ -11,9 +11,10 @@
   "license": "MIT",
   "dependencies": {
     "axios": "^0.21.1",
-    "v-runtime-template": "^1.5.2",
-    "vue": "^2.5.17",
-    "vuex": "^3.0.1"
+    "vue3-runtime-template": "^1.0.2",
+    "vuex": "^3.0.1",
+    "vue": "^3.1.0",
+    "@vue/compat": "^3.1.0"
   },
   "exports": {
     ".": "./lib/matestack/ui/vue_js/index.js"
diff --git a/spec/dummy/app/javascript/js/components.js b/spec/dummy/app/javascript/js/components.js
@@ -1,6 +1,6 @@
 //used in specs!
 
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import Vuex from 'vuex'
 import MatestackUiCore from 'matestack-ui-core'
 
diff --git a/spec/dummy/app/javascript/packs/application.js b/spec/dummy/app/javascript/packs/application.js
@@ -10,7 +10,7 @@
 require("@rails/ujs").start()
 require("channels")
 
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import Vuex from 'vuex'
 
 import MatestackUiCore from 'matestack-ui-core'
diff --git a/spec/dummy/config/webpack/development.js b/spec/dummy/config/webpack/development.js
@@ -1,5 +1,29 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
+const { merge } = require('webpack-merge');
 const environment = require('./environment')
 
-module.exports = environment.toWebpackConfig()
+const customWebpackConfig = {
+  resolve: {
+    alias: {
+      vue: '@vue/compat/dist/vue.esm-browser'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2
+            }
+          }
+        }
+      }
+    ]
+  }
+}
+
+module.exports = merge(environment.toWebpackConfig(), customWebpackConfig)
diff --git a/spec/dummy/package-lock.json b/spec/dummy/package-lock.json
diff --git a/spec/dummy/package.json b/spec/dummy/package.json
@@ -5,6 +5,7 @@
     "@rails/actioncable": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.2.2",
+    "webpack-merge": "^5.8.0",
     "matestack-ui-core": "../../"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import Vue from 'vue/dist/vue.esm'`
	`1`	`+import Vue from 'vue'`
`2`	`2`	`import Vuex from 'vuex'`
`3`	`3`	`import axios from 'axios'`
`4`	`4`	`import matestackEventHub from '../event_hub'`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import Vue from "vue/dist/vue.esm";`
	`1`	`+import Vue from "vue";`
`2`	`2`
`3`	`3`	`import formCheckboxMixin from "./checkbox_mixin";`
`4`	`4`	`import componentMixin from "../mixin";`