[Sc 65261] Migrate to Vue 3 (#108)

lib/ui/public/app/config/Page1.vue

@@ -19,7 +19,7 @@
       <Navigation :onConfirm="onConfirm"/>
     </div>
     <div v-else-if="!isDataService">
-      <LoadingScreen :module-name="'TrustedForm ' + moduleName"/>
+      <LoadingScreen :onFinish="() => {/* NOOP */}" :module-name="'TrustedForm ' + moduleName"/>
     </div>
   </div>
 </template>

lib/ui/public/app/index.js

@@ -1,20 +1,16 @@
 import ui from 'leadconduit-integration-ui';
-import Vue from 'vue';
+import { createApp } from 'vue';
 import Config from './config/Config.vue';
-import Vuex from 'vuex';
 import initStore from './store';
 import router from './router';
 
-Vue.use(Vuex);
-
 function init (config) {
-  const store = initStore(config, ui);
+  const app = createApp(Config);
+
+  app.use(initStore(config, ui));
+  app.use(router);
 
-  new Vue({
-    render: h => h(Config),
-    store,
-    router
-  }).$mount('#app');
+  app.mount('#app');
 }
 
 ui.init(init);

lib/ui/public/app/router.js

@@ -1,15 +1,13 @@
-import Vue from 'vue';
-import Router from 'vue-router';
+import { createMemoryHistory, createRouter } from 'vue-router';
 import Config from './config/Config.vue';
 import PageOne from './config/Page1.vue';
 import PageTwo from './config/Page2.vue';
 import PageThree from './config/Page3.vue';
 import PageFour from './config/Page4.vue';
 import PageFive from './config/Page5.vue';
 
-Vue.use(Router);
-
-export default new Router({
+export default createRouter({
+  history: createMemoryHistory(),
   routes: [
     {
       path: '/',

lib/ui/public/app/store.js

@@ -1,10 +1,11 @@
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
 import fieldData from './fieldData';
 import v4Fields from './v4fields';
 import axios from 'axios';
 import { get } from 'lodash';
+import { toRaw } from 'vue';
 
-const initStore = (config, ui) => new Vuex.Store({
+const initStore = (config, ui) => createStore({
   state: {
     // field descriptions
     fieldData,
@@ -132,8 +133,10 @@ const initStore = (config, ui) => new Vuex.Store({
           await context.dispatch('createFilter', filterConfig);
         }
         context.state.filters.forEach(filter => {
-          flow.steps.push(filter);
-        });      
+          // the flow gets passed back to the app via a window.postMessage call, which clones objects passed in the message.
+          // As of Vuex 4, state items are Proxy objects, which cannot be cloned, so we have to use `toRaw()`.
+          flow.steps.push(toRaw(filter));
+        });
       }
       context.state.ui.create({ flow });
     }

package.json

@@ -18,7 +18,8 @@
   },
   "license": "CC-BY-NC-ND-4.0",
   "dependencies": {
-    "@activeprospect/integration-components": "^4.0.2",
+    "@activeprospect/integration-components": "^5.0.0",
+    "@activeprospect/ui-components": "^1.3.3",
     "axios": "^1.4.0",
     "body-parser": "^1.19.0",
     "express": "^4.17.1",
@@ -27,11 +28,11 @@
     "lodash": "^4.17.20",
     "request": "^2.88.0",
     "trustedform-api-client": "^1.0.7",
-    "vue": "^2.6.11",
-    "vue-router": "^3.1.6",
-    "vuex": "^3.1.3"
+    "vue": "^3.4.15",
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@activeprospect/integration-dev-dependencies": "^1.1.0"
+    "@activeprospect/integration-dev-dependencies": "^2.0.0"
   }
 }