refactor: composables for i18n and toast

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 {
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
 
 const preRequestScript = usePreRequestScript()