From 8690d18695b788da33ee798e1e4d757b4a18dcf2 Mon Sep 17 00:00:00 2001
From: Alec Ananian <>
Date: Tue, 14 Jan 2020 07:43:41 -0800
Subject: [PATCH] Replaced hard-coded strings with localizable strings Added en
 locale as localization fallback

---
 components/collections/addCollection.vue      |   8 +-
 components/collections/addFolder.vue          |   8 +-
 components/collections/collection.vue         |  10 +-
 components/collections/editCollection.vue     |   6 +-
 components/collections/editFolder.vue         |   6 +-
 components/collections/editRequest.vue        |  14 +-
 components/collections/folder.vue             |   8 +-
 .../collections/importExportCollections.vue   |  14 +-
 components/collections/index.vue              |   4 +-
 components/collections/request.vue            |   8 +-
 components/collections/saveRequestAs.vue      |  18 +--
 components/graphql/field.vue                  |   2 +-
 components/graphql/type.vue                   |   2 +-
 components/history.vue                        |  77 +++++-----
 lang/en-US.js                                 | 137 +++++++++++++++++-
 layouts/default.vue                           |  27 ++--
 layouts/error.vue                             |   6 +-
 nuxt.config.js                                |   3 +
 pages/doc.vue                                 | 116 +++++++--------
 pages/graphql.vue                             |  75 +++++-----
 pages/index.vue                               | 129 +++++++++--------
 pages/realtime.vue                            |  40 ++---
 pages/settings.vue                            |  32 ++--
 23 files changed, 452 insertions(+), 298 deletions(-)

