feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436
Fixes https://github.com/chatwoot/chatwoot/issues/9767
Fixes https://github.com/chatwoot/chatwoot/issues/10156
Fixes https://github.com/chatwoot/chatwoot/issues/6031
Fixes https://github.com/chatwoot/chatwoot/issues/5696
Fixes https://github.com/chatwoot/chatwoot/issues/9250
Fixes https://github.com/chatwoot/chatwoot/issues/9762

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/portal/components/PublicArticleSearch.vue

@@ -35,7 +35,18 @@ export default {
   },
 
   watch: {
-    searchTerm() {
+    currentPage() {
+      this.clearSearchTerm();
+    },
+  },
+
+  unmounted() {
+    clearTimeout(this.typingTimer);
+  },
+
+  methods: {
+    onUpdateSearchTerm(value) {
+      this.searchTerm = value;
       if (this.typingTimer) {
         clearTimeout(this.typingTimer);
       }
@@ -46,16 +57,6 @@ export default {
         this.fetchArticlesByQuery();
       }, 1000);
     },
-    currentPage() {
-      this.clearSearchTerm();
-    },
-  },
-
-  beforeDestroy() {
-    clearTimeout(this.typingTimer);
-  },
-
-  methods: {
     onChange(e) {
       this.$emit('input', e.target.value);
     },
@@ -95,8 +96,9 @@ export default {
 <template>
   <div v-on-clickaway="closeSearch" class="relative w-full max-w-5xl my-4">
     <PublicSearchInput
-      v-model="searchTerm"
+      :search-term="searchTerm"
       :search-placeholder="searchTranslations.searchPlaceholder"
+      @update:searchTerm="onUpdateSearchTerm"
       @focus="openSearch"
     />
     <div

app/javascript/portal/components/PublicSearchInput.vue

@@ -1,38 +1,33 @@
-<script>
+<script setup>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { ref } from 'vue';
 
-export default {
-  components: {
-    FluentIcon,
+defineProps({
+  searchTerm: {
+    type: [String, Number],
+    default: '',
   },
-  props: {
-    value: {
-      type: [String, Number],
-      default: '',
-    },
-    searchPlaceholder: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      isFocused: false,
-    };
-  },
-  methods: {
-    onChange(e) {
-      this.$emit('input', e.target.value);
-    },
-    onFocus(e) {
-      this.isFocused = true;
-      this.$emit('focus', e.target.value);
-    },
-    onBlur(e) {
-      this.isFocused = false;
-      this.$emit('blur', e.target.value);
-    },
+  searchPlaceholder: {
+    type: String,
+    default: '',
   },
+});
+
+const emit = defineEmits(['update:searchTerm', 'focus', 'blur']);
+const isFocused = ref(false);
+
+const onChange = e => {
+  emit('update:searchTerm', e.target.value);
+};
+
+const onFocus = e => {
+  isFocused.value = true;
+  emit('focus', e.target.value);
+};
+
+const onBlur = e => {
+  isFocused.value = false;
+  emit('blur', e.target.value);
 };
 </script>
 
@@ -46,7 +41,7 @@ export default {
   >
     <FluentIcon icon="search" />
     <input
-      :value="value"
+      :value="searchTerm"
       type="text"
       class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
       :placeholder="searchPlaceholder"

app/javascript/portal/components/TableOfContents.vue

@@ -24,7 +24,7 @@ export default {
     this.initializeIntersectionObserver();
     window.addEventListener('hashchange', this.onURLHashChange);
   },
-  beforeDestroy() {
+  unmounted() {
     window.removeEventListener('hashchange', this.onURLHashChange);
     if (this.intersectionObserver) {
       this.intersectionObserver.disconnect();