perf: template literals

packages/hoppscotch-app/components/app/Header.vue

@@ -137,12 +137,12 @@ export default defineComponent({
 
     const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
     if (!cookiesAllowed) {
-      this.$toast.show(this.$t("app.we_use_cookies").toString(), {
+      this.$toast.show(this.$t("app.we_use_cookies"), {
         icon: "cookie",
         duration: 0,
         action: [
           {
-            text: this.$t("action.learn_more").toString(),
+            text: this.$t("action.learn_more"),
             onClick: (_, toastObject) => {
               setLocalConfig("cookiesAllowed", "yes")
               toastObject.goAway(0)
@@ -152,7 +152,7 @@ export default defineComponent({
             },
           },
           {
-            text: this.$t("action.dismiss").toString(),
+            text: this.$t("action.dismiss"),
             onClick: (_, toastObject) => {
               setLocalConfig("cookiesAllowed", "yes")
               toastObject.goAway(0)

packages/hoppscotch-app/components/app/PowerSearch.vue

@@ -8,7 +8,7 @@
         type="text"
         autocomplete="off"
         name="command"
-        :placeholder="$t('app.type_a_command_search').toString()"
+        :placeholder="`${$t('app.type_a_command_search')}`"
         class="
           bg-transparent
           border-b border-dividerLight

packages/hoppscotch-app/components/app/PowerSearchEntry.vue

@@ -40,7 +40,7 @@
     </span>
     <span
       v-for="(key, keyIndex) in shortcut.keys"
-      :key="`key-${keyIndex}`"
+      :key="`key-${String(keyIndex)}`"
       class="shortcut-key"
     >
       {{ key }}

packages/hoppscotch-app/components/app/Share.vue

@@ -88,7 +88,7 @@ export default defineComponent({
     copyAppLink() {
       copyToClipboard(this.url)
       this.copyIcon = "check"
-      this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
         icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "copy"), 1000)

packages/hoppscotch-app/components/app/Shortcuts.vue

@@ -36,7 +36,7 @@
               px-4
               focus-visible:border-divider
             "
-            :placeholder="$t('action.search')"
+            :placeholder="`${$t('action.search')}`"
           />
         </div>
       </div>

packages/hoppscotch-app/components/app/ShortcutsEntry.vue

@@ -5,7 +5,7 @@
     </span>
     <span
       v-for="(key, index) in shortcut.keys"
-      :key="`key-${index}`"
+      :key="`key-${String(index)}`"
       class="shortcut-key"
     >
       {{ key }}

packages/hoppscotch-app/components/collections/ChooseType.vue

@@ -3,13 +3,13 @@
     <SmartTabs :id="'collections_tab'" @tab-changed="updateCollectionsType">
       <SmartTab
         :id="'my-collections'"
-        :label="$t('collection.my_collections')"
+        :label="`${$t('collection.my_collections')}`"
         :selected="true"
       />
       <SmartTab
         v-if="currentUser && currentUser.eaInvited && !doc"
         :id="'team-collections'"
-        :label="$t('collection.team_collections')"
+        :label="`${$t('collection.team_collections')}`"
       >
         <SmartIntersection @intersecting="onTeamSelectIntersect">
           <div class="select-wrapper">
@@ -43,8 +43,8 @@
               </option>
               <option
                 v-for="(team, index) in myTeams"
-                :key="`team-${index}`"
+                :key="`team-${String(index)}`"
-                :value="index"
+                :value="String(index)"
               >
                 {{ team.name }}
               </option>

packages/hoppscotch-app/components/collections/ImportExport.vue

@@ -12,8 +12,10 @@
         class="rounded"
         svg="arrow-left"
         @click.native="
-          mode = 'import_export'
+          () => {
-          mySelectedCollectionID = undefined
+            mode = 'import_export'
+            mySelectedCollectionID = undefined
+          }
         "
       />
       <span>
@@ -39,8 +41,10 @@
             icon="assignment_returned"
             :label="$t('import.from_gist')"
             @click.native="
-              readCollectionGist
+              () => {
-              $refs.options.tippy().hide()
+                readCollectionGist
+                $refs.options.tippy().hide()
+              }
             "
           />
           <span
@@ -64,8 +68,10 @@
               icon="assignment_turned_in"
               :label="$t('export.create_secret_gist')"
               @click.native="
-                createCollectionGist()
+                () => {
-                $refs.options.tippy().hide()
+                  createCollectionGist()
+                  $refs.options.tippy().hide()
+                }
               "
             />
           </span>

packages/hoppscotch-app/components/collections/SaveRequest.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="$t('collection.save_as').toString()"
+    :title="`${$t('collection.save_as')}`"
     @close="hideModal"
   >
     <template #body>
@@ -45,11 +45,11 @@
     <template #footer>
       <span>
         <ButtonPrimary
-          :label="$t('action.save').toString()"
+          :label="`${$t('action.save')}`"
           @click.native="saveRequestAs"
         />
         <ButtonSecondary
-          :label="$t('action.cancel').toString()"
+          :label="`${$t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -194,13 +194,13 @@ const hideModal = () => {
 
 const saveRequestAs = async () => {
   if (!requestName.value) {
-    $toast.error(t("error.empty_req_name").toString(), {
+    $toast.error(`${t("error.empty_req_name")}`, {
       icon: "error_outline",
     })
     return
   }
   if (picked.value === null) {
-    $toast.error(t("collection.select").toString(), {
+    $toast.error(`${t("collection.select")}`, {
       icon: "error_outline",
     })
     return
@@ -342,7 +342,7 @@ const saveRequestAs = async () => {
       requestUpdated as HoppGQLRequest
     )
   }
-  $toast.success(t("request.added").toString(), {
+  $toast.success(`${t("request.added")}`, {
     icon: "post_add",
   })
   hideModal()

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
+  <SmartModal v-if="show" :title="`${$t('collection.new')}`" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -20,11 +20,11 @@
     <template #footer>
       <span>
         <ButtonPrimary
-          :label="$t('action.save')"
+          :label="`${$t('action.save')}`"
           @click.native="addNewCollection"
         />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="`${$t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -49,7 +49,7 @@ export default defineComponent({
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
           icon: "error_outline",
         })
         return

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -62,29 +62,35 @@
             </template>
             <SmartItem
               svg="folder-plus"
-              :label="$t('folder.new')"
+              :label="`${$t('folder.new')}`"
               @click.native="
-                $emit('add-folder', {
+                () => {
-                  path: `${collectionIndex}`,
+                  $emit('add-folder', {
-                })
+                    path: `${collectionIndex}`,
-                $refs.options.tippy().hide()
+                  })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
               svg="edit"
-              :label="$t('action.edit')"
+              :label="`${$t('action.edit')}`"
               @click.native="
-                $emit('edit-collection')
+                () => {
-                $refs.options.tippy().hide()
+                  $emit('edit-collection')
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
               svg="trash-2"
               color="red"
-              :label="$t('action.delete')"
+              :label="`${$t('action.delete')}`"
               @click.native="
-                confirmRemove = true
+                () => {
-                $refs.options.tippy().hide()
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
               "
             />
           </tippy>
@@ -94,13 +100,13 @@
     <div v-if="showChildren || isFiltered">
       <CollectionsGraphqlFolder
         v-for="(folder, index) in collection.folders"
-        :key="`folder-${index}`"
+        :key="`folder-${String(index)}`"
         class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
         :folder="folder"
         :folder-index="index"
-        :folder-path="`${collectionIndex}/${index}`"
+        :folder-path="`${collectionIndex}/${String(index)}`"
         :collection-index="collectionIndex"
         :doc="doc"
         :is-filtered="isFiltered"
@@ -111,7 +117,7 @@
       />
       <CollectionsGraphqlRequest
         v-for="(request, index) in collection.requests"
-        :key="`request-${index}`"
+        :key="`request-${String(index)}`"
         class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
@@ -147,7 +153,7 @@
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('confirm.remove_collection')"
+      :title="`${$t('confirm.remove_collection')}`"
       @hide-modal="confirmRemove = false"
       @resolve="removeCollection"
     />
@@ -220,7 +226,7 @@ export default defineComponent({
         this.$emit("select", { picked: null })
       }
       removeGraphqlCollection(this.collectionIndex)
-      this.$toast.success(this.$t("state.deleted").toString(), {
+      this.$toast.success(`${this.$t("state.deleted")}`, {
         icon: "delete",
       })
     },

packages/hoppscotch-app/components/collections/graphql/Edit.vue

@@ -1,5 +1,9 @@
 <template>
-  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('collection.edit')}`"
+    @close="hideModal"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -20,11 +24,11 @@
     <template #footer>
       <span>
         <ButtonPrimary
-          :label="$t('action.save')"
+          :label="`${$t('action.save')}`"
           @click.native="saveCollection"
         />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="`${$t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -50,7 +54,7 @@ export default defineComponent({
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
           icon: "error_outline",
         })
         return

packages/hoppscotch-app/components/collections/graphql/EditFolder.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="$t('folder.edit')"
+    :title="`${$t('folder.edit')}`"
     @close="$emit('hide-modal')"
   >
     <template #body>
@@ -23,9 +23,12 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="editFolder" />
+        <ButtonPrimary
+          :label="`${$t('action.save')}`"
+          @click.native="editFolder"
+        />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="`${$t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -51,7 +54,7 @@ export default defineComponent({
   methods: {
     editFolder() {
       if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
           icon: "error_outline",
         })
         return

packages/hoppscotch-app/components/collections/graphql/EditRequest.vue

@@ -1,5 +1,9 @@
 <template>
-  <SmartModal v-if="show" :title="$t('modal.edit_request')" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.edit_request')}`"
+    @close="hideModal"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -19,9 +23,12 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="saveRequest" />
+        <ButtonPrimary
+          :label="`${$t('action.save')}`"
+          @click.native="saveRequest"
+        />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="`${$t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -51,7 +58,7 @@ export default defineComponent({
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {
-        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
           icon: "error_outline",
         })
         return

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -60,27 +60,33 @@
             </template>
             <SmartItem
               svg="folder-plus"
-              :label="$t('folder.new')"
+              :label="`${$t('folder.new')}`"
               @click.native="
-                $emit('add-folder', { folder, path: folderPath })
+                () => {
-                $refs.options.tippy().hide()
+                  $emit('add-folder', { folder, path: folderPath })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
               svg="edit"
-              :label="$t('action.edit')"
+              :label="`${$t('action.edit')}`"
               @click.native="
-                $emit('edit-folder', { folder, folderPath })
+                () => {
-                $refs.options.tippy().hide()
+                  $emit('edit-folder', { folder, folderPath })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
               svg="trash-2"
               color="red"
-              :label="$t('action.delete')"
+              :label="`${$t('action.delete')}`"
               @click.native="
-                confirmRemove = true
+                () => {
-                $refs.options.tippy().hide()
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
               "
             />
           </tippy>
@@ -90,13 +96,13 @@
     <div v-if="showChildren || isFiltered">
       <CollectionsGraphqlFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
-        :key="`subFolder-${subFolderIndex}`"
+        :key="`subFolder-${String(subFolderIndex)}`"
         class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
         :folder="subFolder"
         :folder-index="subFolderIndex"
-        :folder-path="`${folderPath}/${subFolderIndex}`"
+        :folder-path="`${folderPath}/${String(subFolderIndex)}`"
         :collection-index="collectionIndex"
         :doc="doc"
         :is-filtered="isFiltered"
@@ -107,7 +113,7 @@
       />
       <CollectionsGraphqlRequest
         v-for="(request, index) in folder.requests"
-        :key="`request-${index}`"
+        :key="`request-${String(index)}`"
         class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
@@ -146,7 +152,7 @@
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('confirm.remove_folder')"
+      :title="`${$t('confirm.remove_folder')}`"
       @hide-modal="confirmRemove = false"
       @resolve="removeFolder"
     />
@@ -219,7 +225,7 @@ export default defineComponent({
       }
 
       removeGraphqlFolder(this.folderPath)
-      this.$toast.success(this.$t("state.deleted").toString(), {
+      this.$toast.success(`${this.$t("state.deleted")}`, {
         icon: "delete",
       })
     },

packages/hoppscotch-app/components/collections/graphql/Request.vue

@@ -66,23 +66,27 @@
             </template>
             <SmartItem
               svg="edit"
-              :label="$t('action.edit')"
+              :label="`${$t('action.edit')}`"
               @click.native="
-                $emit('edit-request', {
+                () => {
-                  request,
+                  $emit('edit-request', {
-                  requestIndex,
+                    request,
-                  folderPath,
+                    requestIndex,
-                })
+                    folderPath,
-                $refs.options.tippy().hide()
+                  })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
               svg="trash-2"
               color="red"
-              :label="$t('action.delete')"
+              :label="`${$t('action.delete')}`"
               @click.native="
-                confirmRemove = true
+                () => {
-                $refs.options.tippy().hide()
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
               "
             />
           </tippy>
@@ -91,7 +95,7 @@
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('confirm.remove_request')"
+      :title="`${$t('confirm.remove_request')}`"
       @hide-modal="confirmRemove = false"
       @resolve="removeRequest"
     />
@@ -176,7 +180,7 @@ export default defineComponent({
       }
 
       removeGraphqlRequest(this.folderPath, this.requestIndex)
-      this.$toast.success(this.$t("state.deleted").toString(), {
+      this.$toast.success(`${this.$t("state.deleted")}`, {
         icon: "delete",
       })
     },

packages/hoppscotch-app/components/collections/my/Collection.vue

@@ -82,19 +82,23 @@
               svg="folder-plus"
               :label="$t('folder.new')"
               @click.native="
-                $emit('add-folder', {
+                () => {
-                  folder: collection,
+                  $emit('add-folder', {
-                  path: `${collectionIndex}`,
+                    folder: collection,
-                })
+                    path: `${collectionIndex}`,
-                $refs.options.tippy().hide()
+                  })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
               svg="edit"
               :label="$t('action.edit')"
               @click.native="
-                $emit('edit-collection')
+                () => {
-                $refs.options.tippy().hide()
+                  $emit('edit-collection')
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
@@ -102,8 +106,10 @@
               color="red"
               :label="$t('action.delete')"
               @click.native="
-                confirmRemove = true
+                () => {
-                $refs.options.tippy().hide()
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
               "
             />
           </tippy>
@@ -138,7 +144,7 @@
         :collection-index="collectionIndex"
         :folder-index="-1"
         :folder-name="collection.name"
-        :folder-path="collectionIndex.toString()"
+        :folder-path="`${collectionIndex}`"
         :request-index="index"
         :doc="doc"
         :save-request="saveRequest"
@@ -247,7 +253,7 @@ export default defineComponent({
       this.dragging = !this.dragging
       const folderPath = dataTransfer.getData("folderPath")
       const requestIndex = dataTransfer.getData("requestIndex")
-      moveRESTRequest(folderPath, requestIndex, this.collectionIndex.toString())
+      moveRESTRequest(folderPath, requestIndex, `${this.collectionIndex}`)
     },
   },
 })

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -62,21 +62,25 @@
               svg="folder-plus"
               :label="$t('folder.new')"
               @click.native="
-                $emit('add-folder', { folder, path: folderPath })
+                () => {
-                $refs.options.tippy().hide()
+                  $emit('add-folder', { folder, path: folderPath })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
               svg="edit"
               :label="$t('action.edit')"
               @click.native="
-                $emit('edit-folder', {
+                () => {
-                  folder,
+                  $emit('edit-folder', {
-                  folderIndex,
+                    folder,
-                  collectionIndex,
+                    folderIndex,
-                  folderPath,
+                    collectionIndex,
-                })
+                    folderPath,
-                $refs.options.tippy().hide()
+                  })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
@@ -84,8 +88,10 @@
               color="red"
               :label="$t('action.delete')"
               @click.native="
-                confirmRemove = true
+                () => {
-                $refs.options.tippy().hide()
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
               "
             />
           </tippy>

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -76,11 +76,13 @@
               svg="folder-plus"
               :label="$t('folder.new')"
               @click.native="
-                $emit('add-folder', {
+                () => {
-                  folder: collection,
+                  $emit('add-folder', {
-                  path: `${collectionIndex}`,
+                    folder: collection,
-                })
+                    path: `${collectionIndex}`,
-                $refs.options.tippy().hide()
+                  })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
@@ -88,8 +90,10 @@
               svg="edit"
               :label="$t('action.edit')"
               @click.native="
-                $emit('edit-collection')
+                () => {
-                $refs.options.tippy().hide()
+                  $emit('edit-collection')
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
@@ -98,8 +102,10 @@
               color="red"
               :label="$t('action.delete')"
               @click.native="
-                confirmRemove = true
+                () => {
-                $refs.options.tippy().hide()
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
               "
             />
           </tippy>

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -57,8 +57,10 @@
               svg="folder-plus"
               :label="$t('folder.new')"
               @click.native="
-                $emit('add-folder', { folder, path: folderPath })
+                () => {
-                $refs.options.tippy().hide()
+                  $emit('add-folder', { folder, path: folderPath })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
@@ -66,13 +68,15 @@
               svg="edit"
               :label="$t('action.edit')"
               @click.native="
-                $emit('edit-folder', {
+                () => {
-                  folder,
+                  $emit('edit-folder', {
-                  folderIndex,
+                    folder,
-                  collectionIndex,
+                    folderIndex,
-                  folderPath: '',
+                    collectionIndex,
-                })
+                    folderPath: '',
-                $refs.options.tippy().hide()
+                  })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
@@ -81,8 +85,10 @@
               color="red"
               :label="$t('action.delete')"
               @click.native="
-                confirmRemove = true
+                () => {
-                $refs.options.tippy().hide()
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
               "
             />
           </tippy>

packages/hoppscotch-app/components/environments/Add.vue

@@ -1,5 +1,9 @@
 <template>
-  <SmartModal v-if="show" :title="$t('environment.new')" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('environment.new')}`"
+    @close="hideModal"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -20,11 +24,11 @@
     <template #footer>
       <span>
         <ButtonPrimary
-          :label="$t('action.save')"
+          :label="`${$t('action.save')}`"
           @click.native="addNewEnvironment"
         />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="`${$t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -48,7 +52,7 @@ export default defineComponent({
   methods: {
     addNewEnvironment() {
       if (!this.name) {
-        this.$toast.error(this.$t("environment.invalid_name").toString(), {
+        this.$toast.error(`${this.$t("environment.invalid_name")}`, {
           icon: "error_outline",
         })
         return

packages/hoppscotch-app/components/environments/Edit.vue

@@ -1,5 +1,9 @@
 <template>
-  <SmartModal v-if="show" :title="$t('environment.edit')" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('environment.edit')}`"
+    @close="hideModal"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex relative">
@@ -48,13 +52,13 @@
             <input
               v-model="variable.key"
               class="bg-transparent flex flex-1 py-2 px-4"
-              :placeholder="$t('count.variable', { count: index + 1 })"
+              :placeholder="`${$t('count.variable', { count: index + 1 })}`"
               :name="'param' + index"
             />
             <input
               v-model="variable.value"
               class="bg-transparent flex flex-1 py-2 px-4"
-              :placeholder="$t('count.value', { count: index + 1 })"
+              :placeholder="`${$t('count.value', { count: index + 1 })}`"
               :name="'value' + index"
             />
             <div class="flex">
@@ -83,7 +87,7 @@
               {{ $t("empty.environments") }}
             </span>
             <ButtonSecondary
-              :label="$t('add.new')"
+              :label="`${$t('add.new')}`"
               filled
               @click.native="addEnvironmentVariable"
             />
@@ -94,11 +98,11 @@
     <template #footer>
       <span>
         <ButtonPrimary
-          :label="$t('action.save')"
+          :label="`${$t('action.save')}`"
           @click.native="saveEnvironment"
         />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="`${$t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -160,7 +164,7 @@ export default defineComponent({
     clearContent() {
       this.vars = []
       this.clearIcon = "check"
-      this.$toast.success(this.$t("state.cleared").toString(), {
+      this.$toast.success(`${this.$t("state.cleared")}`, {
         icon: "clear_all",
       })
       setTimeout(() => (this.clearIcon = "trash-2"), 1000)
@@ -176,7 +180,7 @@ export default defineComponent({
     },
     saveEnvironment() {
       if (!this.name) {
-        this.$toast.error(this.$t("environment.invalid_name").toString(), {
+        this.$toast.error(`${this.$t("environment.invalid_name")}`, {
           icon: "error_outline",
         })
         return

packages/hoppscotch-app/components/environments/Environment.vue

@@ -33,27 +33,31 @@
         </template>
         <SmartItem
           svg="edit"
-          :label="$t('action.edit')"
+          :label="`${$t('action.edit')}`"
           @click.native="
-            $emit('edit-environment')
+            () => {
-            $refs.options.tippy().hide()
+              $emit('edit-environment')
+              $refs.options.tippy().hide()
+            }
           "
         />
         <SmartItem
           v-if="!(environmentIndex === 'Global')"
           svg="trash-2"
           color="red"
-          :label="$t('action.delete')"
+          :label="`${$t('action.delete')}`"
           @click.native="
-            confirmRemove = true
+            () => {
-            $refs.options.tippy().hide()
+              confirmRemove = true
+              $refs.options.tippy().hide()
+            }
           "
         />
       </tippy>
     </span>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('confirm.remove_environment')"
+      :title="`${$t('confirm.remove_environment')}`"
       @hide-modal="confirmRemove = false"
       @resolve="removeEnvironment"
     />
@@ -81,7 +85,7 @@ export default defineComponent({
     removeEnvironment() {
       if (this.environmentIndex !== "Global")
         deleteEnvironment(this.environmentIndex)
-      this.$toast.success(this.$t("state.deleted").toString(), {
+      this.$toast.success(`${this.$t("state.deleted")}`, {
         icon: "delete",
       })
     },

packages/hoppscotch-app/components/environments/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection :label="$t('environment.title')">
+  <AppSection :label="`${$t('environment.title')}`">
     <div
       class="
         bg-primary
@@ -14,7 +14,7 @@
         <template #trigger>
           <span
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('environment.select')"
+            :title="`${$t('environment.select')}`"
             class="
               bg-transparent
               border-b border-dividerLight
@@ -29,18 +29,20 @@
             />
             <ButtonSecondary
               v-else
-              :label="$t('environment.no_environment')"
+              :label="`${$t('environment.no_environment')}`"
               class="rounded-none flex-1 pr-8"
             />
           </span>
         </template>
         <SmartItem
-          :label="$t('environment.no_environment')"
+          :label="`${$t('environment.no_environment')}`"
           :info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
           :active-info-icon="selectedEnvironmentIndex === -1"
           @click.native="
-            selectedEnvironmentIndex = -1
+            () => {
-            $refs.options.tippy().hide()
+              selectedEnvironmentIndex = -1
+              $refs.options.tippy().hide()
+            }
           "
         />
         <SmartItem
@@ -50,15 +52,17 @@
           :info-icon="index === selectedEnvironmentIndex ? 'done' : ''"
           :active-info-icon="index === selectedEnvironmentIndex"
           @click.native="
-            selectedEnvironmentIndex = index
+            () => {
-            $refs.options.tippy().hide()
+              selectedEnvironmentIndex = index
+              $refs.options.tippy().hide()
+            }
           "
         />
       </tippy>
       <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
           svg="plus"
-          :label="$t('action.new')"
+          :label="`${$t('action.new')}`"
           class="!rounded-none"
           @click.native="displayModalAdd(true)"
         />
@@ -115,7 +119,7 @@
         {{ $t("empty.environments") }}
       </span>
       <ButtonSecondary
-        :label="$t('add.new')"
+        :label="`${$t('add.new')}`"
         filled
         @click.native="displayModalAdd(true)"
       />

packages/hoppscotch-app/components/firebase/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="$t('auth.login_to_hoppscotch')"
+    :title="`${$t('auth.login_to_hoppscotch')}`"
     dialog
     @close="hideModal"
   >
@@ -10,18 +10,18 @@
         <SmartItem
           :loading="signingInWithGitHub"
           svg="auth/github"
-          :label="$t('auth.continue_with_github')"
+          :label="`${$t('auth.continue_with_github')}`"
           @click.native="signInWithGithub"
         />
         <SmartItem
           :loading="signingInWithGoogle"
           svg="auth/google"
-          :label="$t('auth.continue_with_google')"
+          :label="`${$t('auth.continue_with_google')}`"
           @click.native="signInWithGoogle"
         />
         <SmartItem
           icon="mail"
-          :label="$t('auth.continue_with_email')"
+          :label="`${$t('auth.continue_with_email')}`"
           @click.native="mode = 'email'"
         />
       </div>
@@ -55,7 +55,7 @@
               : true
           "
           type="button"
-          :label="$t('auth.send_magic_link')"
+          :label="`${$t('auth.send_magic_link')}`"
           @click.native="signInWithEmail"
         />
       </div>
@@ -108,7 +108,7 @@
         />
         <SmartAnchor
           class="link"
-          :label="$t('action.dismiss')"
+          :label="`${$t('action.dismiss')}`"
           @click.native="hideModal"
         />
       </p>
@@ -161,7 +161,7 @@ export default defineComponent({
   },
   methods: {
     showLoginSuccess() {
-      this.$toast.success(this.$t("auth.login_success").toString(), {
+      this.$toast.success(`${this.$t("auth.login_success")}`, {
         icon: "vpn_key",
       })
     },
@@ -184,7 +184,7 @@ export default defineComponent({
             duration: 0,
             closeOnSwipe: false,
             action: {
-              text: this.$t("action.yes").toString(),
+              text: `${this.$t("action.yes")}`,
               onClick: async (_, toastObject) => {
                 const { user } = await signInUserWithGithub()
                 await linkWithFBCredential(user, pendingCred)
@@ -196,7 +196,7 @@ export default defineComponent({
             },
           })
         } else {
-          this.$toast.error(this.$t("error.something_went_wrong").toString(), {
+          this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
             icon: "error_outline",
           })
         }
@@ -228,7 +228,7 @@ export default defineComponent({
             duration: 0,
             closeOnSwipe: false,
             action: {
-              text: this.$t("action.yes").toString(),
+              text: `${this.$t("action.yes")}`,
               onClick: async (_, toastObject) => {
                 const { user } = await signInUserWithGoogle()
                 await linkWithFBCredential(user, pendingCred)
@@ -240,7 +240,7 @@ export default defineComponent({
             },
           })
         } else {
-          this.$toast.error(this.$t("error.something_went_wrong").toString(), {
+          this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
             icon: "error_outline",
           })
         }

packages/hoppscotch-app/components/firebase/Logout.vue

@@ -2,15 +2,17 @@
   <div class="flex">
     <SmartItem
       svg="log-out"
-      :label="$t('auth.logout')"
+      :label="`${$t('auth.logout')}`"
       @click.native="
-        $emit('confirm-logout')
+        () => {
-        confirmLogout = true
+          $emit('confirm-logout')
+          confirmLogout = true
+        }
       "
     />
     <SmartConfirmModal
       :show="confirmLogout"
-      :title="$t('confirm.logout')"
+      :title="`${$t('confirm.logout')}`"
       @hide-modal="confirmLogout = false"
       @resolve="logout"
     />
@@ -31,12 +33,12 @@ export default defineComponent({
     async logout() {
       try {
         await signOutUser()
-        this.$toast.success(this.$t("auth.logged_out").toString(), {
+        this.$toast.success(`${this.$t("auth.logged_out")}`, {
           icon: "vpn_key",
         })
       } catch (e) {
         console.error(e)
-        this.$toast.error(this.$t("error.something_went_wrong").toString(), {
+        this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
           icon: "error_outline",
         })
       }

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
-      <SmartTab :id="'query'" :label="$t('tab.query')" :selected="true">
+      <SmartTab :id="'query'" :label="`${$t('tab.query')}`" :selected="true">
         <AppSection label="query">
           <div
             class="
@@ -22,7 +22,7 @@
             </label>
             <div class="flex">
               <ButtonSecondary
-                :label="$t('request.run')"
+                :label="`${$t('request.run')}`"
                 svg="play"
                 class="rounded-none !text-accent"
                 @click.native="runQuery()"
@@ -59,7 +59,7 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'variables'" :label="$t('tab.variables')">
+      <SmartTab :id="'variables'" :label="`${$t('tab.variables')}`">
         <AppSection label="variables">
           <div
             class="
@@ -97,7 +97,7 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'headers'" :label="$t('tab.headers')">
+      <SmartTab :id="'headers'" :label="`${$t('tab.headers')}`">
         <AppSection label="headers">
           <div
             class="
@@ -158,7 +158,7 @@
               "
             >
               <SmartAutoComplete
-                :placeholder="$t('count.header', { count: index + 1 })"
+                :placeholder="`${$t('count.header', { count: index + 1 })}`"
                 :source="commonHeaders"
                 :spellcheck="false"
                 :value="header.key"
@@ -182,9 +182,7 @@
               />
               <input
                 class="bg-transparent flex flex-1 py-2 px-4"
-                :placeholder="
+                :placeholder="`${$t('count.value', { count: index + 1 })}`"
-                  $t('count.value', { count: index + 1 }).toString()
-                "
                 :name="`value ${index}`"
                 :value="header.value"
                 autofocus
@@ -247,7 +245,7 @@
                 {{ $t("empty.headers") }}
               </span>
               <ButtonSecondary
-                :label="$t('add.new')"
+                :label="`${$t('add.new')}`"
                 filled
                 svg="plus"
                 @click.native="addRequestHeader"
@@ -326,7 +324,7 @@ watch(bulkHeaders, () => {
     }))
     setGQLHeaders(transformation)
   } catch (e) {
-    $toast.error(t("error.something_went_wrong").toString(), {
+    $toast.error(`${t("error.something_went_wrong")}`, {
       icon: "error_outline",
     })
     console.error(e)
@@ -343,7 +341,7 @@ const bulkEditor = ref<any | null>(null)
 useCodemirror(bulkEditor, bulkHeaders, {
   extendedEditorConfig: {
     mode: "text/x-yaml",
-    placeholder: t("state.bulk_mode_placeholder").toString(),
+    placeholder: `${t("state.bulk_mode_placeholder")}`,
   },
   linter: null,
   completer: null,
@@ -354,7 +352,7 @@ const variableEditor = ref<any | null>(null)
 useCodemirror(variableEditor, variableString, {
   extendedEditorConfig: {
     mode: "application/ld+json",
-    placeholder: t("request.variables").toString(),
+    placeholder: `${t("request.variables")}`,
   },
   linter: jsonLinter,
   completer: null,
@@ -366,7 +364,7 @@ const schemaString = useReadonlyStream(props.conn.schema$, null)
 useCodemirror(queryEditor, gqlQueryString, {
   extendedEditorConfig: {
     mode: "graphql",
-    placeholder: t("request.query").toString(),
+    placeholder: `${t("request.query")}`,
   },
   linter: createGQLQueryLinter(schemaString),
   completer: queryCompleter(schemaString),
@@ -409,7 +407,7 @@ const runQuery = async () => {
   const startTime = Date.now()
 
   nuxt.value.$loading.start()
-  response.value = t("state.loading").toString()
+  response.value = `${t("state.loading")}`
 
   try {
     const runURL = clone(url.value)
@@ -443,14 +441,14 @@ const runQuery = async () => {
       })
     )
 
-    $toast.success(t("state.finished_in", { duration }).toString(), {
+    $toast.success(`${t("state.finished_in", { duration })}`, {
       icon: "done",
     })
   } catch (e: any) {
     response.value = `${e}. ${t("error.check_console_details")}`
     nuxt.value.$loading.finish()
 
-    $toast.error(`${e} ${t("error.f12_details").toString()}`, {
+    $toast.error(`${e} ${t("error.f12_details")}`, {
       icon: "error_outline",
     })
     console.error(e)
@@ -470,7 +468,7 @@ const prettifyQuery = () => {
   try {
     gqlQueryString.value = gql.print(gql.parse(gqlQueryString.value))
   } catch (e) {
-    $toast.error(t("error.gql_prettify_invalid_query").toString(), {
+    $toast.error(`${t("error.gql_prettify_invalid_query")}`, {
       icon: "error_outline",
     })
   }

packages/hoppscotch-app/components/graphql/Response.vue

@@ -71,7 +71,7 @@
         </div>
       </div>
       <ButtonSecondary
-        :label="$t('app.documentation')"
+        :label="`${$t('app.documentation')}`"
         to="https://docs.hoppscotch.io"
         svg="external-link"
         blank
@@ -133,7 +133,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadResponseIcon.value = "check"
-  $toast.success(t("state.download_started").toString(), {
+  $toast.success(`${t("state.download_started")}`, {
     icon: "downloading",
   })
   setTimeout(() => {

packages/hoppscotch-app/components/graphql/Sidebar.vue

@@ -8,7 +8,7 @@
               v-model="graphqlFieldsFilterText"
               type="search"
               autocomplete="off"
-              :placeholder="$t('action.search')"
+              :placeholder="`${$t('action.search')}`"
               class="bg-transparent flex w-full p-4 py-2"
             />
             <div class="flex">
@@ -29,7 +29,7 @@
               <SmartTab
                 v-if="queryFields.length > 0"
                 :id="'queries'"
-                :label="$t('tab.queries')"
+                :label="`${$t('tab.queries')}`"
                 :selected="true"
                 class="divide-y divide-dividerLight"
               >
@@ -44,7 +44,7 @@
               <SmartTab
                 v-if="mutationFields.length > 0"
                 :id="'mutations'"
-                :label="$t('graphql.mutations')"
+                :label="`${$t('graphql.mutations')}`"
                 class="divide-y divide-dividerLight"
               >
                 <GraphqlField
@@ -58,7 +58,7 @@
               <SmartTab
                 v-if="subscriptionFields.length > 0"
                 :id="'subscriptions'"
-                :label="$t('graphql.subscriptions')"
+                :label="`${$t('graphql.subscriptions')}`"
                 class="divide-y divide-dividerLight"
               >
                 <GraphqlField
@@ -73,7 +73,7 @@
                 v-if="graphqlTypes.length > 0"
                 :id="'types'"
                 ref="typesTab"
-                :label="$t('tab.types')"
+                :label="`${$t('tab.types')}`"
                 class="divide-y divide-dividerLight"
               >
                 <GraphqlType
@@ -111,7 +111,7 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'history'" :label="$t('tab.history')">
+      <SmartTab :id="'history'" :label="`${$t('tab.history')}`">
         <History
           ref="graphqlHistoryComponent"
           :page="'graphql'"
@@ -119,7 +119,7 @@
         />
       </SmartTab>
 
-      <SmartTab :id="'collections'" :label="$t('tab.collections')">
+      <SmartTab :id="'collections'" :label="`${$t('tab.collections')}`">
         <CollectionsGraphql />
       </SmartTab>
 
@@ -412,7 +412,7 @@ const downloadSchema = () => {
   document.body.appendChild(a)
   a.click()
   downloadSchemaIcon.value = "check"
-  $toast.success(t("state.download_started").toString(), {
+  $toast.success(`${t("state.download_started")}`, {
     icon: "downloading",
   })
   setTimeout(() => {

packages/hoppscotch-app/components/graphql/TypeLink.vue

@@ -22,7 +22,7 @@ export default defineComponent({
 
   computed: {
     typeString() {
-      return this.gqlType.toString()
+      return `${this.gqlType}`
     },
     isScalar() {
       return this.resolveRootType(this.gqlType) instanceof GraphQLScalarType

packages/hoppscotch-app/components/history/index.vue

@@ -15,7 +15,7 @@
         type="search"
         autocomplete="off"
         class="bg-transparent flex w-full p-4 py-2"
-        :placeholder="$t('action.search')"
+        :placeholder="`${$t('action.search')}`"
       />
       <div class="flex">
         <ButtonSecondary
@@ -76,7 +76,7 @@
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('confirm.remove_history')"
+      :title="`${$t('confirm.remove_history')}`"
       @hide-modal="confirmRemove = false"
       @resolve="clearHistory"
     />
@@ -131,7 +131,7 @@ export default defineComponent({
           return Object.keys(entry).some((key) => {
             let value = entry[key as keyof typeof entry]
             if (value) {
-              value = typeof value !== "string" ? value.toString() : value
+              value = `${value}`
               return value.toLowerCase().includes(filterText)
             }
             return false
@@ -144,7 +144,7 @@ export default defineComponent({
     clearHistory() {
       if (this.page === "rest") clearRESTHistory()
       else clearGraphqlHistory()
-      this.$toast.success(this.$t("state.history_deleted").toString(), {
+      this.$toast.success(`${this.$t("state.history_deleted")}`, {
         icon: "delete",
       })
     },
@@ -154,7 +154,7 @@ export default defineComponent({
     deleteHistory(entry: any) {
       if (this.page === "rest") deleteRESTHistoryEntry(entry)
       else deleteGraphqlHistoryEntry(entry)
-      this.$toast.success(this.$t("state.deleted").toString(), {
+      this.$toast.success(`${this.$t("state.deleted")}`, {
         icon: "delete",
       })
     },

packages/hoppscotch-app/components/history/rest/Card.vue

@@ -4,7 +4,7 @@
       class="cursor-pointer flex px-2 w-16 justify-center items-center truncate"
       :class="entryStatus.className"
       data-testid="restore_history_entry"
-      :title="duration"
+      :title="`${duration}`"
       @click="$emit('use-entry')"
     >
       {{ entry.request.method }}
@@ -20,7 +20,7 @@
         group-hover:text-secondaryDark
       "
       data-testid="restore_history_entry"
-      :title="duration"
+      :title="`${duration}`"
       @click="$emit('use-entry')"
     >
       <span class="truncate">
@@ -75,9 +75,9 @@ export default defineComponent({
         if (!responseDuration) return ""
 
         return responseDuration > 0
-          ? `${$t("request.duration").toString()}: ${responseDuration}ms`
+          ? `${$t("request.duration")}: ${responseDuration}ms`
-          : $t("error.no_duration").toString()
+          : $t("error.no_duration")
-      } else return $t("error.no_duration").toString()
+      } else return $t("error.no_duration")
     })
 
     const entryStatus = computed(() => {

packages/hoppscotch-app/components/http/Body.vue

@@ -37,8 +37,10 @@
             :info-icon="contentType === null ? 'done' : ''"
             :active-info-icon="contentType === null"
             @click.native="
-              contentType = null
+              () => {
-              $refs.contentTypeOptions.tippy().hide()
+                contentType = null
+                $refs.contentTypeOptions.tippy().hide()
+              }
             "
           />
           <SmartItem
@@ -48,8 +50,10 @@
             :info-icon="contentTypeItem === contentType ? 'done' : ''"
             :active-info-icon="contentTypeItem === contentType"
             @click.native="
-              contentType = contentTypeItem
+              () => {
-              $refs.contentTypeOptions.tippy().hide()
+                contentType = contentTypeItem
+                $refs.contentTypeOptions.tippy().hide()
+              }
             "
           />
         </tippy>
@@ -66,7 +70,7 @@
       </span>
       <ButtonSecondary
         outline
-        :label="$t('app.documentation')"
+        :label="`${$t('app.documentation')}`"
         to="https://docs.hoppscotch.io"
         blank
         svg="external-link"

packages/hoppscotch-app/components/http/BodyParameters.vue

@@ -46,7 +46,7 @@
       <SmartEnvInput
         v-if="EXPERIMENTAL_URL_BAR_ENABLED"
         v-model="param.key"
-        :placeholder="$t('count.parameter', { count: index + 1 })"
+        :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
         styles="
           bg-transparent
           flex
@@ -66,7 +66,7 @@
       <input
         v-else
         class="bg-transparent flex flex-1 py-2 px-4"
-        :placeholder="$t('count.parameter', { count: index + 1 })"
+        :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
         :name="'param' + index"
         :value="param.key"
         autofocus
@@ -94,7 +94,7 @@
         <SmartEnvInput
           v-if="EXPERIMENTAL_URL_BAR_ENABLED"
           v-model="param.value"
-          :placeholder="$t('count.value', { count: index + 1 })"
+          :placeholder="`${$t('count.value', { count: index + 1 })}`"
           styles="
             bg-transparent
             flex
@@ -114,7 +114,7 @@
         <input
           v-else
           class="bg-transparent flex flex-1 py-2 px-4"
-          :placeholder="$t('count.value', { count: index + 1 })"
+          :placeholder="`${$t('count.value', { count: index + 1 })}`"
           :name="'value' + index"
           :value="param.value"
           @change="
@@ -190,7 +190,7 @@
         {{ $t("empty.body") }}
       </span>
       <ButtonSecondary
-        :label="$t('add.new')"
+        :label="`${$t('add.new')}`"
         filled
         svg="plus"
         @click.native="addBodyParam"

packages/hoppscotch-app/components/http/CodegenModal.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="t('request.generate_code')"
+    :title="`${t('request.generate_code')}`"
     @close="hideModal"
   >
     <template #body>
@@ -48,12 +48,12 @@
     <template #footer>
       <span class="flex">
         <ButtonPrimary
-          :label="t('action.copy').toString()"
+          :label="`${t('action.copy')}`"
           :svg="copyIcon"
           @click.native="copyRequestCode"
         />
         <ButtonSecondary
-          :label="t('action.dismiss').toString()"
+          :label="`${t('action.dismiss')}`"
           @click.native="hideModal"
         />
       </span>
@@ -126,7 +126,7 @@ const hideModal = () => emit("hide-modal")
 const copyRequestCode = () => {
   copyToClipboard(requestCode.value)
   copyIcon.value = "check"
-  $toast.success(t("state.copied_to_clipboard").toString(), {
+  $toast.success(`${t("state.copied_to_clipboard")}`, {
     icon: "content_paste",
   })
   setTimeout(() => (copyIcon.value = "copy"), 1000)

packages/hoppscotch-app/components/http/Headers.vue

@@ -55,7 +55,7 @@
         class="divide-x divide-dividerLight border-b border-dividerLight flex"
       >
         <SmartAutoComplete
-          :placeholder="$t('count.header', { count: index + 1 })"
+          :placeholder="`${$t('count.header', { count: index + 1 })}`"
           :source="commonHeaders"
           :spellcheck="false"
           :value="header.key"
@@ -80,7 +80,7 @@
         <SmartEnvInput
           v-if="EXPERIMENTAL_URL_BAR_ENABLED"
           v-model="header.value"
-          :placeholder="$t('count.value', { count: index + 1 })"
+          :placeholder="`${$t('count.value', { count: index + 1 })}`"
           styles="
             bg-transparent
             flex
@@ -99,7 +99,7 @@
         <input
           v-else
           class="bg-transparent flex flex-1 py-2 px-4"
-          :placeholder="$t('count.value', { count: index + 1 })"
+          :placeholder="`${$t('count.value', { count: index + 1 })}`"
           :name="'value' + index"
           :value="header.value"
           @change="
@@ -164,7 +164,7 @@
         </span>
         <ButtonSecondary
           filled
-          :label="$t('add.new')"
+          :label="`${$t('add.new')}`"
           svg="plus"
           @click.native="addHeader"
         />
@@ -202,7 +202,7 @@ const bulkEditor = ref<any | null>(null)
 useCodemirror(bulkEditor, bulkHeaders, {
   extendedEditorConfig: {
     mode: "text/x-yaml",
-    placeholder: t("state.bulk_mode_placeholder").toString(),
+    placeholder: `${t("state.bulk_mode_placeholder")}`,
   },
   linter: null,
   completer: null,
@@ -217,7 +217,7 @@ watch(bulkHeaders, () => {
     }))
     setRESTHeaders(transformation)
   } catch (e) {
-    $toast.error(t("error.something_went_wrong").toString(), {
+    $toast.error(`${t("error.something_went_wrong")}`, {
       icon: "error_outline",
     })
     console.error(e)

packages/hoppscotch-app/components/http/ImportCurl.vue

@@ -1,9 +1,5 @@
 <template>
-  <SmartModal
+  <SmartModal v-if="show" :title="`${$t('import.curl')}`" @close="hideModal">
-    v-if="show"
-    :title="$t('import.curl').toString()"
-    @close="hideModal"
-  >
     <template #body>
       <div class="flex flex-col px-2">
         <div ref="curlEditor" class="border border-dividerLight rounded"></div>
@@ -12,11 +8,11 @@
     <template #footer>
       <span class="flex">
         <ButtonPrimary
-          :label="$t('import.title').toString()"
+          :label="`${$t('import.title')}`"
           @click.native="handleImport"
         />
         <ButtonSecondary
-          :label="$t('action.cancel').toString()"
+          :label="`${$t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -49,7 +45,7 @@ const curlEditor = ref<any | null>(null)
 useCodemirror(curlEditor, curl, {
   extendedEditorConfig: {
     mode: "application/x-sh",
-    placeholder: t("request.enter_curl").toString(),
+    placeholder: `${t("request.enter_curl")}`,
   },
   linter: null,
   completer: null,
@@ -128,7 +124,7 @@ const handleImport = () => {
     )
   } catch (e) {
     console.error(e)
-    $toast.error(t("error.curl_invalid_format").toString(), {
+    $toast.error(`${t("error.curl_invalid_format")}`, {
       icon: "error_outline",
     })
   }

packages/hoppscotch-app/components/http/OAuth2Authorization.vue

@@ -48,7 +48,7 @@
     <div class="p-2">
       <ButtonSecondary
         filled
-        :label="$t('authorization.generate_token')"
+        :label="`${$t('authorization.generate_token')}`"
         @click.native="handleAccessTokenRequest()"
       />
     </div>
@@ -97,7 +97,7 @@ export default {
         oidcDiscoveryURL.value === "" &&
         (authURL.value === "" || accessTokenURL.value === "")
       ) {
-        $toast.error($t("complete_config_urls").toString(), {
+        $toast.error(`${$t("complete_config_urls")}`, {
           icon: "error",
         })
         return
@@ -113,7 +113,7 @@ export default {
         }
         await tokenRequest(tokenReqParams)
       } catch (e) {
-        $toast.error(e, {
+        $toast.error(`${e}`, {
           icon: "code",
         })
       }

packages/hoppscotch-app/components/http/Parameters.vue

@@ -57,7 +57,7 @@
         <SmartEnvInput
           v-if="EXPERIMENTAL_URL_BAR_ENABLED"
           v-model="param.key"
-          :placeholder="$t('count.parameter', { count: index + 1 })"
+          :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
           styles="
             bg-transparent
             flex
@@ -76,7 +76,9 @@
         <input
           v-else
           class="bg-transparent flex flex-1 py-2 px-4"
-          :placeholder="$t('count.parameter', { count: index + 1 }).toString()"
+          :placeholder="`${$t('count.parameter', {
+            count: index + 1,
+          })}`"
           :name="'param' + index"
           :value="param.key"
           autofocus
@@ -91,7 +93,7 @@
         <SmartEnvInput
           v-if="EXPERIMENTAL_URL_BAR_ENABLED"
           v-model="param.value"
-          :placeholder="$t('count.value', { count: index + 1 })"
+          :placeholder="`${$t('count.value', { count: index + 1 })}`"
           styles="
             bg-transparent
             flex
@@ -110,7 +112,7 @@
         <input
           v-else
           class="bg-transparent flex flex-1 py-2 px-4"
-          :placeholder="$t('count.value', { count: index + 1 }).toString()"
+          :placeholder="`${$t('count.value', { count: index + 1 })}`"
           :name="'value' + index"
           :value="param.value"
           @change="
@@ -172,7 +174,7 @@
           {{ $t("empty.parameters") }}
         </span>
         <ButtonSecondary
-          :label="$t('add.new')"
+          :label="`${$t('add.new')}`"
           svg="plus"
           filled
           @click.native="addParam"
@@ -216,7 +218,7 @@ watch(bulkParams, () => {
     }))
     setRESTParams(transformation)
   } catch (e) {
-    $toast.error(t("error.something_went_wrong").toString(), {
+    $toast.error(`${t("error.something_went_wrong")}`, {
       icon: "error_outline",
     })
     console.error(e)
@@ -228,7 +230,7 @@ const bulkEditor = ref<any | null>(null)
 useCodemirror(bulkEditor, bulkParams, {
   extendedEditorConfig: {
     mode: "text/x-yaml",
-    placeholder: t("state.bulk_mode_placeholder").toString(),
+    placeholder: `${t("state.bulk_mode_placeholder")}`,
   },
   linter: null,
   completer: null,

packages/hoppscotch-app/components/http/PreRequestScript.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection id="script" :label="$t('preRequest.script')">
+  <AppSection id="script" :label="`${$t('preRequest.script')}`">
     <div
       class="
         bg-primary
@@ -60,7 +60,7 @@
           {{ $t("helpers.pre_request_script") }}
         </div>
         <SmartAnchor
-          :label="$t('preRequest.learn')"
+          :label="`${$t('preRequest.learn')}`"
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank
         />
@@ -107,7 +107,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "application/javascript",
       lineWrapping: linewrapEnabled,
-      placeholder: t("preRequest.javascript_code").toString(),
+      placeholder: `${t("preRequest.javascript_code")}`,
     },
     linter,
     completer,

packages/hoppscotch-app/components/http/RawBody.vue

@@ -35,7 +35,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear')"
           svg="trash-2"
-          @click.native="clearContent('rawParams', $event)"
+          @click.native="clearContent"
         />
         <ButtonSecondary
           v-if="contentType && contentType.endsWith('json')"
@@ -104,7 +104,7 @@ useCodemirror(
     extendedEditorConfig: {
       lineWrapping: linewrapEnabled,
       mode: rawInputEditorLang,
-      placeholder: t("request.raw_body").toString(),
+      placeholder: t("request.raw_body"),
     },
     linter: null,
     completer: null,
@@ -123,11 +123,11 @@ const uploadPayload = (e: InputEvent) => {
       rawParamsBody.value = target?.result
     }
     reader.readAsText(file)
-    $toast.success(t("state.file_imported").toString(), {
+    $toast.success(`${t("state.file_imported")}`, {
       icon: "attach_file",
     })
   } else {
-    $toast.error(t("action.choose_file").toString(), {
+    $toast.error(`${t("action.choose_file")}`, {
       icon: "attach_file",
     })
   }

packages/hoppscotch-app/components/http/Request.vue

@@ -43,7 +43,7 @@
                   "
                   :value="newMethod"
                   :readonly="!isCustomMethod"
-                  :placeholder="$t('request.method')"
+                  :placeholder="`${$t('request.method')}`"
                   @input="onSelectMethod($event.target.value)"
                 />
               </span>
@@ -61,7 +61,7 @@
         <SmartEnvInput
           v-if="EXPERIMENTAL_URL_BAR_ENABLED"
           v-model="newEndpoint"
-          :placeholder="$t('request.url')"
+          :placeholder="`${$t('request.url')}`"
           styles="
             bg-primaryLight
             border border-divider
@@ -100,7 +100,7 @@
           type="text"
           autocomplete="off"
           spellcheck="false"
-          :placeholder="$t('request.url')"
+          :placeholder="`${$t('request.url')}`"
           autofocus
           @keyup.enter="newSendRequest()"
         />
@@ -110,7 +110,7 @@
       <ButtonPrimary
         id="send"
         class="rounded-r-none flex-1 min-w-22"
-        :label="!loading ? $t('action.send') : $t('action.cancel')"
+        :label="`${!loading ? $t('action.send') : $t('action.cancel')}`"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
       <span class="flex">
@@ -125,7 +125,7 @@
             <ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
           </template>
           <SmartItem
-            :label="$t('import.curl')"
+            :label="`${$t('import.curl')}`"
             svg="terminal"
             @click.native="
               () => {
@@ -135,7 +135,7 @@
             "
           />
           <SmartItem
-            :label="$t('show.code')"
+            :label="`${$t('show.code')}`"
             svg="code"
             @click.native="
               () => {
@@ -146,7 +146,7 @@
           />
           <SmartItem
             ref="clearAll"
-            :label="$t('action.clear_all')"
+            :label="`${$t('action.clear_all')}`"
             svg="rotate-ccw"
             @click.native="
               () => {
@@ -159,7 +159,7 @@
       </span>
       <ButtonSecondary
         class="rounded-r-none ml-2"
-        :label="$t('request.save')"
+        :label="`${$t('request.save')}`"
         filled
         svg="save"
         @click.native="saveRequest()"
@@ -178,7 +178,7 @@
           <input
             id="request-name"
             v-model="requestName"
-            :placeholder="$t('request.name')"
+            :placeholder="`${$t('request.name')}`"
             name="request-name"
             type="text"
             autocomplete="off"
@@ -187,7 +187,7 @@
           />
           <SmartItem
             ref="copyRequest"
-            :label="$t('request.copy_link')"
+            :label="`${$t('request.copy_link')}`"
             :svg="hasNavigatorShare ? 'share-2' : 'copy'"
             @click.native="
               () => {
@@ -198,7 +198,7 @@
           />
           <SmartItem
             ref="saveRequest"
-            :label="$t('request.save_as')"
+            :label="`${$t('request.save_as')}`"
             svg="folder-plus"
             @click.native="
               () => {
@@ -352,7 +352,7 @@ const copyRequest = () => {
       .catch(() => {})
   } else {
     copyToClipboard(window.location.href)
-    $toast.success(t("state.copied_to_clipboard").toString(), {
+    $toast.success(`${t("state.copied_to_clipboard")}`, {
       icon: "content_paste",
     })
   }
@@ -409,7 +409,7 @@ const saveRequest = () => {
       return
     }
   }
-  $toast.success(t("request.saved").toString(), {
+  $toast.success(`${t("request.saved")}`, {
     icon: "playlist_add_check",
   })
 }

packages/hoppscotch-app/components/http/TestResult.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection :label="$t('test.results')">
+  <AppSection :label="`${$t('test.results')}`">
     <div
       v-if="
         testResults &&
@@ -64,7 +64,9 @@
             <span class="text-secondaryLight">
               {{
                 ` \xA0 — \xA0test ${
-                  result.status === "pass" ? $t("passed") : $t("failed")
+                  result.status === "pass"
+                    ? $t("test.passed")
+                    : $t("test.failed")
                 }`
               }}
             </span>
@@ -84,7 +86,7 @@
       </span>
       <ButtonSecondary
         outline
-        :label="$t('action.learn_more')"
+        :label="`${$t('action.learn_more')}`"
         to="https://docs.hoppscotch.io"
         blank
         svg="external-link"

packages/hoppscotch-app/components/http/TestResultEntry.vue

@@ -27,8 +27,8 @@
         </span>
         <span class="text-secondaryLight">
           {{
-            ` \xA0 — \xA0test ${
+            ` \xA0 — \xA0 ${
-              result.status === "pass" ? $t("passed") : $t("failed")
+              result.status === "pass" ? $t("test.passed") : $t("test.failed")
             }`
           }}
         </span>

packages/hoppscotch-app/components/http/Tests.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection id="script" :label="$t('test.script')">
+  <AppSection id="script" :label="`${$t('test.script')}`">
     <div
       class="
         bg-primary
@@ -60,7 +60,7 @@
           {{ $t("helpers.post_request_tests") }}
         </div>
         <SmartAnchor
-          :label="$t('test.learn')"
+          :label="`${$t('test.learn')}`"
           to="https://docs.hoppscotch.io/features/tests"
           blank
         />
@@ -107,7 +107,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "application/javascript",
       lineWrapping: linewrapEnabled,
-      placeholder: t("test.javascript_code").toString(),
+      placeholder: `${t("test.javascript_code")}`,
     },
     linter,
     completer,

packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue

@@ -13,7 +13,7 @@
       v-if="headerLength"
       id="headers"
       :label="$t('response.headers')"
-      :info="headerLength.toString()"
+      :info="`${headerLength}`"
     >
       <LensesHeadersRenderer :headers="response.headers" />
     </SmartTab>

packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue

@@ -130,7 +130,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(t("state.download_started").toString(), {
+  $toast.success(`${t("state.download_started")}`, {
     icon: "downloading",
   })
   setTimeout(() => {
@@ -143,7 +143,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(t("state.copied_to_clipboard").toString(), {
+  $toast.success(`${t("state.copied_to_clipboard")}`, {
     icon: "content_paste",
   })
   setTimeout(() => (copyIcon.value = "copy"), 1000)

packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue

@@ -74,7 +74,7 @@
             <div v-if="item.kind === 'RootObject'" class="outline">{}</div>
             <div v-if="item.kind === 'RootArray'" class="outline">[]</div>
             <div v-if="item.kind === 'ArrayMember'" class="outline">
-              {{ item.index.toString() }}
+              {{ item.index }}
             </div>
             <div v-if="item.kind === 'ObjectMember'" class="outline">
               {{ item.name }}
@@ -87,7 +87,7 @@
               <SmartItem
                 v-for="(arrayMember, astIndex) in item.astParent.values"
                 :key="`ast-${astIndex}`"
-                :label="astIndex.toString()"
+                :label="`${astIndex}`"
                 @click.native="
                   () => {
                     jumpCursor(arrayMember)
@@ -235,7 +235,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(t("state.download_started").toString(), {
+  $toast.success(`${t("state.download_started")}`, {
     icon: "downloading",
   })
   setTimeout(() => {
@@ -257,7 +257,7 @@ const outlinePath = computed(() => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(t("state.copied_to_clipboard").toString(), {
+  $toast.success(`${t("state.copied_to_clipboard")}`, {
     icon: "content_paste",
   })
   setTimeout(() => (copyIcon.value = "copy"), 1000)

packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue

@@ -117,7 +117,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(t("state.download_started").toString(), {
+  $toast.success(`${t("state.download_started")}`, {
     icon: "downloading",
   })
   setTimeout(() => {
@@ -130,7 +130,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(t("state.copied_to_clipboard").toString(), {
+  $toast.success(`${t("state.copied_to_clipboard")}`, {
     icon: "content_paste",
   })
   setTimeout(() => (copyIcon.value = "copy"), 1000)

packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue

@@ -118,7 +118,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(t("state.download_started").toString(), {
+  $toast.success(`${t("state.download_started")}`, {
     icon: "downloading",
   })
   setTimeout(() => {
@@ -131,7 +131,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(t("state.copied_to_clipboard").toString(), {
+  $toast.success(`${t("state.copied_to_clipboard")}`, {
     icon: "content_paste",
   })
   setTimeout(() => (copyIcon.value = "copy"), 1000)

packages/hoppscotch-app/components/smart/ChangeLanguage.vue

@@ -19,7 +19,7 @@
         v-for="(locale, index) in $i18n.locales.filter(
           ({ code }) => code !== $i18n.locale
         )"
-        :key="`locale-${index}`"
+        :key="`locale-${String(index)}`"
         :to="switchLocalePath(locale.code)"
         @click="$refs.language.tippy().hide()"
       >

packages/hoppscotch-app/components/smart/EnvInput.vue

@@ -384,10 +384,10 @@ export default defineComponent({
         const preSelectionRange = range.cloneRange()
         preSelectionRange.selectNodeContents(containerEl)
         preSelectionRange.setEnd(range.startContainer, range.startOffset)
-        start = preSelectionRange.toString().length
+        start = `${preSelectionRange}`.length
         return {
           start,
-          end: start + range.toString().length,
+          end: start + `${range}`.length,
         }
       } else if (document.selection) {
         const selectedTextRange = document.selection.createRange()

packages/hoppscotch-app/components/smart/FontSizePicker.vue

@@ -9,19 +9,23 @@
             class="pr-8"
             svg="type"
             outline
-            :label="getFontSizeName(fontSizes.find((size) => size == active))"
+            :label="`${getFontSizeName(
+              fontSizes.find((size) => size == active)
+            )}`"
           />
         </span>
       </template>
       <SmartItem
         v-for="(size, index) in fontSizes"
         :key="`size-${index}`"
-        :label="getFontSizeName(size)"
+        :label="`${getFontSizeName(size)}`"
         :info-icon="size === active ? 'done' : ''"
         :active-info-icon="size === active"
         @click.native="
-          setActiveFont(size)
+          () => {
-          $refs.fontSize.tippy().hide()
+            setActiveFont(size)
+            $refs.fontSize.tippy().hide()
+          }
         "
       />
     </tippy>

packages/hoppscotch-app/components/smart/Tabs.vue

@@ -17,7 +17,7 @@
                 {{ tab.icon }}
               </i>
               <span v-if="tab.label">{{ tab.label }}</span>
-              <span v-if="tab.info" class="tab-info">
+              <span v-if="tab.info && tab.info !== 'null'" class="tab-info">
                 {{ tab.info }}
               </span>
             </button>

packages/hoppscotch-app/components/teams/Team.vue

@@ -35,8 +35,10 @@
           svg="edit"
           :label="$t('action.edit')"
           @click.native="
-            $emit('edit-team')
+            () => {
-            $refs.options.tippy().hide()
+              $emit('edit-team')
+              $refs.options.tippy().hide()
+            }
           "
         />
         <SmartItem
@@ -45,8 +47,10 @@
           color="red"
           :label="$t('action.delete')"
           @click.native="
-            deleteTeam()
+            () => {
-            $refs.options.tippy().hide()
+              deleteTeam()
+              $refs.options.tippy().hide()
+            }
           "
         />
         <SmartItem
@@ -54,8 +58,10 @@
           svg="trash"
           :label="$t('team.exit')"
           @click.native="
-            exitTeam()
+            () => {
-            $refs.options.tippy().hide()
+              exitTeam()
+              $refs.options.tippy().hide()
+            }
           "
         />
       </tippy>

packages/hoppscotch-app/helpers/codegen/codegen.ts

@@ -157,7 +157,7 @@ function getCodegenGeneralRESTInfo(
     params: request.effectiveFinalParams.map((x) => ({ ...x, active: true })),
     method: request.method,
     url: urlObj.origin,
-    queryString: urlObj.searchParams.toString(),
+    queryString: `${urlObj.searchParams}`,
     pathName: urlObj.pathname,
   }
 }

packages/hoppscotch-app/helpers/codegen/generators/php-curl.js

@@ -64,7 +64,7 @@ export const PhpCurlCodegen = {
         } else {
           const requestObject = JSON.parse(requestBody)
           requestBody = `"${Object.keys(requestObject)
-            .map((key) => `${key}=${requestObject[key].toString()}`)
+            .map((key) => `${key}=${requestObject[key]}`)
             .join("&")}"`
         }
       }

packages/hoppscotch-app/helpers/postwomanTesting.ts

@@ -50,7 +50,7 @@ export default function runTestScriptWithVariables(
       } catch (e: any) {
         pw._testReports.push({
           result: "ERROR",
-          message: e.toString(),
+          message: `${e}`,
           styles: styles.ERROR,
         })
       }

packages/hoppscotch-app/layouts/default.vue

@@ -171,12 +171,12 @@ export default defineComponent({
     if (workbox) {
       workbox.addEventListener("installed", (event: any) => {
         if (event.isUpdate) {
-          this.$toast.show(this.$t("app.new_version_found").toString(), {
+          this.$toast.show(`${this.$t("app.new_version_found")}`, {
             icon: "download_for_offline",
             duration: 0,
             action: [
               {
-                text: this.$t("app.reload").toString(),
+                text: `${this.$t("app.reload")}`,
                 onClick: (_, toastObject) => {
                   toastObject.goAway(0)
                   window.location.reload()

packages/hoppscotch-app/locales/en.json

@@ -480,8 +480,10 @@
     "title": "Teams"
   },
   "test": {
+    "failed": "test failed",
     "javascript_code": "JavaScript Code",
     "learn": "Read documentation",
+    "passed": "test passed",
     "report": "Test Report",
     "results": "Test Results",
     "script": "Script",

packages/hoppscotch-app/newstore/collections.ts

@@ -260,7 +260,6 @@ const restCollectionDispatchers = defineDispatchers({
       console.log(
         `Could not resolve path '${path}'. Ignoring editRequest dispatch.`
       )
-
       return {}
     }
 
@@ -287,7 +286,6 @@ const restCollectionDispatchers = defineDispatchers({
       console.log(
         `Could not resolve path '${path}'. Ignoring saveRequestAs dispatch.`
       )
-
       return {}
     }
 
@@ -312,7 +310,6 @@ const restCollectionDispatchers = defineDispatchers({
       console.log(
         `Could not resolve path '${path}'. Ignoring removeRequest dispatch.`
       )
-
       return {}
     }
 
@@ -364,7 +361,6 @@ const restCollectionDispatchers = defineDispatchers({
       console.log(
         `Could not resolve destination path '${destinationPath}'. Skipping moveRequest dispatch.`
       )
-
       return {}
     }
 
@@ -533,7 +529,6 @@ const gqlCollectionDispatchers = defineDispatchers({
       console.log(
         `Could not resolve path '${path}'. Ignoring editRequest dispatch.`
       )
-
       return {}
     }
 
@@ -560,7 +555,6 @@ const gqlCollectionDispatchers = defineDispatchers({
       console.log(
         `Could not resolve path '${path}'. Ignoring saveRequestAs dispatch.`
       )
-
       return {}
     }
 
@@ -585,7 +579,6 @@ const gqlCollectionDispatchers = defineDispatchers({
       console.log(
         `Could not resolve path '${path}'. Ignoring removeRequest dispatch.`
       )
-
       return {}
     }
 
@@ -637,7 +630,6 @@ const gqlCollectionDispatchers = defineDispatchers({
       console.log(
         `Could not resolve destination path '${destinationPath}'. Skipping moveRequest dispatch.`
       )
-
       return {}
     }
 

packages/hoppscotch-app/newstore/environments.ts

@@ -39,7 +39,6 @@ const dispatchers = defineDispatchers({
       console.log(
         `Ignoring possibly invalid current environment index assignment (value: ${newIndex})`
       )
-
       return {}
     }
 

packages/hoppscotch-app/pages/index.vue

@@ -11,37 +11,40 @@
           <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
             <SmartTab
               :id="'params'"
-              :label="$t('tab.parameters')"
+              :label="`${$t('tab.parameters')}`"
               :selected="true"
-              :info="newActiveParamsCount$"
+              :info="`${newActiveParamsCount$}`"
             >
               <HttpParameters />
             </SmartTab>
 
-            <SmartTab :id="'bodyParams'" :label="$t('tab.body')">
+            <SmartTab :id="'bodyParams'" :label="`${$t('tab.body')}`">
               <HttpBody />
             </SmartTab>
 
             <SmartTab
               :id="'headers'"
-              :label="$t('tab.headers')"
+              :label="`${$t('tab.headers')}`"
-              :info="newActiveHeadersCount$"
+              :info="`${newActiveHeadersCount$}`"
             >
               <HttpHeaders />
             </SmartTab>
 
-            <SmartTab :id="'authorization'" :label="$t('tab.authorization')">
+            <SmartTab
+              :id="'authorization'"
+              :label="`${$t('tab.authorization')}`"
+            >
               <HttpAuthorization />
             </SmartTab>
 
             <SmartTab
               :id="'preRequestScript'"
-              :label="$t('tab.pre_request_script')"
+              :label="`${$t('tab.pre_request_script')}`"
             >
               <HttpPreRequestScript />
             </SmartTab>
 
-            <SmartTab :id="'tests'" :label="$t('tab.tests')">
+            <SmartTab :id="'tests'" :label="`${$t('tab.tests')}`">
               <HttpTests />
             </SmartTab>
           </SmartTabs>
@@ -60,15 +63,19 @@
     >
       <aside>
         <SmartTabs styles="sticky bg-primary z-10 top-0">
-          <SmartTab :id="'history'" :label="$t('tab.history')" :selected="true">
+          <SmartTab
+            :id="'history'"
+            :label="`${$t('tab.history')}`"
+            :selected="true"
+          >
             <History ref="historyComponent" :page="'rest'" />
           </SmartTab>
 
-          <SmartTab :id="'collections'" :label="$t('tab.collections')">
+          <SmartTab :id="'collections'" :label="`${$t('tab.collections')}`">
             <Collections />
           </SmartTab>
 
-          <SmartTab :id="'env'" :label="$t('environment.title')">
+          <SmartTab :id="'env'" :label="`${$t('environment.title')}`">
             <Environments />
           </SmartTab>
         </SmartTabs>
@@ -76,7 +83,7 @@
     </Pane>
     <SmartConfirmModal
       :show="confirmSync"
-      :title="$t('confirm.sync')"
+      :title="`${$t('confirm.sync')}`"
       @hide-modal="confirmSync = false"
       @resolve="syncRequest"
     />
@@ -250,7 +257,7 @@ export default defineComponent({
         restActiveParamsCount$.pipe(
           map((e) => {
             if (e === 0) return null
-            return e.toString()
+            return `${e}`
           })
         ),
         null
@@ -259,7 +266,7 @@ export default defineComponent({
         restActiveHeadersCount$.pipe(
           map((e) => {
             if (e === 0) return null
-            return e.toString()
+            return `${e}`
           })
         ),
         null

packages/hoppscotch-app/pages/settings.vue

@@ -13,7 +13,7 @@
         <div class="p-8 md:col-span-2">
           <div v-if="currentUser === null">
             <ButtonPrimary
-              :label="$t('auth.login')"
+              :label="`${$t('auth.login')}`"
               @click.native="showLogin = true"
             />
           </div>
@@ -333,8 +333,10 @@
       )}`"
       @hide-modal="confirmRemove = false"
       @resolve="
-        toggleSetting('TELEMETRY_ENABLED')
+        () => {
-        confirmRemove = false
+          toggleSetting('TELEMETRY_ENABLED')
+          confirmRemove = false
+        }
       "
     />
   </div>
@@ -451,7 +453,7 @@ export default defineComponent({
     resetProxy() {
       applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
       this.clearIcon = "check"
-      this.$toast.success(this.$t("state.cleared").toString(), {
+      this.$toast.success(`${this.$t("state.cleared")}`, {
         icon: "clear_all",
       })
       setTimeout(() => (this.clearIcon = "rotate-ccw"), 1000)