diff --git a/components/collections/addCollection.vue b/components/collections/addCollection.vue
index 2c68f630f..197cc412a 100644
--- a/components/collections/addCollection.vue
+++ b/components/collections/addCollection.vue
@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">New Collection</h3>
+            <h3 class="title">{{ $t("new_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -17,7 +17,7 @@
     <div slot="body">
       <ul>
         <li>
-          <input type="text" v-model="name" placeholder="My New Collection" />
+          <input type="text" v-model="name" :placeholder="$t('my_new_collection')" />
         </li>
       </ul>
     </div>
@@ -26,10 +26,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="addNewCollection">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>
diff --git a/components/collections/addFolder.vue b/components/collections/addFolder.vue
index 40ec5c574..5601e6f47 100644
--- a/components/collections/addFolder.vue
+++ b/components/collections/addFolder.vue
@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">New Folder</h3>
+            <h3 class="title">{{ $t("new_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -17,7 +17,7 @@
     <div slot="body">
       <ul>
         <li>
-          <input type="text" v-model="name" placeholder="My New Folder" />
+          <input type="text" v-model="name" :placeholder="$t('my_new_folder')" />
         </li>
       </ul>
     </div>
@@ -26,10 +26,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="addNewFolder">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index d6a6e6a8d..da4e189f5 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -10,14 +10,14 @@
         </button>
       </div>
       <v-popover>
-        <button class="tooltip-target icon" v-tooltip="'More'">
+        <button class="tooltip-target icon" v-tooltip="$t('more')">
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
           <div>
             <button class="icon" @click="$emit('add-folder')" v-close-popover>
               <i class="material-icons">create_new_folder</i>
-              <span>New folder</span>
+              <span>{{ $t("new_folder") }}</span>
             </button>
           </div>
           <div>
@@ -27,13 +27,13 @@
               v-close-popover
             >
               <i class="material-icons">create</i>
-              <span>Edit</span>
+              <span>{{ $t("edit") }}</span>
             </button>
           </div>
           <div>
             <button class="icon" @click="removeCollection" v-close-popover>
               <i class="material-icons">delete</i>
-              <span>Delete</span>
+              <span>{{ $t("delete") }}</span>
             </button>
           </div>
         </template>
@@ -56,7 +56,7 @@
             collection.folders.length === 0 && collection.requests.length === 0
           "
         >
-          <label>Collection is empty</label>
+          <label>{{ $t("collection_empty") }}</label>
         </li>
       </ul>
       <ul>
diff --git a/components/collections/editCollection.vue b/components/collections/editCollection.vue
index 3a3feac53..4021557fe 100644
--- a/components/collections/editCollection.vue
+++ b/components/collections/editCollection.vue
@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Edit Collection</h3>
+            <h3 class="title">{{ $t("edit_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -31,10 +31,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="saveCollection">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>
diff --git a/components/collections/editFolder.vue b/components/collections/editFolder.vue
index 17388fd34..9cdfe000d 100644
--- a/components/collections/editFolder.vue
+++ b/components/collections/editFolder.vue
@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Edit Folder</h3>
+            <h3 class="title">{{ $t("edit_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -31,10 +31,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="editFolder">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>
diff --git a/components/collections/editRequest.vue b/components/collections/editRequest.vue
index 12d818909..f8fea28dc 100644
--- a/components/collections/editRequest.vue
+++ b/components/collections/editRequest.vue
@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Edit Request</h3>
+            <h3 class="title">{{ $t("edit_request") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -17,7 +17,7 @@
     <div slot="body">
       <ul>
         <li>
-          <label for="selectLabel">Label</label>
+          <label for="selectLabel">{{ $t("label") }}</label>
           <input
             type="text"
             id="selectLabel"
@@ -25,7 +25,7 @@
             @keyup.enter="saveRequest"
             :placeholder="request.name"
           />
-          <label for="selectCollection">Collection</label>
+          <label for="selectCollection">{{ $t("collection") }}</label>
           <span class="select-wrapper">
             <select
               type="text"
@@ -38,7 +38,7 @@
                 hidden
                 disabled
                 selected
-                >Current Collection</option
+                >{{ $t("current_collection") }}</option
               >
               <option
                 v-for="(collection, index) in $store.state.postwoman
@@ -50,7 +50,7 @@
               </option>
             </select>
           </span>
-          <label for="selectFolder">Folder</label>
+          <label for="selectFolder">{{ $t("folder") }}</label>
           <span class="select-wrapper">
             <select
               type="text"
@@ -75,10 +75,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="saveRequest">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 240778444..1addefd84 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -10,20 +10,20 @@
         </button>
       </div>
       <v-popover>
-        <button class="tooltip-target icon" v-tooltip="'More'">
+        <button class="tooltip-target icon" v-tooltip="$t('more')">
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
           <div>
             <button class="icon" @click="editFolder" v-close-popover>
               <i class="material-icons">edit</i>
-              <span>Edit</span>
+              <span>{{ $t("edit") }}</span>
             </button>
           </div>
           <div>
             <button class="icon" @click="removeFolder" v-close-popover>
               <i class="material-icons">delete</i>
-              <span>Delete</span>
+              <span>{{ $t("delete") }}</span>
             </button>
           </div>
         </template>
@@ -49,7 +49,7 @@
           />
         </li>
         <li v-if="folder.requests.length === 0">
-          <label>Folder is empty</label>
+          <label>{{ $t("folder_empty") }}</label>
         </li>
       </ul>
     </div>
diff --git a/components/collections/importExportCollections.vue b/components/collections/importExportCollections.vue
index e6396bc66..254bdc684 100644
--- a/components/collections/importExportCollections.vue
+++ b/components/collections/importExportCollections.vue
@@ -23,10 +23,10 @@
           <button
             class="icon"
             @click="openDialogChooseFileToReplaceWith"
-            v-tooltip="'Replace current'"
+            v-tooltip="$t('replace_current')"
           >
             <i class="material-icons">create_new_folder</i>
-            <span>Replace with JSON</span>
+            <span>{{ $t("replace_json") }}</span>
             <input
               type="file"
               @change="replaceWithJSON"
@@ -37,10 +37,10 @@
           <button
             class="icon"
             @click="openDialogChooseFileToImportFrom"
-            v-tooltip="'Preserve current'"
+            v-tooltip="$t('preserve_current')"
           >
             <i class="material-icons">folder_shared</i>
-            <span>Import from JSON</span>
+            <span>{{ $t("import_json") }}</span>
             <input
               type="file"
               @change="importFromJSON"
@@ -55,14 +55,14 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button
             class="icon primary"
             @click="exportJSON"
-            v-tooltip="'Download file'"
+            v-tooltip="$t('download_file')"
           >
-            Export
+            {{ $t("export") }}
           </button>
         </span>
       </div>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index c55054891..21e060a62 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -43,14 +43,14 @@ TODO:
       <div>
         <button class="icon" @click="displayModalAdd(true)">
           <i class="material-icons">add</i>
-          <span>New</span>
+          <span>{{ $t("new") }}</span>
         </button>
       </div>
       <div>
         <button
           class="icon"
           @click="displayModalImportExport(true)"
-          v-tooltip="'Import / Export'"
+          v-tooltip="$t('import_export')"
         >
           <i class="material-icons">import_export</i>
         </button>
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 7590acb3b..b687f0ec3 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="flex-wrap">
     <div>
-      <button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
+      <button class="icon" @click="selectRequest()" v-tooltip="$t('use_request')">
         <i class="material-icons">insert_drive_file</i>
         <span>{{ request.name }}</span>
       </button>
     </div>
     <v-popover>
-      <button class="tooltip-target icon" v-tooltip="'More'">
+      <button class="tooltip-target icon" v-tooltip="$t('more')">
         <i class="material-icons">more_vert</i>
       </button>
       <template slot="popover">
         <div>
           <button class="icon" @click="$emit('edit-request')" v-close-popover>
             <i class="material-icons">edit</i>
-            <span>Edit</span>
+            <span>{{ $t("edit") }}</span>
           </button>
         </div>
         <div>
           <button class="icon" @click="removeRequest" v-close-popover>
             <i class="material-icons">delete</i>
-            <span>Delete</span>
+            <span>{{ $t("delete") }}</span>
           </button>
         </div>
       </template>
diff --git a/components/collections/saveRequestAs.vue b/components/collections/saveRequestAs.vue
index 26a174d31..6cf3d6491 100644
--- a/components/collections/saveRequestAs.vue
+++ b/components/collections/saveRequestAs.vue
@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Save Request As</h3>
+            <h3 class="title">{{ $t("save_request_as") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -17,7 +17,7 @@
     <div slot="body">
       <ul>
         <li>
-          <label for="selectLabel">Label</label>
+          <label for="selectLabel">{{ $t("label") }}</label>
           <input
             type="text"
             id="selectLabel"
@@ -25,7 +25,7 @@
             :placeholder="defaultRequestName"
             @keyup.enter="saveRequestAs"
           />
-          <label for="selectCollection">Collection</label>
+          <label for="selectCollection">{{ $t("collection") }}</label>
           <span class="select-wrapper">
             <select
               type="text"
@@ -38,7 +38,7 @@
                 hidden
                 disabled
                 selected
-                >Select a Collection</option
+                >{{ $t("select_collection") }}</option
               >
               <option
                 v-for="(collection, index) in $store.state.postwoman
@@ -50,7 +50,7 @@
               </option>
             </select>
           </span>
-          <label for="selectFolder">Folder</label>
+          <label for="selectFolder">{{ $t("folder") }}</label>
           <span class="select-wrapper">
             <select
               type="text"
@@ -67,7 +67,7 @@
               </option>
             </select>
           </span>
-          <label for="selectRequest">Request</label>
+          <label for="selectRequest">{{ $t("request") }}</label>
           <span class="select-wrapper">
             <select
               type="text"
@@ -92,10 +92,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="saveRequestAs">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>
@@ -184,7 +184,7 @@ export default {
       const userDidntSpecifyCollection =
         this.$data.requestData.collectionIndex === undefined;
       if (userDidntSpecifyCollection) {
-        this.$toast.error("Select a Collection", {
+        this.$toast.error(this.$t("select_collection"), {
           icon: "error"
         });
         return;
diff --git a/components/graphql/field.vue b/components/graphql/field.vue
index b0fc403e5..a6f5a6f6d 100644
--- a/components/graphql/field.vue
+++ b/components/graphql/field.vue
@@ -23,7 +23,7 @@
     </div>
 
     <div class="field-deprecated" v-if="gqlField.isDeprecated">
-      DEPRECATED
+      {{ $t("deprecated") }}
     </div>
   </div>
 </template>
diff --git a/components/graphql/type.vue b/components/graphql/type.vue
index 0c9b338cd..0c93299a2 100644
--- a/components/graphql/type.vue
+++ b/components/graphql/type.vue
@@ -6,7 +6,7 @@
     </div>
 
     <div v-if="gqlType.getFields">
-      <h5>FIELDS</h5>
+      <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
         <gql-field :gqlField="field" :jumpTypeCallback="jumpTypeCallback" />
       </div>
diff --git a/components/history.vue b/components/history.vue
index ad248c56f..7b6a6102c 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -1,11 +1,16 @@
 <template>
-  <pw-section class="green" icon="history" label="History" ref="history">
+  <pw-section
+    class="green"
+    icon="history"
+    :label="$t('history')"
+    ref="history"
+  >
     <ul>
       <li id="filter-history">
         <input
           aria-label="Search"
           type="text"
-          placeholder="search history"
+          :placeholder="$t('search_history')"
           v-model="filterText"
         />
       </li>
@@ -22,7 +27,7 @@
             class="icon"
             :class="{ stared: entry.star }"
             @click="toggleStar(index)"
-            v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star' }"
+            v-tooltip="{ content: !entry.star ? $t('add_star') : $t('remove_star') }"
           >
             <i class="material-icons">
               {{ entry.star ? "star" : "star_border" }}
@@ -30,11 +35,11 @@
           </button>
           <li>
             <input
-              aria-label="Label"
+              :aria-label="$t('label')"
               type="text"
               readonly
               :value="entry.label"
-              placeholder="No label"
+              :placeholder="$t('no_label')"
               class="bg-color"
             />
           </li>
@@ -53,7 +58,7 @@
             </button>
           </li> -->
           <v-popover>
-            <button class="tooltip-target icon" v-tooltip="'Options'">
+            <button class="tooltip-target icon" v-tooltip="$t('options')">
               <i class="material-icons">more_vert</i>
             </button>
             <template slot="popover">
@@ -62,11 +67,11 @@
                   class="icon"
                   :id="'use-button#' + index"
                   @click="useHistory(entry)"
-                  aria-label="Edit"
+                  :aria-label="$t('edit')"
                   v-close-popover
                 >
                   <i class="material-icons">restore</i>
-                  <span>Restore</span>
+                  <span>{{ $t("restore") }}</span>
                 </button>
               </div>
               <div>
@@ -74,11 +79,11 @@
                   class="icon"
                   :id="'delete-button#' + index"
                   @click="deleteHistory(entry)"
-                  aria-label="Delete"
+                  :aria-label="$t('delete')"
                   v-close-popover
                 >
                   <i class="material-icons">delete</i>
-                  <span>Delete</span>
+                  <span>{{ $t("delete") }}</span>
                 </button>
               </div>
             </template>
@@ -87,7 +92,7 @@
         <div class="show-on-large-screen">
           <li class="method-list-item">
             <input
-              aria-label="Method"
+              :aria-label="$t('method')"
               type="text"
               readonly
               :value="entry.method"
@@ -105,20 +110,20 @@
         <div class="show-on-large-screen">
           <li>
             <input
-              aria-label="URL"
+              :aria-label="$t('url')"
               type="text"
               readonly
               :value="entry.url"
-              placeholder="No URL"
+              :placeholder="$t('no_url')"
             />
           </li>
           <li>
             <input
-              aria-label="Path"
+              :aria-label="$t('path')"
               type="text"
               readonly
               :value="entry.path"
-              placeholder="No path"
+              :placeholder="$t('no_path')"
             />
           </li>
         </div>
@@ -126,7 +131,7 @@
           <div v-if="showMore" class="show-on-large-screen">
             <li>
               <input
-                aria-label="Time"
+                :aria-label="$t('time')"
                 type="text"
                 readonly
                 :value="entry.time"
@@ -135,20 +140,20 @@
             </li>
             <li>
               <input
-                aria-label="Duration"
+                :aria-label="$t('duration')"
                 type="text"
                 readonly
                 :value="entry.duration"
-                placeholder="No duration"
+                :placeholder="$t('no_duration')"
               />
             </li>
             <li>
               <input
-                aria-label="Pre Request Script"
+                :aria-label="$t('prerequest_script')"
                 type="text"
                 readonly
                 :value="entry.preRequestScript"
-                placeholder="No pre request script"
+                :placeholder="$t('no_prerequest_script')"
               />
             </li>
           </div>
@@ -159,11 +164,11 @@
       :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
     >
       <li>
-        <label>Nothing found "{{ filterText }}"</label>
+        <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
       </li>
     </ul>
     <p v-if="history.length === 0" class="info">
-      History is empty
+      {{ $t("history_empty") }}
     </p>
     <div v-if="history.length !== 0">
       <div class="flex-wrap" v-if="!isClearingHistory">
@@ -174,23 +179,23 @@
           @click="enableHistoryClearing"
         >
           <i class="material-icons">clear_all</i>
-          <span>Clear All</span>
+          <span>{{ $t("clear_all") }}</span>
         </button>
         <v-popover>
-          <button class="tooltip-target icon" v-tooltip="'Sort'">
+          <button class="tooltip-target icon" v-tooltip="$t('sort')">
             <i class="material-icons">sort</i>
           </button>
           <template slot="popover">
             <div>
               <button class="icon" @click="sort_by_label()" v-close-popover>
                 <i class="material-icons">sort_by_alpha</i>
-                <span>Label</span>
+                <span>{{ $t("label") }}</span>
               </button>
             </div>
             <div>
               <button class="icon" @click="sort_by_time()" v-close-popover>
                 <i class="material-icons">access_time</i>
-                <span>Time</span>
+                <span>{{ $t("time") }}</span>
               </button>
             </div>
             <div>
@@ -200,25 +205,25 @@
                 v-close-popover
               >
                 <i class="material-icons">assistant</i>
-                <span>Status</span>
+                <span>{{ $t("status") }}</span>
               </button>
             </div>
             <div>
               <button class="icon" @click="sort_by_url()" v-close-popover>
                 <i class="material-icons">language</i>
-                <span>URL</span>
+                <span>{{ $t("url") }}</span>
               </button>
             </div>
             <div>
               <button class="icon" @click="sort_by_path()" v-close-popover>
                 <i class="material-icons">timeline</i>
-                <span>Path</span>
+                <span>{{ $t("path") }}</span>
               </button>
             </div>
             <div v-if="showMore">
               <button class="icon" @click="sort_by_duration()" v-close-popover>
                 <i class="material-icons">timer</i>
-                <span>Duration</span>
+                <span>{{ $t("duration") }}</span>
               </button>
             </div>
             <div>
@@ -226,20 +231,20 @@
                 <i class="material-icons">
                   {{ !showMore ? "first_page" : "last_page" }}
                 </i>
-                <span>{{ !showMore ? "Show more" : "Hide more" }}</span>
+                <span>{{ !showMore ? $t("show_more") : $t("hide_more") }}</span>
               </button>
             </div>
           </template>
         </v-popover>
       </div>
       <div class="flex-wrap" v-else>
-        <label for="clear-history-button" class="info">Are you sure?</label>
+        <label for="clear-history-button" class="info">{{ $t("are_you_sure") }}</label>
         <div>
           <button
             class="icon"
             id="confirm-clear-history-button"
             @click="clearHistory"
-            v-tooltip="'Yes'"
+            v-tooltip="$t('yes')"
           >
             <i class="material-icons">done</i>
           </button>
@@ -247,7 +252,7 @@
             class="icon"
             id="reject-clear-history-button"
             @click="disableHistoryClearing"
-            v-tooltip="'No'"
+            v-tooltip="$t('no')"
           >
             <i class="material-icons">close</i>
           </button>
@@ -371,7 +376,7 @@ export default {
       this.filterText = "";
       this.disableHistoryClearing();
       updateOnLocalStorage("history", this.history);
-      this.$toast.error("History Deleted", {
+      this.$toast.error(this.$t("history_deleted"), {
         icon: "delete"
       });
     },
@@ -392,7 +397,7 @@ export default {
         this.filterText = "";
       }
       updateOnLocalStorage("history", this.history);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete"
       });
     },
diff --git a/lang/en-US.js b/lang/en-US.js
index 9ad7e21a1..0fd4d880d 100644
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -106,5 +106,140 @@ export default {
   client_id: "Client ID",
   scope: "Scope",
   state: "State",
-  token_req_list: "Token Request List"
+  token_req_list: "Token Request List",
+  no_path: "No path",
+  no_label: "No label",
+  prerequest_script: "Pre-Request Script",
+  no_prerequest_script: "No pre-request script",
+  search_history: "search history",
+  history_empty: "History is empty",
+  history_deleted: "History Deleted",
+  clear: "Clear",
+  clear_all: "Clear All",
+  cleared: "Cleared",
+  close: "Close",
+  sort: "Sort",
+  time: "Time",
+  duration: "Duration",
+  no_duration: "No duration",
+  show_more: "Show more",
+  hide_more: "Hide more",
+  collection: "Collection",
+  current_collection: "Current Collection",
+  select_collection: "Select a Collection",
+  create_collection: "Create a Collection",
+  new: "New",
+  import_export: "Import / Export",
+  more: "More",
+  folder: "Folder",
+  new_folder: "New Folder",
+  my_new_folder: "My New Folder",
+  folder_empty: "Folder is empty",
+  edit_folder: "Edit Folder",
+  edit: "Edit",
+  delete: "Delete",
+  deleted: "Deleted",
+  undo: "Undo",
+  collection_empty: "Collection is empty",
+  new_collection: "New Collection",
+  my_new_collection: "My New Collection",
+  edit_collection: "Edit Collection",
+  edit_request: "Edit Request",
+  save_request_as: "Save Request As",
+  export: "Export",
+  connecting_to: "Connecting to {name}...",
+  connected: "Connected",
+  connected_to: "Connected to {name}",
+  disconnected: "Disconnected",
+  disconnected_from: "Disconnected from {name}",
+  something_went_wrong: "Something went wrong!",
+  error_occurred: "An error has occurred.",
+  browser_support_sse: "This browser doesn't seems to have Server Sent Events support.",
+  log: "Log",
+  no_url: "No URL",
+  run_query: "Run Query",
+  copy_query: "Copy Query",
+  kinda_dark: "Kinda Dark",
+  clearly_white: "Clearly White",
+  just_black: "Just Black",
+  auto_system: "Auth (system)",
+  green: "Green",
+  yellow: "Yellow",
+  pink: "Pink",
+  red: "Red",
+  purple: "Purple",
+  orange: "Orange",
+  cyan: "Cyan",
+  blue: "Blue",
+  loading: "Loading...",
+  fetching: "Fetching...",
+  waiting_send_req: "(waiting to send request)",
+  cancel: "Cancel",
+  save: "Save",
+  dismiss: "Dismiss",
+  are_you_sure: "Are you sure?",
+  yes: "Yes",
+  no: "No",
+  restore: "Restore",
+  add_star: "Add star",
+  remove_star: "Remove star",
+  nothing_found: "Nothing found",
+  replace_current: "Replace current",
+  replace_json: "Replace with JSON",
+  preserve_current: "Preserve current",
+  import_json: "Import from JSON",
+  download_file: "Download file",
+  upload_file: "Upload file",
+  copy_response: "Copy response",
+  copy_code: "Copy code",
+  copy_schema: "Copy Schema",
+  use_request: "Use request",
+  documentation: "Documentation",
+  docs: "Docs",
+  reset_default: "Reset to default",
+  fields: "FIELDS",
+  deprecated: "DEPRECATED",
+  add_one_header: "(add at least one header)",
+  add_one_parameter: "(add at least one parameter)",
+  header_count: "header {count}",
+  parameter_count: "parameter {count}",
+  variable_count: "variable {count}",
+  value_count: "value {count}",
+  send_request_first: "Send a request first",
+  generate_docs: "Generate Documentation",
+  generate_docs_message: "Import any Postwoman Collection to Generate Documentation on-the-go.",
+  generate_docs_first: "Generate documentation first",
+  docs_generated: "Documentation generated",
+  import_collections: "Import collections",
+  optional: "(optional)",
+  json: "JSON",
+  none: "None",
+  username: "Username",
+  password: "Password",
+  token: "Token",
+  payload: "Payload",
+  choose_file: "Choose a file",
+  file_imported: "File imported",
+  f12_details: "(F12 for details)",
+  we_use_cookies: "We use cookies",
+  copied_to_clipboard: "Copied to clipboard",
+  finished_in: "Finished in {duration}ms",
+  check_console_details: "Check console for details.",
+  download_started: "Download started",
+  url_invalid_format: "URL is not formatted properly",
+  curl_invalid_format: "cURL is not formatted properly",
+  enable_proxy: "Try enabling Proxy",
+  complete_config_urls: "Please complete configuration urls.",
+  token_request_saved: "Token request saved",
+  donate_info1: "If you have enjoyed the productivity of using Postwoman, consider donating as a sign of appreciation.",
+  donate_info2: "You can support Postwoman development via the following methods:",
+  one_time_recurring: "One-time or recurring",
+  one_time: "One-time",
+  recurring: "Recurring",
+  wiki: "Wiki",
+  error: "Error",
+  go_home: "Go Home",
+  reload: "Reload",
+  enter_curl: "Enter cURL",
+  empty: "Empty"
 };
diff --git a/layouts/default.vue b/layouts/default.vue
index 30e0d494b..6ed7a7c0c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -12,7 +12,7 @@
               :to="localePath('index')"
               :class="linkActive('/')"
               v-tooltip.right="$t('home')"
-              aria-label="Home"
+              :aria-label="$t('home')"
             >
               <logo alt class="material-icons" style="height: 24px;"></logo>
             </nuxt-link>
@@ -27,7 +27,7 @@
               :to="localePath('graphql')"
               :class="linkActive('/graphql')"
               v-tooltip.right="$t('graphql')"
-              aria-label="GraphQL"
+              :aria-label="$t('graphql')"
             >
               <svg
                 class="material-icons"
@@ -141,8 +141,8 @@
             <nuxt-link
               :to="localePath('doc')"
               :class="linkActive('/doc')"
-              v-tooltip.right="'Documentation'"
-              aria-label="Documentation"
+              v-tooltip.right="$t('documentation')"
+              :aria-label="$t('documentation')"
             >
               <i class="material-icons">books</i>
             </nuxt-link>
@@ -150,7 +150,7 @@
               :to="localePath('settings')"
               :class="linkActive('/settings')"
               v-tooltip.right="$t('settings')"
-              aria-label="Settings"
+              :aria-label="$t('settings')"
             >
               <i class="material-icons">settings</i>
             </nuxt-link>
@@ -289,7 +289,7 @@
                   <i class="material-icons">offline_bolt</i>
                 </button>
                 <v-popover>
-                  <button class="icon" v-tooltip="'More'">
+                  <button class="icon" v-tooltip="$t('more')">
                     <i class="material-icons">more_vert</i>
                   </button>
                   <template slot="popover">
@@ -454,18 +454,17 @@
       </div>
       <div slot="body">
         <p class="info">
-          If you have enjoyed the productivity of using Postwoman, consider
-          donating as a sign of appreciation.
+          {{ $t("donate_info1") }}
         </p>
         <p class="info">
-          You can support Postwoman development via the following methods:
+          {{ $t("donate_info2") }}
         </p>
         <div>
           <a
             href="https://opencollective.com/postwoman"
             target="_blank"
             rel="noopener"
-            v-tooltip.right="'One-time or recurring'"
+            v-tooltip.right="$t('one_time_recurring')"
           >
             <button class="icon">
               <i class="material-icons">donut_large</i>
@@ -478,7 +477,7 @@
             href="https://www.paypal.me/liyascthomas"
             target="_blank"
             rel="noopener"
-            v-tooltip.right="'One-time'"
+            v-tooltip.right="$t('one_time')"
           >
             <button class="icon">
               <i class="material-icons">payment</i>
@@ -491,7 +490,7 @@
             href="https://www.patreon.com/liyasthomas"
             target="_blank"
             rel="noopener"
-            v-tooltip.right="'Recurring'"
+            v-tooltip.right="$t('recurring')"
           >
             <button class="icon">
               <i class="material-icons">local_parking</i>
@@ -577,13 +576,13 @@ export default {
       this.showInstallPrompt = await intializePwa();
       let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes";
       if (!cookiesAllowed) {
-        this.$toast.show("We use cookies", {
+        this.$toast.show(this.$t("we_use_cookies"), {
           icon: "info",
           duration: 5000,
           theme: "toasted-primary",
           action: [
             {
-              text: "Dismiss",
+              text: this.$t("dismiss"),
               onClick: (e, toastObject) => {
                 localStorage.setItem("cookiesAllowed", "yes");
                 toastObject.goAway(0);
diff --git a/layouts/error.vue b/layouts/error.vue
index 76a49a60f..ea7a3a1af 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="page page-error">
-    <img src="~static/icons/error.svg" alt="Error" class="error_banner" />
+    <img src="~static/icons/error.svg" :alt="$t('error')" class="error_banner" />
     <h2>{{ error.statusCode }}</h2>
     <h3>{{ error.message }}</h3>
     <p>
       <nuxt-link to="/">
-        <button>Go Home</button>
+        <button>{{ $t("go_home") }}</button>
       </nuxt-link>
     </p>
     <p>
-      <a href @click.prevent="reloadApplication">Reload</a>
+      <a href @click.prevent="reloadApplication">{{ $t("reload") }}</a>
     </p>
   </div>
 </template>
diff --git a/nuxt.config.js b/nuxt.config.js
index 3e70e1f1a..99d7d8dfc 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -361,6 +361,9 @@ export default {
       }
     ],
     defaultLocale: "en",
+    vueI18n: {
+      fallbackLocale: "en"
+    },
     lazy: true,
     langDir: "lang/"
   },
diff --git a/pages/doc.vue b/pages/doc.vue
index 34cd64ed0..7b8ca19a8 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="page">
-    <pw-section class="blue" label="Collections" ref="collections">
+    <pw-section class="blue" :label="$t('collections')" ref="collections">
       <ul>
         <li>
           <p class="info">
-            Import any Postwoman Collection to Generate Documentation on-the-go.
+            {{ $t("generate_docs_message") }}
           </p>
         </li>
       </ul>
@@ -14,10 +14,10 @@
             <button
               class="icon"
               @click="$refs.collectionUpload.click()"
-              v-tooltip="'JSON'"
+              v-tooltip="$t('json')"
             >
               <i class="material-icons">folder</i>
-              <span>Import collections</span>
+              <span>{{ $t("import_collections") }}</span>
             </button>
           </label>
           <input
@@ -48,7 +48,7 @@
         <li>
           <button class="icon" @click="getDoc">
             <i class="material-icons">book</i>
-            <span>Generate Documentation</span>
+            <span>{{ $t("generate_docs") }}</span>
           </button>
         </li>
       </ul>
@@ -56,7 +56,7 @@
 
     <pw-section class="green" label="Documentation" ref="documentation">
       <p v-if="this.items.length === 0" class="info">
-        Generate documentation first
+        {{ $t("generate_docs_first") }}
       </p>
       <div>
         <span
@@ -66,7 +66,7 @@
         >
           <h2>
             <i class="material-icons">folder</i>
-            {{ collection.name || "None" }}
+            {{ collection.name || $t("none") }}
           </h2>
           <span
             class="folder"
@@ -75,7 +75,7 @@
           >
             <h3>
               <i class="material-icons">folder_open</i>
-              {{ folder.name || "None" }}
+              {{ folder.name || $t("none") }}
             </h3>
             <span
               class="request"
@@ -84,46 +84,46 @@
             >
               <h4>
                 <i class="material-icons">insert_drive_file</i>
-                {{ request.name || "None" }}
+                {{ request.name || $t("none") }}
               </h4>
               <p class="doc-desc" v-if="request.url">
                 <span>
-                  URL: <code>{{ request.url || "None" }}</code>
+                  {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.path">
                 <span>
-                  Path: <code>{{ request.path || "None" }}</code>
+                  {{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.method">
                 <span>
-                  Method: <code>{{ request.method || "None" }}</code>
+                  {{ $t("method") }}: <code>{{ request.method || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.auth">
                 <span>
-                  Authentication:
-                  <code>{{ request.auth || "None" }}</code>
+                  {{ $t("authentication") }}:
+                  <code>{{ request.auth || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.httpUser">
                 <span>
-                  Username: <code>{{ request.httpUser || "None" }}</code>
+                  {{ $t("username") }}: <code>{{ request.httpUser || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.httpPassword">
                 <span>
-                  Password:
-                  <code>{{ request.httpPassword || "None" }}</code>
+                  {{ $t("password") }}:
+                  <code>{{ request.httpPassword || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.bearerToken">
                 <span>
-                  Token: <code>{{ request.bearerToken || "None" }}</code>
+                  {{ $t("token") }}: <code>{{ request.bearerToken || $t("none") }}</code>
                 </span>
               </p>
-              <h4 v-if="request.headers.length > 0">Headers</h4>
+              <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
               <span
                 v-if="request.headers"
                 v-for="header in request.headers"
@@ -131,12 +131,12 @@
               >
                 <p class="doc-desc">
                   <span>
-                    {{ header.key || "None" }}:
-                    <code>{{ header.value || "None" }}</code>
+                    {{ header.key || $t("none") }}:
+                    <code>{{ header.value || $t("none") }}</code>
                   </span>
                 </p>
               </span>
-              <h4 v-if="request.params.length > 0">Parameters</h4>
+              <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
               <span
                 v-if="request.params"
                 v-for="parameter in request.params"
@@ -144,12 +144,12 @@
               >
                 <p class="doc-desc">
                   <span>
-                    {{ parameter.key || "None" }}:
-                    <code>{{ parameter.value || "None" }}</code>
+                    {{ parameter.key || $t("none") }}:
+                    <code>{{ parameter.value || $t("none") }}</code>
                   </span>
                 </p>
               </span>
-              <h4 v-if="request.bodyParam">Payload</h4>
+              <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
               <span
                 v-if="request.bodyParam"
                 v-for="payload in request.bodyParam"
@@ -157,26 +157,26 @@
               >
                 <p class="doc-desc">
                   <span>
-                    {{ payload.key || "None" }}:
-                    <code>{{ payload.value || "None" }}</code>
+                    {{ payload.key || $t("none") }}:
+                    <code>{{ payload.value || $t("none") }}</code>
                   </span>
                 </p>
               </span>
               <p class="doc-desc" v-if="request.rawParams">
                 <span>
-                  Parameters: <code>{{ request.rawParams || "None" }}</code>
+                  {{ $t("parameters") }}: <code>{{ request.rawParams || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.contentType">
                 <span>
-                  Content Type:
-                  <code>{{ request.contentType || "None" }}</code>
+                  {{ $t("content_type") }}:
+                  <code>{{ request.contentType || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.requestType">
                 <span>
-                  Request Type:
-                  <code>{{ request.requestType || "None" }}</code>
+                  {{ $t("request_type") }}:
+                  <code>{{ request.requestType || $t("none") }}</code>
                 </span>
               </p>
             </span>
@@ -188,45 +188,45 @@
           >
             <h4>
               <i class="material-icons">insert_drive_file</i>
-              {{ request.name || "None" }}
+              {{ request.name || $t("none") }}
             </h4>
             <p class="doc-desc" v-if="request.url">
               <span>
-                URL: <code>{{ request.url || "None" }}</code>
+                {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.path">
               <span>
-                Path: <code>{{ request.path || "None" }}</code>
+                {{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.method">
               <span>
-                Method: <code>{{ request.method || "None" }}</code>
+                {{ $t("method") }}: <code>{{ request.method || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.auth">
               <span>
-                Authentication:
-                <code>{{ request.auth || "None" }}</code>
+                {{ $t("authentication") }}:
+                <code>{{ request.auth || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.httpUser">
               <span>
-                Username: <code>{{ request.httpUser || "None" }}</code>
+                {{ $t("username") }}: <code>{{ request.httpUser || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.httpPassword">
               <span>
-                Password: <code>{{ request.httpPassword || "None" }}</code>
+                {{ $t("password") }}: <code>{{ request.httpPassword || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.bearerToken">
               <span>
-                Token: <code>{{ request.bearerToken || "None" }}</code>
+                {{ $t("token") }}: <code>{{ request.bearerToken || $t("none") }}</code>
               </span>
             </p>
-            <h4 v-if="request.headers.length > 0">Headers</h4>
+            <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
             <span
               v-if="request.headers"
               v-for="header in request.headers"
@@ -234,12 +234,12 @@
             >
               <p class="doc-desc">
                 <span>
-                  {{ header.key || "None" }}:
-                  <code>{{ header.value || "None" }}</code>
+                  {{ header.key || $t("none") }}:
+                  <code>{{ header.value || $t("none") }}</code>
                 </span>
               </p>
             </span>
-            <h4 v-if="request.params.length > 0">Parameters</h4>
+            <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
             <span
               v-if="request.params"
               v-for="parameter in request.params"
@@ -247,12 +247,12 @@
             >
               <p class="doc-desc">
                 <span>
-                  {{ parameter.key || "None" }}:
-                  <code>{{ parameter.value || "None" }}</code>
+                  {{ parameter.key || $t("none") }}:
+                  <code>{{ parameter.value || $t("none") }}</code>
                 </span>
               </p>
             </span>
-            <h4 v-if="request.bodyParam">Payload</h4>
+            <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
             <span
               v-if="request.bodyParam"
               v-for="payload in request.bodyParam"
@@ -260,26 +260,26 @@
             >
               <p class="doc-desc">
                 <span>
-                  {{ payload.key || "None" }}:
-                  <code>{{ payload.value || "None" }}</code>
+                  {{ payload.key || $t("none") }}:
+                  <code>{{ payload.value || $t("none") }}</code>
                 </span>
               </p>
             </span>
             <p class="doc-desc" v-if="request.rawParams">
               <span>
-                Parameters: <code>{{ request.rawParams || "None" }}</code>
+                {{ $t("parameters") }}: <code>{{ request.rawParams || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.contentType">
               <span>
-                Content Type:
-                <code>{{ request.contentType || "None" }}</code>
+                {{ $t("content_type") }}:
+                <code>{{ request.contentType || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.requestType">
               <span>
-                Request Type:
-                <code>{{ request.requestType || "None" }}</code>
+                {{ $t("request_type") }}:
+                <code>{{ request.requestType || $t("none") }}</code>
               </span>
             </p>
           </span>
@@ -360,11 +360,11 @@ export default {
           this.collectionJSON = e.target.result;
         };
         reader.readAsText(file);
-        this.$toast.info("File imported", {
+        this.$toast.info(this.$t("file_imported"), {
           icon: "attach_file"
         });
       } else {
-        this.$toast.error("Choose a file", {
+        this.$toast.error(this.$t("choose_file"), {
           icon: "attach_file"
         });
       }
@@ -373,7 +373,7 @@ export default {
     getDoc() {
       try {
         this.items = JSON.parse(this.collectionJSON);
-        this.$toast.info("Documentation generated", {
+        this.$toast.info(this.$t("docs_generated"), {
           icon: "book"
         });
       } catch (e) {
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 4f21ba2d8..98f6e427c 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <pw-section class="blue" label="Endpoint" ref="endpoint">
+        <pw-section class="blue" :label="$t('endpoint')" ref="endpoint">
           <ul>
             <li>
               <label for="url">{{ $t("url") }}</label>
@@ -25,7 +25,7 @@
           </ul>
         </pw-section>
 
-        <pw-section class="orange" label="Headers" ref="headers">
+        <pw-section class="orange" :label="$t('headers')" ref="headers">
           <ul>
             <li>
               <div class="flex-wrap">
@@ -34,7 +34,7 @@
                   <button
                     class="icon"
                     @click="headers = []"
-                    v-tooltip.bottom="'Clear'"
+                    v-tooltip.bottom="$t('clear')"
                   >
                     <i class="material-icons">clear_all</i>
                   </button>
@@ -45,7 +45,7 @@
                 readonly
                 v-textarea-auto-height="headerString"
                 v-model="headerString"
-                placeholder="(add at least one header)"
+                :placeholder="$t('add_one_header')"
                 rows="1"
               ></textarea>
             </li>
@@ -53,7 +53,7 @@
           <ul v-for="(header, index) in headers" :key="index">
             <li>
               <autocomplete
-                :placeholder="'header ' + (index + 1)"
+                :placeholder="$t('header_count', { count: index + 1 })"
                 :source="commonHeaders"
                 :spellcheck="false"
                 :value="header.key"
@@ -68,7 +68,7 @@
             </li>
             <li>
               <input
-                :placeholder="'value ' + (index + 1)"
+                :placeholder="$t('value_count', { count: index + 1 })"
                 :name="'value' + index"
                 :value="header.value"
                 @change="
@@ -85,6 +85,7 @@
                 <button
                   class="icon"
                   @click="removeRequestHeader(index)"
+                  v-tooltip.bottom="$t('delete')"
                   id="header"
                 >
                   <i class="material-icons">delete</i>
@@ -102,7 +103,7 @@
           </ul>
         </pw-section>
 
-        <pw-section class="green" label="Schema" ref="schema">
+        <pw-section class="green" :label="$t('schema')" ref="schema">
           <div class="flex-wrap">
             <label>{{ $t("response") }}</label>
             <div>
@@ -112,8 +113,8 @@
                 ref="ToggleExpandResponse"
                 v-tooltip="{
                   content: !expandResponse
-                    ? 'Expand response'
-                    : 'Collapse response'
+                    ? $t('expand_response')
+                    : $t('collapse_response')
                 }"
               >
                 <i class="material-icons">
@@ -124,7 +125,7 @@
                 class="icon"
                 @click="downloadResponse"
                 ref="downloadResponse"
-                v-tooltip="'Download file'"
+                v-tooltip="$t('download_file')"
               >
                 <i class="material-icons">get_app</i>
               </button>
@@ -132,7 +133,7 @@
                 class="icon"
                 ref="copySchemaCode"
                 @click="copySchema"
-                v-tooltip="'Copy Schema'"
+                v-tooltip="$t('copy_schema')"
               >
                 <i class="material-icons">file_copy</i>
               </button>
@@ -153,14 +154,14 @@
           />
         </pw-section>
 
-        <pw-section class="cyan" label="Query" ref="query">
+        <pw-section class="cyan" :label="$t('query')" ref="query">
           <div class="flex-wrap">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
               <button
                 class="icon"
                 @click="runQuery()"
-                v-tooltip.bottom="'Run Query'"
+                v-tooltip.bottom="$t('run_query')"
               >
                 <i class="material-icons">play_arrow</i>
               </button>
@@ -168,7 +169,7 @@
                 class="icon"
                 @click="copyQuery"
                 ref="copyQueryButton"
-                v-tooltip="'Copy Query'"
+                v-tooltip="$t('copy_query')"
               >
                 <i class="material-icons">file_copy</i>
               </button>
@@ -191,7 +192,7 @@
               <button
                 class="icon"
                 @click="variables = []"
-                v-tooltip.bottom="'Clear'"
+                v-tooltip.bottom="$t('clear')"
               >
                 <i class="material-icons">clear_all</i>
               </button>
@@ -200,7 +201,7 @@
           <ul v-for="(variable, index) in variables" :key="index">
             <li>
               <input
-                :placeholder="'variable ' + (index + 1)"
+                :placeholder="$t('variable_count', { count: index + 1 })"
                 :name="'variable_key_' + index"
                 :value="variable.key"
                 @change="
@@ -214,7 +215,7 @@
             </li>
             <li>
               <input
-                :placeholder="'value ' + (index + 1)"
+                :placeholder="$t('value_count', { count: index + 1 })"
                 :name="'variable_value_' + index"
                 :value="variable.value"
                 @change="
@@ -228,7 +229,11 @@
             </li>
             <div>
               <li>
-                <button class="icon" @click="removeQueryVariable(index)">
+                <button
+                  class="icon"
+                  @click="removeQueryVariable(index)"
+                  v-tooltip.bottom="$t('delete')"
+                >
                   <i class="material-icons">delete</i>
                 </button>
               </li>
@@ -252,7 +257,7 @@
                 class="icon"
                 @click="copyResponse"
                 ref="copyResponseButton"
-                v-tooltip="'Copy Response'"
+                v-tooltip="$t('copy_response')"
               >
                 <i class="material-icons">file_copy</i>
               </button>
@@ -274,7 +279,7 @@
         </pw-section>
       </div>
       <aside class="sticky-inner inner-right">
-        <pw-section class="purple" label="Docs" ref="docs">
+        <pw-section class="purple" :label="$t('docs')" ref="docs">
           <section>
             <input
               v-if="queryFields.length > 0"
@@ -366,7 +371,7 @@
             "
             class="info"
           >
-            Send a request first
+            {{ $t("send_request_first") }}
           </p>
         </pw-section>
       </aside>
@@ -605,7 +610,7 @@ export default {
       aux.select();
       document.execCommand("copy");
       document.body.removeChild(aux);
-      this.$toast.success("Copied to clipboard", {
+      this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done"
       });
       setTimeout(
@@ -621,7 +626,7 @@ export default {
       aux.select();
       document.execCommand("copy");
       document.body.removeChild(aux);
-      this.$toast.success("Copied to clipboard", {
+      this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done"
       });
       setTimeout(
@@ -637,7 +642,7 @@ export default {
       aux.select();
       document.execCommand("copy");
       document.body.removeChild(aux);
-      this.$toast.success("Copied to clipboard", {
+      this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done"
       });
       setTimeout(
@@ -705,13 +710,13 @@ export default {
 
         this.$nuxt.$loading.finish();
         const duration = Date.now() - startTime;
-        this.$toast.info(`Finished in ${duration}ms`, {
+        this.$toast.info(this.$t("finished_in", { duration }), {
           icon: "done"
         });
       } catch (error) {
         this.$nuxt.$loading.finish();
 
-        this.$toast.error(error + " (F12 for details)", {
+        this.$toast.error(`${error} ${this.$t("f12_details")}`, {
           icon: "error"
         });
         console.log("Error", error);
@@ -719,7 +724,7 @@ export default {
     },
     async getSchema() {
       const startTime = Date.now();
-      this.schemaString = "Loading...";
+      this.schemaString = this.$t("loading");
       this.scrollInto("schema");
 
       // Start showing the loading bar as soon as possible.
@@ -824,13 +829,13 @@ export default {
 
         this.$nuxt.$loading.finish();
         const duration = Date.now() - startTime;
-        this.$toast.info(`Finished in ${duration}ms`, {
+        this.$toast.info(this.$t("finished_in", { duration }), {
           icon: "done"
         });
       } catch (error) {
         this.$nuxt.$loading.finish();
-        this.schemaString = error + ". Check console for details.";
-        this.$toast.error(error + " (F12 for details)", {
+        this.schemaString = `${error}. ${check_console_details}`;
+        this.$toast.error(`${error} ${this.$t("f12_details")}`, {
           icon: "error"
         });
         console.log("Error", error);
@@ -854,7 +859,7 @@ export default {
       document.body.appendChild(a);
       a.click();
       this.$refs.downloadResponse.innerHTML = this.doneButton;
-      this.$toast.success("Download started", {
+      this.$toast.success(this.$t("download_started"), {
         icon: "done"
       });
       setTimeout(() => {
@@ -875,10 +880,10 @@ export default {
       const oldHeaders = this.headers.slice();
 
       this.$store.commit("removeGQLHeader", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           duration: 4000,
           onClick: (e, toastObject) => {
             this.headers = oldHeaders;
@@ -899,10 +904,10 @@ export default {
       const oldVariables = this.variables.slice();
 
       this.$store.commit("removeGQLVariable", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           duration: 4000,
           onClick: (e, toastObject) => {
             this.variables = oldVariables;
diff --git a/pages/index.vue b/pages/index.vue
index 422b6ade5..1036c0c03 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -18,7 +18,7 @@
                     target="_blank"
                     rel="noopener"
                   >
-                    <button class="icon" v-tooltip="'Wiki'">
+                    <button class="icon" v-tooltip="$t('wiki')">
                       <i class="material-icons">help</i>
                     </button>
                   </a>
@@ -40,7 +40,11 @@
           </ul>
         </pw-section>
 
-        <pw-section class="blue" label="Request" ref="request">
+        <pw-section
+          class="blue"
+          :label="$t('request')"
+          ref="request"
+        >
           <ul>
             <li>
               <label for="method">{{ $t("method") }}</label>
@@ -86,7 +90,7 @@
                 name="label"
                 type="text"
                 v-model="label"
-                placeholder="(optional)"
+                :placeholder="$t('optional')"
               />
             </li>
             <li>
@@ -135,7 +139,7 @@
                       <button
                         class="icon"
                         @click="$refs.payload.click()"
-                        v-tooltip="'Upload file'"
+                        v-tooltip="$t('upload_file')"
                       >
                         <i class="material-icons">attach_file</i>
                       </button>
@@ -159,7 +163,7 @@
                     readonly
                     v-textarea-auto-height="rawRequestBody"
                     v-model="rawRequestBody"
-                    placeholder="(add at least one parameter)"
+                    :placeholder="$t('add_one_parameter')"
                     rows="1"
                   ></textarea>
                 </li>
@@ -200,6 +204,7 @@
                     <button
                       class="icon"
                       @click="removeRequestBodyParam(index)"
+                      v-tooltip.bottom="$t('delete')"
                       id="delParam"
                     >
                       <i class="material-icons">delete</i>
@@ -306,7 +311,7 @@
               <button
                 class="icon"
                 @click="clearContent('', $event)"
-                v-tooltip.bottom="'Clear All'"
+                v-tooltip.bottom="$t('clear_all')"
                 ref="clearAll"
               >
                 <i class="material-icons">clear_all</i>
@@ -321,7 +326,7 @@
           <div class="tab">
             <pw-section
               class="cyan"
-              label="Authentication"
+              :label="$t('authentication')"
               ref="authentication"
             >
               <ul>
@@ -332,7 +337,7 @@
                       <button
                         class="icon"
                         @click="clearContent('auth', $event)"
-                        v-tooltip.bottom="'Clear'"
+                        v-tooltip.bottom="$t('clear')"
                       >
                         <i class="material-icons">clear_all</i>
                       </button>
@@ -443,14 +448,14 @@
                       <button
                         class="icon"
                         @click="clearContent('access_token', $event)"
-                        v-tooltip.bottom="'Clear'"
+                        v-tooltip.bottom="$t('clear')"
                       >
                         <i class="material-icons">clear_all</i>
                       </button>
                       <button
                         class="icon"
                         @click="showTokenRequest = false"
-                        v-tooltip.bottom="'Close'"
+                        v-tooltip.bottom="$t('close')"
                       >
                         <i class="material-icons">close</i>
                       </button>
@@ -458,7 +463,7 @@
                   </div>
                   <input
                     id="token-name"
-                    placeholder="(optional)"
+                    :placeholder="$t('optional')"
                     name="token_name"
                     v-model="accessTokenName"
                     type="text"
@@ -556,7 +561,7 @@
                       <button
                         class="icon"
                         @click="clearContent('headers', $event)"
-                        v-tooltip.bottom="'Clear'"
+                        v-tooltip.bottom="$t('clear')"
                       >
                         <i class="material-icons">clear_all</i>
                       </button>
@@ -567,7 +572,7 @@
                     readonly
                     v-textarea-auto-height="headerString"
                     v-model="headerString"
-                    placeholder="(add at least one header)"
+                    :placeholder="$t('add_one_header')"
                     rows="1"
                   ></textarea>
                 </li>
@@ -575,7 +580,7 @@
               <ul v-for="(header, index) in headers" :key="index">
                 <li>
                   <autocomplete
-                    :placeholder="'header ' + (index + 1)"
+                    :placeholder="$t('header_count', { count: index + 1 })"
                     :source="commonHeaders"
                     :spellcheck="false"
                     :value="header.key"
@@ -591,7 +596,7 @@
                 </li>
                 <li>
                   <input
-                    :placeholder="'value ' + (index + 1)"
+                    :placeholder="$t('value_count', { count: index + 1 })"
                     :name="'value' + index"
                     :value="header.value"
                     @change="
@@ -608,6 +613,7 @@
                     <button
                       class="icon"
                       @click="removeRequestHeader(index)"
+                      v-tooltip.bottom="$t('delete')"
                       id="header"
                     >
                       <i class="material-icons">delete</i>
@@ -637,7 +643,7 @@
                       <button
                         class="icon"
                         @click="clearContent('parameters', $event)"
-                        v-tooltip.bottom="'Clear'"
+                        v-tooltip.bottom="$t('clear')"
                       >
                         <i class="material-icons">clear_all</i>
                       </button>
@@ -648,7 +654,7 @@
                     readonly
                     v-textarea-auto-height="queryString"
                     v-model="queryString"
-                    placeholder="(add at least one parameter)"
+                    :placeholder="$t('add_one_parameter')"
                     rows="1"
                   ></textarea>
                 </li>
@@ -656,7 +662,7 @@
               <ul v-for="(param, index) in params" :key="index">
                 <li>
                   <input
-                    :placeholder="'parameter ' + (index + 1)"
+                    :placeholder="$t('parameter_count', { count: index + 1 })"
                     :name="'param' + index"
                     :value="param.key"
                     @change="
@@ -670,7 +676,7 @@
                 </li>
                 <li>
                   <input
-                    :placeholder="'value ' + (index + 1)"
+                    :placeholder="$t('value_count', { count: index + 1 })"
                     :name="'value' + index"
                     :value="param.value"
                     @change="
@@ -686,6 +692,7 @@
                     <button
                       class="icon"
                       @click="removeRequestParam(index)"
+                      v-tooltip.bottom="$t('delete')"
                       id="param"
                     >
                       <i class="material-icons">delete</i>
@@ -722,7 +729,7 @@
         <pw-section
           class="purple"
           id="response"
-          label="Response"
+          :label="$t('response')"
           ref="response"
         >
           <ul>
@@ -730,7 +737,7 @@
               <label for="status">{{ $t("status") }}</label>
               <input
                 :class="statusCategory ? statusCategory.className : ''"
-                :value="response.status || '(waiting to send request)'"
+                :value="response.status || $t('waiting_send_req')"
                 ref="status"
                 id="status"
                 name="status"
@@ -770,7 +777,7 @@
                     @click="downloadResponse"
                     ref="downloadResponse"
                     v-if="response.body"
-                    v-tooltip="'Download file'"
+                    v-tooltip="$t('download_file')"
                   >
                     <i class="material-icons">get_app</i>
                   </button>
@@ -779,7 +786,7 @@
                     @click="copyResponse"
                     ref="copyResponse"
                     v-if="response.body"
-                    v-tooltip="'Copy response'"
+                    v-tooltip="$t('copy_response')"
                   >
                     <i class="material-icons">file_copy</i>
                   </button>
@@ -835,7 +842,7 @@
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>
           <div class="tab">
-            <pw-section class="yellow" label="Collections" ref="collections">
+            <pw-section class="yellow" :label="$t('collections')" ref="collections">
               <collections />
             </pw-section>
           </div>
@@ -870,7 +877,7 @@
                 id="import-text"
                 autofocus
                 rows="8"
-                placeholder="Enter cURL"
+                :placeholder="$t('enter_curl')"
               ></textarea>
             </li>
           </ul>
@@ -880,7 +887,7 @@
             <span></span>
             <span>
               <button class="icon" @click="showModal = false">
-                Cancel
+                {{ $t("cancel") }}
               </button>
               <button class="icon primary" @click="handleImport">
                 {{ $t("import") }}
@@ -928,7 +935,7 @@
                     @click="copyRequestCode"
                     id="copyRequestCode"
                     ref="copyRequestCode"
-                    v-tooltip="'Copy code'"
+                    v-tooltip="$t('copy_code')"
                   >
                     <i class="material-icons">file_copy</i>
                   </button>
@@ -971,7 +978,7 @@
                   <button
                     class="icon"
                     @click="clearContent('tokens', $event)"
-                    v-tooltip.bottom="'Clear'"
+                    v-tooltip.bottom="$t('clear')"
                   >
                     <i class="material-icons">clear_all</i>
                   </button>
@@ -1009,7 +1016,7 @@
                 <button
                   class="icon"
                   @click="removeOAuthToken(index)"
-                  v-tooltip.bottom="'Delete'"
+                  v-tooltip.bottom="$t('delete')"
                 >
                   <i class="material-icons">delete</i>
                 </button>
@@ -1017,7 +1024,7 @@
             </div>
           </ul>
           <p v-if="tokens.length === 0" class="info">
-            Empty
+            {{ $t("empty") }}
           </p>
         </div>
         <div slot="footer"></div>
@@ -1059,7 +1066,7 @@
                     :disabled="this.tokenReqs.length === 0"
                     class="icon"
                     @click="removeOAuthTokenReq"
-                    v-tooltip.bottom="'Delete'"
+                    v-tooltip.bottom="$t('delete')"
                   >
                     <i class="material-icons">delete</i>
                   </button>
@@ -1389,8 +1396,8 @@ export default {
     },
     "response.body": function(val) {
       if (
-        this.response.body === "(waiting to send request)" ||
-        this.response.body === "Loading..."
+        this.response.body === this.$t("waiting_send_req") ||
+        this.response.body === this.$t("loading")
       ) {
         this.responseBodyText = this.response.body;
         this.responseBodyType = "text";
@@ -2005,7 +2012,7 @@ export default {
       this.scrollInto("response");
 
       if (!this.isValidURL) {
-        this.$toast.error("URL is not formatted properly", {
+        this.$toast.error(this.$t("url_invalid_format"), {
           icon: "error"
         });
         return;
@@ -2019,8 +2026,8 @@ export default {
         this.$refs.response.$el.classList.toggle("hidden");
       }
       this.previewEnabled = false;
-      this.response.status = "Fetching...";
-      this.response.body = "Loading...";
+      this.response.status = this.$t("fetching");
+      this.response.body = this.$t("loading");
 
       const auth =
         this.auth === "Basic Auth"
@@ -2081,7 +2088,7 @@ export default {
         );
 
         const duration = Date.now() - startTime;
-        this.$toast.info(`Finished in ${duration}ms`, {
+        this.$toast.info(this.$t("finished_in", { duration }), {
           icon: "done"
         });
 
@@ -2134,12 +2141,12 @@ export default {
           return;
         } else {
           this.response.status = error.message;
-          this.response.body = error + ". Check console for details.";
-          this.$toast.error(error + " (F12 for details)", {
+          this.response.body = `${error}. ${this.$t("check_console_details")}`;
+          this.$toast.error(`${error} ${this.$t("f12_details")}`, {
             icon: "error"
           });
           if (!this.$store.state.postwoman.settings.PROXY_ENABLED) {
-            this.$toast.info("Try enabling Proxy", {
+            this.$toast.info(this.$t("enable_proxy"), {
               icon: "help",
               duration: 8000,
               action: {
@@ -2184,10 +2191,10 @@ export default {
       const oldHeaders = this.headers.slice();
 
       this.$store.commit("removeHeaders", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           onClick: (e, toastObject) => {
             this.headers = oldHeaders;
             toastObject.remove();
@@ -2204,10 +2211,10 @@ export default {
       const oldParams = this.params.slice();
 
       this.$store.commit("removeParams", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           onClick: (e, toastObject) => {
             this.params = oldParams;
             toastObject.remove();
@@ -2224,10 +2231,10 @@ export default {
       const oldBodyParams = this.bodyParams.slice();
 
       this.$store.commit("removeBodyParams", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           onClick: (e, toastObject) => {
             this.bodyParams = oldBodyParams;
             toastObject.remove();
@@ -2255,7 +2262,7 @@ export default {
         document.execCommand("copy");
         document.body.removeChild(dummy);
         this.$refs.copyRequest.innerHTML = this.doneButton;
-        this.$toast.info("Copied to clipboard", {
+        this.$toast.info(this.$t("copied_to_clipboard"), {
           icon: "done"
         });
         setTimeout(
@@ -2266,7 +2273,7 @@ export default {
     },
     copyRequestCode() {
       this.$refs.copyRequestCode.innerHTML = this.doneButton;
-      this.$toast.success("Copied to clipboard", {
+      this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done"
       });
       this.$refs.generatedCode.select();
@@ -2283,7 +2290,7 @@ export default {
     },
     copyResponse() {
       this.$refs.copyResponse.innerHTML = this.doneButton;
-      this.$toast.success("Copied to clipboard", {
+      this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done"
       });
       const aux = document.createElement("textarea");
@@ -2318,7 +2325,7 @@ export default {
       document.body.appendChild(a);
       a.click();
       this.$refs.downloadResponse.innerHTML = this.doneButton;
-      this.$toast.success("Download started", {
+      this.$toast.success(this.$t("download_started"), {
         icon: "done"
       });
       setTimeout(() => {
@@ -2448,7 +2455,7 @@ export default {
         this.showModal = false;
       } catch (error) {
         this.showModal = false;
-        this.$toast.error("cURL is not formatted properly", {
+        this.$toast.error(this.$t("curl_invalid_format"), {
           icon: "error"
         });
       }
@@ -2512,7 +2519,7 @@ export default {
           this.scope = "";
       }
       e.target.innerHTML = this.doneButton;
-      this.$toast.info("Cleared", {
+      this.$toast.info(this.$t("cleared"), {
         icon: "clear_all"
       });
       setTimeout(
@@ -2522,7 +2529,7 @@ export default {
     },
     saveRequest() {
       if (!this.checkCollections()) {
-        this.$toast.error("Create a Collection", {
+        this.$toast.error(this.$t("create_collection"), {
           icon: "error"
         });
         return;
@@ -2586,11 +2593,11 @@ export default {
           this.rawParams = e.target.result;
         };
         reader.readAsText(file);
-        this.$toast.info("File imported", {
+        this.$toast.info(this.$t("file_imported"), {
           icon: "attach_file"
         });
       } else {
-        this.$toast.error("Choose a file", {
+        this.$toast.error(this.$t("choose_file"), {
           icon: "attach_file"
         });
       }
@@ -2600,7 +2607,7 @@ export default {
         this.oidcDiscoveryUrl === "" &&
         (this.authUrl === "" || this.accessTokenUrl === "")
       ) {
-        this.$toast.error("Please complete configuration urls.", {
+        this.$toast.error(this.$t("complete_config_urls"), {
           icon: "error"
         });
         return;
@@ -2641,10 +2648,10 @@ export default {
     removeOAuthToken(index) {
       const oldTokens = this.tokens.slice();
       this.$store.commit("removeOAuthToken", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           onClick: (e, toastObject) => {
             this.tokens = oldTokens;
             toastObject.remove();
@@ -2664,7 +2671,7 @@ export default {
           name,
           details
         });
-        this.$toast.info("Token request saved");
+        this.$toast.info(this.$t("token_request_saved"));
         this.showTokenRequestList = false;
       } catch (e) {
         this.$toast.error(e, {
@@ -2679,10 +2686,10 @@ export default {
       );
       if (targetReqIndex < 0) return;
       this.$store.commit("removeOAuthTokenReq", targetReqIndex);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           onClick: (e, toastObject) => {
             this.tokenReqs = oldTokenReqs;
             toastObject.remove();
diff --git a/pages/realtime.vue b/pages/realtime.vue
index 8e918ee4a..1ef1a49b6 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -4,7 +4,7 @@
       <input id="tab-one" type="radio" name="options" checked="checked" />
       <label for="tab-one">{{ $t("websocket") }}</label>
       <div class="tab">
-        <pw-section class="blue" label="Request" ref="request">
+        <pw-section class="blue" :label="$t('request')" ref="request">
           <ul>
             <li>
               <label for="url">{{ $t("url") }}</label>
@@ -39,13 +39,13 @@
 
         <pw-section
           class="purple"
-          label="Communication"
+          :label="$t('communication')"
           id="response"
           ref="response"
         >
           <ul>
             <li>
-              <label for="log">Log</label>
+              <label for="log">{{ $t("log") }}</label>
               <div id="log" name="log" class="log">
                 <span v-if="communication.log">
                   <span
@@ -94,7 +94,7 @@
       <input id="tab-two" type="radio" name="options" />
       <label for="tab-two">{{ $t("sse") }}</label>
       <div class="tab">
-        <pw-section class="blue" label="Request" ref="request">
+        <pw-section class="blue" :label="$t('request')" ref="request">
           <ul>
             <li>
               <label for="server">{{ $t("server") }}</label>
@@ -129,7 +129,7 @@
 
         <pw-section
           class="purple"
-          label="Communication"
+          :label="$t('communication')"
           id="response"
           ref="response"
         >
@@ -243,7 +243,7 @@ export default {
     connect() {
       this.communication.log = [
         {
-          payload: `Connecting to ${this.url}...`,
+          payload: this.$t("connecting_to", { name: this.url }),
           source: "info",
           color: "var(--ac-color)"
         }
@@ -254,13 +254,13 @@ export default {
           this.connectionState = true;
           this.communication.log = [
             {
-              payload: `Connected to ${this.url}.`,
+              payload: this.$t("connected_to", { name: this.url }),
               source: "info",
               color: "var(--ac-color)",
               ts: new Date().toLocaleTimeString()
             }
           ];
-          this.$toast.success("Connected", {
+          this.$toast.success(this.$t("connected"), {
             icon: "sync"
           });
         };
@@ -270,12 +270,12 @@ export default {
         this.socket.onclose = event => {
           this.connectionState = false;
           this.communication.log.push({
-            payload: `Disconnected from ${this.url}.`,
+            payload: this.$t("disconnected_from", { name: this.url }),
             source: "info",
             color: "#ff5555",
             ts: new Date().toLocaleTimeString()
           });
-          this.$toast.error("Disconnected", {
+          this.$toast.error(this.$t("disconnected"), {
             icon: "sync_disabled"
           });
         };
@@ -288,7 +288,7 @@ export default {
         };
       } catch (ex) {
         this.handleError(ex);
-        this.$toast.error("Something went wrong!", {
+        this.$toast.error(this.$t("something_went_wrong"), {
           icon: "error"
         });
       }
@@ -300,7 +300,7 @@ export default {
       this.disconnect();
       this.connectionState = false;
       this.communication.log.push({
-        payload: `An error has occurred.`,
+        payload: this.$t("error_occurred"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString()
@@ -349,7 +349,7 @@ export default {
     start() {
       this.events.log = [
         {
-          payload: `Connecting to ${this.server}...`,
+          payload: this.$t("connecting_to", { name: this.server }),
           source: "info",
           color: "var(--ac-color)"
         }
@@ -361,13 +361,13 @@ export default {
             this.connectionSSEState = true;
             this.events.log = [
               {
-                payload: `Connected to ${this.server}.`,
+                payload: this.$t("connected_to", { name: this.server }),
                 source: "info",
                 color: "var(--ac-color)",
                 ts: new Date().toLocaleTimeString()
               }
             ];
-            this.$toast.success("Connected", {
+            this.$toast.success(this.$t("connected"), {
               icon: "sync"
             });
           };
@@ -377,12 +377,12 @@ export default {
           this.sse.onclose = event => {
             this.connectionSSEState = false;
             this.events.log.push({
-              payload: `Disconnected from ${this.server}.`,
+              payload: this.$t("disconnected_from", { name: this.server }),
               source: "info",
               color: "#ff5555",
               ts: new Date().toLocaleTimeString()
             });
-            this.$toast.error("Disconnected", {
+            this.$toast.error(this.$t("disconnected"), {
               icon: "sync_disabled"
             });
           };
@@ -395,14 +395,14 @@ export default {
           };
         } catch (ex) {
           this.handleSSEError(ex);
-          this.$toast.error("Something went wrong!", {
+          this.$toast.error(this.$t("something_went_wrong"), {
             icon: "error"
           });
         }
       } else {
         this.events.log = [
           {
-            payload: `This browser doesn't seems to have Server Sent Events support.`,
+            payload: this.$t("browser_support_sse"),
             source: "info",
             color: "#ff5555",
             ts: new Date().toLocaleTimeString()
@@ -414,7 +414,7 @@ export default {
       this.stop();
       this.connectionSSEState = false;
       this.events.log.push({
-        payload: `An error has occurred.`,
+        payload: this.$t("error_occurred"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString()
diff --git a/pages/settings.vue b/pages/settings.vue
index 80c1ec7f8..8e0d851a1 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="cyan" label="Theme" ref="theme">
+    <pw-section class="cyan" :label="$t('theme')" ref="theme">
       <ul>
         <li>
           <label>{{ $t("background") }}</label>
@@ -58,7 +58,7 @@
       </ul>
     </pw-section>
 
-    <pw-section class="blue" label="Proxy" ref="proxy">
+    <pw-section class="blue" :label="$t('proxy')" ref="proxy">
       <ul>
         <li>
           <div class="flex-wrap">
@@ -76,7 +76,7 @@
               target="_blank"
               rel="noopener"
             >
-              <button class="icon" v-tooltip="'Wiki'">
+              <button class="icon" v-tooltip="$t('wiki')">
                 <i class="material-icons">help</i>
               </button>
             </a>
@@ -90,7 +90,7 @@
             <button
               class="icon"
               @click="settings.PROXY_URL = `https://postwoman.apollotv.xyz/`"
-              v-tooltip.bottom="'Reset to default'"
+              v-tooltip.bottom="$t('reset_default')"
             >
               <i class="material-icons">clear_all</i>
             </button>
@@ -152,26 +152,26 @@ export default {
       themes: [
         {
           color: "#202124",
-          name: "Kinda Dark",
+          name: this.$t("kinda_dark"),
           class: "",
           aceEditor: "twilight"
         },
         {
           color: "#ffffff",
-          name: "Clearly White",
+          name: this.$t("clearly_white"),
           vibrant: true,
           class: "light",
           aceEditor: "iplastic"
         },
         {
           color: "#000000",
-          name: "Just Black",
+          name: this.$t("just_black"),
           class: "black",
           aceEditor: "vibrant_ink"
         },
         {
           color: "var(--bg-color)",
-          name: "Auto (system)",
+          name: this.$t("auto_system"),
           vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
           class: "auto",
           aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches
@@ -184,42 +184,42 @@ export default {
         // If the color is vibrant, black is used as the active foreground color.
         {
           color: "#50fa7b",
-          name: "Green",
+          name: this.$t("green"),
           vibrant: true
         },
         {
           color: "#f1fa8c",
-          name: "Yellow",
+          name: this.$t("yellow"),
           vibrant: true
         },
         {
           color: "#ff79c6",
-          name: "Pink",
+          name: this.$t("pink"),
           vibrant: true
         },
         {
           color: "#ff5555",
-          name: "Red",
+          name: this.$t("red"),
           vibrant: false
         },
         {
           color: "#bd93f9",
-          name: "Purple",
+          name: this.$t("purple"),
           vibrant: true
         },
         {
           color: "#ffb86c",
-          name: "Orange",
+          name: this.$t("orange"),
           vibrant: true
         },
         {
           color: "#8be9fd",
-          name: "Cyan",
+          name: this.$t("cyan"),
           vibrant: true
         },
         {
           color: "#57b5f9",
-          name: "Blue",
+          name: this.$t("blue"),
           vibrant: false
         }
       ],