diff --git a/.eslintrc.js b/.eslintrc.js
index d28505a30..ec7b48107 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -40,6 +40,7 @@ module.exports = {
         registeredComponentsOnly: true,
       },
     ],
+    'vue/component-options-name-casing': ['error', 'PascalCase'],
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index c4062836b..82a677556 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -14,7 +14,7 @@ export default {
     ContactInfo,
     ContactLabel,
     CustomAttributes,
-    draggable,
+    Draggable: draggable,
   },
   props: {
     contact: {
@@ -89,7 +89,7 @@ export default {
       @panel-close="onClose"
       @toggle-panel="onClose"
     />
-    <draggable
+    <Draggable
       :list="contactSidebarItems"
       :disabled="!dragEnabled"
       class="list-group"
@@ -153,7 +153,7 @@ export default {
           </div>
         </div>
       </transition-group>
-    </draggable>
+    </Draggable>
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index d81d1242f..8f66abb1c 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -20,7 +20,7 @@ export default {
     CustomAttributes,
     ConversationAction,
     ConversationParticipant,
-    draggable,
+    Draggable: draggable,
     MacrosList,
   },
   props: {
@@ -142,7 +142,7 @@ export default {
       :channel-type="channelType"
       @toggle-panel="onPanelToggle"
     />
-    <draggable
+    <Draggable
       :list="conversationSidebarItems"
       :disabled="!dragEnabled"
       animation="200"
@@ -262,7 +262,7 @@ export default {
           </woot-feature-toggle>
         </div>
       </transition-group>
-    </draggable>
+    </Draggable>
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
index 0d3008e62..58e5437f2 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
@@ -7,7 +7,7 @@ export default {
   components: {
     ArticleItem,
     TableFooter,
-    draggable,
+    Draggable: draggable,
   },
   props: {
     articles: {
@@ -121,7 +121,7 @@ export default {
         {{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
       </div>
     </div>
-    <draggable
+    <Draggable
       tag="div"
       class="border-t-0 px-4 pb-4"
       :disabled="!dragEnabled"
@@ -143,7 +143,7 @@ export default {
         :status="article.status"
         :updated-at="article.updated_at"
       />
-    </draggable>
+    </Draggable>
 
     <TableFooter
       v-if="showArticleFooter"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
index b2d169682..d344a4be6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -7,7 +7,7 @@ import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 
 export default {
   components: {
-    thumbnail,
+    Thumbnail: thumbnail,
     LocaleItemTable,
   },
   props: {
@@ -190,7 +190,7 @@ export default {
     <div
       class="relative flex p-4 mb-3 bg-white border border-solid rounded-md dark:bg-slate-900 border-slate-100 dark:border-slate-600"
     >
-      <thumbnail :username="portal.name" variant="square" />
+      <Thumbnail :username="portal.name" variant="square" />
       <div class="flex-grow ml-2 rtl:ml-0 rtl:mr-2">
         <header class="flex items-start justify-between mb-8">
           <div>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index 7da232102..39c39e82f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -1,10 +1,10 @@
 <script>
-import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import portalMixin from '../mixins/portalMixin';
 
 export default {
   components: {
-    thumbnail,
+    Thumbnail,
   },
   mixins: [portalMixin],
   props: {
@@ -71,14 +71,14 @@ export default {
 
 <template>
   <div class="portal" :class="{ active }">
-    <thumbnail :username="portal.name" variant="square" />
+    <Thumbnail :username="portal.name" variant="square" />
     <div class="actions-container">
       <header class="flex items-center justify-between mb-2.5">
         <div>
           <h3 class="text-sm mb-0.5 text-slate-700 dark:text-slate-100">
             {{ portal.name }}
           </h3>
-          <p class="text-slate-600 dark:text-slate-200 mb-0 text-xs">
+          <p class="mb-0 text-xs text-slate-600 dark:text-slate-200">
             {{ articlesCount }}
             {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
           </p>
@@ -122,7 +122,7 @@ export default {
                   </h6>
 
                   <span
-                    class="flex text-slate-600 dark:text-slate-200 text-sm text-left leading-4 w-full"
+                    class="flex w-full text-sm leading-4 text-left text-slate-600 dark:text-slate-200"
                   >
                     {{ locale.articles_count }}
                     {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index 46c516ef0..eee8d0840 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -1,8 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
-import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
-import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
+import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
 // import { useVuelidate } from '@vuelidate/core';
 
 import {
@@ -12,8 +12,8 @@ import {
 } from './constants';
 export default {
   components: {
-    filterInputBox,
-    automationActionInput,
+    FilterInputBox,
+    AutomationActionInput,
   },
   mixins: [automationMethodsMixin],
   props: {
@@ -138,7 +138,7 @@ export default {
           </label>
           <p
             v-if="hasAutomationMutated"
-            class="text-xs text-green-500 dark:text-green-500 text-right"
+            class="text-xs text-right text-green-500 dark:text-green-500"
           >
             {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
           </p>
@@ -151,7 +151,7 @@ export default {
           <div
             class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
           >
-            <filter-input-box
+            <FilterInputBox
               v-for="(condition, i) in automation.conditions"
               :key="i"
               v-model="automation.conditions[i]"
@@ -193,7 +193,7 @@ export default {
           <div
             class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
           >
-            <automation-action-input
+            <AutomationActionInput
               v-for="(action, i) in automation.actions"
               :key="i"
               v-model="automation.actions[i]"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index 95307cf7f..ed8370dc7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -1,8 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
-import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
-import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
+import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
 
 import {
   AUTOMATION_RULE_EVENTS,
@@ -12,8 +12,8 @@ import {
 
 export default {
   components: {
-    filterInputBox,
-    automationActionInput,
+    FilterInputBox,
+    AutomationActionInput,
   },
   mixins: [automationMethodsMixin],
   props: {
@@ -121,7 +121,7 @@ export default {
           <div
             class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
           >
-            <filter-input-box
+            <FilterInputBox
               v-for="(condition, i) in automation.conditions"
               :key="i"
               v-model="automation.conditions[i]"
@@ -163,7 +163,7 @@ export default {
           <div
             class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
           >
-            <automation-action-input
+            <AutomationActionInput
               v-for="(action, i) in automation.actions"
               :key="i"
               v-model="automation.actions[i]"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
index e7d577f23..0c872a6c9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
@@ -1,7 +1,7 @@
 <script>
 import draggable from 'vuedraggable';
 export default {
-  components: { draggable },
+  components: { Draggable: draggable },
   props: {
     preChatFields: {
       type: Array,
@@ -33,7 +33,7 @@ export default {
 </script>
 
 <template>
-  <draggable v-model="preChatFieldOptions" tag="tbody" @end="onDragEnd">
+  <Draggable v-model="preChatFieldOptions" tag="tbody" @end="onDragEnd">
     <tr v-for="(item, index) in preChatFieldOptions" :key="index">
       <td class="pre-chat-field"><fluent-icon icon="drag" /></td>
       <td class="pre-chat-field">
@@ -72,7 +72,7 @@ export default {
         />
       </td>
     </tr>
-  </draggable>
+  </Draggable>
 </template>
 <style scoped lang="scss">
 .pre-chat-field {