refactor: composables for i18n and toast

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

@@ -4,7 +4,7 @@
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="EXPAND_NAVIGATION ? $t('hide.sidebar') : $t('show.sidebar')"
+          :title="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
           svg="sidebar"
           class="transform"
           :class="{ '-rotate-180': !EXPAND_NAVIGATION }"
@@ -12,9 +12,9 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="`${
+          :title="`${ZEN_MODE ? t('action.turn_off') : t('action.turn_on')} ${t(
-            ZEN_MODE ? $t('action.turn_off') : $t('action.turn_on')
+            'layout.zen_mode'
-          } ${$t('layout.zen_mode')}`"
+          )}`"
           :svg="ZEN_MODE ? 'minimize' : 'maximize'"
           :class="{
             '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
@@ -36,20 +36,20 @@
               <ButtonSecondary
                 svg="help-circle"
                 class="!rounded-none"
-                :label="`${$t('app.help')}`"
+                :label="`${t('app.help')}`"
               />
             </template>
             <div class="flex flex-col">
               <SmartItem
                 svg="book"
-                :label="`${$t('app.documentation')}`"
+                :label="`${t('app.documentation')}`"
                 to="https://docs.hoppscotch.io"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="zap"
-                :label="`${$t('app.keyboard_shortcuts')}`"
+                :label="`${t('app.keyboard_shortcuts')}`"
                 @click.native="
                   () => {
                     showShortcuts = true
@@ -59,14 +59,14 @@
               />
               <SmartItem
                 svg="gift"
-                :label="`${$t('app.whats_new')}`"
+                :label="`${t('app.whats_new')}`"
                 to="https://docs.hoppscotch.io/changelog"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="message-circle"
-                :label="`${$t('app.chat_with_us')}`"
+                :label="`${t('app.chat_with_us')}`"
                 @click.native="
                   () => {
                     chatWithUs()
@@ -77,21 +77,21 @@
               <hr />
               <SmartItem
                 svg="github"
-                :label="`${$t('app.github')}`"
+                :label="`${t('app.github')}`"
                 to="https://github.com/hoppscotch/hoppscotch"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="twitter"
-                :label="`${$t('app.twitter')}`"
+                :label="`${t('app.twitter')}`"
                 to="https://hoppscotch.io/twitter"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="user-plus"
-                :label="`${$t('app.invite')}`"
+                :label="`${t('app.invite')}`"
                 @click.native="
                   () => {
                     showShare = true
@@ -101,14 +101,14 @@
               />
               <SmartItem
                 svg="lock"
-                :label="`${$t('app.terms_and_privacy')}`"
+                :label="`${t('app.terms_and_privacy')}`"
                 to="https://docs.hoppscotch.io/privacy"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
-              <!-- <SmartItem :label="$t('app.status')" /> -->
+              <!-- <SmartItem :label="t('app.status')" /> -->
               <div class="flex opacity-50 py-2 px-4">
-                {{ `${$t("app.name")} ${$t("app.version")}` }}
+                {{ `${t("app.name")} ${t("app.version")}` }}
               </div>
             </div>
           </tippy>
@@ -116,19 +116,19 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           svg="zap"
-          :title="$t('app.shortcuts')"
+          :title="t('app.shortcuts')"
           @click.native="showShortcuts = true"
         />
         <ButtonSecondary
           v-if="navigatorShare"
           v-tippy="{ theme: 'tooltip' }"
           svg="share-2"
-          :title="$t('request.share')"
+          :title="t('request.share')"
           @click.native="nativeShare()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="COLUMN_LAYOUT ? $t('layout.row') : $t('layout.column')"
+          :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
           svg="columns"
           class="transform"
           :class="{ 'rotate-90': !COLUMN_LAYOUT }"
@@ -142,7 +142,7 @@
         >
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
+            :title="SIDEBAR ? t('hide.sidebar') : t('show.sidebar')"
             svg="sidebar-open"
             class="transform"
             :class="{ 'rotate-180': !SIDEBAR }"
@@ -161,7 +161,9 @@ import { ref, watch } from "@nuxtjs/composition-api"
 import { defineActionHandler } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
 import { useSetting } from "~/newstore/settings"
+import { useI18n } from "~/helpers/utils/composables"
 
+const t = useI18n()
 const showShortcuts = ref(false)
 const showShare = ref(false)
 

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

@@ -15,7 +15,7 @@
     >
       <i class="opacity-75 pb-2 material-icons">manage_search</i>
       <span class="text-center">
-        {{ $t("state.nothing_found") }} "{{ search }}"
+        {{ t("state.nothing_found") }} "{{ search }}"
       </span>
     </div>
   </div>
@@ -26,6 +26,9 @@ import { computed, onUnmounted, onMounted } from "@nuxtjs/composition-api"
 import Fuse from "fuse.js"
 import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
 import { HoppAction } from "~/helpers/actions"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps<{
   input: Record<string, any>[]

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

@@ -15,21 +15,21 @@
         <ButtonSecondary
           id="installPWA"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('header.install_pwa')"
+          :title="t('header.install_pwa')"
           svg="download"
           class="rounded"
           @click.native="showInstallPrompt()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="`${$t('app.search')} <kbd>/</kbd>`"
+          :title="`${t('app.search')} <kbd>/</kbd>`"
           svg="search"
           class="rounded"
           @click.native="showSearch = true"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="`${$t('support.title')} <kbd>?</kbd>`"
+          :title="`${t('support.title')} <kbd>?</kbd>`"
           svg="life-buoy"
           class="rounded"
           @click.native="showSupport = true"
@@ -37,21 +37,21 @@
         <ButtonSecondary
           v-if="currentUser === null"
           svg="upload-cloud"
-          :label="$t('header.save_workspace')"
+          :label="t('header.save_workspace')"
           filled
           class="hidden md:flex"
           @click.native="showLogin = true"
         />
         <ButtonPrimary
           v-if="currentUser === null"
-          :label="$t('header.login')"
+          :label="t('header.login')"
           @click.native="showLogin = true"
         />
         <div v-else class="space-x-2 inline-flex items-center">
           <ButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('team.invite_tooltip')"
+            :title="t('team.invite_tooltip')"
-            :label="$t('team.invite')"
+            :label="t('team.invite')"
             svg="user-plus"
             class="
               !bg-green-500
@@ -78,7 +78,7 @@
                 <ButtonSecondary
                   v-else
                   v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('header.account')"
+                  :title="t('header.account')"
                   class="rounded"
                   svg="user"
                 />
@@ -86,13 +86,13 @@
               <SmartItem
                 to="/profile"
                 svg="user"
-                :label="$t('navigation.profile')"
+                :label="t('navigation.profile')"
                 @click.native="$refs.user.tippy().hide()"
               />
               <SmartItem
                 to="/settings"
                 svg="settings"
-                :label="$t('navigation.settings')"
+                :label="t('navigation.settings')"
                 @click.native="$refs.user.tippy().hide()"
               />
               <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
@@ -110,18 +110,20 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, useContext } from "@nuxtjs/composition-api"
+import { onMounted, ref } from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
 import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 
-const {
+const t = useI18n()
-  $toast,
+
-  app: { i18n },
+const toast = useToast()
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 /**
  * Once the PWA code is initialized, this holds a method
@@ -160,7 +162,7 @@ onMounted(() => {
 
   const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
   if (!cookiesAllowed) {
-    $toast.show(`${t("app.we_use_cookies")}`, {
+    toast.show(`${t("app.we_use_cookies")}`, {
       duration: 0,
       action: [
         {

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

@@ -4,17 +4,17 @@
       :on="PROXY_ENABLED"
       @change="toggleSettingKey('PROXY_ENABLED')"
     >
-      {{ $t("settings.proxy") }}
+      {{ t("settings.proxy") }}
     </SmartToggle>
     <SmartToggle
       :on="EXTENSIONS_ENABLED"
       @change="toggleSettingKey('EXTENSIONS_ENABLED')"
     >
-      {{ $t("settings.extensions") }}:
+      {{ t("settings.extensions") }}:
       {{
         extensionVersion != null
           ? `v${extensionVersion.major}.${extensionVersion.minor}`
-          : $t("settings.extension_ver_not_reported")
+          : t("settings.extension_ver_not_reported")
       }}
     </SmartToggle>
   </div>
@@ -25,6 +25,9 @@ import { defineComponent } from "@nuxtjs/composition-api"
 import { KeysMatching } from "~/types/ts-utils"
 import { SettingsType, toggleSetting, useSetting } from "~/newstore/settings"
 import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const PROXY_ENABLED = useSetting("PROXY_ENABLED")
 const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")

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

@@ -13,7 +13,7 @@
         type="text"
         autocomplete="off"
         name="command"
-        :placeholder="`${$t('app.type_a_command_search')}`"
+        :placeholder="`${t('app.type_a_command_search')}`"
         class="
           bg-transparent
           border-b border-dividerLight
@@ -45,7 +45,7 @@
           class="flex flex-col"
         >
           <h5 class="my-2 text-secondaryLight py-2 px-6">
-            {{ $t(map.section) }}
+            {{ t(map.section) }}
           </h5>
           <AppPowerSearchEntry
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
@@ -66,6 +66,9 @@ import { ref, computed, watch } from "@nuxtjs/composition-api"
 import { HoppAction, invokeAction } from "~/helpers/actions"
 import { spotlight as mappings, fuse } from "~/helpers/shortcuts"
 import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps<{
   show: boolean

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

@@ -24,7 +24,7 @@
       class="flex flex-1 mr-4 font-medium transition"
       :class="{ 'text-secondaryDark': active }"
     >
-      {{ $t(shortcut.label) }}
+      {{ t(shortcut.label) }}
     </span>
     <span
       v-for="(key, keyIndex) in shortcut.keys"
@@ -37,6 +37,10 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
 defineProps<{
   shortcut: Object
   active: Boolean

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

@@ -1,12 +1,12 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="$t('app.invite_your_friends')"
+    :title="t('app.invite_your_friends')"
     @close="hideModal"
   >
     <template #body>
       <p class="text-secondaryLight mb-8 px-2">
-        {{ $t("app.invite_description") }}
+        {{ t("app.invite_description") }}
       </p>
       <div class="flex flex-col space-y-2 px-2">
         <div class="grid gap-4 grid-cols-3">
@@ -25,7 +25,7 @@
           <button class="share-link" @click="copyAppLink">
             <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
             <span class="mt-3">
-              {{ $t("app.copy") }}
+              {{ t("app.copy") }}
             </span>
           </button>
         </div>
@@ -35,14 +35,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext } from "@nuxtjs/composition-api"
+import { ref } from "@nuxtjs/composition-api"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useI18n, useToast } from "~/helpers/utils/composables"
 
-const {
+const t = useI18n()
-  $toast,
+
-  app: { i18n },
+const toast = useToast()
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 defineProps<{
   show: Boolean
@@ -92,7 +91,7 @@ const platforms = [
 const copyAppLink = () => {
   copyToClipboard(url)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 

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

@@ -14,7 +14,7 @@
           justify-between
         "
       >
-        <h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
+        <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
         <div class="flex">
           <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
         </div>
@@ -35,7 +35,7 @@
               px-4
               focus-visible:border-divider
             "
-            :placeholder="`${$t('action.search')}`"
+            :placeholder="`${t('action.search')}`"
           />
         </div>
       </div>
@@ -46,7 +46,7 @@
           class="space-y-4 py-4 px-6"
         >
           <h1 class="font-semibold text-secondaryDark">
-            {{ $t(map.item.section) }}
+            {{ t(map.item.section) }}
           </h1>
           <AppShortcutsEntry
             v-for="(shortcut, index) in map.item.shortcuts"
@@ -66,7 +66,7 @@
         >
           <i class="opacity-75 pb-2 material-icons">manage_search</i>
           <span class="text-center">
-            {{ $t("state.nothing_found") }} "{{ filterText }}"
+            {{ t("state.nothing_found") }} "{{ filterText }}"
           </span>
         </div>
       </div>
@@ -85,7 +85,7 @@
           class="space-y-4 py-4 px-6"
         >
           <h1 class="font-semibold text-secondaryDark">
-            {{ $t(map.section) }}
+            {{ t(map.section) }}
           </h1>
           <AppShortcutsEntry
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
@@ -102,6 +102,9 @@
 import { computed, ref } from "@nuxtjs/composition-api"
 import Fuse from "fuse.js"
 import mappings from "~/helpers/shortcuts"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 defineProps<{
   show: boolean

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center">
     <span class="flex flex-1 mr-4">
-      {{ $t(shortcut.label) }}
+      {{ t(shortcut.label) }}
     </span>
     <span
       v-for="(key, index) in shortcut.keys"
@@ -14,6 +14,10 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
 defineProps<{
   shortcut: Object
 }>()

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

@@ -27,14 +27,11 @@
 </template>
 
 <script setup lang="ts">
-import { useContext } from "@nuxtjs/composition-api"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 import { useSetting } from "~/newstore/settings"
+import { useI18n } from "~/helpers/utils/composables"
 
-const {
+const t = useI18n()
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const windowInnerWidth = useWindowSize()
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")

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

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="$t('support.title')"
+    :title="t('support.title')"
     max-width="sm:max-w-md"
     @close="$emit('hide-modal')"
   >
@@ -9,9 +9,9 @@
       <div class="flex flex-col space-y-2">
         <SmartItem
           svg="book"
-          :label="$t('app.documentation')"
+          :label="t('app.documentation')"
           to="https://docs.hoppscotch.io"
-          :description="$t('support.documentation')"
+          :description="t('support.documentation')"
           info-icon="chevron_right"
           active
           blank
@@ -19,17 +19,17 @@
         />
         <SmartItem
           svg="zap"
-          :label="$t('app.keyboard_shortcuts')"
+          :label="t('app.keyboard_shortcuts')"
-          :description="$t('support.shortcuts')"
+          :description="t('support.shortcuts')"
           info-icon="chevron_right"
           active
           @click.native="showShortcuts()"
         />
         <SmartItem
           svg="gift"
-          :label="$t('app.whats_new')"
+          :label="t('app.whats_new')"
           to="https://docs.hoppscotch.io/changelog"
-          :description="$t('support.changelog')"
+          :description="t('support.changelog')"
           info-icon="chevron_right"
           active
           blank
@@ -37,28 +37,28 @@
         />
         <SmartItem
           svg="message-circle"
-          :label="$t('app.chat_with_us')"
+          :label="t('app.chat_with_us')"
-          :description="$t('support.chat')"
+          :description="t('support.chat')"
           info-icon="chevron_right"
           active
           @click.native="chatWithUs()"
         />
         <SmartItem
           svg="brands/discord"
-          :label="$t('app.join_discord_community')"
+          :label="t('app.join_discord_community')"
           to="https://hoppscotch.io/discord"
           blank
-          :description="$t('support.community')"
+          :description="t('support.community')"
           info-icon="chevron_right"
           active
           @click.native="hideModal()"
         />
         <SmartItem
           svg="brands/twitter"
-          :label="$t('app.twitter')"
+          :label="t('app.twitter')"
           to="https://hoppscotch.io/twitter"
           blank
-          :description="$t('support.twitter')"
+          :description="t('support.twitter')"
           info-icon="chevron_right"
           active
           @click.native="hideModal()"
@@ -71,6 +71,9 @@
 <script setup lang="ts">
 import { invokeAction } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 defineProps<{
   show: Boolean

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

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="`${$t('collection.save_as')}`"
+    :title="`${t('collection.save_as')}`"
     @close="hideModal"
   >
     <template #body>
@@ -18,11 +18,11 @@
             @keyup.enter="saveRequestAs"
           />
           <label for="selectLabelSaveReq">
-            {{ $t("request.name") }}
+            {{ t("request.name") }}
           </label>
         </div>
         <label class="p-4">
-          {{ $t("collection.select_location") }}
+          {{ t("collection.select_location") }}
         </label>
         <CollectionsGraphql
           v-if="mode === 'graphql'"
@@ -45,11 +45,11 @@
     <template #footer>
       <span>
         <ButtonPrimary
-          :label="`${$t('action.save')}`"
+          :label="`${t('action.save')}`"
           @click.native="saveRequestAs"
         />
         <ButtonSecondary
-          :label="`${$t('action.cancel')}`"
+          :label="`${t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, useContext, watch } from "@nuxtjs/composition-api"
+import { reactive, ref, watch } from "@nuxtjs/composition-api"
 import { isHoppRESTRequest } from "~/helpers/types/HoppRESTRequest"
 import {
   editGraphqlRequest,
@@ -75,6 +75,9 @@ import {
 import * as teamUtils from "~/helpers/teams/utils"
 import { apolloClient } from "~/helpers/apollo"
 import { HoppGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 type CollectionType =
   | {
@@ -137,12 +140,7 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const {
+const toast = useToast()
-  $toast,
-  app: { i18n },
-} = useContext()
-
-const t = i18n.t.bind(i18n)
 
 // TODO: Use a better implementation with computed ?
 // This implementation can't work across updates to mode prop (which won't happen tho)
@@ -194,11 +192,11 @@ const hideModal = () => {
 
 const saveRequestAs = async () => {
   if (!requestName.value) {
-    $toast.error(`${t("error.empty_req_name")}`)
+    toast.error(`${t("error.empty_req_name")}`)
     return
   }
   if (picked.value === null) {
-    $toast.error(`${t("collection.select")}`)
+    toast.error(`${t("collection.select")}`)
     return
   }
 
@@ -279,7 +277,7 @@ const saveRequestAs = async () => {
         requestSaved()
       })
       .catch((error) => {
-        $toast.error(`${t("profile.no_permission")}`)
+        toast.error(`${t("profile.no_permission")}`)
         throw new Error(error)
       })
 
@@ -314,7 +312,7 @@ const saveRequestAs = async () => {
 
       requestSaved()
     } catch (error) {
-      $toast.error(`${t("profile.no_permission")}`)
+      toast.error(`${t("profile.no_permission")}`)
       console.error(error)
     }
   } else if (picked.value.pickedType === "teams-collection") {
@@ -344,7 +342,7 @@ const saveRequestAs = async () => {
 
       requestSaved()
     } catch (error) {
-      $toast.error(`${t("profile.no_permission")}`)
+      toast.error(`${t("profile.no_permission")}`)
       console.error(error)
     }
   } else if (picked.value.pickedType === "gql-my-request") {
@@ -376,7 +374,7 @@ const saveRequestAs = async () => {
 }
 
 const requestSaved = () => {
-  $toast.success(`${t("request.added")}`)
+  toast.success(`${t("request.added")}`)
   hideModal()
 }
 

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

@@ -18,14 +18,14 @@
           hover:border-dividerDark
           focus-visible:bg-transparent focus-visible:border-dividerDark
         "
-        :placeholder="$t('request.url')"
+        :placeholder="`${t('request.url')}`"
         :disabled="connected"
         @keyup.enter="onConnectClick"
       />
       <ButtonPrimary
         id="get"
         name="get"
-        :label="!connected ? $t('action.connect') : $t('action.disconnect')"
+        :label="!connected ? t('action.connect') : t('action.disconnect')"
         class="w-32"
         @click.native="onConnectClick"
       />
@@ -37,9 +37,15 @@
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { getCurrentStrategyID } from "~/helpers/network"
-import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useStream,
+  useI18n,
+} from "~/helpers/utils/composables"
 import { gqlHeaders$, gqlURL$, setGQLURL } from "~/newstore/GQLSession"
 
+const t = useI18n()
+
 const props = defineProps<{
   conn: GQLConnection
 }>()

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

@@ -3,20 +3,20 @@
     <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
       <template #actions>
         <ButtonSecondary
-          :label="`${$t('request.run')}`"
+          :label="`${t('request.run')}`"
           svg="play"
           class="rounded-none !text-accent"
           @click.native="runQuery()"
         />
         <ButtonSecondary
           ref="saveRequest"
-          :label="`${$t('request.save')}`"
+          :label="`${t('request.save')}`"
           class="rounded-none"
           @click.native="saveRequest"
         />
       </template>
 
-      <SmartTab :id="'query'" :label="`${$t('tab.query')}`" :selected="true">
+      <SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
         <AppSection label="query">
           <div
             class="
@@ -33,25 +33,25 @@
             "
           >
             <label class="font-semibold text-secondaryLight">
-              {{ $t("request.query") }}
+              {{ t("request.query") }}
             </label>
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 to="https://docs.hoppscotch.io"
                 blank
-                :title="$t('app.wiki')"
+                :title="t('app.wiki')"
                 svg="help-circle"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.prettify')"
+                :title="t('action.prettify')"
                 :svg="`${prettifyQueryIcon}`"
                 @click.native="prettifyQuery"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.copy')"
+                :title="t('action.copy')"
                 :svg="`${copyQueryIcon}`"
                 @click.native="copyQuery"
               />
@@ -61,7 +61,7 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'variables'" :label="`${$t('tab.variables')}`">
+      <SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
         <AppSection label="variables">
           <div
             class="
@@ -77,19 +77,19 @@
             "
           >
             <label class="font-semibold text-secondaryLight">
-              {{ $t("request.variables") }}
+              {{ t("request.variables") }}
             </label>
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 to="https://docs.hoppscotch.io"
                 blank
-                :title="$t('app.wiki')"
+                :title="t('app.wiki')"
                 svg="help-circle"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.copy')"
+                :title="t('action.copy')"
                 :svg="`${copyVariablesIcon}`"
                 @click.native="copyVariables"
               />
@@ -99,7 +99,7 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'headers'" :label="`${$t('tab.headers')}`">
+      <SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
         <AppSection label="headers">
           <div
             class="
@@ -115,32 +115,32 @@
             "
           >
             <label class="font-semibold text-secondaryLight">
-              {{ $t("tab.headers") }}
+              {{ t("tab.headers") }}
             </label>
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 to="https://docs.hoppscotch.io"
                 blank
-                :title="$t('app.wiki')"
+                :title="t('app.wiki')"
                 svg="help-circle"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.clear_all')"
+                :title="t('action.clear_all')"
                 svg="trash-2"
                 @click.native="clearContent()"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('state.bulk_mode')"
+                :title="t('state.bulk_mode')"
                 svg="edit"
                 :class="{ '!text-accent': bulkMode }"
                 @click.native="bulkMode = !bulkMode"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('add.new')"
+                :title="t('add.new')"
                 svg="plus"
                 :disabled="bulkMode"
                 @click.native="addRequestHeader"
@@ -159,7 +159,7 @@
               "
             >
               <SmartAutoComplete
-                :placeholder="`${$t('count.header', { count: index + 1 })}`"
+                :placeholder="`${t('count.header', { count: index + 1 })}`"
                 :source="commonHeaders"
                 :spellcheck="false"
                 :value="header.key"
@@ -183,7 +183,7 @@
               />
               <input
                 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 ${String(index)}`"
                 :value="header.value"
                 autofocus
@@ -201,9 +201,9 @@
                   :title="
                     header.hasOwnProperty('active')
                       ? header.active
-                        ? $t('action.turn_off')
+                        ? t('action.turn_off')
-                        : $t('action.turn_on')
+                        : t('action.turn_on')
-                      : $t('action.turn_off')
+                      : t('action.turn_off')
                   "
                   :svg="
                     header.hasOwnProperty('active')
@@ -225,7 +225,7 @@
               <span>
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('action.remove')"
+                  :title="t('action.remove')"
                   svg="trash"
                   color="red"
                   @click.native="removeRequestHeader(index)"
@@ -253,13 +253,13 @@
                   w-16
                   inline-flex
                 "
-                :alt="$t('empty.headers')"
+                :alt="`${t('empty.headers')}`"
               />
               <span class="text-center pb-4">
-                {{ $t("empty.headers") }}
+                {{ t("empty.headers") }}
               </span>
               <ButtonSecondary
-                :label="`${$t('add.new')}`"
+                :label="`${t('add.new')}`"
                 filled
                 svg="plus"
                 class="mb-4"
@@ -280,7 +280,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, useContext, watch } from "@nuxtjs/composition-api"
+import { onMounted, ref, watch } from "@nuxtjs/composition-api"
 import clone from "lodash/clone"
 import * as gql from "graphql"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -288,6 +288,8 @@ import {
   useNuxt,
   useReadonlyStream,
   useStream,
+  useI18n,
+  useToast,
 } from "~/helpers/utils/composables"
 import {
   addGQLHeader,
@@ -314,15 +316,14 @@ import jsonLinter from "~/helpers/editor/linting/json"
 import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
 import queryCompleter from "~/helpers/editor/completion/gqlQuery"
 
+const t = useI18n()
+
 const props = defineProps<{
   conn: GQLConnection
 }>()
 
-const {
+const toast = useToast()
-  $toast,
+
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 const nuxt = useNuxt()
 
 const bulkMode = ref(false)
@@ -337,7 +338,7 @@ watch(bulkHeaders, () => {
     }))
     setGQLHeaders(transformation as GQLHeader[])
   } catch (e) {
-    $toast.error(`${t("error.something_went_wrong")}`)
+    toast.error(`${t("error.something_went_wrong")}`)
     console.error(e)
   }
 })
@@ -426,7 +427,7 @@ onMounted(() => {
 const copyQuery = () => {
   copyToClipboard(gqlQueryString.value)
   copyQueryIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
 }
 
@@ -470,12 +471,12 @@ const runQuery = async () => {
       })
     )
 
-    $toast.success(`${t("state.finished_in", { duration })}`)
+    toast.success(`${t("state.finished_in", { duration })}`)
   } catch (e: any) {
     response.value = `${e}`
     nuxt.value.$loading.finish()
 
-    $toast.error(
+    toast.error(
       `${t("error.something_went_wrong")}. ${t("error.check_console_details")}`,
       {}
     )
@@ -497,7 +498,7 @@ const prettifyQuery = () => {
     gqlQueryString.value = gql.print(gql.parse(gqlQueryString.value))
     prettifyQueryIcon.value = "check"
   } catch (e) {
-    $toast.error(`${t("error.gql_prettify_invalid_query")}`)
+    toast.error(`${t("error.gql_prettify_invalid_query")}`)
     prettifyQueryIcon.value = "info"
   }
   setTimeout(() => (prettifyQueryIcon.value = "wand"), 1000)
@@ -510,7 +511,7 @@ const saveRequest = () => {
 const copyVariables = () => {
   copyToClipboard(variableString.value)
   copyVariablesIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
 }
 
@@ -538,7 +539,7 @@ const removeRequestHeader = (index: number) => {
 
   const deletedItem = headersBeforeDeletion[index]
   if (deletedItem.key || deletedItem.value) {
-    $toast.success(`${t("state.deleted")}`, {
+    toast.success(`${t("state.deleted")}`, {
       action: [
         {
           text: `${t("action.undo")}`,

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

@@ -5,7 +5,7 @@
       class="flex flex-col p-4 items-center justify-center"
     >
       <SmartSpinner class="my-4" />
-      <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
+      <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
     <div v-else-if="responseString">
       <div
@@ -22,12 +22,12 @@
         "
       >
         <label class="font-semibold text-secondaryLight">
-          {{ $t("response.title") }}
+          {{ t("response.title") }}
         </label>
         <div class="flex">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('state.linewrap')"
+            :title="t('state.linewrap')"
             :class="{ '!text-accent': linewrapEnabled }"
             svg="corner-down-left"
             @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -35,14 +35,14 @@
           <ButtonSecondary
             ref="downloadResponse"
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('action.download_file')"
+            :title="t('action.download_file')"
             :svg="downloadResponseIcon"
             @click.native="downloadResponse"
           />
           <ButtonSecondary
             ref="copyResponseButton"
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('action.copy')"
+            :title="t('action.copy')"
             :svg="copyResponseIcon"
             @click.native="copyResponse"
           />
@@ -63,10 +63,10 @@
       <div class="flex space-x-2 pb-4 my-4">
         <div class="flex flex-col space-y-4 text-right items-end">
           <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.command_menu") }}
+            {{ t("shortcut.general.command_menu") }}
           </span>
           <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.help_menu") }}
+            {{ t("shortcut.general.help_menu") }}
           </span>
         </div>
         <div class="flex flex-col space-y-4">
@@ -79,7 +79,7 @@
         </div>
       </div>
       <ButtonSecondary
-        :label="`${$t('app.documentation')}`"
+        :label="`${t('app.documentation')}`"
         to="https://docs.hoppscotch.io"
         svg="external-link"
         blank
@@ -91,17 +91,19 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, useContext } from "@nuxtjs/composition-api"
+import { reactive, ref } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 import { gqlResponse$ } from "~/newstore/GQLSession"
 
-const {
+const t = useI18n()
-  $toast,
+
-  app: { i18n },
+const toast = useToast()
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const responseString = useReadonlyStream(gqlResponse$, "")
 
@@ -128,7 +130,7 @@ const copyResponseIcon = ref("copy")
 const copyResponse = () => {
   copyToClipboard(responseString.value!)
   copyResponseIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
 }
 
@@ -142,7 +144,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadResponseIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`)
+  toast.success(`${t("state.download_started")}`)
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)

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

@@ -3,7 +3,7 @@
     <SmartTab
       :id="'history'"
       icon="clock"
-      :label="`${$t('tab.history')}`"
+      :label="`${t('tab.history')}`"
       :selected="true"
     >
       <History
@@ -16,7 +16,7 @@
     <SmartTab
       :id="'collections'"
       icon="folder"
-      :label="`${$t('tab.collections')}`"
+      :label="`${t('tab.collections')}`"
     >
       <CollectionsGraphql />
     </SmartTab>
@@ -24,7 +24,7 @@
     <SmartTab
       :id="'docs'"
       icon="book-open"
-      :label="`${$t('tab.documentation')}`"
+      :label="`${t('tab.documentation')}`"
     >
       <AppSection label="docs">
         <div
@@ -53,10 +53,10 @@
               w-16
               inline-flex
             "
-            :alt="$t('empty.documentation')"
+            :alt="`${t('empty.documentation')}`"
           />
           <span class="text-center mb-4">
-            {{ $t("empty.documentation") }}
+            {{ t("empty.documentation") }}
           </span>
         </div>
         <div v-else>
@@ -65,7 +65,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">
@@ -73,7 +73,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 to="https://docs.hoppscotch.io/quickstart/graphql"
                 blank
-                :title="$t('app.wiki')"
+                :title="t('app.wiki')"
                 svg="help-circle"
               />
             </div>
@@ -86,7 +86,7 @@
               <SmartTab
                 v-if="queryFields.length > 0"
                 :id="'queries'"
-                :label="`${$t('tab.queries')}`"
+                :label="`${t('tab.queries')}`"
                 :selected="true"
                 class="divide-y divide-dividerLight"
               >
@@ -101,7 +101,7 @@
               <SmartTab
                 v-if="mutationFields.length > 0"
                 :id="'mutations'"
-                :label="`${$t('graphql.mutations')}`"
+                :label="`${t('graphql.mutations')}`"
                 class="divide-y divide-dividerLight"
               >
                 <GraphqlField
@@ -115,7 +115,7 @@
               <SmartTab
                 v-if="subscriptionFields.length > 0"
                 :id="'subscriptions'"
-                :label="`${$t('graphql.subscriptions')}`"
+                :label="`${t('graphql.subscriptions')}`"
                 class="divide-y divide-dividerLight"
               >
                 <GraphqlField
@@ -130,7 +130,7 @@
                 v-if="graphqlTypes.length > 0"
                 :id="'types'"
                 ref="typesTab"
-                :label="`${$t('tab.types')}`"
+                :label="`${t('tab.types')}`"
                 class="divide-y divide-dividerLight"
               >
                 <GraphqlType
@@ -149,7 +149,7 @@
       </AppSection>
     </SmartTab>
 
-    <SmartTab :id="'schema'" icon="box" :label="`${$t('tab.schema')}`">
+    <SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
       <AppSection ref="schema" label="schema">
         <div
           v-if="schemaString"
@@ -166,19 +166,19 @@
           "
         >
           <label class="font-semibold text-secondaryLight">
-            {{ $t("graphql.schema") }}
+            {{ t("graphql.schema") }}
           </label>
           <div class="flex">
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               to="https://docs.hoppscotch.io/quickstart/graphql"
               blank
-              :title="$t('app.wiki')"
+              :title="t('app.wiki')"
               svg="help-circle"
             />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              :title="$t('state.linewrap')"
+              :title="t('state.linewrap')"
               :class="{ '!text-accent': linewrapEnabled }"
               svg="corner-down-left"
               @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -186,14 +186,14 @@
             <ButtonSecondary
               ref="downloadSchema"
               v-tippy="{ theme: 'tooltip' }"
-              :title="$t('action.download_file')"
+              :title="t('action.download_file')"
               :svg="downloadSchemaIcon"
               @click.native="downloadSchema"
             />
             <ButtonSecondary
               ref="copySchemaCode"
               v-tippy="{ theme: 'tooltip' }"
-              :title="$t('action.copy')"
+              :title="t('action.copy')"
               :svg="copySchemaIcon"
               @click.native="copySchema"
             />
@@ -221,10 +221,10 @@
               w-16
               inline-flex
             "
-            :alt="$t('empty.schema')"
+            :alt="`${t('empty.schema')}`"
           />
           <span class="text-center mb-4">
-            {{ $t("empty.schema") }}
+            {{ t("empty.schema") }}
           </span>
         </div>
       </AppSection>
@@ -233,20 +233,18 @@
 </template>
 
 <script setup lang="ts">
-import {
+import { computed, nextTick, reactive, ref } from "@nuxtjs/composition-api"
-  computed,
-  nextTick,
-  reactive,
-  ref,
-  useContext,
-} from "@nuxtjs/composition-api"
 import { GraphQLField, GraphQLType } from "graphql"
 import { map } from "rxjs/operators"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { GQLHeader } from "~/helpers/types/HoppGQLRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 import {
   setGQLHeaders,
   setGQLQuery,
@@ -255,6 +253,8 @@ import {
   setGQLVariables,
 } from "~/newstore/GQLSession"
 
+const t = useI18n()
+
 function isTextFoundInGraphqlFieldObject(
   text: string,
   field: GraphQLField<any, any>
@@ -321,11 +321,7 @@ const props = defineProps<{
   conn: GQLConnection
 }>()
 
-const {
+const toast = useToast()
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const queryFields = useReadonlyStream(
   props.conn.queryFields$.pipe(map((x) => x ?? [])),
@@ -449,7 +445,7 @@ const downloadSchema = () => {
   document.body.appendChild(a)
   a.click()
   downloadSchemaIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`)
+  toast.success(`${t("state.download_started")}`)
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)

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

@@ -49,13 +49,9 @@
 </template>
 
 <script lang="ts">
-import {
+import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
-  computed,
-  defineComponent,
-  PropType,
-  useContext,
-} from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
+import { useI18n } from "~/helpers/utils/composables"
 import { RESTHistoryEntry } from "~/newstore/history"
 
 export default defineComponent({
@@ -64,10 +60,7 @@ export default defineComponent({
     showMore: Boolean,
   },
   setup(props) {
-    const {
+    const t = useI18n()
-      app: { i18n },
-    } = useContext()
-    const $t = i18n.t.bind(i18n)
 
     const duration = computed(() => {
       if (props.entry.responseMeta.duration) {
@@ -75,9 +68,9 @@ export default defineComponent({
         if (!responseDuration) return ""
 
         return responseDuration > 0
-          ? `${$t("request.duration")}: ${responseDuration}ms`
+          ? `${t("request.duration")}: ${responseDuration}ms`
-          : $t("error.no_duration")
+          : t("error.no_duration")
-      } else return $t("error.no_duration")
+      } else return t("error.no_duration")
     })
 
     const entryStatus = computed(() => {

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

@@ -7,7 +7,7 @@
     <template #body>
       <div class="flex flex-col px-2">
         <label for="requestType" class="px-4 pb-4">
-          {{ $t("request.choose_language") }}
+          {{ t("request.choose_language") }}
         </label>
         <tippy ref="options" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
@@ -62,13 +62,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
+import { computed, ref, watch } from "@nuxtjs/composition-api"
 import { codegens, generateCodegenContext } from "~/helpers/codegen/codegen"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
 import { getCurrentEnvironment } from "~/newstore/environments"
 import { getRESTRequest } from "~/newstore/RESTSession"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps<{
   show: boolean
@@ -78,11 +81,7 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const {
+const toast = useToast()
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const options = ref<any | null>(null)
 
@@ -126,7 +125,7 @@ const hideModal = () => emit("hide-modal")
 const copyRequestCode = () => {
   copyToClipboard(requestCode.value)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

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

@@ -14,32 +14,32 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("request.header_list") }}
+        {{ t("request.header_list") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/headers"
           blank
-          :title="$t('app.wiki')"
+          :title="t('app.wiki')"
           svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.clear_all')"
+          :title="t('action.clear_all')"
           svg="trash-2"
           @click.native="clearContent()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('state.bulk_mode')"
+          :title="t('state.bulk_mode')"
           svg="edit"
           :class="{ '!text-accent': bulkMode }"
           @click.native="bulkMode = !bulkMode"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('add.new')"
+          :title="t('add.new')"
           svg="plus"
           :disabled="bulkMode"
           @click.native="addHeader"
@@ -54,7 +54,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"
@@ -78,7 +78,7 @@
         />
         <SmartEnvInput
           v-model="header.value"
-          :placeholder="`${$t('count.value', { count: index + 1 })}`"
+          :placeholder="`${t('count.value', { count: index + 1 })}`"
           styles="
             bg-transparent
             flex
@@ -100,9 +100,9 @@
             :title="
               header.hasOwnProperty('active')
                 ? header.active
-                  ? $t('action.turn_off')
+                  ? t('action.turn_off')
-                  : $t('action.turn_on')
+                  : t('action.turn_on')
-                : $t('action.turn_off')
+                : t('action.turn_off')
             "
             :svg="
               header.hasOwnProperty('active')
@@ -126,7 +126,7 @@
         <span>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('action.remove')"
+            :title="t('action.remove')"
             svg="trash"
             color="red"
             @click.native="deleteHeader(index)"
@@ -154,14 +154,14 @@
             w-16
             inline-flex
           "
-          :alt="$t('empty.headers')"
+          :alt="`${t('empty.headers')}`"
         />
         <span class="text-center pb-4">
-          {{ $t("empty.headers") }}
+          {{ t("empty.headers") }}
         </span>
         <ButtonSecondary
           filled
-          :label="`${$t('add.new')}`"
+          :label="`${t('add.new')}`"
           svg="plus"
           class="mb-4"
           @click.native="addHeader"
@@ -172,7 +172,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUpdate, ref, useContext, watch } from "@nuxtjs/composition-api"
+import { onBeforeUpdate, ref, watch } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
   addRESTHeader,
@@ -183,14 +183,16 @@ import {
   updateRESTHeader,
 } from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 
-const {
+const t = useI18n()
-  $toast,
+
-  app: { i18n },
+const toast = useToast()
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const bulkMode = ref(false)
 const bulkHeaders = ref("")
@@ -214,7 +216,7 @@ watch(bulkHeaders, () => {
     }))
     setRESTHeaders(transformation as HoppRESTHeader[])
   } catch (e) {
-    $toast.error(`${t("error.something_went_wrong")}`)
+    toast.error(`${t("error.something_went_wrong")}`)
     console.error(e)
   }
 })
@@ -276,7 +278,7 @@ const deleteHeader = (index: number) => {
 
   const deletedItem = headersBeforeDeletion[index]
   if (deletedItem.key || deletedItem.value) {
-    $toast.success(`${t("state.deleted")}`, {
+    toast.success(`${t("state.deleted")}`, {
       action: [
         {
           text: `${t("action.undo")}`,

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="`${$t('import.curl')}`" @close="hideModal">
+  <SmartModal v-if="show" :title="`${t('import.curl')}`" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div ref="curlEditor" class="border border-dividerLight rounded"></div>
@@ -8,11 +8,11 @@
     <template #footer>
       <span class="flex">
         <ButtonPrimary
-          :label="`${$t('import.title')}`"
+          :label="`${t('import.title')}`"
           @click.native="handleImport"
         />
         <ButtonSecondary
-          :label="`${$t('action.cancel')}`"
+          :label="`${t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext } from "@nuxtjs/composition-api"
+import { ref } from "@nuxtjs/composition-api"
 import parseCurlCommand from "~/helpers/curlparser"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
@@ -30,12 +30,11 @@ import {
   makeRESTRequest,
 } from "~/helpers/types/HoppRESTRequest"
 import { setRESTRequest } from "~/newstore/RESTSession"
+import { useI18n, useToast } from "~/helpers/utils/composables"
 
-const {
+const t = useI18n()
-  $toast,
+
-  app: { i18n },
+const toast = useToast()
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const curl = ref("")
 
@@ -123,7 +122,7 @@ const handleImport = () => {
     )
   } catch (e) {
     console.error(e)
-    $toast.error(`${t("error.curl_invalid_format")}`)
+    toast.error(`${t("error.curl_invalid_format")}`)
   }
   hideModal()
 }

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>
@@ -56,19 +56,21 @@
 </template>
 
 <script lang="ts">
-import { Ref, useContext } from "@nuxtjs/composition-api"
+import { Ref } from "@nuxtjs/composition-api"
-import { pluckRef, useStream } from "~/helpers/utils/composables"
+import {
+  pluckRef,
+  useI18n,
+  useStream,
+  useToast,
+} from "~/helpers/utils/composables"
 import { HoppRESTAuthOAuth2 } from "~/helpers/types/HoppRESTAuth"
 import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
 import { tokenRequest } from "~/helpers/oauth"
 
 export default {
   setup() {
-    const {
+    const t = useI18n()
-      $toast,
+    const toast = useToast()
-      app: { i18n },
-    } = useContext()
-    const $t = i18n.t.bind(i18n)
 
     const auth = useStream(
       restAuth$,
@@ -97,7 +99,7 @@ export default {
         oidcDiscoveryURL.value === "" &&
         (authURL.value === "" || accessTokenURL.value === "")
       ) {
-        $toast.error(`${$t("complete_config_urls")}`)
+        toast.error(`${t("complete_config_urls")}`)
         return
       }
       try {
@@ -111,7 +113,7 @@ export default {
         }
         await tokenRequest(tokenReqParams)
       } catch (e) {
-        $toast.error(`${e}`)
+        toast.error(`${e}`)
       }
     }
 

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

@@ -14,32 +14,32 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("request.parameter_list") }}
+        {{ t("request.parameter_list") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/parameters"
           blank
-          :title="$t('app.wiki')"
+          :title="t('app.wiki')"
           svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.clear_all')"
+          :title="t('action.clear_all')"
           svg="trash-2"
           @click.native="clearContent()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('state.bulk_mode')"
+          :title="t('state.bulk_mode')"
           svg="edit"
           :class="{ '!text-accent': bulkMode }"
           @click.native="bulkMode = !bulkMode"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('add.new')"
+          :title="t('add.new')"
           svg="plus"
           :disabled="bulkMode"
           @click.native="addParam"
@@ -55,7 +55,7 @@
       >
         <SmartEnvInput
           v-model="param.key"
-          :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
+          :placeholder="`${t('count.parameter', { count: index + 1 })}`"
           styles="
             bg-transparent
             flex
@@ -73,7 +73,7 @@
         />
         <SmartEnvInput
           v-model="param.value"
-          :placeholder="`${$t('count.value', { count: index + 1 })}`"
+          :placeholder="`${t('count.value', { count: index + 1 })}`"
           styles="
             bg-transparent
             flex
@@ -95,9 +95,9 @@
             :title="
               param.hasOwnProperty('active')
                 ? param.active
-                  ? $t('action.turn_off')
+                  ? t('action.turn_off')
-                  : $t('action.turn_on')
+                  : t('action.turn_on')
-                : $t('action.turn_off')
+                : t('action.turn_off')
             "
             :svg="
               param.hasOwnProperty('active')
@@ -119,7 +119,7 @@
         <span>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('action.remove')"
+            :title="t('action.remove')"
             svg="trash"
             color="red"
             @click.native="deleteParam(index)"
@@ -147,13 +147,13 @@
             w-16
             inline-flex
           "
-          :alt="$t('empty.parameters')"
+          :alt="`${t('empty.parameters')}`"
         />
         <span class="text-center pb-4">
-          {{ $t("empty.parameters") }}
+          {{ t("empty.parameters") }}
         </span>
         <ButtonSecondary
-          :label="`${$t('add.new')}`"
+          :label="`${t('add.new')}`"
           svg="plus"
           filled
           class="mb-4"
@@ -165,10 +165,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
+import { ref, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 import {
   restParams$,
   addRESTParam,
@@ -178,11 +182,9 @@ import {
   setRESTParams,
 } from "~/newstore/RESTSession"
 
-const {
+const t = useI18n()
-  $toast,
+
-  app: { i18n },
+const toast = useToast()
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const bulkMode = ref(false)
 const bulkParams = ref("")
@@ -196,7 +198,7 @@ watch(bulkParams, () => {
     }))
     setRESTParams(transformation as HoppRESTParam[])
   } catch (e) {
-    $toast.error(`${t("error.something_went_wrong")}`)
+    toast.error(`${t("error.something_went_wrong")}`)
     console.error(e)
   }
 })
@@ -269,7 +271,7 @@ const deleteParam = (index: number) => {
 
   const deletedItem = parametersBeforeDeletion[index]
   if (deletedItem.key || deletedItem.value) {
-    $toast.success(`${t("state.deleted")}`, {
+    toast.success(`${t("state.deleted")}`, {
       action: [
         {
           text: `${t("action.undo")}`,

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
@@ -14,26 +14,26 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("preRequest.javascript_code") }}
+        {{ t("preRequest.javascript_code") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank
-          :title="$t('app.wiki')"
+          :title="t('app.wiki')"
           svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('state.linewrap')"
+          :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.clear')"
+          :title="t('action.clear')"
           svg="trash-2"
           @click.native="clearContent"
         />
@@ -57,15 +57,15 @@
         "
       >
         <div class="text-secondaryLight pb-2">
-          {{ $t("helpers.pre_request_script") }}
+          {{ 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
         />
         <h4 class="font-bold text-secondaryLight pt-6">
-          {{ $t("preRequest.snippets") }}
+          {{ t("preRequest.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">
           <TabSecondary
@@ -82,17 +82,15 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, useContext } from "@nuxtjs/composition-api"
+import { reactive, ref } from "@nuxtjs/composition-api"
 import { usePreRequestScript } from "~/newstore/RESTSession"
 import snippets from "~/helpers/preRequestScriptSnippets"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/preRequest"
 import completer from "~/helpers/editor/completion/preRequest"
+import { useI18n } from "~/helpers/utils/composables"
 
-const {
+const t = useI18n()
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const preRequestScript = usePreRequestScript()
 

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

@@ -14,26 +14,26 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("request.raw_body") }}
+        {{ t("request.raw_body") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/body"
           blank
-          :title="$t('app.wiki')"
+          :title="t('app.wiki')"
           svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('state.linewrap')"
+          :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.clear')"
+          :title="t('action.clear')"
           svg="trash-2"
           @click.native="clearContent"
         />
@@ -41,14 +41,14 @@
           v-if="contentType && contentType.endsWith('json')"
           ref="prettifyRequest"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.prettify')"
+          :title="t('action.prettify')"
           :svg="prettifyIcon"
           @click.native="prettifyRequestBody"
         />
         <label for="payload">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('import.json')"
+            :title="t('import.json')"
             svg="file-plus"
             @click.native="$refs.payload.click()"
           />
@@ -67,21 +67,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref, useContext } from "@nuxtjs/composition-api"
+import { computed, reactive, ref } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { getEditorLangForMimeType } from "~/helpers/editorutils"
-import { pluckRef } from "~/helpers/utils/composables"
+import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
 import { useRESTRequestBody } from "~/newstore/RESTSession"
 
+const t = useI18n()
+
 const props = defineProps<{
   contentType: string
 }>()
 
-const {
+const toast = useToast()
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const rawParamsBody = pluckRef(useRESTRequestBody(), "body")
 const prettifyIcon = ref("wand")
@@ -118,9 +116,9 @@ const uploadPayload = (e: InputEvent) => {
       rawParamsBody.value = target?.result
     }
     reader.readAsText(file)
-    $toast.success(`${t("state.file_imported")}`)
+    toast.success(`${t("state.file_imported")}`)
   } else {
-    $toast.error(`${t("action.choose_file")}`)
+    toast.error(`${t("action.choose_file")}`)
   }
 }
 const prettifyRequestBody = () => {
@@ -131,7 +129,7 @@ const prettifyRequestBody = () => {
     setTimeout(() => (prettifyIcon.value = "wand"), 1000)
   } catch (e) {
     console.error(e)
-    $toast.error(`${t("error.json_prettify_invalid_body")}`)
+    toast.error(`${t("error.json_prettify_invalid_body")}`)
   }
 }
 </script>

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>
@@ -60,7 +60,7 @@
       <div class="flex flex-1">
         <SmartEnvInput
           v-model="newEndpoint"
-          :placeholder="`${$t('request.url')}`"
+          :placeholder="`${t('request.url')}`"
           styles="
             bg-primaryLight
             border border-divider
@@ -83,7 +83,7 @@
       <ButtonPrimary
         id="send"
         class="rounded-r-none flex-1 min-w-20"
-        :label="`${!loading ? $t('action.send') : $t('action.cancel')}`"
+        :label="`${!loading ? t('action.send') : t('action.cancel')}`"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
       <span class="flex">
@@ -98,7 +98,7 @@
             <ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
           </template>
           <SmartItem
-            :label="`${$t('import.curl')}`"
+            :label="`${t('import.curl')}`"
             svg="file-code"
             @click.native="
               () => {
@@ -108,7 +108,7 @@
             "
           />
           <SmartItem
-            :label="`${$t('show.code')}`"
+            :label="`${t('show.code')}`"
             svg="code-2"
             @click.native="
               () => {
@@ -119,7 +119,7 @@
           />
           <SmartItem
             ref="clearAll"
-            :label="`${$t('action.clear_all')}`"
+            :label="`${t('action.clear_all')}`"
             svg="rotate-ccw"
             @click.native="
               () => {
@@ -134,7 +134,7 @@
         class="rounded rounded-r-none ml-2"
         :label="
           windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
-            ? `${$t('request.save')}`
+            ? `${t('request.save')}`
             : ''
         "
         filled
@@ -159,7 +159,7 @@
           <input
             id="request-name"
             v-model="requestName"
-            :placeholder="`${$t('request.name')}`"
+            :placeholder="`${t('request.name')}`"
             name="request-name"
             type="text"
             autocomplete="off"
@@ -168,7 +168,7 @@
           />
           <SmartItem
             ref="copyRequest"
-            :label="`${$t('request.copy_link')}`"
+            :label="`${t('request.copy_link')}`"
             :svg="hasNavigatorShare ? 'share-2' : 'copy'"
             @click.native="
               () => {
@@ -179,7 +179,7 @@
           />
           <SmartItem
             ref="saveRequest"
-            :label="`${$t('request.save_as')}`"
+            :label="`${t('request.save_as')}`"
             svg="folder-plus"
             @click.native="
               () => {
@@ -208,7 +208,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
+import { computed, ref, watch } from "@nuxtjs/composition-api"
 import { isRight } from "fp-ts/lib/Either"
 import {
   updateRESTResponse,
@@ -227,6 +227,8 @@ import {
   useStreamSubscriber,
   useStream,
   useNuxt,
+  useI18n,
+  useToast,
 } from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -235,6 +237,8 @@ import { overwriteRequestTeams } from "~/helpers/teams/utils"
 import { apolloClient } from "~/helpers/apollo"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 
+const t = useI18n()
+
 const methods = [
   "GET",
   "POST",
@@ -248,12 +252,9 @@ const methods = [
   "CUSTOM",
 ]
 
-const {
+const toast = useToast()
-  $toast,
-  app: { i18n },
-} = useContext()
 const nuxt = useNuxt()
-const t = i18n.t.bind(i18n)
+
 const { subscribeToStream } = useStreamSubscriber()
 
 const newEndpoint = useStream(restEndpoint$, "", setRESTEndpoint)
@@ -341,7 +342,7 @@ const copyRequest = () => {
       .catch(() => {})
   } else {
     copyToClipboard(window.location.href)
-    $toast.success(`${t("state.copied_to_clipboard")}`)
+    toast.success(`${t("state.copied_to_clipboard")}`)
   }
 }
 
@@ -380,7 +381,7 @@ const saveRequest = () => {
 
   if (saveCtx.originLocation === "user-collection") {
     editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
-    $toast.success(`${t("request.saved")}`)
+    toast.success(`${t("request.saved")}`)
   } else if (saveCtx.originLocation === "team-collection") {
     const req = getRESTRequest()
 
@@ -393,14 +394,14 @@ const saveRequest = () => {
         saveCtx.requestID
       )
         .then(() => {
-          $toast.success(`${t("request.saved")}`)
+          toast.success(`${t("request.saved")}`)
         })
         .catch(() => {
-          $toast.error(`${t("profile.no_permission")}`)
+          toast.error(`${t("profile.no_permission")}`)
         })
     } catch (error) {
       showSaveRequestModal.value = true
-      $toast.error(`${t("error.something_went_wrong")}`)
+      toast.error(`${t("error.something_went_wrong")}`)
       console.error(error)
     }
   }

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

@@ -12,16 +12,16 @@
       <div class="flex space-x-2 pb-4 my-4">
         <div class="flex flex-col space-y-4 text-right items-end">
           <span class="flex flex-1 items-center">
-            {{ $t("shortcut.request.send_request") }}
+            {{ t("shortcut.request.send_request") }}
           </span>
           <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.show_all") }}
+            {{ t("shortcut.general.show_all") }}
           </span>
           <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.command_menu") }}
+            {{ t("shortcut.general.command_menu") }}
           </span>
           <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.help_menu") }}
+            {{ t("shortcut.general.help_menu") }}
           </span>
         </div>
         <div class="flex flex-col space-y-4">
@@ -42,7 +42,7 @@
         </div>
       </div>
       <ButtonSecondary
-        :label="$t('app.documentation')"
+        :label="t('app.documentation')"
         to="https://docs.hoppscotch.io"
         svg="external-link"
         blank
@@ -56,7 +56,7 @@
         class="flex flex-col items-center justify-center"
       >
         <SmartSpinner class="my-4" />
-        <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
+        <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
       <div
         v-if="response.type === 'network_fail'"
@@ -73,13 +73,13 @@
             w-32
             inline-flex
           "
-          :alt="$t('error.network_fail')"
+          :alt="`${t('error.network_fail')}`"
         />
         <span class="text-center font-semibold mb-2">
-          {{ $t("error.network_fail") }}
+          {{ t("error.network_fail") }}
         </span>
         <span class="text-center text-secondaryLight mb-4 max-w-sm">
-          {{ $t("helpers.network_fail") }}
+          {{ t("helpers.network_fail") }}
         </span>
         <AppInterceptor />
       </div>
@@ -89,15 +89,15 @@
         class="font-semibold space-x-4"
       >
         <span v-if="response.statusCode">
-          <span class="text-secondary"> {{ $t("response.status") }}: </span>
+          <span class="text-secondary"> {{ t("response.status") }}: </span>
-          {{ response.statusCode || $t("state.waiting_send_request") }}
+          {{ response.statusCode || t("state.waiting_send_request") }}
         </span>
         <span v-if="response.meta && response.meta.responseDuration">
-          <span class="text-secondary"> {{ $t("response.time") }}: </span>
+          <span class="text-secondary"> {{ t("response.time") }}: </span>
           {{ `${response.meta.responseDuration} ms` }}
         </span>
         <span v-if="response.meta && response.meta.responseSize">
-          <span class="text-secondary"> {{ $t("response.size") }}: </span>
+          <span class="text-secondary"> {{ t("response.size") }}: </span>
           {{ `${response.meta.responseSize} B` }}
         </span>
       </div>
@@ -110,6 +110,9 @@ import { computed } from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps<{
   response: HoppRESTResponse

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 &&
@@ -20,11 +20,11 @@
         "
       >
         <label class="font-semibold text-secondaryLight">
-          {{ $t("test.report") }}
+          {{ t("test.report") }}
         </label>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.clear')"
+          :title="t('action.clear')"
           svg="trash-2"
           @click.native="clearContent()"
         />
@@ -64,9 +64,7 @@
             <span class="text-secondaryLight">
               {{
                 ` \xA0 — \xA0 ${
-                  result.status === "pass"
+                  result.status === "pass" ? t("test.passed") : t("test.failed")
-                    ? $t("test.passed")
-                    : $t("test.failed")
                 }`
               }}
             </span>
@@ -82,17 +80,17 @@
         :src="`/images/states/${$colorMode.value}/validation.svg`"
         loading="lazy"
         class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
-        :alt="$t('empty.tests')"
+        :alt="`${t('empty.tests')}`"
       />
       <span class="text-center pb-2">
-        {{ $t("empty.tests") }}
+        {{ t("empty.tests") }}
       </span>
       <span class="text-center pb-4">
-        {{ $t("helpers.tests") }}
+        {{ t("helpers.tests") }}
       </span>
       <ButtonSecondary
         outline
-        :label="`${$t('action.learn_more')}`"
+        :label="`${t('action.learn_more')}`"
         to="https://docs.hoppscotch.io"
         blank
         svg="external-link"
@@ -104,9 +102,11 @@
 </template>
 
 <script setup lang="ts">
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import { useReadonlyStream, useI18n } from "~/helpers/utils/composables"
 import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
 
+const t = useI18n()
+
 const testResults = useReadonlyStream(restTestResults$, null)
 
 const clearContent = () => setRESTTestResults(null)

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

@@ -28,7 +28,7 @@
         <span class="text-secondaryLight">
           {{
             ` \xA0 — \xA0 ${
-              result.status === "pass" ? $t("test.passed") : $t("test.failed")
+              result.status === "pass" ? t("test.passed") : t("test.failed")
             }`
           }}
         </span>
@@ -40,6 +40,9 @@
 <script setup lang="ts">
 import { PropType } from "@nuxtjs/composition-api"
 import { HoppTestResult } from "~/helpers/types/HoppTestResult"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 defineProps({
   testResults: {

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
@@ -14,26 +14,26 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("test.javascript_code") }}
+        {{ t("test.javascript_code") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/tests"
           blank
-          :title="$t('app.wiki')"
+          :title="t('app.wiki')"
           svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('state.linewrap')"
+          :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.clear')"
+          :title="t('action.clear')"
           svg="trash-2"
           @click.native="clearContent"
         />
@@ -57,15 +57,15 @@
         "
       >
         <div class="text-secondaryLight pb-2">
-          {{ $t("helpers.post_request_tests") }}
+          {{ t("helpers.post_request_tests") }}
         </div>
         <SmartAnchor
-          :label="`${$t('test.learn')}`"
+          :label="`${t('test.learn')}`"
           to="https://docs.hoppscotch.io/features/tests"
           blank
         />
         <h4 class="font-bold text-secondaryLight pt-6">
-          {{ $t("test.snippets") }}
+          {{ t("test.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">
           <TabSecondary
@@ -82,17 +82,15 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, useContext } from "@nuxtjs/composition-api"
+import { reactive, ref } from "@nuxtjs/composition-api"
 import { useTestScript } from "~/newstore/RESTSession"
 import testSnippets from "~/helpers/testSnippets"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/testScript"
 import completer from "~/helpers/editor/completion/testScript"
+import { useI18n } from "~/helpers/utils/composables"
 
-const {
+const t = useI18n()
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const testScript = useTestScript()
 

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

@@ -14,14 +14,14 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("request.header_list") }}
+        {{ t("request.header_list") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-if="headers"
           ref="copyHeaders"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.copy')"
+          :title="t('action.copy')"
           :svg="copyIcon"
           @click.native="copyHeaders"
         />
@@ -70,15 +70,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext } from "@nuxtjs/composition-api"
+import { ref } from "@nuxtjs/composition-api"
 import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useI18n, useToast } from "~/helpers/utils/composables"
 
-const {
+const t = useI18n()
-  $toast,
+
-  app: { i18n },
+const toast = useToast()
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const props = defineProps<{
   headers: Array<HoppRESTHeader>
@@ -89,7 +88,7 @@ const copyIcon = ref("copy")
 const copyHeaders = () => {
   copyToClipboard(JSON.stringify(props.headers))
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

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

@@ -14,13 +14,13 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("response.body") }}
+        {{ t("response.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('state.linewrap')"
+          :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -29,7 +29,7 @@
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="
-            previewEnabled ? $t('hide.preview') : $t('response.preview_html')
+            previewEnabled ? t('hide.preview') : t('response.preview_html')
           "
           :svg="!previewEnabled ? 'eye' : 'eye-off'"
           @click.native.prevent="togglePreview"
@@ -38,7 +38,7 @@
           v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.download_file')"
+          :title="t('action.download_file')"
           :svg="downloadIcon"
           @click.native="downloadResponse"
         />
@@ -46,7 +46,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.copy')"
+          :title="t('action.copy')"
           :svg="copyIcon"
           @click.native="copyResponse"
         />
@@ -64,20 +64,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
+import { computed, ref, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const {
+const toast = useToast()
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const responseBodyText = computed(() => {
   if (
@@ -127,7 +126,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`)
+  toast.success(`${t("state.download_started")}`)
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -138,7 +137,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 

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

@@ -14,13 +14,13 @@
       "
     >
       <label class="font-semibold text-secondaryLight">{{
-        $t("response.body")
+        t("response.body")
       }}</label>
       <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('state.linewrap')"
+          :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -29,7 +29,7 @@
           v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.download_file')"
+          :title="t('action.download_file')"
           :svg="downloadIcon"
           @click.native="downloadResponse"
         />
@@ -37,7 +37,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.copy')"
+          :title="t('action.copy')"
           :svg="copyIcon"
           @click.native="copyResponse"
         />
@@ -144,7 +144,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
+import { computed, ref, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
@@ -154,16 +154,15 @@ import {
   convertIndexToLineCh,
   convertLineChToIndex,
 } from "~/helpers/editor/utils"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const {
+const toast = useToast()
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const responseBodyText = computed(() => {
   if (
@@ -234,7 +233,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`)
+  toast.success(`${t("state.download_started")}`)
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -254,7 +253,7 @@ const outlinePath = computed(() => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

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

@@ -14,13 +14,13 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("response.body") }}
+        {{ t("response.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('state.linewrap')"
+          :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -29,7 +29,7 @@
           v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.download_file')"
+          :title="t('action.download_file')"
           :svg="downloadIcon"
           @click.native="downloadResponse"
         />
@@ -37,7 +37,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.copy')"
+          :title="t('action.copy')"
           :svg="copyIcon"
           @click.native="copyResponse"
         />
@@ -48,20 +48,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext, computed, reactive } from "@nuxtjs/composition-api"
+import { ref, computed, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const {
+const toast = useToast()
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const responseBodyText = computed(() => {
   if (
@@ -117,7 +116,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`)
+  toast.success(`${t("state.download_started")}`)
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -128,7 +127,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

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

@@ -14,13 +14,13 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("response.body") }}
+        {{ t("response.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('state.linewrap')"
+          :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -29,7 +29,7 @@
           v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.download_file')"
+          :title="t('action.download_file')"
           :svg="downloadIcon"
           @click.native="downloadResponse"
         />
@@ -37,7 +37,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.copy')"
+          :title="t('action.copy')"
           :svg="copyIcon"
           @click.native="copyResponse"
         />
@@ -48,20 +48,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
+import { computed, ref, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const {
+const toast = useToast()
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const responseBodyText = computed(() => {
   if (
@@ -117,7 +116,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`)
+  toast.success(`${t("state.download_started")}`)
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -128,7 +127,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

packages/hoppscotch-app/components/realtime/Log.vue

@@ -26,7 +26,7 @@
           >{{ entry.ts }}{{ source(entry.source) }}{{ entry.payload }}</span
         >
       </span>
-      <span v-else>{{ $t("response.waiting_for_connection") }}</span>
+      <span v-else>{{ t("response.waiting_for_connection") }}</span>
     </div>
   </div>
 </template>
@@ -34,6 +34,9 @@
 <script setup lang="ts">
 import { nextTick, ref, watch } from "@nuxtjs/composition-api"
 import { getSourcePrefix as source } from "~/helpers/utils/string"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps({
   log: { type: Array, default: () => [] },

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

@@ -4,7 +4,7 @@
       v-for="(color, index) of colors"
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
-      :title="$t(getColorModeName(color))"
+      :title="t(getColorModeName(color))"
       :class="{
         'bg-primaryLight !text-accent hover:text-accent': color === active,
       }"
@@ -22,6 +22,9 @@ import {
   HoppBgColors,
   useSetting,
 } from "~/newstore/settings"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const colors = HoppBgColors
 const active = useSetting("BG_COLOR")

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

@@ -5,12 +5,12 @@
         <span class="select-wrapper">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('settings.change_font_size')"
+            :title="t('settings.change_font_size')"
             class="pr-8"
             svg="type"
             outline
             :label="`${getFontSizeName(
-              fontSizes.find((size) => size == active)
+              fontSizes.find((size) => size === active)
             )}`"
           />
         </span>
@@ -33,18 +33,15 @@
 </template>
 
 <script setup lang="ts">
-import { useContext } from "@nuxtjs/composition-api"
 import {
   HoppFontSizes,
   HoppFontSize,
   applySetting,
   useSetting,
 } from "~/newstore/settings"
+import { useI18n } from "~/helpers/utils/composables"
 
-const {
+const t = useI18n()
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const fontSizes = HoppFontSizes
 const active = useSetting("FONT_SIZE")

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('team.new')" @close="hideModal">
+  <SmartModal v-if="show" :title="t('team.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -13,15 +13,15 @@
           @keyup.enter="addNewTeam"
         />
         <label for="selectLabelTeamAdd">
-          {{ $t("action.label") }}
+          {{ t("action.label") }}
         </label>
       </div>
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="addNewTeam" />
+        <ButtonPrimary :label="t('action.save')" @click.native="addNewTeam" />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="t('action.cancel')"
           @click.native="hideModal"
         />
       </span>
@@ -30,18 +30,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext } from "@nuxtjs/composition-api"
+import { ref } from "@nuxtjs/composition-api"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import { createTeam } from "~/helpers/backend/mutations/Team"
 import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
+import { useI18n, useToast } from "~/helpers/utils/composables"
 
-const {
+const t = useI18n()
-  app: { i18n },
-  $toast,
-} = useContext()
 
-const t = i18n.t.bind(i18n)
+const toast = useToast()
 
 defineProps<{
   show: boolean
@@ -63,7 +61,7 @@ const addNewTeam = () =>
       (err) => {
         // err is of type "invalid_name" | GQLError<Err>
         if (err === "invalid_name") {
-          $toast.error(`${t("team.name_length_insufficient")}`)
+          toast.error(`${t("team.name_length_insufficient")}`)
         } else {
           // Handle GQL errors (use err obj)
         }

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('team.edit')" @close="hideModal">
+  <SmartModal v-if="show" :title="t('team.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex relative">
@@ -14,17 +14,17 @@
             @keyup.enter="saveTeam"
           />
           <label for="selectLabelTeamEdit">
-            {{ $t("action.label") }}
+            {{ t("action.label") }}
           </label>
         </div>
         <div class="flex pt-4 flex-1 justify-between items-center">
           <label for="memberList" class="p-4">
-            {{ $t("team.members") }}
+            {{ t("team.members") }}
           </label>
           <div class="flex">
             <ButtonSecondary
               svg="user-plus"
-              :label="$t('team.invite')"
+              :label="t('team.invite')"
               filled
               @click.native="
                 () => {
@@ -39,7 +39,7 @@
           class="flex flex-col items-center justify-center"
         >
           <SmartSpinner class="mb-4" />
-          <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
+          <span class="text-secondaryLight">{{ t("state.loading") }}</span>
         </div>
         <div
           v-if="
@@ -70,14 +70,14 @@
                 w-16
                 inline-flex
               "
-              :alt="$t('empty.members')"
+              :alt="`${t('empty.members')}`"
             />
             <span class="text-center pb-4">
-              {{ $t("empty.members") }}
+              {{ t("empty.members") }}
             </span>
             <ButtonSecondary
               svg="user-plus"
-              :label="$t('team.invite')"
+              :label="t('team.invite')"
               @click.native="
                 () => {
                   emit('invite-team')
@@ -93,7 +93,7 @@
             >
               <input
                 class="bg-transparent flex flex-1 py-2 px-4"
-                :placeholder="$t('team.email')"
+                :placeholder="`${t('team.email')}`"
                 :name="'param' + index"
                 :value="member.email"
                 readonly
@@ -116,7 +116,7 @@
                           py-2
                           px-4
                         "
-                        :placeholder="$t('team.permissions')"
+                        :placeholder="`${t('team.permissions')}`"
                         :name="'value' + index"
                         :value="
                           typeof member.role === 'string'
@@ -160,7 +160,7 @@
                 <ButtonSecondary
                   id="member"
                   v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('action.remove')"
+                  :title="t('action.remove')"
                   svg="trash"
                   color="red"
                   @click.native="removeExistingTeamMember(member.userID)"
@@ -174,15 +174,15 @@
           class="flex flex-col items-center"
         >
           <i class="mb-4 material-icons">help_outline</i>
-          {{ $t("error.something_went_wrong") }}
+          {{ t("error.something_went_wrong") }}
         </div>
       </div>
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="saveTeam" />
+        <ButtonPrimary :label="t('action.save')" @click.native="saveTeam" />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="t('action.cancel')"
           @click.native="hideModal"
         />
       </span>
@@ -191,13 +191,7 @@
 </template>
 
 <script setup lang="ts">
-import {
+import { computed, ref, toRef, watch } from "@nuxtjs/composition-api"
-  computed,
-  ref,
-  toRef,
-  useContext,
-  watch,
-} from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
 import {
   GetTeamDocument,
@@ -215,6 +209,9 @@ import {
 } from "~/helpers/backend/mutations/Team"
 import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
 import { useGQLQuery } from "~/helpers/backend/GQLClient"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const emit = defineEmits<{
   (e: "hide-modal"): void
@@ -230,11 +227,7 @@ const props = defineProps<{
   editingTeamID: string
 }>()
 
-const {
+const toast = useToast()
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const name = toRef(props.editingTeam, "name")
 
@@ -361,9 +354,9 @@ const removeExistingTeamMember = async (userID: string) => {
     props.editingTeamID
   )()
   if (E.isLeft(removeTeamMemberResult)) {
-    $toast.error(`${t("error.something_went_wrong")}`)
+    toast.error(`${t("error.something_went_wrong")}`)
   } else {
-    $toast.success(`${t("team.member_removed")}`)
+    toast.success(`${t("team.member_removed")}`)
   }
 }
 
@@ -375,7 +368,7 @@ const saveTeam = async () => {
         name.value
       )()
       if (E.isLeft(updateTeamNameResult)) {
-        $toast.error(`${t("error.something_went_wrong")}`)
+        toast.error(`${t("error.something_went_wrong")}`)
       } else {
         roleUpdates.value.forEach(async (update) => {
           const updateMemberRoleResult = await updateTeamMemberRole(
@@ -384,18 +377,18 @@ const saveTeam = async () => {
             update.role
           )()
           if (E.isLeft(updateMemberRoleResult)) {
-            $toast.error(`${t("error.something_went_wrong")}`)
+            toast.error(`${t("error.something_went_wrong")}`)
             console.error(updateMemberRoleResult.left.error)
           }
         })
       }
       hideModal()
-      $toast.success(`${t("team.saved")}`)
+      toast.success(`${t("team.saved")}`)
     } else {
-      return $toast.error(`${t("team.name_length_insufficient")}`)
+      return toast.error(`${t("team.name_length_insufficient")}`)
     }
   } else {
-    return $toast.error(`${t("empty.team_name")}`)
+    return toast.error(`${t("empty.team_name")}`)
   }
 }
 

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

@@ -1,14 +1,14 @@
 <template>
-  <SmartModal v-if="show" :title="$t('team.invite')" @close="hideModal">
+  <SmartModal v-if="show" :title="t('team.invite')" @close="hideModal">
     <template #body>
       <div v-if="sendInvitesResult.length" class="flex flex-col px-4">
         <div class="flex flex-col max-w-md justify-center items-center">
           <SmartIcon class="h-6 text-accent w-6" name="users" />
           <h3 class="my-2 text-center text-lg">
-            {{ $t("team.we_sent_invite_link") }}
+            {{ t("team.we_sent_invite_link") }}
           </h3>
           <p class="text-center">
-            {{ $t("team.we_sent_invite_link_description") }}
+            {{ t("team.we_sent_invite_link_description") }}
           </p>
         </div>
         <div
@@ -56,7 +56,7 @@
       <div v-else class="flex flex-col px-2">
         <div class="flex flex-1 justify-between items-center">
           <label for="memberList" class="pb-4 px-4">
-            {{ $t("team.pending_invites") }}
+            {{ t("team.pending_invites") }}
           </label>
         </div>
         <div class="divide-y divide-dividerLight border-divider border rounded">
@@ -85,7 +85,7 @@
                     py-2
                     px-4
                   "
-                  :placeholder="`${$t('team.email')}`"
+                  :placeholder="`${t('team.email')}`"
                   :name="'param' + index"
                   :value="invitee.inviteeEmail"
                   readonly
@@ -98,7 +98,7 @@
                     py-2
                     px-4
                   "
-                  :placeholder="`${$t('team.permissions')}`"
+                  :placeholder="`${t('team.permissions')}`"
                   :name="'value' + index"
                   :value="
                     typeof invitee.inviteeRole === 'string'
@@ -110,7 +110,7 @@
                 <div class="flex">
                   <ButtonSecondary
                     v-tippy="{ theme: 'tooltip' }"
-                    :title="$t('action.remove')"
+                    :title="t('action.remove')"
                     svg="trash"
                     color="red"
                     @click.native="removeInvitee(invitee.id)"
@@ -132,7 +132,7 @@
               "
             >
               <span class="text-center">
-                {{ $t("empty.pending_invites") }}
+                {{ t("empty.pending_invites") }}
               </span>
             </div>
             <div
@@ -140,18 +140,18 @@
               class="flex flex-col p-4 items-center"
             >
               <i class="mb-4 material-icons">help_outline</i>
-              {{ $t("error.something_went_wrong") }}
+              {{ t("error.something_went_wrong") }}
             </div>
           </div>
         </div>
         <div class="flex pt-4 flex-1 justify-between items-center">
           <label for="memberList" class="p-4">
-            {{ $t("team.invite_tooltip") }}
+            {{ t("team.invite_tooltip") }}
           </label>
           <div class="flex">
             <ButtonSecondary
               svg="plus"
-              :label="$t('add.new')"
+              :label="t('add.new')"
               filled
               @click.native="addNewInvitee"
             />
@@ -166,7 +166,7 @@
             <input
               v-model="invitee.key"
               class="bg-transparent flex flex-1 py-2 px-4"
-              :placeholder="$t('team.email')"
+              :placeholder="`${t('team.email')}`"
               :name="'invitee' + index"
               autofocus
             />
@@ -188,7 +188,7 @@
                         py-2
                         px-4
                       "
-                      :placeholder="$t('team.permissions')"
+                      :placeholder="`${t('team.permissions')}`"
                       :name="'value' + index"
                       :value="
                         typeof invitee.value === 'string'
@@ -232,7 +232,7 @@
               <ButtonSecondary
                 id="member"
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.remove')"
+                :title="t('action.remove')"
                 svg="trash"
                 color="red"
                 @click.native="removeNewInvitee(index)"
@@ -260,13 +260,13 @@
                 w-16
                 inline-flex
               "
-              :alt="$t('empty.invites')"
+              :alt="`${t('empty.invites')}`"
             />
             <span class="text-center pb-4">
-              {{ $t("empty.invites") }}
+              {{ t("empty.invites") }}
             </span>
             <ButtonSecondary
-              :label="$t('add.new')"
+              :label="t('add.new')"
               filled
               @click.native="addNewInvitee"
             />
@@ -299,11 +299,11 @@
             "
           >
             <i class="text-secondaryLight mr-2 material-icons">help_outline</i>
-            {{ $t("profile.roles") }}
+            {{ t("profile.roles") }}
           </span>
           <p>
             <span class="text-secondaryLight">
-              {{ $t("profile.roles_description") }}
+              {{ t("profile.roles_description") }}
             </span>
           </p>
           <ul class="mt-4 space-y-4">
@@ -318,10 +318,10 @@
                   w-1/4
                 "
               >
-                {{ $t("profile.owner") }}
+                {{ t("profile.owner") }}
               </span>
               <span class="flex flex-1">
-                {{ $t("profile.owner_description") }}
+                {{ t("profile.owner_description") }}
               </span>
             </li>
             <li class="flex">
@@ -335,10 +335,10 @@
                   w-1/4
                 "
               >
-                {{ $t("profile.editor") }}
+                {{ t("profile.editor") }}
               </span>
               <span class="flex flex-1">
-                {{ $t("profile.editor_description") }}
+                {{ t("profile.editor_description") }}
               </span>
             </li>
             <li class="flex">
@@ -352,10 +352,10 @@
                   w-1/4
                 "
               >
-                {{ $t("profile.viewer") }}
+                {{ t("profile.viewer") }}
               </span>
               <span class="flex flex-1">
-                {{ $t("profile.viewer_description") }}
+                {{ t("profile.viewer_description") }}
               </span>
             </li>
           </ul>
@@ -369,7 +369,7 @@
       >
         <SmartAnchor
           class="link"
-          :label="`← \xA0 ${$t('team.invite_more')}`"
+          :label="`← \xA0 ${t('team.invite_more')}`"
           @click.native="
             () => {
               sendInvitesResult = []
@@ -384,14 +384,14 @@
         />
         <SmartAnchor
           class="link"
-          :label="`${$t('action.dismiss')}`"
+          :label="`${t('action.dismiss')}`"
           @click.native="hideModal"
         />
       </p>
       <span v-else>
-        <ButtonPrimary :label="$t('team.invite')" @click.native="sendInvites" />
+        <ButtonPrimary :label="t('team.invite')" @click.native="sendInvites" />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="t('action.cancel')"
           @click.native="hideModal"
         />
       </span>
@@ -400,13 +400,7 @@
 </template>
 
 <script setup lang="ts">
-import {
+import { watch, ref, reactive, computed } from "@nuxtjs/composition-api"
-  watch,
-  ref,
-  reactive,
-  useContext,
-  computed,
-} from "@nuxtjs/composition-api"
 import * as T from "fp-ts/Task"
 import * as E from "fp-ts/Either"
 import * as A from "fp-ts/Array"
@@ -427,12 +421,11 @@ import {
   revokeTeamInvitation,
 } from "../../helpers/backend/mutations/TeamInvitation"
 import { GQLError, useGQLQuery } from "~/helpers/backend/GQLClient"
+import { useI18n, useToast } from "~/helpers/utils/composables"
 
-const {
+const t = useI18n()
-  $toast,
+
-  app: { i18n },
+const toast = useToast()
-} = useContext()
-const t = i18n.t.bind(i18n)
 
 const newInviteeOptions = ref<any | null>(null)
 
@@ -491,9 +484,9 @@ watch(
 const removeInvitee = async (id: string) => {
   const result = await revokeTeamInvitation(id)()
   if (E.isLeft(result)) {
-    $toast.error(`${t("error.something_went_wrong")}`)
+    toast.error(`${t("error.something_went_wrong")}`)
   } else {
-    $toast.success(`${t("team.member_removed")}`)
+    toast.success(`${t("team.member_removed")}`)
   }
 }
 
@@ -553,7 +546,7 @@ const sendInvites = async () => {
 
   if (O.isNone(validationResult)) {
     // Error handling for no validation
-    $toast.error(`${t("error.incorrect_email")}`)
+    toast.error(`${t("error.incorrect_email")}`)
     return
   }
 

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('team.select_a_team')" @close="hideModal">
+  <SmartModal v-if="show" :title="t('team.select_a_team')" @close="hideModal">
     <template #body>
       <Teams :modal="true" />
     </template>
@@ -7,6 +7,10 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
 defineProps<{
   show: Boolean
 }>()

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

@@ -22,7 +22,7 @@
           class="font-semibold text-secondaryDark"
           :class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
         >
-          {{ team.name || $t("state.nothing_found") }}
+          {{ team.name || t("state.nothing_found") }}
         </label>
         <div class="flex -space-x-1 mt-2 overflow-hidden">
           <img
@@ -44,7 +44,7 @@
           v-if="team.myRole === 'OWNER'"
           svg="edit"
           class="rounded-none"
-          :label="$t('action.edit')"
+          :label="t('action.edit')"
           @click.native="
             () => {
               $emit('edit-team')
@@ -55,7 +55,7 @@
           v-if="team.myRole === 'OWNER'"
           svg="user-plus"
           class="rounded-none"
-          :label="$t('team.invite')"
+          :label="t('team.invite')"
           @click.native="
             () => {
               emit('invite-team')
@@ -68,14 +68,14 @@
           <template #trigger>
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              :title="$t('action.more')"
+              :title="t('action.more')"
               svg="more-vertical"
             />
           </template>
           <SmartItem
             v-if="team.myRole === 'OWNER'"
             svg="edit"
-            :label="$t('action.edit')"
+            :label="t('action.edit')"
             @click.native="
               () => {
                 $emit('edit-team')
@@ -87,7 +87,7 @@
             v-if="team.myRole === 'OWNER'"
             svg="trash-2"
             color="red"
-            :label="$t('action.delete')"
+            :label="t('action.delete')"
             @click.native="
               () => {
                 deleteTeam()
@@ -98,7 +98,7 @@
           <SmartItem
             v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
             svg="trash"
-            :label="$t('team.exit')"
+            :label="t('team.exit')"
             @click.native="
               () => {
                 exitTeam()
@@ -113,7 +113,6 @@
 </template>
 
 <script setup lang="ts">
-import { useContext } from "@nuxtjs/composition-api"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import { TeamMemberRole } from "~/helpers/backend/graphql"
@@ -121,6 +120,9 @@ import {
   deleteTeam as backendDeleteTeam,
   leaveTeam,
 } from "~/helpers/backend/mutations/Team"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps<{
   team: {
@@ -142,12 +144,7 @@ const emit = defineEmits<{
   (e: "edit-team"): void
 }>()
 
-const {
+const toast = useToast()
-  app: { i18n },
-  $toast,
-} = useContext()
-
-const t = i18n.t.bind(i18n)
 
 const deleteTeam = () => {
   if (!confirm(`${t("confirm.remove_team")}`)) return
@@ -157,11 +154,11 @@ const deleteTeam = () => {
     TE.match(
       (err) => {
         // TODO: Better errors ? We know the possible errors now
-        $toast.error(`${t("error.something_went_wrong")}`)
+        toast.error(`${t("error.something_went_wrong")}`)
         console.error(err)
       },
       () => {
-        $toast.success(`${t("team.deleted")}`)
+        toast.success(`${t("team.deleted")}`)
       }
     )
   )() // Tasks (and TEs) are lazy, so call the function returned
@@ -175,17 +172,17 @@ const exitTeam = () => {
     TE.match(
       (err) => {
         // TODO: Better errors ?
-        $toast.error(`${t("error.something_went_wrong")}`)
+        toast.error(`${t("error.something_went_wrong")}`)
         console.error(err)
       },
       () => {
-        $toast.success(`${t("team.left")}`)
+        toast.success(`${t("team.left")}`)
       }
     )
   )() // Tasks (and TEs) are lazy, so call the function returned
 }
 
 const noPermission = () => {
-  $toast.error(`${t("profile.no_permission")}`)
+  toast.error(`${t("profile.no_permission")}`)
 }
 </script>

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

@@ -2,7 +2,7 @@
   <AppSection label="teams">
     <div class="space-y-4 p-4">
       <ButtonSecondary
-        :label="`${$t('team.create_new')}`"
+        :label="`${t('team.create_new')}`"
         outline
         @click.native="displayModalAdd(true)"
       />
@@ -11,7 +11,7 @@
         class="flex flex-col items-center justify-center"
       >
         <SmartSpinner class="mb-4" />
-        <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
+        <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
       <div
         v-if="
@@ -38,13 +38,13 @@
             w-16
             inline-flex
           "
-          :alt="$t('empty.teams')"
+          :alt="`${t('empty.teams')}`"
         />
         <span class="text-center mb-4">
-          {{ $t("empty.teams") }}
+          {{ t("empty.teams") }}
         </span>
         <ButtonSecondary
-          :label="`${$t('team.create_new')}`"
+          :label="`${t('team.create_new')}`"
           filled
           @click.native="displayModalAdd(true)"
         />
@@ -71,7 +71,7 @@
         class="flex flex-col items-center"
       >
         <i class="mb-4 material-icons">help_outline</i>
-        {{ $t("error.something_went_wrong") }}
+        {{ t("error.something_went_wrong") }}
       </div>
     </div>
     <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
@@ -114,6 +114,9 @@ import {
   MyTeamsQueryVariables,
 } from "~/helpers/backend/graphql"
 import { MyTeamsQueryError } from "~/helpers/backend/QueryErrors"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 defineProps<{
   modal: boolean

packages/hoppscotch-app/helpers/utils/composables.ts

@@ -140,3 +140,8 @@ export function useI18n() {
   } = useContext()
   return i18n.t.bind(i18n)
 }
+
+export function useToast() {
+  const { $toast } = useContext()
+  return $toast
+}

packages/hoppscotch-app/pages/profile.vue

@@ -17,13 +17,13 @@
               w-24
               inline-flex
             "
-            :alt="$t('empty.parameters')"
+            :alt="`${t('empty.parameters')}`"
           />
           <p class="text-center pb-4 text-secondaryLight">
-            {{ $t("empty.profile") }}
+            {{ t("empty.profile") }}
           </p>
           <ButtonPrimary
-            :label="$t('auth.login')"
+            :label="t('auth.login')"
             class="mb-4"
             @click.native="showLogin = true"
           />
@@ -44,7 +44,7 @@
               <SmartIcon v-else name="user" class="svg-icons" />
               <div class="ml-4">
                 <label class="heading">
-                  {{ currentUser.displayName || $t("state.nothing_found") }}
+                  {{ currentUser.displayName || t("state.nothing_found") }}
                 </label>
                 <p class="flex text-secondaryLight items-center">
                   {{ currentUser.email }}
@@ -61,7 +61,7 @@
                 <SmartItem
                   to="/settings"
                   svg="settings"
-                  :label="$t('profile.app_settings')"
+                  :label="t('profile.app_settings')"
                   outline
                 />
               </div>
@@ -71,19 +71,19 @@
           <SmartTabs>
             <SmartTab
               :id="'sync'"
-              :label="$t('settings.account')"
+              :label="t('settings.account')"
               :selected="true"
             >
               <section class="p-4">
                 <h4 class="font-semibold text-secondaryDark">
-                  {{ $t("settings.profile") }}
+                  {{ t("settings.profile") }}
                 </h4>
                 <div class="mt-1 text-secondaryLight">
-                  {{ $t("settings.profile_description") }}
+                  {{ t("settings.profile_description") }}
                 </div>
                 <div class="py-4">
                   <label for="displayName">
-                    {{ $t("settings.profile_name") }}
+                    {{ t("settings.profile_name") }}
                   </label>
                   <form
                     class="flex md:max-w-sm mt-2"
@@ -93,13 +93,13 @@
                       id="displayName"
                       v-model="displayName"
                       class="input"
-                      :placeholder="$t('settings.profile_name')"
+                      :placeholder="`${t('settings.profile_name')}`"
                       type="text"
                       autocomplete="off"
                       required
                     />
                     <ButtonPrimary
-                      :label="$t('action.save')"
+                      :label="t('action.save')"
                       class="ml-2 min-w-16"
                       type="submit"
                       :loading="updatingDisplayName"
@@ -109,10 +109,10 @@
               </section>
               <section class="p-4">
                 <h4 class="font-semibold text-secondaryDark">
-                  {{ $t("settings.sync") }}
+                  {{ t("settings.sync") }}
                 </h4>
                 <div class="mt-1 text-secondaryLight">
-                  {{ $t("settings.sync_description") }}
+                  {{ t("settings.sync_description") }}
                 </div>
                 <div class="space-y-4 py-4">
                   <div class="flex items-center">
@@ -120,7 +120,7 @@
                       :on="SYNC_COLLECTIONS"
                       @change="toggleSetting('syncCollections')"
                     >
-                      {{ $t("settings.sync_collections") }}
+                      {{ t("settings.sync_collections") }}
                     </SmartToggle>
                   </div>
                   <div class="flex items-center">
@@ -128,7 +128,7 @@
                       :on="SYNC_ENVIRONMENTS"
                       @change="toggleSetting('syncEnvironments')"
                     >
-                      {{ $t("settings.sync_environments") }}
+                      {{ t("settings.sync_environments") }}
                     </SmartToggle>
                   </div>
                   <div class="flex items-center">
@@ -136,13 +136,13 @@
                       :on="SYNC_HISTORY"
                       @change="toggleSetting('syncHistory')"
                     >
-                      {{ $t("settings.sync_history") }}
+                      {{ t("settings.sync_history") }}
                     </SmartToggle>
                   </div>
                 </div>
               </section>
             </SmartTab>
-            <SmartTab :id="'teams'" :label="$t('team.title')">
+            <SmartTab :id="'teams'" :label="t('team.title')">
               <AppSection label="teams">
                 <Teams :modal="false" />
               </AppSection>
@@ -156,21 +156,12 @@
 </template>
 
 <script setup lang="ts">
-import {
+import { ref, useMeta, defineComponent } from "@nuxtjs/composition-api"
-  ref,
-  useContext,
-  useMeta,
-  defineComponent,
-} from "@nuxtjs/composition-api"
 import { currentUser$, setDisplayName } from "~/helpers/fb/auth"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import { useReadonlyStream, useI18n } from "~/helpers/utils/composables"
 import { toggleSetting, useSetting } from "~/newstore/settings"
 
-const {
+const t = useI18n()
-  app: { i18n },
-} = useContext()
-
-const t = i18n.t.bind(i18n)
 
 const showLogin = ref(false)