nasa · akhenry · Jul 19, 2023 · Jun 13, 2023 · Jun 13, 2023 · Jun 14, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -28,6 +28,8 @@ module.exports = {
     }
   },
   rules: {
+    'vue/no-v-for-template-key': 'off',
+    'vue/no-v-for-template-key-on-child': 'error',
     'prettier/prettier': 'error',
     'you-dont-need-lodash-underscore/omit': 'off',
     'you-dont-need-lodash-underscore/throttle': 'off',

diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
@@ -67,7 +67,8 @@ const config = {
       MCT: path.join(projectRootDir, 'src/MCT'),
       testUtils: path.join(projectRootDir, 'src/utils/testUtils.js'),
       objectUtils: path.join(projectRootDir, 'src/api/objects/object-utils.js'),
-      utils: path.join(projectRootDir, 'src/utils')
+      utils: path.join(projectRootDir, 'src/utils'),
+      vue: path.join(projectRootDir, 'node_modules/@vue/compat/dist/vue.esm-bundler.js'),
     }
   },
   plugins: [
@@ -121,7 +122,15 @@ const config = {
       },
       {
         test: /\.vue$/,
-        use: 'vue-loader'
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            whitespace: 'preserve',
+            compatConfig: {
+              MODE: 2
+            }
+          }
+        }
       },
       {
         test: /\.html$/,

diff --git a/.webpack/webpack.dev.js b/.webpack/webpack.dev.js
@@ -25,11 +25,6 @@ module.exports = merge(common, {
       '**/.*' // dotfiles and dotfolders
     ]
   },
-  resolve: {
-    alias: {
-      vue: path.join(projectRootDir, 'node_modules/vue/dist/vue.js')
-    }
-  },
   plugins: [
     new webpack.DefinePlugin({
       __OPENMCT_ROOT_RELATIVE__: '"dist/"'

diff --git a/.webpack/webpack.prod.js b/.webpack/webpack.prod.js
@@ -13,11 +13,6 @@ const projectRootDir = path.resolve(__dirname, '..');
 
 module.exports = merge(common, {
   mode: 'production',
-  resolve: {
-    alias: {
-      vue: path.join(projectRootDir, 'node_modules/vue/dist/vue.min.js')
-    }
-  },
   plugins: [
     new webpack.DefinePlugin({
       __OPENMCT_ROOT_RELATIVE__: '""'

diff --git a/e2e/tests/functional/forms.e2e.spec.js b/e2e/tests/functional/forms.e2e.spec.js
@@ -41,7 +41,7 @@ test.describe('Form Validation Behavior', () => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
     await page.click('button:has-text("Create")');
-    await page.click(':nth-match(:text("Folder"), 2)');
+    await page.getByRole('menuitem', { name: ' Folder' }).click();
 
     // Fill in empty string into title and trigger validation with 'Tab'
     await page.click('text=Properties Title Notes >> input[type="text"]');

diff --git a/example/simpleVuePlugin/plugin.js b/example/simpleVuePlugin/plugin.js
@@ -24,7 +24,7 @@ function SimpleVuePlugin() {
             container.appendChild(vm.$mount().$el);
           },
           destroy: function (container) {
-            vm.$destroy();
+            //vm.$destroy();
           }
         };
       }

diff --git a/index.html b/index.html
@@ -92,7 +92,9 @@
       }
     </style>
   </head>
-  <body></body>
+  <body>
+    <div id="app"></div>
+  </body>
   <script>
     const THIRTY_SECONDS = 30 * 1000;
     const ONE_MINUTE = THIRTY_SECONDS * 2;

diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
     "@types/eventemitter3": "1.2.0",
     "@types/jasmine": "4.3.4",
     "@types/lodash": "4.14.192",
+    "@vue/compat": "^3.1.0",
+    "@vue/compiler-sfc": "^3.1.0",
     "babel-loader": "9.1.0",
     "babel-plugin-istanbul": "6.1.1",
     "codecov": "3.8.3",
@@ -22,8 +24,8 @@
     "d3-scale": "3.3.0",
     "d3-selection": "3.0.0",
     "eslint": "8.43.0",
-    "eslint-plugin-compat": "4.1.4",
     "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-compat": "4.1.4",
     "eslint-plugin-playwright": "0.12.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-vue": "9.15.0",
@@ -66,11 +68,10 @@
     "style-loader": "3.3.3",
     "typescript": "5.1.3",
     "uuid": "9.0.0",
-    "vue": "2.6.14",
+    "vue": "^3.1.0",
     "vue-eslint-parser": "9.3.1",
-    "vue-loader": "15.9.8",
-    "vue-template-compiler": "2.6.14",
     "webpack": "5.88.0",
+    "vue-loader": "^16.0.0",
     "webpack-cli": "5.1.1",
     "webpack-dev-server": "4.15.1",
     "webpack-merge": "5.9.0"

diff --git a/src/MCT.js b/src/MCT.js
@@ -343,7 +343,17 @@ define([
    * @param {HTMLElement} [domElement] the DOM element in which to run
    *        MCT; if undefined, MCT will be run in the body of the document
    */
-  MCT.prototype.start = function (domElement = document.body, isHeadlessMode = false) {
+  MCT.prototype.start = function (
+    domElement = document.body.firstElementChild,
+    isHeadlessMode = false
+  ) {
+    // Create element to mount Layout if it doesn't exist
+    if (domElement === null) {
+      domElement = document.createElement('div');
+      document.body.appendChild(domElement);
+    }
+    domElement.id = 'openmct-app';
+
     if (this.types.get('layout') === undefined) {
       this.install(
         this.plugins.DisplayLayout({
@@ -370,25 +380,30 @@ define([
      */
 
     if (!isHeadlessMode) {
-      const appLayout = new Vue({
+      const appLayout = Vue.createApp({
         components: {
           Layout: Layout.default
         },
         provide: {
-          openmct: this
+          openmct: Vue.markRaw(this)
         },
         template: '<Layout ref="layout"></Layout>'
       });
-      domElement.appendChild(appLayout.$mount().$el);
+      const component = appLayout.mount(domElement);
+      component.$nextTick(() => {
+        this.layout = component.$refs.layout;
+        this.app = appLayout;
+        Browse(this);
+        window.addEventListener('beforeunload', this.destroy);
+        this.router.start();
+        this.emit('start');
+      });
+    } else {
+      window.addEventListener('beforeunload', this.destroy);
 
-      this.layout = appLayout.$refs.layout;
-      Browse(this);
+      this.router.start();
+      this.emit('start');
     }
-
-    window.addEventListener('beforeunload', this.destroy);
-
-    this.router.start();
-    this.emit('start');
   };
 
   MCT.prototype.startHeadless = function () {

diff --git a/src/api/composition/DefaultCompositionProvider.js b/src/api/composition/DefaultCompositionProvider.js
@@ -21,6 +21,7 @@
  *****************************************************************************/
 import objectUtils from '../objects/object-utils';
 import CompositionProvider from './CompositionProvider';
+import { toRaw } from 'vue';
 
 /**
  * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
@@ -167,7 +168,7 @@ export default class DefaultCompositionProvider extends CompositionProvider {
    */
   add(parent, childId) {
     if (!this.includes(parent, childId)) {
-      const composition = structuredClone(parent.composition);
+      const composition = structuredClone(toRaw(parent.composition));
       composition.push(childId);
       this.publicAPI.objects.mutate(parent, 'composition', composition);
     }

diff --git a/src/api/forms/FormController.js b/src/api/forms/FormController.js
@@ -10,8 +10,7 @@ import TextAreaField from './components/controls/TextAreaField.vue';
 import TextField from './components/controls/TextField.vue';
 import ToggleSwitchField from './components/controls/ToggleSwitchField.vue';
 
-import Vue from 'vue';
-
+import mount from 'utils/mount';
 export const DEFAULT_CONTROLS_MAP = {
   autocomplete: AutoCompleteField,
   checkbox: CheckBoxField,
@@ -69,31 +68,40 @@ export default class FormControl {
    */
   _getControlViewProvider(control) {
     const self = this;
-    let rowComponent;
+    let _destroy = null;
 
     return {
       show(element, model, onChange) {
-        rowComponent = new Vue({
-          el: element,
-          components: {
-            FormControlComponent: DEFAULT_CONTROLS_MAP[control]
-          },
-          provide: {
-            openmct: self.openmct
-          },
-          data() {
-            return {
-              model,
-              onChange
-            };
+        const { vNode, destroy } = mount(
+          {
+            el: element,
+            components: {
+              FormControlComponent: DEFAULT_CONTROLS_MAP[control]
+            },
+            provide: {
+              openmct: self.openmct
+            },
+            data() {
+              return {
+                model,
+                onChange
+              };
+            },
+            template: `<FormControlComponent :model="model" @onChange="onChange"></FormControlComponent>`
           },
-          template: `<FormControlComponent :model="model" @onChange="onChange"></FormControlComponent>`
-        });
+          {
+            element,
+            app: self.openmct.app
+          }
+        );
+        _destroy = destroy;
 
-        return rowComponent;
+        return vNode;
       },
       destroy() {
-        rowComponent.$destroy();
+        if (_destroy) {
+          _destroy();
+        }
       }
     };
   }

diff --git a/src/api/forms/FormsAPI.js b/src/api/forms/FormsAPI.js
@@ -23,8 +23,8 @@
 import FormController from './FormController';
 import FormProperties from './components/FormProperties.vue';
 
-import Vue from 'vue';
 import _ from 'lodash';
+import mount from 'utils/mount';
 
 export default class FormsAPI {
   constructor(openmct) {
@@ -156,25 +156,28 @@ export default class FormsAPI {
       formCancel = onFormAction(reject);
     });
 
-    const vm = new Vue({
-      components: { FormProperties },
-      provide: {
-        openmct: self.openmct
+    const { destroy } = mount(
+      {
+        components: { FormProperties },
+        provide: {
+          openmct: self.openmct
+        },
+        data() {
+          return {
+            formStructure,
+            onChange: onFormPropertyChange,
+            onCancel: formCancel,
+            onSave: formSave
+          };
+        },
+        template:
+          '<FormProperties :model="formStructure" @onChange="onChange" @onCancel="onCancel" @onSave="onSave"></FormProperties>'
       },
-      data() {
-        return {
-          formStructure,
-          onChange: onFormPropertyChange,
-          onCancel: formCancel,
-          onSave: formSave
-        };
-      },
-      template:
-        '<FormProperties :model="formStructure" @onChange="onChange" @onCancel="onCancel" @onSave="onSave"></FormProperties>'
-    }).$mount();
-
-    const formElement = vm.$el;
-    element.append(formElement);
+      {
+        element,
+        app: self.openmct.app
+      }
+    );
 
     function onFormPropertyChange(data) {
       if (onChange) {
@@ -195,8 +198,7 @@ export default class FormsAPI {
 
     function onFormAction(callback) {
       return () => {
-        formElement.remove();
-        vm.$destroy();
+        destroy();
 
         if (callback) {
           callback(changes);

diff --git a/src/api/forms/components/FormProperties.vue b/src/api/forms/components/FormProperties.vue
@@ -141,7 +141,7 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$set(this.invalidProperties, data.model.key, data.invalid);
+      this.invalidProperties[data.model.key] = data.invalid;
 
       this.$emit('onChange', data);
     },

diff --git a/src/api/forms/components/FormRow.vue b/src/api/forms/components/FormRow.vue
@@ -26,9 +26,7 @@
       {{ row.name }}
     </div>
     <div class="c-form-row__state-indicator" :class="reqClass"></div>
-    <div v-if="row.control" class="c-form-row__controls">
-      <div ref="rowElement"></div>
-    </div>
+    <div v-if="row.control" ref="rowElement" class="c-form-row__controls"></div>
   </div>
 </template>
 
@@ -91,7 +89,7 @@ export default {
 
     this.formControl.show(this.$refs.rowElement, this.row, this.onChange);
   },
-  destroyed() {
+  unmounted() {
     const destroy = this.formControl.destroy;
     if (destroy) {
       destroy();

diff --git a/src/api/forms/components/controls/AutoCompleteField.vue b/src/api/forms/components/controls/AutoCompleteField.vue
@@ -166,7 +166,7 @@ export default {
       this.options = this.model.options;
     }
   },
-  destroyed() {
+  unmounted() {
     document.body.removeEventListener('click', this.handleOutsideClick);
   },
   methods: {