feat: migrate to vue 3 + vite (#2553)

Co-authored-by: amk-dev <akash.k.mohan98@gmail.com>
Co-authored-by: liyasthomas <liyascthomas@gmail.com>

packages/hoppscotch-app/src/components/collections/Add.vue

@@ -0,0 +1,81 @@
+<template>
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="t('collection.new')"
+    @close="hideModal"
+  >
+    <template #body>
+      <div class="flex flex-col">
+        <input
+          id="selectLabelAdd"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="addNewCollection"
+        />
+        <label for="selectLabelAdd">
+          {{ t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span class="flex">
+        <ButtonPrimary
+          :label="t('action.save')"
+          :loading="loadingState"
+          @click="addNewCollection"
+        />
+        <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+import { useToast } from "@composables/toast"
+import { useI18n } from "@composables/i18n"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+    loadingState: Boolean,
+  },
+  emits: ["submit", "hide-modal"],
+  setup() {
+    return {
+      toast: useToast(),
+      t: useI18n(),
+    }
+  },
+  data() {
+    return {
+      name: null,
+    }
+  },
+  watch: {
+    show(isShowing: boolean) {
+      if (!isShowing) {
+        this.name = null
+      }
+    },
+  },
+  methods: {
+    addNewCollection() {
+      if (!this.name) {
+        this.toast.error(this.t("collection.invalid_name"))
+        return
+      }
+      this.$emit("submit", this.name)
+    },
+    hideModal() {
+      this.name = null
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>