Fix remaining vue-compat warnings (#6966)

* PascalCase files

* emit warnings

* minor updates

* merge conflict resolve pt 1

* part 2

* update to eventbus

* eventbus spelling

* fix: import

* fix: eventBus injection

* fix: import

* fix(test): provide eventBus in overlay plot tests

* refactor: EventBus as composable

* chore: lint:fix

* chore: require vue event hyphenation

* fix: revert event renames

* refactor: use PascalCase name

* fix: ensure `$attrs` are properly bound

* fix: emit `click` event from SearchComponent

* chore: remove rules already included in `vue/vue3-recommended` ruleset

* fix: remove `Vue` import

* chore: remove unused files

* fix: fix lint scripts and make them cross-platform

* refactor: rename `DataImagery.vue` -> `ImageryInspectorView.vue`

* refactor: rename `NumericData.vue` -> `NumericDataInspectorView.vue`

* refactor: rename components

* refactor: rename `GeneralIndicators.vue` -> `StatusIndicators.vue`

* refactor: rename components

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>

.eslintrc.js

@@ -145,29 +145,26 @@ module.exports = {
     'no-implicit-coercion': 'error',
     //https://eslint.org/docs/rules/no-unneeded-ternary
     'no-unneeded-ternary': 'error',
-    "unicorn/filename-case": [
+    'unicorn/filename-case': [
-      "error",
+      'error',
       {
-        "cases": {
+        cases: {
-          "pascalCase": true
+          pascalCase: true
         },
-        "ignore": [
+        ignore: ['^.*\\.js$']
-          "^.*\\.js$"
-        ]
       }
     ],
     'vue/first-attribute-linebreak': 'error',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/singleline-html-element-content-newline': 'off',
-    'vue/multi-word-component-names': 'off', // TODO enable, align with conventions
+    'vue/no-mutating-props': 'off' // TODO: Remove this rule and fix resulting errors
-    'vue/no-mutating-props': 'off'
   },
   overrides: [
     {
       files: LEGACY_FILES,
       rules: {
         'no-unused-vars': [
-          'warn',
+          'error',
           {
             vars: 'all',
             args: 'none',

example/simpleVuePlugin/HelloWorld.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="example">{{ msg }}</div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      msg: 'Hello world!'
-    };
-  }
-};
-</script>
-
-<style>
-.example {
-  color: red;
-}
-</style>

example/simpleVuePlugin/plugin.js

@@ -1,36 +0,0 @@
-import Vue from 'vue';
-
-import HelloWorld from './HelloWorld.vue';
-
-function SimpleVuePlugin() {
-  return function install(openmct) {
-    openmct.types.addType('hello-world', {
-      name: 'Hello World',
-      description: 'An introduction object',
-      creatable: true
-    });
-    openmct.objectViews.addProvider({
-      name: 'demo-provider',
-      key: 'hello-world',
-      cssClass: 'icon-packet',
-      canView: function (d) {
-        return d.type === 'hello-world';
-      },
-      view: function (domainObject) {
-        var vm;
-
-        return {
-          show: function (container) {
-            vm = new Vue(HelloWorld);
-            container.appendChild(vm.$mount().$el);
-          },
-          destroy: function (container) {
-            //vm.$destroy();
-          }
-        };
-      }
-    });
-  };
-}
-
-export default SimpleVuePlugin;

package.json

@@ -70,6 +70,7 @@
     "sass-loader": "13.3.2",
     "sinon": "15.1.0",
     "style-loader": "3.3.3",
+    "tiny-emitter": "2.1.0",
     "typescript": "5.2.2",
     "uuid": "9.0.0",
     "vue": "3.3.4",
@@ -85,8 +86,8 @@
     "start": "npx webpack serve --config ./.webpack/webpack.dev.js",
     "start:prod": "npx webpack serve --config ./.webpack/webpack.prod.js",
     "start:coverage": "npx webpack serve --config ./.webpack/webpack.coverage.js",
-    "lint:js": "eslint example src e2e --ext .js openmct.js --max-warnings=0",
+    "lint:js": "eslint \"example/**/*.js\" \"src/**/*.js\" \"e2e/**/*.js\" \"openmct.js\" --max-warnings=0",
-    "lint:vue": "eslint example src --ext .vue",
+    "lint:vue": "eslint \"src/**/*.vue\"",
     "lint:spelling": "cspell \"**/*.{js,md,vue}\" --show-context --gitignore --quiet",
     "lint": "run-p \"lint:js -- {1}\" \"lint:vue -- {1}\" \"lint:spelling -- {1}\" --",
     "lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix",

src/MCT.js

@@ -33,7 +33,7 @@ define([
   './ui/registries/ToolbarRegistry',
   './ui/router/ApplicationRouter',
   './ui/router/Browse',
-  './ui/layout/Layout.vue',
+  './ui/layout/AppLayout.vue',
   './ui/preview/plugin',
   './api/Branding',
   './plugins/licenses/plugin',

src/api/forms/FormController.js

@@ -3,9 +3,9 @@ import mount from 'utils/mount';
 import AutoCompleteField from './components/controls/AutoCompleteField.vue';
 import CheckBoxField from './components/controls/CheckBoxField.vue';
 import ClockDisplayFormatField from './components/controls/ClockDisplayFormatField.vue';
-import Datetime from './components/controls/Datetime.vue';
+import Datetime from './components/controls/DatetimeField.vue';
 import FileInput from './components/controls/FileInput.vue';
-import Locator from './components/controls/Locator.vue';
+import Locator from './components/controls/LocatorField.vue';
 import NumberField from './components/controls/NumberField.vue';
 import SelectField from './components/controls/SelectField.vue';
 import TextAreaField from './components/controls/TextAreaField.vue';
@@ -87,7 +87,7 @@ export default class FormControl {
                 onChange
               };
             },
-            template: `<FormControlComponent :model="model" @onChange="onChange"></FormControlComponent>`
+            template: `<FormControlComponent :model="model" @on-change="onChange"></FormControlComponent>`
           },
           {
             element,

src/api/forms/FormsAPI.js

@@ -171,7 +171,7 @@ export default class FormsAPI {
           };
         },
         template:
-          '<FormProperties :model="formStructure" @onChange="onChange" @onCancel="onCancel" @onSave="onSave"></FormProperties>'
+          '<FormProperties :model="formStructure" @on-change="onChange" @on-cancel="onCancel" @on-save="onSave"></FormProperties>'
       },
       {
         element,

src/api/forms/components/FormProperties.vue

@@ -44,7 +44,7 @@
           :css-class="row.cssClass"
           :first="index < 1"
           :row="row"
-          @onChange="onChange"
+          @on-change="onChange"
         />
       </div>
     </form>
@@ -94,6 +94,7 @@ export default {
       }
     }
   },
+  emits: ['on-change', 'on-save', 'on-cancel'],
   data() {
     return {
       invalidProperties: {},
@@ -144,13 +145,13 @@ export default {
     onChange(data) {
       this.invalidProperties[data.model.key] = data.invalid;
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     onCancel() {
-      this.$emit('onCancel');
+      this.$emit('on-cancel');
     },
     onSave() {
-      this.$emit('onSave');
+      this.$emit('on-save');
     }
   }
 };

src/api/forms/components/FormRow.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <div class="form-row c-form__row" :class="[{ first: first }, cssClass]" @onChange="onChange">
+  <div class="form-row c-form__row" :class="[{ first: first }, cssClass]" @on-change="onChange">
     <label class="c-form-row__label" :title="row.description" :for="`form-${row.key}`">
       {{ row.name }}
     </label>
@@ -51,6 +51,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       formControl: this.openmct.forms.getFormControl(this.row.control),
@@ -101,7 +102,7 @@ export default {
       this.valid = this.validateRow(data);
       data.invalid = !this.valid;
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     validateRow(data) {
       let valid = true;

src/api/forms/components/controls/AutoCompleteField.vue

@@ -88,6 +88,7 @@ export default {
       }
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       hideOptions: true,
@@ -138,7 +139,7 @@ export default {
           value: newValue
         };
 
-        this.$emit('onChange', data);
+        this.$emit('on-change', data);
       }
     },
     hideOptions(newValue) {

src/api/forms/components/controls/ClockDisplayFormatField.vue

@@ -22,7 +22,7 @@
 
 <template>
   <div class="c-form-control--clock-display-format-fields">
-    <SelectField v-for="item in items" :key="item.key" :model="item" @onChange="onChange" />
+    <SelectField v-for="item in items" :key="item.key" :model="item" @on-change="onChange" />
   </div>
 </template>
 
@@ -39,6 +39,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       items: []
@@ -55,7 +56,7 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/CompositeContainer.vue

@@ -28,7 +28,7 @@
       :first="index < 1"
       :value="JSON.stringify(model.value[index])"
       :item="item"
-      @onChange="onChange"
+      @on-change="onChange"
     />
   </span>
 </template>
@@ -46,12 +46,13 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   mounted() {
     this.model.items.forEach((item, index) => (item.key = `${this.model.key}.${index}`));
   },
   methods: {
     onChange(data) {
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/CompositeItem.vue

@@ -22,7 +22,7 @@
 
 <template>
   <div :class="compositeCssClass">
-    <FormRow :css-class="item.cssClass" :first="first" :row="row" @onChange="onChange" />
+    <FormRow :css-class="item.cssClass" :first="first" :row="row" @on-change="onChange" />
     <span class="composite-control-label">
       {{ item.name }}
     </span>
@@ -50,6 +50,7 @@ export default {
       }
     }
   },
+  emits: ['on-change'],
   computed: {
     compositeCssClass() {
       return `l-composite-control l-${this.item.control}`;
@@ -63,7 +64,7 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/DatetimeField.vue

@@ -85,6 +85,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       format: DATE_FORMAT,
@@ -139,7 +140,7 @@ export default {
         value: new Date(timestamp).toISOString()
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     resetValues() {
       this.setDatetime();

src/api/forms/components/controls/FileInput.vue

@@ -52,6 +52,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       fileInfo: undefined
@@ -101,7 +102,7 @@ export default {
           model: self.model,
           value: fileInfo
         };
-        self.$emit('onChange', data);
+        self.$emit('on-change', data);
       };
 
       fileReader.onerror = function (error) {
@@ -123,7 +124,7 @@ export default {
         value: fileInfo
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     selectFile() {
       this.$refs.fileInput.click();
@@ -135,7 +136,7 @@ export default {
         model: this.model,
         value: undefined
       };
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/LocatorField.vue

@@ -42,6 +42,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   methods: {
     handleItemSelection(item) {
       const data = {
@@ -49,7 +50,7 @@ export default {
         value: item.objectPath
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/NumberField.vue

@@ -46,6 +46,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       field: this.model.value
@@ -61,7 +62,7 @@ export default {
         value: this.field
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/SelectField.vue

@@ -44,6 +44,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       selected: this.model.value
@@ -56,7 +57,7 @@ export default {
         value: this.selected
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/TextAreaField.vue

@@ -45,6 +45,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       field: this.model.value
@@ -60,7 +61,7 @@ export default {
         value: this.field
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/TextField.vue

@@ -45,6 +45,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       field: this.model.value
@@ -60,7 +61,7 @@ export default {
         value: this.field
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/toggle-check-box-mixin.js

@@ -1,4 +1,5 @@
 export default {
+  emits: ['on-change'],
   data() {
     return {
       isChecked: false
@@ -13,7 +14,7 @@ export default {
         value: this.isChecked
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/menu/menu.js

@@ -23,7 +23,7 @@ import EventEmitter from 'EventEmitter';
 import mount from 'utils/mount';
 import { h } from 'vue';
 
-import MenuComponent from './components/Menu.vue';
+import MenuComponent from './components/MenuComponent.vue';
 import SuperMenuComponent from './components/SuperMenu.vue';
 
 export const MENU_PLACEMENT = {

src/api/overlays/components/OverlayComponent.vue

@@ -57,6 +57,7 @@
 <script>
 export default {
   inject: ['dismiss', 'element', 'buttons', 'dismissable'],
+  emits: ['destroy'],
   data: function () {
     return {
       focusIndex: -1

src/plugins/LADTable/components/LadRow.vue

@@ -79,6 +79,7 @@ export default {
       required: true
     }
   },
+  emits: ['row-context-click'],
   data() {
     return {
       datum: undefined,
@@ -232,7 +233,7 @@ export default {
       this.timestampKey = timeSystem.key;
     },
     updateViewContext() {
-      this.$emit('rowContextClick', {
+      this.$emit('row-context-click', {
         viewHistoricalData: true,
         viewDatumAction: true,
         getDatum: () => {

src/plugins/LADTable/components/LadTable.vue

@@ -41,7 +41,7 @@
           :has-units="hasUnits"
           :is-stale="staleObjects.includes(ladRow.key)"
           :configuration="configuration"
-          @rowContextClick="updateViewContext"
+          @row-context-click="updateViewContext"
         />
       </tbody>
     </table>
@@ -49,10 +49,12 @@
 </template>
 
 <script>
-import Vue, { toRaw } from 'vue';
+import { nextTick, toRaw } from 'vue';
-import LadRow from './LadRow.vue';
+
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
+import LadRow from './LadRow.vue';
+
 export default {
   components: {
     LadRow
@@ -127,7 +129,7 @@ export default {
     this.composition.on('remove', this.removeItem);
     this.composition.on('reorder', this.reorder);
     this.composition.load();
-    await Vue.nextTick();
+    await nextTick();
     this.viewActionsCollection = this.openmct.actions.getActionsCollection(
       this.objectPath,
       this.currentView

src/plugins/charts/bar/BarGraphPlot.vue

@@ -67,6 +67,7 @@ export default {
       }
     }
   },
+  emits: ['subscribe', 'unsubscribe'],
   data() {
     return {
       isZoomed: false,

src/plugins/charts/bar/inspector/SeriesOptions.vue

@@ -43,7 +43,7 @@
           edit-title="Manually set the color for this bar graph series."
           view-title="The color for this bar graph series."
           short-label="Color"
-          @colorSet="setColor"
+          @color-set="setColor"
         />
       </li>
     </ul>

src/plugins/charts/scatter/ScatterPlotForm.vue

@@ -84,6 +84,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       rangeMax: this.model.value.rangeMax,
@@ -119,7 +120,7 @@ export default {
         this.model.validate(data);
       }
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue

@@ -71,6 +71,7 @@ export default {
       }
     }
   },
+  emits: ['subscribe', 'unsubscribe'],
   data() {
     return {
       isZoomed: false,

src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue

@@ -59,7 +59,7 @@
         edit-title="Manually set the line and marker color for this plot."
         view-title="The line and marker color for this plot."
         short-label="Color"
-        @colorSet="setColor"
+        @color-set="setColor"
       />
     </ul>
   </div>

src/plugins/charts/scatter/plugin.js

@@ -118,7 +118,7 @@ export default function () {
                 onChange
               };
             },
-            template: `<scatter-plot-form :model="model" @onChange="onChange"></scatter-plot-form>`
+            template: `<scatter-plot-form :model="model" @on-change="onChange"></scatter-plot-form>`
           },
           {
             app: openmct.app,

src/plugins/clock/ClockViewProvider.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import Clock from './components/Clock.vue';
+import Clock from './components/ClockComponent.vue';
 
 export default function ClockViewProvider(openmct) {
   return {

src/plugins/condition/components/ConditionCollection.vue

@@ -66,12 +66,12 @@
           :is-editing="isEditing"
           :move-index="moveIndex"
           :is-dragging="isDragging"
-          @updateCondition="updateCondition"
+          @update-condition="updateCondition"
-          @removeCondition="removeCondition"
+          @remove-condition="removeCondition"
-          @cloneCondition="cloneCondition"
+          @clone-condition="cloneCondition"
-          @setMoveIndex="setMoveIndex"
+          @set-move-index="setMoveIndex"
-          @dragComplete="dragComplete"
+          @drag-complete="dragComplete"
-          @dropCondition="dropCondition"
+          @drop-condition="dropCondition"
         />
       </div>
     </div>
@@ -79,10 +79,11 @@
 </template>
 
 <script>
-import ConditionManager from '../ConditionManager';
-import Condition from './Condition.vue';
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
+import ConditionManager from '../ConditionManager';
+import Condition from './ConditionItem.vue';
+
 export default {
   components: {
     Condition
@@ -102,6 +103,12 @@ export default {
       }
     }
   },
+  emits: [
+    'condition-set-result-updated',
+    'no-telemetry-objects',
+    'telemetry-updated',
+    'telemetry-staleness'
+  ],
   data() {
     return {
       expanded: true,
@@ -164,11 +171,11 @@ export default {
   methods: {
     handleConditionSetResultUpdated(data) {
       this.currentConditionId = data.conditionId;
-      this.$emit('conditionSetResultUpdated', data);
+      this.$emit('condition-set-result-updated', data);
     },
     emitNoTelemetryObjectEvent(data) {
       this.currentConditionId = '';
-      this.$emit('noTelemetryObjects');
+      this.$emit('no-telemetry-objects');
     },
     observeForChanges() {
       this.stopObservingForChanges = this.openmct.objects.observe(
@@ -225,7 +232,7 @@ export default {
       const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
 
       this.telemetryObjs.push(domainObject);
-      this.$emit('telemetryUpdated', this.telemetryObjs);
+      this.$emit('telemetry-updated', this.telemetryObjs);
 
       this.subscribeToStaleness(domainObject, (stalenessResponse) => {
         this.emitStaleness({
@@ -255,7 +262,7 @@ export default {
       }
     },
     emitStaleness(stalenessObject) {
-      this.$emit('telemetryStaleness', stalenessObject);
+      this.$emit('telemetry-staleness', stalenessObject);
     },
     addCondition() {
       this.conditionManager.addCondition();

src/plugins/condition/components/ConditionItem.vue

@@ -189,7 +189,7 @@ import { v4 as uuid } from 'uuid';
 import { TRIGGER, TRIGGER_LABEL } from '@/plugins/condition/utils/constants';
 
 import ConditionDescription from './ConditionDescription.vue';
-import Criterion from './Criterion.vue';
+import Criterion from './CriterionItem.vue';
 
 export default {
   components: {
@@ -229,6 +229,14 @@ export default {
       default: 0
     }
   },
+  emits: [
+    'set-move-index',
+    'drag-complete',
+    'drop-condition',
+    'remove-condition',
+    'clone-condition',
+    'update-condition'
+  ],
   data() {
     return {
       currentCriteria: this.currentCriteria,
@@ -313,11 +321,11 @@ export default {
       event.dataTransfer.setData('dragging', event.target); // required for FF to initiate drag
       event.dataTransfer.effectAllowed = 'copyMove';
       event.dataTransfer.setDragImage(event.target.closest('.c-condition-h'), 0, 0);
-      this.$emit('setMoveIndex', this.conditionIndex);
+      this.$emit('set-move-index', this.conditionIndex);
     },
     dragEnd() {
       this.dragStarted = false;
-      this.$emit('dragComplete');
+      this.$emit('drag-complete');
     },
     dropCondition(event, targetIndex) {
       if (!this.isDragging) {
@@ -331,7 +339,7 @@ export default {
       if (this.isValidTarget(targetIndex)) {
         this.dragElement = undefined;
         this.draggingOver = false;
-        this.$emit('dropCondition', targetIndex);
+        this.$emit('drop-condition', targetIndex);
       }
     },
     dragEnter(event, targetIndex) {
@@ -359,10 +367,10 @@ export default {
     },
     destroy() {},
     removeCondition() {
-      this.$emit('removeCondition', this.condition.id);
+      this.$emit('remove-condition', this.condition.id);
     },
     cloneCondition() {
-      this.$emit('cloneCondition', {
+      this.$emit('clone-condition', {
         condition: this.condition,
         index: this.conditionIndex
       });
@@ -380,7 +388,7 @@ export default {
       this.persist();
     },
     persist() {
-      this.$emit('updateCondition', {
+      this.$emit('update-condition', {
         condition: this.condition
       });
     },

src/plugins/condition/components/ConditionSet.vue

@@ -39,25 +39,26 @@
         :is-editing="isEditing"
         :test-data="testData"
         :telemetry="telemetryObjs"
-        @updateTestData="updateTestData"
+        @update-test-data="updateTestData"
       />
       <ConditionCollection
         class="c-cs__conditions"
         :is-editing="isEditing"
         :test-data="testData"
-        @conditionSetResultUpdated="updateCurrentOutput"
+        @condition-set-result-updated="updateCurrentOutput"
-        @noTelemetryObjects="updateCurrentOutput('---')"
+        @no-telemetry-objects="updateCurrentOutput('---')"
-        @telemetryUpdated="updateTelemetry"
+        @telemetry-updated="updateTelemetry"
-        @telemetryStaleness="handleStaleness"
+        @telemetry-staleness="handleStaleness"
       />
     </div>
   </div>
 </template>
 
 <script>
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
 import ConditionCollection from './ConditionCollection.vue';
 import TestData from './TestData.vue';
-import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
 export default {
   components: {

src/plugins/condition/components/CriterionItem.vue

@@ -136,6 +136,7 @@ export default {
       required: true
     }
   },
+  emits: ['persist'],
   data() {
     return {
       telemetryMetadataOptions: [],

src/plugins/condition/components/TestData.vue

@@ -127,6 +127,7 @@ export default {
       }
     }
   },
+  emits: ['update-test-data'],
   data() {
     return {
       expanded: true,
@@ -225,7 +226,7 @@ export default {
       this.updateTestData();
     },
     updateTestData() {
-      this.$emit('updateTestData', {
+      this.$emit('update-test-data', {
         applied: this.isApplied,
         conditionTestInputs: this.testInputs
       });

src/plugins/condition/components/inspector/StyleEditor.vue

@@ -120,6 +120,7 @@ export default {
       required: true
     }
   },
+  emits: ['persist', 'save-style'],
   computed: {
     itemStyle() {
       return getStylesWithoutNoneValue(this.styleItem.style);

src/plugins/displayLayout/components/BoxView.vue

@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -78,6 +78,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       if (this.itemStyle) {
@@ -127,7 +128,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -57,17 +57,17 @@
       :index="index"
       :multi-select="selectedLayoutItems.length > 1 || null"
       :is-editing="isEditing"
-      @contextClick="updateViewContext"
+      @context-click="updateViewContext"
       @move="move"
-      @endMove="endMove"
+      @end-move="endMove"
-      @endLineResize="endLineResize"
+      @end-line-resize="endLineResize"
-      @formatChanged="updateTelemetryFormat"
+      @format-changed="updateTelemetryFormat"
     />
     <edit-marquee
       v-if="showMarquee"
       :grid-size="gridSize"
       :selected-layout-items="selectedLayoutItems"
-      @endResize="endResize"
+      @end-resize="endResize"
     />
   </div>
 </template>

src/plugins/displayLayout/components/EditMarquee.vue

@@ -58,6 +58,7 @@ export default {
       validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
     }
   },
+  emits: ['end-resize'],
   data() {
     return {
       dragPosition: undefined
@@ -182,7 +183,7 @@ export default {
         y: marqueeEnd.y - marqueeStart.y
       };
 
-      this.$emit('endResize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
+      this.$emit('end-resize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
       this.dragPosition = undefined;
       this.initialPosition = undefined;
       this.marqueeStartPosition = undefined;

src/plugins/displayLayout/components/EllipseView.vue

@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -78,6 +78,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       if (this.itemStyle) {
@@ -127,7 +128,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };

src/plugins/displayLayout/components/ImageView.vue

@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div class="c-image-view" :style="style"></div>
@@ -74,6 +74,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       let backgroundImage = 'url(' + this.item.url + ')';
@@ -130,7 +131,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -56,6 +56,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     size() {
       let { width, height } = this.item;
@@ -119,7 +120,7 @@ export default {
       document.body.removeEventListener('mousemove', this.continueMove);
       document.body.removeEventListener('mouseup', this.endMove);
       this.continueMove(event);
-      this.$emit('endMove');
+      this.$emit('end-move');
       this.dragPosition = undefined;
       this.initialPosition = undefined;
       this.delta = undefined;

src/plugins/displayLayout/components/LineView.vue

@@ -108,6 +108,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move', 'end-line-resize'],
   data() {
     return {
       dragPosition: undefined,
@@ -318,9 +319,9 @@ export default {
       document.body.removeEventListener('mouseup', this.endDrag);
       let { x, y, x2, y2 } = this.dragPosition;
       if (!this.dragging) {
-        this.$emit('endMove');
+        this.$emit('end-move');
       } else {
-        this.$emit('endLineResize', this.item, {
+        this.$emit('end-line-resize', this.item, {
           x,
           y,
           x2,

src/plugins/displayLayout/components/SubobjectView.vue

@@ -25,7 +25,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <ObjectFrame
@@ -103,6 +103,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   data() {
     return {
       domainObject: undefined,
@@ -174,7 +175,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };

src/plugins/displayLayout/components/TelemetryView.vue

@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -126,6 +126,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move', 'format-changed', 'context-click'],
   data() {
     return {
       currentObjectPath: undefined,
@@ -344,10 +345,10 @@ export default {
     updateTelemetryFormat(format) {
       this.customStringformatter.setFormat(format);
 
-      this.$emit('formatChanged', this.item, format);
+      this.$emit('format-changed', this.item, format);
     },
     updateViewContext() {
-      this.$emit('contextClick', {
+      this.$emit('context-click', {
         viewHistoricalData: true,
         formattedValueForCopy: this.formattedValueForCopy
       });
@@ -400,7 +401,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };

src/plugins/displayLayout/components/TextView.vue

@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -86,6 +86,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       let size;
@@ -139,7 +140,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };

src/plugins/faultManagement/FaultManagementListHeader.vue

@@ -43,7 +43,7 @@
           class="c-fault-mgmt-viewButton"
           title="Sort By"
           :model="model"
-          @onChange="onChange"
+          @on-change="onChange"
         />
       </div>
     </div>
@@ -74,6 +74,7 @@ export default {
       }
     }
   },
+  emits: ['sort-changed', 'select-all'],
   data() {
     return {
       model: {}
@@ -93,10 +94,10 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('sortChanged', data);
+      this.$emit('sort-changed', data);
     },
     selectAll(e) {
-      this.$emit('selectAll', e.target.checked);
+      this.$emit('select-all', e.target.checked);
     }
   }
 };

src/plugins/faultManagement/FaultManagementListItem.vue

@@ -90,6 +90,7 @@ export default {
       }
     }
   },
+  emits: ['acknowledge-selected', 'shelve-selected', 'toggle-selected'],
   computed: {
     classesFromState() {
       const exclusiveStates = [
@@ -169,7 +170,7 @@ export default {
           name: 'Acknowledge',
           description: '',
           onItemClicked: (e) => {
-            this.$emit('acknowledgeSelected', [this.fault]);
+            this.$emit('acknowledge-selected', [this.fault]);
           }
         },
         {
@@ -177,7 +178,7 @@ export default {
           name: 'Shelve',
           description: '',
           onItemClicked: () => {
-            this.$emit('shelveSelected', [this.fault], { shelved: true });
+            this.$emit('shelve-selected', [this.fault], { shelved: true });
           }
         },
         {
@@ -186,7 +187,7 @@ export default {
           name: 'Unshelve',
           description: '',
           onItemClicked: () => {
-            this.$emit('shelveSelected', [this.fault], { shelved: false });
+            this.$emit('shelve-selected', [this.fault], { shelved: false });
           }
         }
       ];
@@ -199,7 +200,7 @@ export default {
         selected: event.target.checked
       };
 
-      this.$emit('toggleSelected', faultData);
+      this.$emit('toggle-selected', faultData);
     }
   }
 };

src/plugins/faultManagement/FaultManagementListView.vue

@@ -24,15 +24,15 @@
   <div class="c-faults-list-view">
     <FaultManagementSearch
       :search-term="searchTerm"
-      @filterChanged="updateFilter"
+      @filter-changed="updateFilter"
-      @updateSearchTerm="updateSearchTerm"
+      @update-search-term="updateSearchTerm"
     />
 
     <FaultManagementToolbar
       v-if="showToolbar"
       :selected-faults="selectedFaults"
-      @acknowledgeSelected="toggleAcknowledgeSelected"
+      @acknowledge-selected="toggleAcknowledgeSelected"
-      @shelveSelected="toggleShelveSelected"
+      @shelve-selected="toggleShelveSelected"
     />
 
     <div class="c-faults-list-view-header-item-container-wrapper">
@@ -41,8 +41,8 @@
           class="header"
           :selected-faults="Object.values(selectedFaults)"
           :total-faults-count="filteredFaultsList.length"
-          @selectAll="selectAll"
+          @select-all="selectAll"
-          @sortChanged="sortChanged"
+          @sort-changed="sortChanged"
         />
 
         <div class="c-faults-list-view-item-body">
@@ -52,9 +52,9 @@
               :key="fault.id"
               :fault="fault"
               :is-selected="isSelected(fault)"
-              @toggleSelected="toggleSelected"
+              @toggle-selected="toggleSelected"
-              @acknowledgeSelected="toggleAcknowledgeSelected"
+              @acknowledge-selected="toggleAcknowledgeSelected"
-              @shelveSelected="toggleShelveSelected"
+              @shelve-selected="toggleShelveSelected"
             />
           </template>
         </div>

src/plugins/faultManagement/FaultManagementSearch.vue

@@ -33,14 +33,14 @@
       class="c-fault-mgmt-viewButton"
       title="View Filter"
       :model="model"
-      @onChange="onChange"
+      @on-change="onChange"
     />
   </div>
 </template>
 
 <script>
 import SelectField from '@/api/forms/components/controls/SelectField.vue';
-import Search from '@/ui/components/Search.vue';
+import Search from '@/ui/components/SearchComponent.vue';
 
 import { FILTER_ITEMS } from './constants';
 
@@ -56,6 +56,7 @@ export default {
       default: ''
     }
   },
+  emits: ['filter-changed', 'update-search-term'],
   data() {
     return {
       items: []
@@ -79,10 +80,10 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('filterChanged', data);
+      this.$emit('filter-changed', data);
     },
     updateSearchTerm(searchTerm) {
-      this.$emit('updateSearchTerm', searchTerm);
+      this.$emit('update-search-term', searchTerm);
     }
   }
 };

src/plugins/faultManagement/FaultManagementToolbar.vue

@@ -53,6 +53,7 @@ export default {
       }
     }
   },
+  emits: ['acknowledge-selected', 'shelve-selected'],
   data() {
     return {
       disableAcknowledge: true,
@@ -82,10 +83,10 @@ export default {
   },
   methods: {
     acknowledgeSelected() {
-      this.$emit('acknowledgeSelected');
+      this.$emit('acknowledge-selected');
     },
     shelveSelected() {
-      this.$emit('shelveSelected');
+      this.$emit('shelve-selected');
     }
   }
 };

src/plugins/filters/components/FilterField.vue

@@ -125,6 +125,12 @@ export default {
       }
     }
   },
+  emits: [
+    'filter-text-value-changed',
+    'filter-selected',
+    'clear-filters',
+    'filter-single-selected'
+  ],
   data() {
     return {
       isEditing: this.openmct.editor.isEditing()
@@ -151,16 +157,16 @@ export default {
       return this.persistedFilters && this.persistedFilters[comparator];
     },
     updateFilterValueFromString(event, comparator) {
-      this.$emit('filterTextValueChanged', this.filterField.key, comparator, event.target.value);
+      this.$emit('filter-text-value-changed', this.filterField.key, comparator, event.target.value);
     },
     updateFilterValueFromCheckbox(event, comparator, value) {
-      this.$emit('filterSelected', this.filterField.key, comparator, value, event.target.checked);
+      this.$emit('filter-selected', this.filterField.key, comparator, value, event.target.checked);
     },
     updateFilterValueFromDropdown(event, comparator, value) {
       if (value === 'NONE') {
-        this.$emit('clearFilters', this.filterField.key);
+        this.$emit('clear-filters', this.filterField.key);
       } else {
-        this.$emit('filterSingleSelected', this.filterField.key, comparator, value);
+        this.$emit('filter-single-selected', this.filterField.key, comparator, value);
       }
     },
     getFilterLabels(filter) {

src/plugins/filters/components/FilterObject.vue

@@ -64,10 +64,10 @@
           :use-global="persistedFilters.useGlobal"
           :persisted-filters="updatedFilters[metadatum.key]"
           label="Specific Filter"
-          @filterSelected="updateMultipleFiltersWithSelectedValue"
+          @filter-selected="updateMultipleFiltersWithSelectedValue"
-          @filterTextValueChanged="updateFiltersWithTextValue"
+          @filter-text-value-changed="updateFiltersWithTextValue"
-          @filterSingleSelected="updateSingleSelection"
+          @filter-single-selected="updateSingleSelection"
-          @clearFilters="clearFilters"
+          @clear-filters="clearFilters"
         />
       </ul>
     </div>
@@ -98,6 +98,7 @@ export default {
       }
     }
   },
+  emits: ['update-filters'],
   data() {
     return {
       expanded: false,
@@ -161,11 +162,11 @@ export default {
         this.updatedFilters[key][comparator] = [valueName];
       }
 
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     clearFilters(key) {
       this.updatedFilters[key] = {};
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     updateFiltersWithTextValue(key, comparator, value) {
       if (value.trim() === '') {
@@ -174,15 +175,15 @@ export default {
         this.updatedFilters[key][comparator] = value;
       }
 
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     updateSingleSelection(key, comparator, value) {
       this.updatedFilters[key][comparator] = [value];
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     useGlobalFilter(checked) {
       this.updatedFilters.useGlobal = checked;
-      this.$emit('updateFilters', this.keyString, this.updatedFilters, checked);
+      this.$emit('update-filters', this.keyString, this.updatedFilters, checked);
     },
     toggleIsEditing(isEditing) {
       this.isEditing = isEditing;

src/plugins/filters/components/FiltersView.vue

@@ -28,14 +28,14 @@
     <global-filters
       :global-filters="globalFilters"
       :global-metadata="globalMetadata"
-      @persistGlobalFilters="persistGlobalFilters"
+      @persist-global-filters="persistGlobalFilters"
     />
     <filter-object
       v-for="(child, key) in children"
       :key="key"
       :filter-object="child"
       :persisted-filters="persistedFilters[key]"
-      @updateFilters="persistFilters"
+      @update-filters="persistFilters"
     />
   </ul>
 </template>

src/plugins/filters/components/GlobalFilters.vue

@@ -44,10 +44,10 @@
         :filter-field="metadatum"
         :persisted-filters="updatedFilters[metadatum.key]"
         label="Global Filter"
-        @filterSelected="updateFiltersWithSelectedValue"
+        @filter-selected="updateFiltersWithSelectedValue"
-        @filterTextValueChanged="updateFiltersWithTextValue"
+        @filter-text-value-changed="updateFiltersWithTextValue"
-        @filterSingleSelected="updateSingleSelection"
+        @filter-single-selected="updateSingleSelection"
-        @clearFilters="clearFilters"
+        @clear-filters="clearFilters"
       />
     </ul>
   </li>
@@ -73,6 +73,7 @@ export default {
       }
     }
   },
+  emits: ['persist-global-filters'],
   data() {
     return {
       expanded: false,
@@ -102,7 +103,7 @@ export default {
     },
     clearFilters(key) {
       this.updatedFilters[key] = {};
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
     updateFiltersWithSelectedValue(key, comparator, valueName, value) {
       let filterValue = this.updatedFilters[key];
@@ -121,11 +122,11 @@ export default {
         this.updatedFilters[key][comparator] = [valueName];
       }
 
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
     updateSingleSelection(key, comparator, value) {
       this.updatedFilters[key][comparator] = [value];
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
     updateFiltersWithTextValue(key, comparator, value) {
       if (value.trim() === '') {
@@ -134,7 +135,7 @@ export default {
         this.updatedFilters[key][comparator] = value;
       }
 
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     }
   }
 };

src/plugins/flexibleLayout/components/ContainerComponent.vue

@@ -76,7 +76,7 @@
 
 <script>
 import DropHint from './DropHint.vue';
-import FrameComponent from './Frame.vue';
+import FrameComponent from './FrameComponent.vue';
 import ResizeHandle from './ResizeHandle.vue';
 
 const MIN_FRAME_SIZE = 5;
@@ -111,6 +111,7 @@ export default {
       required: true
     }
   },
+  emits: ['new-frame', 'move-frame', 'persist'],
   computed: {
     frames() {
       return this.container.frames;

src/plugins/flexibleLayout/components/DropHint.vue

@@ -45,6 +45,7 @@ export default {
       required: true
     }
   },
+  emits: ['object-drop-to'],
   data() {
     return {
       isMouseOver: false,

src/plugins/flexibleLayout/components/FlexibleLayout.vue

@@ -81,7 +81,7 @@
 <script>
 import Container from '../utils/container';
 import Frame from '../utils/frame';
-import ContainerComponent from './Container.vue';
+import ContainerComponent from './ContainerComponent.vue';
 import DropHint from './DropHint.vue';
 import ResizeHandle from './ResizeHandle.vue';
 

src/plugins/flexibleLayout/components/ResizeHandle.vue

@@ -45,6 +45,7 @@ export default {
       default: false
     }
   },
+  emits: ['move', 'init-move', 'end-move'],
   data() {
     return {
       initialPos: 0,

src/plugins/gauge/GaugePlugin.js

@@ -187,7 +187,7 @@ export default function () {
                 onChange
               };
             },
-            template: `<GaugeFormController :model="model" @onChange="onChange"></GaugeFormController>`
+            template: `<GaugeFormController :model="model" @on-change="onChange"></GaugeFormController>`
           },
           {
             app: openmct.app,

src/plugins/gauge/GaugeViewProvider.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import GaugeComponent from './components/Gauge.vue';
+import GaugeComponent from './components/GaugeComponent.vue';
 
 export default function GaugeViewProvider(openmct) {
   return {

src/plugins/gauge/components/GaugeComponent.vue

@@ -338,7 +338,6 @@ const LIMIT_PADDING_IN_PERCENT = 10;
 const DEFAULT_CURRENT_VALUE = '--';
 
 export default {
-  name: 'Gauge',
   mixins: [stalenessMixin, tooltipHelpers],
   inject: ['openmct', 'domainObject', 'composition'],
   data() {

src/plugins/gauge/components/GaugeFormController.vue

@@ -97,6 +97,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     this.changes = {};
 
@@ -140,7 +141,7 @@ export default {
         });
       }
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     toggleUseTelemetryLimits() {
       this.isUseTelemetryLimits = !this.isUseTelemetryLimits;
@@ -150,7 +151,7 @@ export default {
         },
         value: this.isUseTelemetryLimits
       };
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/plugins/imagery/components/Compass/CompassComponent.vue

@@ -66,6 +66,7 @@ export default {
       required: true
     }
   },
+  emits: ['toggle-lock-compass'],
   computed: {
     hasGimble() {
       return this.cameraAzimuth !== undefined;

src/plugins/imagery/components/Compass/pluginSpec.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 import Vue from 'vue';
 
-import Compass from './Compass.vue';
+import Compass from './CompassComponent.vue';
 
 const COMPASS_ROSE_CLASS = '.c-direction-rose';
 const COMPASS_HUD_CLASS = '.c-compass__hud';

src/plugins/imagery/components/FilterSettings.vue

@@ -63,6 +63,7 @@
 <script>
 export default {
   inject: ['openmct'],
+  emits: ['filter-changed'],
   data() {
     return {
       filters: {
@@ -79,7 +80,7 @@ export default {
       }
     },
     notifyFiltersChanged() {
-      this.$emit('filterChanged', this.filters);
+      this.$emit('filter-changed', this.filters);
     },
     resetFilters() {
       this.filters = {

src/plugins/imagery/components/ImageControls.vue

@@ -27,21 +27,21 @@
     aria-label="Image controls"
   >
     <imagery-view-menu-switcher :icon-class="'icon-brightness'" :title="'Brightness and contrast'">
-      <filter-settings @filterChanged="updateFilterValues" />
+      <filter-settings @filter-changed="updateFilterValues" />
     </imagery-view-menu-switcher>
 
     <imagery-view-menu-switcher v-if="layers.length" :icon-class="'icon-layers'" :title="'Layers'">
-      <layer-settings :layers="layers" @toggleLayerVisibility="toggleLayerVisibility" />
+      <layer-settings :layers="layers" @toggle-layer-visibility="toggleLayerVisibility" />
     </imagery-view-menu-switcher>
 
     <zoom-settings
       class="--hide-if-less-than-220"
       :pan-zoom-locked="panZoomLocked"
       :zoom-factor="zoomFactor"
-      @zoomOut="zoomOut"
+      @zoom-out="zoomOut"
-      @zoomIn="zoomIn"
+      @zoom-in="zoomIn"
-      @toggleZoomLock="toggleZoomLock"
+      @toggle-zoom-lock="toggleZoomLock"
-      @handleResetImage="handleResetImage"
+      @handle-reset-image="handleResetImage"
     />
 
     <imagery-view-menu-switcher
@@ -54,10 +54,10 @@
         :class="'c-control-menu c-menu--has-close-btn'"
         :zoom-factor="zoomFactor"
         :is-menu="true"
-        @zoomOut="zoomOut"
+        @zoom-out="zoomOut"
-        @zoomIn="zoomIn"
+        @zoom-in="zoomIn"
-        @toggleZoomLock="toggleZoomLock"
+        @toggle-zoom-lock="toggleZoomLock"
-        @handleResetImage="handleResetImage"
+        @handle-reset-image="handleResetImage"
       />
     </imagery-view-menu-switcher>
   </div>
@@ -105,6 +105,14 @@ export default {
       }
     }
   },
+  emits: [
+    'cursors-updated',
+    'reset-image',
+    'pan-zoom-updated',
+    'filters-updated',
+    'start-pan',
+    'toggle-layer-visibility'
+  ],
   data() {
     return {
       altPressed: false,
@@ -141,7 +149,7 @@ export default {
       }
     },
     cursorStates(states) {
-      this.$emit('cursorsUpdated', states);
+      this.$emit('cursors-updated', states);
     }
   },
   mounted() {
@@ -155,16 +163,16 @@ export default {
   },
   methods: {
     handleResetImage() {
-      this.$emit('resetImage');
+      this.$emit('reset-image');
     },
     handleUpdatePanZoom(options) {
-      this.$emit('panZoomUpdated', options);
+      this.$emit('pan-zoom-updated', options);
     },
     toggleZoomLock() {
       this.panZoomLocked = !this.panZoomLocked;
     },
     notifyFiltersChanged() {
-      this.$emit('filtersUpdated', this.filters);
+      this.$emit('filters-updated', this.filters);
     },
     handleResetFilters() {
       this.filters = { ...DEFAULT_FILTER_VALUES };
@@ -251,7 +259,7 @@ export default {
     // attached to onClick listener in ImageryView
     handlePanZoomClick(e) {
       if (this.altPressed) {
-        return this.$emit('startPan', e);
+        return this.$emit('start-pan', e);
       }
 
       if (!(this.metaPressed && e.button === 0)) {
@@ -262,7 +270,7 @@ export default {
       this.zoomImage(newScaleFactor, e.clientX, e.clientY);
     },
     toggleLayerVisibility(index) {
-      this.$emit('toggleLayerVisibility', index);
+      this.$emit('toggle-layer-visibility', index);
     },
     updateFilterValues(filters) {
       this.filters = filters;

src/plugins/imagery/components/ImageThumbnail.vue

@@ -85,6 +85,7 @@ export default {
       }
     }
   },
+  emits: ['click'],
   data() {
     return {
       imgWidth: 0,

src/plugins/imagery/components/ImageryView.vue

@@ -39,12 +39,12 @@
         :zoom-factor="zoomFactor"
         :image-url="imageUrl"
         :layers="layers"
-        @resetImage="resetImage"
+        @reset-image="resetImage"
-        @panZoomUpdated="handlePanZoomUpdate"
+        @pan-zoom-updated="handlePanZoomUpdate"
-        @filtersUpdated="setFilters"
+        @filters-updated="setFilters"
-        @cursorsUpdated="setCursorStates"
+        @cursors-updated="setCursorStates"
-        @startPan="startPan"
+        @start-pan="startPan"
-        @toggleLayerVisibility="toggleLayerVisibility"
+        @toggle-layer-visibility="toggleLayerVisibility"
       />
       <div ref="imageBG" class="c-imagery__main-image__bg" @click="expand">
         <div v-if="zoomFactor > 1" class="c-imagery__hints">
@@ -202,13 +202,13 @@
 <script>
 import _ from 'lodash';
 import moment from 'moment';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../../api/time/constants';
 import imageryData from '../../imagery/mixins/imageryData';
 import eventHelpers from '../lib/eventHelpers';
 import AnnotationsCanvas from './AnnotationsCanvas.vue';
-import Compass from './Compass/Compass.vue';
+import Compass from './Compass/CompassComponent.vue';
 import ImageControls from './ImageControls.vue';
 import ImageThumbnail from './ImageThumbnail.vue';
 import RelatedTelemetry from './RelatedTelemetry/RelatedTelemetry';
@@ -264,6 +264,7 @@ export default {
       }
     }
   },
+  emits: ['update:focused-image-timestamp'],
   data() {
     let timeSystem = this.openmct.time.getTimeSystem();
     this.metadata = {};
@@ -1081,7 +1082,7 @@ export default {
         return;
       }
 
-      await Vue.nextTick();
+      await nextTick();
       if (this.$refs.thumbsWrapper) {
         this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
       }
@@ -1105,7 +1106,7 @@ export default {
       this.setPreviousFocusedImage(index);
     },
     setPreviousFocusedImage(index) {
-      this.$emit('update:focusedImageTimestamp', undefined);
+      this.$emit('update:focused-image-timestamp', undefined);
       this.previousFocusedImage = this.imageHistory[index]
         ? JSON.parse(JSON.stringify(this.imageHistory[index]))
         : undefined;

src/plugins/imagery/components/LayerSettings.vue

@@ -54,6 +54,7 @@ export default {
       }
     }
   },
+  emits: ['toggle-layer-visibility'],
   methods: {
     handleClose(e) {
       const closeButton = e.target.classList.contains('c-switcher-menu__close-button');
@@ -62,7 +63,7 @@ export default {
       }
     },
     toggleLayerVisibility(index) {
-      this.$emit('toggleLayerVisibility', index);
+      this.$emit('toggle-layer-visibility', index);
     }
   }
 };

src/plugins/imagery/components/ZoomSettings.vue

@@ -70,6 +70,7 @@ export default {
       required: false
     }
   },
+  emits: ['handle-reset-image', 'toggle-zoom-lock', 'zoom-in', 'zoom-out'],
   data() {
     return {};
   },
@@ -86,16 +87,16 @@ export default {
       }
     },
     handleResetImage() {
-      this.$emit('handleResetImage');
+      this.$emit('handle-reset-image');
     },
     toggleZoomLock() {
-      this.$emit('toggleZoomLock');
+      this.$emit('toggle-zoom-lock');
     },
     zoomIn() {
-      this.$emit('zoomIn');
+      this.$emit('zoom-in');
     },
     zoomOut() {
-      this.$emit('zoomOut');
+      this.$emit('zoom-out');
     }
   }
 };

src/plugins/inspectorDataVisualization/DataVisualization.vue

@@ -68,26 +68,30 @@
     </div>
 
     <template v-if="selectedBounds !== undefined">
-      <NumericData
+      <NumericDataInspectorView
         :bounds="selectedBounds"
         :telemetry-keys="plotTelemetryKeys"
         :no-numeric-data-text="noNumericDataText"
       />
-      <Imagery v-if="hasImagery" :bounds="selectedBounds" :telemetry-keys="imageryTelemetryKeys" />
+      <ImageryInspectorView
+        v-if="hasImagery"
+        :bounds="selectedBounds"
+        :telemetry-keys="imageryTelemetryKeys"
+      />
     </template>
   </div>
 </template>
 <script>
-import Imagery from './Imagery.vue';
+import ImageryInspectorView from './ImageryInspectorView.vue';
-import NumericData from './NumericData.vue';
+import NumericDataInspectorView from './NumericDataInspectorView.vue';
 
 const TIMESTAMP_VIEW_BUFFER = 30 * 1000;
 const timestampBufferText = `${TIMESTAMP_VIEW_BUFFER / 1000} seconds`;
 
 export default {
   components: {
-    NumericData,
+    NumericDataInspectorView,
-    Imagery
+    ImageryInspectorView
   },
   inject: ['timeFormatter', 'placeholderText', 'plotOptions', 'imageryOptions'],
   props: {

src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue

@@ -35,7 +35,7 @@
 <script>
 import mount from 'utils/mount';
 
-import Plot from '../plot/Plot.vue';
+import Plot from '../plot/PlotView.vue';
 import TelemetryFrame from './TelemetryFrame.vue';
 
 export default {

src/plugins/inspectorViews/annotations/tags/TagEditor.vue

@@ -29,8 +29,8 @@
       :selected-tag="addedTag.newTag ? null : addedTag"
       :new-tag="addedTag.newTag"
       :added-tags="addedTags"
-      @tagRemoved="tagRemoved"
+      @tag-removed="tagRemoved"
-      @tagAdded="tagAdded"
+      @tag-added="tagAdded"
     />
     <button
       v-show="!userAddingTag && !maxTagsAdded"
@@ -84,6 +84,7 @@ export default {
       default: null
     }
   },
+  emits: ['tags-updated'],
   data() {
     return {
       addedTags: [],

src/plugins/inspectorViews/annotations/tags/TagSelection.vue

@@ -30,7 +30,7 @@
         :place-holder-text="'Type to select tag'"
         class="c-tag-selection"
         :item-css-class="'icon-circle'"
-        @onChange="tagSelected"
+        @on-change="tagSelected"
       />
     </template>
     <template v-else>
@@ -86,6 +86,7 @@ export default {
       }
     }
   },
+  emits: ['tag-removed', 'tag-added'],
   data() {
     return {};
   },
@@ -144,7 +145,7 @@ export default {
       });
     },
     removeTag() {
-      this.$emit('tagRemoved', this.selectedTag);
+      this.$emit('tag-removed', this.selectedTag);
     },
     tagSelected(autoField) {
       const tagAdded = autoField.model.options.find((option) => {
@@ -155,7 +156,7 @@ export default {
         return false;
       });
       if (tagAdded) {
-        this.$emit('tagAdded', tagAdded.id);
+        this.$emit('tag-added', tagAdded.id);
       }
     }
   }

src/plugins/inspectorViews/elements/ElementItem.vue

@@ -74,6 +74,7 @@ export default {
       type: Boolean
     }
   },
+  emits: ['drop-custom', 'dragstart-custom'],
   data() {
     const isAlias =
       this.elementObject.location !==

src/plugins/inspectorViews/elements/ElementItemGroup.vue

@@ -71,6 +71,7 @@ export default {
       type: Boolean
     }
   },
+  emits: ['drop-group'],
   data() {
     return {
       dragCounter: 0

src/plugins/inspectorViews/elements/ElementsPool.vue

@@ -53,7 +53,7 @@
 <script>
 import _ from 'lodash';
 
-import Search from '../../../ui/components/Search.vue';
+import Search from '../../../ui/components/SearchComponent.vue';
 import ElementItem from './ElementItem.vue';
 
 export default {

src/plugins/inspectorViews/elements/PlotElementsPool.vue

@@ -71,7 +71,7 @@
 <script>
 import _ from 'lodash';
 
-import Search from '../../../ui/components/Search.vue';
+import Search from '../../../ui/components/SearchComponent.vue';
 import configStore from '../../plot/configuration/ConfigStore';
 import ElementItem from './ElementItem.vue';
 import ElementItemGroup from './ElementItemGroup.vue';

src/plugins/inspectorViews/properties/PropertiesComponent.vue

@@ -49,7 +49,7 @@
 import Moment from 'moment';
 
 import DetailText from './DetailText.vue';
-import Location from './Location.vue';
+import Location from './LocationComponent.vue';
 
 export default {
   components: {

src/plugins/inspectorViews/properties/PropertiesViewProvider.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import Properties from './Properties.vue';
+import Properties from './PropertiesComponent.vue';
 
 export default function PropertiesViewProvider(openmct) {
   return {

src/plugins/inspectorViews/styles/FontStyleEditor.vue

@@ -51,6 +51,7 @@ export default {
       }
     }
   },
+  emits: ['set-font-property'],
   computed: {
     fontTypeLabel() {
       const fontType = FONTS.find((f) => f.value === this.fontStyle.font);

src/plugins/inspectorViews/styles/SavedStyleSelector.vue

@@ -83,6 +83,7 @@ export default {
       required: true
     }
   },
+  emits: ['delete-style'],
   data() {
     return {
       expanded: false

src/plugins/inspectorViews/styles/StylesInspectorView.vue

@@ -36,8 +36,8 @@
 <script>
 import StylesView from '@/plugins/condition/components/inspector/StylesView.vue';
 
-import Multipane from '../../../ui/layout/Multipane.vue';
+import Multipane from '../../../ui/layout/MultipaneContainer.vue';
-import Pane from '../../../ui/layout/Pane.vue';
+import Pane from '../../../ui/layout/PaneContainer.vue';
 import SavedStylesInspectorView from './SavedStylesInspectorView.vue';
 
 export default {

src/plugins/licenses/plugin.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 import mount from 'utils/mount';
 
-import Licenses from './Licenses.vue';
+import Licenses from './LicensesComponent.vue';
 
 export default function () {
   return function install(openmct) {

src/plugins/notebook/NotebookViewProvider.js

@@ -24,7 +24,7 @@ import mount from 'utils/mount';
 
 import Agent from '@/utils/agent/Agent';
 
-import Notebook from './components/Notebook.vue';
+import Notebook from './components/NotebookComponent.vue';
 
 export default class NotebookViewProvider {
   constructor(openmct, name, key, type, cssClass, snapshotContainer, entryUrlWhitelist) {

src/plugins/notebook/components/NotebookComponent.vue

@@ -34,10 +34,10 @@
       ref="searchResults"
       :domain-object="domainObject"
       :results="searchResults"
-      @cancelEdit="cancelTransaction"
+      @cancel-edit="cancelTransaction"
-      @editingEntry="startTransaction"
+      @editing-entry="startTransaction"
-      @changeSectionPage="changeSelectedSection"
+      @change-section-page="changeSelectedSection"
-      @updateEntries="updateEntries"
+      @update-entries="updateEntries"
     />
     <div v-if="!search.length" class="c-notebook__body">
       <Sidebar
@@ -53,13 +53,13 @@
         :section-title="domainObject.configuration.sectionTitle"
         :sections="sections"
         :sidebar-covers-entries="sidebarCoversEntries"
-        @defaultPageDeleted="cleanupDefaultNotebook"
+        @default-page-deleted="cleanupDefaultNotebook"
-        @defaultSectionDeleted="cleanupDefaultNotebook"
+        @default-section-deleted="cleanupDefaultNotebook"
-        @pagesChanged="pagesChanged"
+        @pages-changed="pagesChanged"
-        @selectPage="selectPage"
+        @select-page="selectPage"
-        @sectionsChanged="sectionsChanged"
+        @sections-changed="sectionsChanged"
-        @selectSection="selectSection"
+        @select-section="selectSection"
-        @toggleNav="toggleNav"
+        @toggle-nav="toggleNav"
       />
       <div
         class="c-notebook__page-view"
@@ -135,10 +135,10 @@
             :read-only="false"
             :is-locked="selectedPage.isLocked"
             :selected-entry-id="selectedEntryId"
-            @cancelEdit="cancelTransaction"
+            @cancel-edit="cancelTransaction"
-            @editingEntry="startTransaction"
+            @editing-entry="startTransaction"
-            @deleteEntry="deleteEntry"
+            @delete-entry="deleteEntry"
-            @updateEntry="updateEntry"
+            @update-entry="updateEntry"
             @entry-selection="entrySelection(entry)"
           />
         </div>
@@ -162,7 +162,7 @@
 <script>
 import { debounce } from 'lodash';
 
-import Search from '@/ui/components/Search.vue';
+import Search from '@/ui/components/SearchComponent.vue';
 
 import ProgressBar from '../../../ui/components/ProgressBar.vue';
 import objectLink from '../../../ui/mixins/object-link';
@@ -189,8 +189,7 @@ import {
 } from '../utils/notebook-storage';
 import NotebookEntry from './NotebookEntry.vue';
 import SearchResults from './SearchResults.vue';
-import Sidebar from './Sidebar.vue';
+import Sidebar from './SidebarComponent.vue';
-
 function objectCopy(obj) {
   return JSON.parse(JSON.stringify(obj));
 }

src/plugins/notebook/components/NotebookEmbed.vue

@@ -90,6 +90,7 @@ export default {
       }
     }
   },
+  emits: ['update-embed', 'remove-embed'],
   data() {
     return {
       menuActions: []
@@ -401,10 +402,10 @@ export default {
         return;
       }
 
-      this.$emit('removeEmbed', this.embed.id);
+      this.$emit('remove-embed', this.embed.id);
     },
     updateEmbed(embed) {
-      this.$emit('updateEmbed', embed);
+      this.$emit('update-embed', embed);
     },
     updateSnapshot(snapshotObject) {
       this.embed.snapshot.thumbnailImage = snapshotObject.thumbnailImage;

src/plugins/notebook/components/NotebookEntry.vue

@@ -119,8 +119,8 @@
               :key="embed.id"
               :embed="embed"
               :is-locked="isLocked"
-              @removeEmbed="removeEmbed"
+              @remove-embed="removeEmbed"
-              @updateEmbed="updateEmbed"
+              @update-embed="updateEmbed"
             />
           </div>
         </div>
@@ -268,6 +268,13 @@ export default {
       }
     }
   },
+  emits: [
+    'delete-entry',
+    'change-section-page',
+    'update-entry',
+    'editing-entry',
+    'entry-selection'
+  ],
   data() {
     return {
       editMode: false,
@@ -429,7 +436,7 @@ export default {
       }
     },
     deleteEntry() {
-      this.$emit('deleteEntry', this.entry.id);
+      this.$emit('delete-entry', this.entry.id);
     },
     manageEmbedLayout() {
       if (this.$refs.embeds) {
@@ -503,13 +510,13 @@ export default {
       return Moment.utc(unixTime).format(timeFormat);
     },
     navigateToPage() {
-      this.$emit('changeSectionPage', {
+      this.$emit('change-section-page', {
         sectionId: this.result.section.id,
         pageId: this.result.page.id
       });
     },
     navigateToSection() {
-      this.$emit('changeSectionPage', {
+      this.$emit('change-section-page', {
         sectionId: this.result.section.id,
         pageId: null
       });
@@ -551,7 +558,7 @@ export default {
 
       this.entry.modified = this.openmct.time.now();
 
-      this.$emit('updateEntry', this.entry);
+      this.$emit('update-entry', this.entry);
     },
     editingEntry(event) {
       this.selectAndEmitEntry(event, this.entry);
@@ -560,7 +567,7 @@ export default {
         this.selectAndEmitEntry(event, this.entry);
         this.editMode = true;
         this.adjustTextareaHeight();
-        this.$emit('editingEntry');
+        this.$emit('editing-entry');
       }
     },
     updateEntryValue($event) {

src/plugins/notebook/components/NotebookSnapshotContainer.vue

@@ -52,7 +52,7 @@
           :embed="snapshot.embedObject"
           :is-snapshot-container="true"
           :remove-action-string="'Delete Snapshot'"
-          @removeEmbed="removeSnapshot"
+          @remove-embed="removeSnapshot"
         />
       </span>
       <div v-if="!snapshots.length > 0" class="hint">

src/plugins/notebook/components/PageCollection.vue

@@ -28,9 +28,9 @@
         :selected-page-id="selectedPageId"
         :page="page"
         :page-title="pageTitle"
-        @deletePage="deletePage"
+        @delete-page="deletePage"
-        @renamePage="updatePage"
+        @rename-page="updatePage"
-        @selectPage="selectPage"
+        @select-page="selectPage"
       />
     </li>
   </ul>
@@ -88,6 +88,7 @@ export default {
       }
     }
   },
+  emits: ['default-page-deleted', 'update-page', 'select-page', 'toggle-nav'],
   watch: {
     pages: {
       handler(val, oldVal) {
@@ -125,31 +126,31 @@ export default {
       }
 
       if (isPageDefault) {
-        this.$emit('defaultPageDeleted');
+        this.$emit('default-page-deleted');
       }
 
       if (pages.length && isPageSelected && (!defaultPageId || isPageDefault)) {
         selectedPageId = pages[0].id;
       }
 
-      this.$emit('updatePage', {
+      this.$emit('update-page', {
         pages,
         id
       });
-      this.$emit('selectPage', selectedPageId);
+      this.$emit('select-page', selectedPageId);
     },
     selectPage(id) {
-      this.$emit('selectPage', id);
+      this.$emit('select-page', id);
 
       // Add test here for whether or not to toggle the nav
       if (this.sidebarCoversEntries) {
-        this.$emit('toggleNav');
+        this.$emit('toggle-nav');
       }
     },
     updatePage(newPage) {
       const id = newPage.id;
       const pages = this.pages.map((page) => (page.id === id ? newPage : page));
-      this.$emit('updatePage', {
+      this.$emit('update-page', {
         pages,
         id
       });

src/plugins/notebook/components/PageComponent.vue

@@ -90,6 +90,7 @@ export default {
       }
     }
   },
+  emits: ['delete-page', 'select-page', 'rename-page'],
   data() {
     return {
       popupMenuItems: [],
@@ -122,7 +123,7 @@ export default {
         return;
       }
 
-      this.$emit('deletePage', this.page.id);
+      this.$emit('delete-page', this.page.id);
     },
     getRemoveDialog() {
       const message =
@@ -146,7 +147,7 @@ export default {
         return;
       }
 
-      this.$emit('selectPage', id);
+      this.$emit('select-page', id);
     },
     renamePage(target) {
       if (!target) {
@@ -161,7 +162,7 @@ export default {
         return;
       }
 
-      this.$emit('renamePage', Object.assign(this.page, { name: target.textContent }));
+      this.$emit('rename-page', Object.assign(this.page, { name: target.textContent }));
     },
     updateName(event) {
       const { target, keyCode, type } = event;