diff --git a/.eslintrc.js b/.eslintrc.js
index e1ea8d571..01f709762 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -163,6 +163,16 @@ module.exports = {
     'vue/prefer-prop-type-boolean-first': 'error',
     'vue/prefer-separate-static-class': 'error',
     'vue/require-explicit-slots': 'error',
+    'vue/require-macro-variable-name': [
+      'error',
+      {
+        defineProps: 'props',
+        defineEmits: 'emit',
+        defineSlots: 'slots',
+        useSlots: 'slots',
+        useAttrs: 'attrs',
+      },
+    ],
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index eeca5377c..cd7cf0ff1 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -21,7 +21,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits([
+const emit = defineEmits([
   'addFolders',
   'deleteFolders',
   'resetFilters',
@@ -30,7 +30,7 @@ const emits = defineEmits([
 ]);
 
 const onBasicFilterChange = (value, type) => {
-  emits('basicFilterChange', value, type);
+  emit('basicFilterChange', value, type);
 };
 
 const hasAppliedFiltersOrActiveFolders = computed(() => {
@@ -68,7 +68,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="save"
-          @click="emits('addFolders')"
+          @click="emit('addFolders')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
@@ -76,7 +76,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="dismiss-circle"
-          @click="emits('resetFilters')"
+          @click="emit('resetFilters')"
         />
       </div>
       <div v-if="hasActiveFolders">
@@ -86,7 +86,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="edit"
-          @click="emits('filtersModal')"
+          @click="emit('filtersModal')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
@@ -94,7 +94,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="delete"
-          @click="emits('deleteFolders')"
+          @click="emit('deleteFolders')"
         />
       </div>
       <woot-button
@@ -104,7 +104,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
         color-scheme="secondary"
         icon="filter"
         size="tiny"
-        @click="emits('filtersModal')"
+        @click="emit('filtersModal')"
       />
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
index f58b1c40d..c03346a49 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
@@ -38,13 +38,13 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['onSearch']);
+const emit = defineEmits(['onSearch']);
 
 const searchTerm = ref('');
 
 const onSearch = debounce(value => {
   searchTerm.value = value;
-  emits('onSearch', value);
+  emit('onSearch', value);
 }, 300);
 
 const filteredListItems = computed(() => {
diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index 91ea4fbdb..69d559509 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -9,7 +9,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['removeAttachment']);
+const emit = defineEmits(['removeAttachment']);
 
 const nonRecordedAudioAttachments = computed(() => {
   return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
@@ -20,7 +20,7 @@ const recordedAudioAttachments = computed(() =>
 );
 
 const onRemoveAttachment = itemIndex => {
-  emits(
+  emit(
     'removeAttachment',
     nonRecordedAudioAttachments.value
       .filter((_, index) => index !== itemIndex)
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
index ad76878ec..28a459b1c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -28,7 +28,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['update', 'close']);
+const emit = defineEmits(['update', 'close']);
 
 const { t } = useI18n();
 
@@ -45,12 +45,12 @@ const updateConversations = key => {
     const ninja = document.querySelector('ninja-keys');
     ninja?.open({ parent: 'bulk_action_snooze_conversation' });
   } else {
-    emits('update', key);
+    emit('update', key);
   }
 };
 
 const onClose = () => {
-  emits('close');
+  emit('close');
 };
 
 const showAction = key => {
@@ -75,7 +75,7 @@ const actionLabel = key => {
 <template>
   <div
     v-on-clickaway="onClose"
-    class="absolute right-2 top-12 origin-top-right w-auto z-20 bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md"
+    class="absolute z-20 w-auto origin-top-right bg-white border border-solid rounded-lg shadow-md right-2 top-12 dark:bg-slate-800 border-slate-50 dark:border-slate-700"
   >
     <div
       class="right-[var(--triangle-position)] block z-10 absolute text-left -top-3"
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
index ca593c31c..139ca9792 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
@@ -15,7 +15,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['close']);
+const emit = defineEmits(['close']);
 
 const { t } = useI18n();
 
@@ -40,7 +40,7 @@ const tabs = ref([
   },
 ]);
 const onClose = () => {
-  emits('close');
+  emit('close');
 };
 
 const onClickTabChange = index => {
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
index 9d36fff6e..87386f681 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
@@ -18,7 +18,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['close']);
+const emit = defineEmits(['close']);
 
 const { t } = useI18n();
 const issues = ref([]);
@@ -49,7 +49,7 @@ const onSelectIssue = item => {
 };
 
 const onClose = () => {
-  emits('close');
+  emit('close');
 };
 
 const onSearch = async value => {
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
index 15d62072e..5019d451d 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
@@ -6,17 +6,17 @@ defineProps({
   },
 });
 
-const emits = defineEmits(['click']);
+const emit = defineEmits(['click']);
 
 const onMenuItemClick = () => {
-  emits('click');
+  emit('click');
 };
 </script>
 
 <template>
   <div
     role="button"
-    class="py-1 px-2 w-full h-8 font-medium text-xs text-slate-800 dark:text-slate-100 flex items-center whitespace-nowrap text-ellipsis overflow-hidden hover:text-woot-600 dark:hover:text-woot-500 cursor-pointer rounded-md"
+    class="flex items-center w-full h-8 px-2 py-1 overflow-hidden text-xs font-medium rounded-md cursor-pointer text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis hover:text-woot-600 dark:hover:text-woot-500"
     @click.stop="onMenuItemClick"
   >
     {{ label }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
index 41db9816d..87ac25efa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
@@ -13,16 +13,16 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['change', 'delete']);
+const emit = defineEmits(['change', 'delete']);
 
 const userNameWithoutEmoji = computed(() => removeEmoji(props.name));
 
 const updateProfilePicture = e => {
-  emits('change', e);
+  emit('change', e);
 };
 
 const deleteProfilePicture = () => {
-  emits('delete');
+  emit('delete');
 };
 </script>
 
diff --git a/app/javascript/v3/components/Form/ProfileAvatar.vue b/app/javascript/v3/components/Form/ProfileAvatar.vue
index f3dfab667..32eff693a 100644
--- a/app/javascript/v3/components/Form/ProfileAvatar.vue
+++ b/app/javascript/v3/components/Form/ProfileAvatar.vue
@@ -12,7 +12,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['change', 'delete']);
+const emit = defineEmits(['change', 'delete']);
 
 const hasImageLoaded = ref(false);
 const imageLoadedError = ref(false);
@@ -35,14 +35,14 @@ const openFileInput = () => {
 
 const onImageUpload = event => {
   const [file] = event.target.files;
-  emits('change', {
+  emit('change', {
     file,
     url: file ? URL.createObjectURL(file) : null,
   });
 };
 
 const onAvatarDelete = () => {
-  emits('delete');
+  emit('delete');
 };
 </script>
 
diff --git a/app/javascript/widget/components/VideoBubble.vue b/app/javascript/widget/components/VideoBubble.vue
index 9813af638..3196c6ff2 100644
--- a/app/javascript/widget/components/VideoBubble.vue
+++ b/app/javascript/widget/components/VideoBubble.vue
@@ -4,15 +4,15 @@ defineProps({
   readableTime: { type: String, default: '' },
 });
 
-const emits = defineEmits(['error']);
+const emit = defineEmits(['error']);
 
 const onVideoError = () => {
-  emits('error');
+  emit('error');
 };
 </script>
 
 <template>
-  <div class="block relative max-w-full">
+  <div class="relative block max-w-full">
     <video
       class="w-full max-w-[250px] h-auto"
       :src="url"
@@ -20,7 +20,7 @@ const onVideoError = () => {
       @error="onVideoError"
     />
     <span
-      class="text-xs absolute text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
+      class="absolute text-xs text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
     >
       {{ readableTime }}
     </span>