Merge pull request #3 from liyasthomas/i18n

I18n
2019-11-28 23:57:23 +08:00
parent 8d98c8ad16 ab4f961795
commit 4632e281a6
30 changed files with 1091 additions and 488 deletions
--- a/2
+++ b/2
@@ -4,7 +4,7 @@ LABEL maintainer="Liyas Thomas (liyascthomas@gmail.com)"

 # Add git as the prebuild target requires it to parse version information
 RUN apk add --update --no-cache \
-    git
+  git

 WORKDIR /app

--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -1,18 +1,22 @@
 // Layout transitions
-.layout-enter-active, .layout-leave-active {
+.layout-enter-active,
+.layout-leave-active {
  transition: opacity 0.5s;
 }

-.layout-enter, .layout-leave-active {
+.layout-enter,
+.layout-leave-active {
  opacity: 0;
 }

 // Page transitions
-.page-enter-active, .page-leave-active {
+.page-enter-active,
+.page-leave-active {
  transition: opacity 0.5s;
 }

-.page-enter, .page-leave-to {
+.page-enter,
+.page-leave-to {
  opacity: 0;
 }

--- a/assets/js/curlparser.js
+++ b/assets/js/curlparser.js
@@ -7,7 +7,7 @@ import * as querystring from "querystring";
 * output this: 'msg1=value1&msg2=value2'
 * @param dataArguments
 */
-const joinDataArguments = (dataArguments) => {
+const joinDataArguments = dataArguments => {
  let data = "";
  dataArguments.forEach((argument, i) => {
    if (i === 0) {
@@ -17,9 +17,9 @@ const joinDataArguments = (dataArguments) => {
    }
  });
  return data;
-}
+};

-const parseCurlCommand = (curlCommand) => {
+const parseCurlCommand = curlCommand => {
  let newlineFound = /\r|\n/.exec(curlCommand);
  if (newlineFound) {
    // remove newlines
@@ -47,7 +47,7 @@ const parseCurlCommand = (curlCommand) => {
  }
  let headers;

-  const parseHeaders = (headerFieldName) => {
+  const parseHeaders = headerFieldName => {
    if (parsedArguments[headerFieldName]) {
      if (!headers) {
        headers = {};
@@ -55,7 +55,7 @@ const parseCurlCommand = (curlCommand) => {
      if (!Array.isArray(parsedArguments[headerFieldName])) {
        parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]];
      }
-      parsedArguments[headerFieldName].forEach((header) => {
+      parsedArguments[headerFieldName].forEach(header => {
        if (header.includes("Cookie")) {
          // stupid javascript tricks: closure
          cookieString = header;
@@ -95,7 +95,7 @@ const parseCurlCommand = (curlCommand) => {
    if (!Array.isArray(parsedArguments.F)) {
      parsedArguments.F = [parsedArguments.F];
    }
-    parsedArguments.F.forEach((multipartArgument) => {
+    parsedArguments.F.forEach(multipartArgument => {
      // input looks like key=value. value could be json or a file path prepended with an @
      const [key, value] = multipartArgument.split("=", 2);
      multipartUploads[key] = value;
@@ -221,6 +221,6 @@ const parseCurlCommand = (curlCommand) => {
    request.insecure = true;
  }
  return request;
-}
+};

 export default parseCurlCommand;
--- a/assets/js/pwa.js
+++ b/assets/js/pwa.js
@@ -2,36 +2,39 @@ export default () => {
  //*** Determine whether or not the PWA has been installed. ***//

  // Step 1: Check local storage
-  let pwaInstalled = localStorage.getItem('pwaInstalled') === 'yes';
+  let pwaInstalled = localStorage.getItem("pwaInstalled") === "yes";

  // Step 2: Check if the display-mode is standalone. (Only permitted for PWAs.)
-  if (!pwaInstalled && window.matchMedia('(display-mode: standalone)').matches) {
-    localStorage.setItem('pwaInstalled', 'yes');
+  if (
+    !pwaInstalled &&
+    window.matchMedia("(display-mode: standalone)").matches
+  ) {
+    localStorage.setItem("pwaInstalled", "yes");
    pwaInstalled = true;
  }

  // Step 3: Check if the navigator is in standalone mode. (Again, only permitted for PWAs.)
  if (!pwaInstalled && window.navigator.standalone === true) {
-    localStorage.setItem('pwaInstalled', 'yes');
+    localStorage.setItem("pwaInstalled", "yes");
    pwaInstalled = true;
  }

  //*** If the PWA has not been installed, show the install PWA prompt.. ***//
  let deferredPrompt = null;
-  window.addEventListener('beforeinstallprompt', (event) => {
+  window.addEventListener("beforeinstallprompt", event => {
    deferredPrompt = event;

    // Show the install button if the prompt appeared.
    if (!pwaInstalled) {
-      document.querySelector('#installPWA').style.display = 'inline-flex';
+      document.querySelector("#installPWA").style.display = "inline-flex";
    }
  });

  // When the app is installed, remove install prompts.
-  window.addEventListener('appinstalled', (event) => {
-    localStorage.setItem('pwaInstalled', 'yes');
+  window.addEventListener("appinstalled", event => {
+    localStorage.setItem("pwaInstalled", "yes");
    pwaInstalled = true;
-    document.getElementById('installPWA').style.display = 'none';
+    document.getElementById("installPWA").style.display = "none";
  });

  // When the app is uninstalled, add the prompts back
@@ -40,13 +43,14 @@ export default () => {
      deferredPrompt.prompt();
      let outcome = await deferredPrompt.userChoice;

-      if (outcome === 'accepted') {
-        console.log('Postwoman was installed successfully.')
+      if (outcome === "accepted") {
+        console.log("Postwoman was installed successfully.");
      } else {
-        console.log('Postwoman could not be installed. (Installation rejected by user.)')
+        console.log(
+          "Postwoman could not be installed. (Installation rejected by user.)"
+        );
      }
      deferredPrompt = null;
    }
  };
-
 };
--- a/build.js
+++ b/build.js
@@ -1,12 +1,10 @@
 const axios = require("axios");
 const fs = require("fs");
-const {
-  spawnSync
-} = require("child_process");
+const { spawnSync } = require("child_process");
 const runCommand = (command, args) =>
  spawnSync(command, args)
-  .stdout.toString()
-  .replace(/\n/g, "");
+    .stdout.toString()
+    .replace(/\n/g, "");

 const FAIL_ON_ERROR = false;
 const PW_BUILD_DATA_DIR = "./.postwoman";
@@ -21,18 +19,24 @@ try {

    let version = {};
    // Get the current version name as the tag from Git.
-    version.name = process.env.TRAVIS_TAG || runCommand("git", ["tag --sort=committerdate | tail -1"]);
+    version.name =
+      process.env.TRAVIS_TAG ||
+      runCommand("git", ["tag --sort=committerdate | tail -1"]);

    // FALLBACK: If version.name was unset, let's grab it from GitHub.
    if (!version.name) {
-      version.name = (await axios
-        .get("https://api.github.com/repos/liyasthomas/postwoman/releases")
-        // If we can't get it from GitHub, we'll resort to getting it from package.json
-        .catch((ex) => ({
-          data: [{
-            tag_name: require("./package.json").version
-          }]
-        }))).data[0]["tag_name"];
+      version.name = (
+        await axios
+          .get("https://api.github.com/repos/liyasthomas/postwoman/releases")
+          // If we can't get it from GitHub, we'll resort to getting it from package.json
+          .catch(ex => ({
+            data: [
+              {
+                tag_name: require("./package.json").version
+              }
+            ]
+          }))
+      ).data[0]["tag_name"];
    }

    // Get the current version hash as the short hash from Git.
@@ -41,8 +45,8 @@ try {
    version.variant =
      process.env.TRAVIS_BRANCH ||
      runCommand("git", ["branch"])
-      .split("* ")[1]
-      .split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "");
+        .split("* ")[1]
+        .split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "");
    if (["", "master"].includes(version.variant)) {
      delete version.variant;
    }
--- a/cypress.json
+++ b/cypress.json
@@ -1,9 +1,9 @@
 {
-	"baseUrl": "http://localhost:3000",
-	"integrationFolder": "tests/e2e/integration",
-	"screenshotsFolder": "tests/e2e/screenshots",
-	"fixturesFolder": "tests/e2e/fixtures",
-	"supportFile": "tests/e2e/support",
-	"pluginsFile": false,
-	"video": false
+  "baseUrl": "http://localhost:3000",
+  "integrationFolder": "tests/e2e/integration",
+  "screenshotsFolder": "tests/e2e/screenshots",
+  "fixturesFolder": "tests/e2e/fixtures",
+  "supportFile": "tests/e2e/support",
+  "pluginsFile": false,
+  "video": false
 }
--- a/database.rules.json
+++ b/database.rules.json
@@ -1,7 +1,6 @@
 {
-  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
    ".read": false,
    ".write": false
  }
-}
+}
--- a/directives/textareaAutoHeight.js
+++ b/directives/textareaAutoHeight.js
@@ -1,8 +1,8 @@
 export default {
  name: "textareaAutoHeight",
-  update({scrollHeight, clientHeight, style}) {
+  update({ scrollHeight, clientHeight, style }) {
    if (scrollHeight !== clientHeight) {
      style.minHeight = `${scrollHeight}px`;
    }
  }
-}
+};
--- a/functions/preRequest.js
+++ b/functions/preRequest.js
@@ -5,16 +5,16 @@ export default function getEnvironmentVariablesFromScript(script) {
  // for security and control purposes, this is the only way a pre-request script should modify variables.
  let pw = {
    environment: {
-      set: (key, value) => _variables[key] = value,
+      set: (key, value) => (_variables[key] = value)
    },
    env: {
-      set: (key, value) => _variables[key] = value,
-    },
+      set: (key, value) => (_variables[key] = value)
+    }
    // globals that the script is allowed to have access to.
  };

  // run pre-request script within this function so that it has access to the pw object.
-  (new Function('pw', script))(pw);
+  new Function("pw", script)(pw);

  return _variables;
 }
--- a/functions/templating.js
+++ b/functions/templating.js
@@ -3,5 +3,5 @@ export default function parseTemplateString(string, variables) {
    return string;
  }
  const searchTerm = /<<([^>]*)>>/g; // "<<myVariable>>"
-  return string.replace(searchTerm, (match, p1) => variables[p1] || '');
+  return string.replace(searchTerm, (match, p1) => variables[p1] || "");
 }
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -1,3 +1,84 @@
 export default {
-  send: 'Send'
-}
+  home: "Home",
+  realtime: "Realtime",
+  graphql: "GraphQL",
+  settings: "Settings",
+  request: "Request",
+  install_pwa: "Install PWA",
+  support_us: "Support us",
+  tweet: "Tweet",
+  options: "Options",
+  communication: "Communication",
+  endpoint: "Endpoint",
+  schema: "Schema",
+  theme: "Theme",
+  subscribe: "Subscribe",
+  choose_language: "Choose Language",
+  shortcuts: "Shortcuts",
+  send_request: "Send Request",
+  save_to_collections: "Save to Collections",
+  copy_request_link: "Copy Request Link",
+  reset_request: "Reset Request",
+  support_us_on: "Support us on",
+  open_collective: "Open Collective",
+  paypal: "PayPal",
+  patreon: "Patreon",
+  javascript_code: "JavaScript Code",
+  method: "Method",
+  path: "Path",
+  label: "Label",
+  again: "Again",
+  content_type: "Content Type",
+  raw_input: "Raw input",
+  parameter_list: "Parameter List",
+  raw_request_body: "Raw Request Body",
+  show_code: "Show Code",
+  hide_code: "Hide Code",
+  show_prerequest_script: "Show Pre-Request Script",
+  hide_prerequest_script: "Hide Pre-Request Script",
+  authentication: "Authentication",
+  authentication_type: "Authentication type",
+  include_in_url: "Include in URL",
+  parameters: "Parameters",
+  expand_response: "Expand response",
+  collapse_response: "Collapse response",
+  hide_preview: "Hide Preview",
+  preview_html: "Preview HTML",
+  history: "History",
+  collections: "Collections",
+  import_curl: "Import cURL",
+  import: "Import",
+  generate_code: "Generate code",
+  request_type: "Request type",
+  generated_code: "Generated code",
+  status: "Status",
+  headers: "Headers",
+  websocket: "WebSocket",
+  waiting_for_connection: "(waiting for connection)",
+  message: "Message",
+  sse: "SSE",
+  server: "Server",
+  events: "Events",
+  url: "URL",
+  get_schema: "Get schema",
+  header_list: "Header list",
+  add_new: "Add new",
+  response: "Response",
+  query: "Query",
+  queries: "Queries",
+  mutations: "Mutations",
+  subscriptions: "Subscriptions",
+  types: "Types",
+  send: "Send",
+  background: "Background",
+  color: "Color",
+  labels: "Labels",
+  multi_color: "Multi-color",
+  enabled: "Enabled",
+  disabled: "Disabled",
+  proxy: "Proxy",
+  postwoman_official_proxy_hosting:
+    "Postwoman's Official Proxy is hosted by ApolloTV.",
+  read_the: "Read the",
+  apollotv_privacy_policy: "ApolloTV privacy policy"
+};
--- a/lang/es-ES.js
+++ b/lang/es-ES.js
@@ -1,3 +1,83 @@
 export default {
-  send: 'Enviar'
-}
+  home: "home",
+  realtime: "realtime",
+  graphql: "graphql",
+  settings: "settings",
+  request: "request",
+  install_pwa: "install_pwa",
+  support_us: "support_us",
+  tweet: "tweet",
+  options: "options",
+  communication: "communication",
+  endpoint: "endpoint",
+  schema: "schema",
+  theme: "theme",
+  subscribe: "subscribe",
+  choose_language: "choose_language",
+  shortcuts: "shortcuts",
+  send_request: "send_request",
+  save_to_collections: "save_to_collections",
+  copy_request_link: "copy_request_link",
+  reset_request: "reset_request",
+  support_us_on: "support_us_on",
+  open_collective: "open_collective",
+  paypal: "paypal",
+  patreon: "patreon",
+  javascript_code: "javascript_code",
+  method: "method",
+  path: "path",
+  label: "label",
+  again: "again",
+  content_type: "content_type",
+  raw_input: "raw_input",
+  parameter_list: "parameter_list",
+  raw_request_body: "raw_request_body",
+  show_code: "show_code",
+  hide_code: "hide_code",
+  show_prerequest_script: "show_prerequest_script",
+  hide_prerequest_script: "hide_prerequest_script",
+  authentication: "authentication",
+  authentication_type: "authentication_type",
+  include_in_url: "include_in_url",
+  parameters: "parameters",
+  expand_response: "expand_response",
+  collapse_response: "collapse_response",
+  hide_preview: "hide_preview",
+  preview_html: "preview_html",
+  history: "history",
+  collections: "collections",
+  import_curl: "import_curl",
+  import: "import",
+  generate_code: "generate_code",
+  request_type: "request_type",
+  generated_code: "generated_code",
+  status: "status",
+  headers: "headers",
+  websocket: "websocket",
+  waiting_for_connection: "(waiting_for_connection)",
+  message: "message",
+  sse: "sse",
+  server: "server",
+  events: "events",
+  url: "url",
+  get_schema: "get_schema",
+  header_list: "header_list",
+  add_new: "add_new",
+  response: "response",
+  query: "query",
+  queries: "queries",
+  mutations: "mutations",
+  subscriptions: "subscriptions",
+  types: "types",
+  send: "send",
+  background: "background",
+  color: "color",
+  labels: "labels",
+  multi_color: "multi_color",
+  enabled: "enabled",
+  disabled: "disabled",
+  proxy: "proxy",
+  postwoman_official_proxy_hosting: "postwoman_official_proxy_hosting",
+  read_the: "read_the",
+  apollotv_privacy_policy: "apollotv_privacy_policy"
+};
--- a/lang/fa-IR.js
+++ b/lang/fa-IR.js
@@ -1,3 +1,83 @@
 export default {
-  send: 'ارسال'
-}
+  home: "home",
+  realtime: "realtime",
+  graphql: "graphql",
+  settings: "settings",
+  request: "request",
+  install_pwa: "install_pwa",
+  support_us: "support_us",
+  tweet: "tweet",
+  options: "options",
+  communication: "communication",
+  endpoint: "endpoint",
+  schema: "schema",
+  theme: "theme",
+  subscribe: "subscribe",
+  choose_language: "choose_language",
+  shortcuts: "shortcuts",
+  send_request: "send_request",
+  save_to_collections: "save_to_collections",
+  copy_request_link: "copy_request_link",
+  reset_request: "reset_request",
+  support_us_on: "support_us_on",
+  open_collective: "open_collective",
+  paypal: "paypal",
+  patreon: "patreon",
+  javascript_code: "javascript_code",
+  method: "method",
+  path: "path",
+  label: "label",
+  again: "again",
+  content_type: "content_type",
+  raw_input: "raw_input",
+  parameter_list: "parameter_list",
+  raw_request_body: "raw_request_body",
+  show_code: "show_code",
+  hide_code: "hide_code",
+  show_prerequest_script: "show_prerequest_script",
+  hide_prerequest_script: "hide_prerequest_script",
+  authentication: "authentication",
+  authentication_type: "authentication_type",
+  include_in_url: "include_in_url",
+  parameters: "parameters",
+  expand_response: "expand_response",
+  collapse_response: "collapse_response",
+  hide_preview: "hide_preview",
+  preview_html: "preview_html",
+  history: "history",
+  collections: "collections",
+  import_curl: "import_curl",
+  import: "import",
+  generate_code: "generate_code",
+  request_type: "request_type",
+  generated_code: "generated_code",
+  status: "status",
+  headers: "headers",
+  websocket: "websocket",
+  waiting_for_connection: "(waiting_for_connection)",
+  message: "message",
+  sse: "sse",
+  server: "server",
+  events: "events",
+  url: "url",
+  get_schema: "get_schema",
+  header_list: "header_list",
+  add_new: "add_new",
+  response: "response",
+  query: "query",
+  queries: "queries",
+  mutations: "mutations",
+  subscriptions: "subscriptions",
+  types: "types",
+  send: "send",
+  background: "background",
+  color: "color",
+  labels: "labels",
+  multi_color: "multi_color",
+  enabled: "enabled",
+  disabled: "disabled",
+  proxy: "proxy",
+  postwoman_official_proxy_hosting: "postwoman_official_proxy_hosting",
+  read_the: "read_the",
+  apollotv_privacy_policy: "apollotv_privacy_policy"
+};
--- a/lang/fr-FR.js
+++ b/lang/fr-FR.js
@@ -1,3 +1,84 @@
 export default {
-  send: 'Envoyer'
-}
+  home: "Accueil",
+  realtime: "Temps réel",
+  graphql: "GraphQL",
+  settings: "Paramètres",
+  request: "Request",
+  install_pwa: "Installer la PWA",
+  support_us: "Nous supporter",
+  tweet: "Tweeter",
+  options: "Options",
+  communication: "Communication",
+  endpoint: "Endpoint",
+  schema: "Schéma",
+  theme: "Thème",
+  subscribe: "S'inscrire",
+  choose_language: "Sélectionner une langue",
+  shortcuts: "Raccourcis",
+  send_request: "Envoyer la requête",
+  save_to_collections: "Sauvegarder dans les collections",
+  copy_request_link: "Copier le lien de la requête",
+  reset_request: "Réinitialiser la requête",
+  support_us_on: "Supportez-nous sur",
+  open_collective: "Ouvrir Collective",
+  paypal: "PayPal",
+  patreon: "Patreon",
+  javascript_code: "Code JavaScript",
+  method: "Méthode",
+  path: "Chemin d'accès",
+  label: "Libellé",
+  again: "Réessayer",
+  content_type: "Type de contenu",
+  raw_input: "Texte brut",
+  parameter_list: "Liste des paramètres",
+  raw_request_body: "Corps de la requête en texte brut",
+  show_code: "Afficher le code",
+  hide_code: "Masquer le code",
+  show_prerequest_script: "Afficher le script de pré-requête",
+  hide_prerequest_script: "Masquer le script de pré-requête",
+  authentication: "Authentification",
+  authentication_type: "Type d'authentification",
+  include_in_url: "Inclure dans l'URL",
+  parameters: "Paramètres",
+  expand_response: "Agrandir la réponse",
+  collapse_response: "Réduire la réponse",
+  hide_preview: "Masquer la prévisualisation",
+  preview_html: "Prévisualiser le HTML",
+  history: "Historique",
+  collections: "Collections",
+  import_curl: "Importer en cURL",
+  importer: "Importer",
+  generate_code: "Générer le code",
+  request_type: "Type de requête",
+  generated_code: "Code généré",
+  status: "Statut",
+  headers: "En-têtes",
+  websocket: "WebSocket",
+  waiting_for_connection: "(en attente de connexion)",
+  message: "Message",
+  sse: "SSE",
+  server: "Serveur",
+  events: "Évènements",
+  url: "URL",
+  get_schema: "Récuperer le schéma",
+  header_list: "Liste d'en-têtes",
+  add_new: "Ajouter",
+  response: "Réponse",
+  query: "Requête",
+  queries: "Requêtes",
+  mutations: "Mutations",
+  subscriptions: "Abonnements",
+  types: "Types",
+  send: "Envoyer",
+  background: "Arrière-plan",
+  color: "Couleur",
+  labels: "Libellés",
+  multi_color: "Multi-couleurs",
+  enabled: "Activé",
+  disabled: "Désactivé",
+  proxy: "Proxy",
+  postwoman_official_proxy_hosting:
+    "Le proxy officiel de Postwoman est hébergé par ApolloTV.",
+  read_the: "Lire la",
+  apollotv_privacy_policy: "politique de confidentialité ApolloTV"
+};
--- a/lang/id-ID.js
+++ b/lang/id-ID.js
@@ -1,3 +1,83 @@
 export default {
-  send: 'Kirim'
-}
+  home: "home",
+  realtime: "realtime",
+  graphql: "graphql",
+  settings: "settings",
+  request: "request",
+  install_pwa: "install_pwa",
+  support_us: "support_us",
+  tweet: "tweet",
+  options: "options",
+  communication: "communication",
+  endpoint: "endpoint",
+  schema: "schema",
+  theme: "theme",
+  subscribe: "subscribe",
+  choose_language: "choose_language",
+  shortcuts: "shortcuts",
+  send_request: "send_request",
+  save_to_collections: "save_to_collections",
+  copy_request_link: "copy_request_link",
+  reset_request: "reset_request",
+  support_us_on: "support_us_on",
+  open_collective: "open_collective",
+  paypal: "paypal",
+  patreon: "patreon",
+  javascript_code: "javascript_code",
+  method: "method",
+  path: "path",
+  label: "label",
+  again: "again",
+  content_type: "content_type",
+  raw_input: "raw_input",
+  parameter_list: "parameter_list",
+  raw_request_body: "raw_request_body",
+  show_code: "show_code",
+  hide_code: "hide_code",
+  show_prerequest_script: "show_prerequest_script",
+  hide_prerequest_script: "hide_prerequest_script",
+  authentication: "authentication",
+  authentication_type: "authentication_type",
+  include_in_url: "include_in_url",
+  parameters: "parameters",
+  expand_response: "expand_response",
+  collapse_response: "collapse_response",
+  hide_preview: "hide_preview",
+  preview_html: "preview_html",
+  history: "history",
+  collections: "collections",
+  import_curl: "import_curl",
+  import: "import",
+  generate_code: "generate_code",
+  request_type: "request_type",
+  generated_code: "generated_code",
+  status: "status",
+  headers: "headers",
+  websocket: "websocket",
+  waiting_for_connection: "(waiting_for_connection)",
+  message: "message",
+  sse: "sse",
+  server: "server",
+  events: "events",
+  url: "url",
+  get_schema: "get_schema",
+  header_list: "header_list",
+  add_new: "add_new",
+  response: "response",
+  query: "query",
+  queries: "queries",
+  mutations: "mutations",
+  subscriptions: "subscriptions",
+  types: "types",
+  send: "send",
+  background: "background",
+  color: "color",
+  labels: "labels",
+  multi_color: "multi_color",
+  enabled: "enabled",
+  disabled: "disabled",
+  proxy: "proxy",
+  postwoman_official_proxy_hosting: "postwoman_official_proxy_hosting",
+  read_the: "read_the",
+  apollotv_privacy_policy: "apollotv_privacy_policy"
+};
--- a/lang/pt-BR.js
+++ b/lang/pt-BR.js
@@ -1,3 +1,83 @@
 export default {
-  send: 'Enviar'
-}
+  home: "home",
+  realtime: "realtime",
+  graphql: "graphql",
+  settings: "settings",
+  request: "request",
+  install_pwa: "install_pwa",
+  support_us: "support_us",
+  tweet: "tweet",
+  options: "options",
+  communication: "communication",
+  endpoint: "endpoint",
+  schema: "schema",
+  theme: "theme",
+  subscribe: "subscribe",
+  choose_language: "choose_language",
+  shortcuts: "shortcuts",
+  send_request: "send_request",
+  save_to_collections: "save_to_collections",
+  copy_request_link: "copy_request_link",
+  reset_request: "reset_request",
+  support_us_on: "support_us_on",
+  open_collective: "open_collective",
+  paypal: "paypal",
+  patreon: "patreon",
+  javascript_code: "javascript_code",
+  method: "method",
+  path: "path",
+  label: "label",
+  again: "again",
+  content_type: "content_type",
+  raw_input: "raw_input",
+  parameter_list: "parameter_list",
+  raw_request_body: "raw_request_body",
+  show_code: "show_code",
+  hide_code: "hide_code",
+  show_prerequest_script: "show_prerequest_script",
+  hide_prerequest_script: "hide_prerequest_script",
+  authentication: "authentication",
+  authentication_type: "authentication_type",
+  include_in_url: "include_in_url",
+  parameters: "parameters",
+  expand_response: "expand_response",
+  collapse_response: "collapse_response",
+  hide_preview: "hide_preview",
+  preview_html: "preview_html",
+  history: "history",
+  collections: "collections",
+  import_curl: "import_curl",
+  import: "import",
+  generate_code: "generate_code",
+  request_type: "request_type",
+  generated_code: "generated_code",
+  status: "status",
+  headers: "headers",
+  websocket: "websocket",
+  waiting_for_connection: "(waiting_for_connection)",
+  message: "message",
+  sse: "sse",
+  server: "server",
+  events: "events",
+  url: "url",
+  get_schema: "get_schema",
+  header_list: "header_list",
+  add_new: "add_new",
+  response: "response",
+  query: "query",
+  queries: "queries",
+  mutations: "mutations",
+  subscriptions: "subscriptions",
+  types: "types",
+  send: "send",
+  background: "background",
+  color: "color",
+  labels: "labels",
+  multi_color: "multi_color",
+  enabled: "enabled",
+  disabled: "disabled",
+  proxy: "proxy",
+  postwoman_official_proxy_hosting: "postwoman_official_proxy_hosting",
+  read_the: "read_the",
+  apollotv_privacy_policy: "apollotv_privacy_policy"
+};
--- a/lang/zh-CN.js
+++ b/lang/zh-CN.js
@@ -1,3 +1,83 @@
 export default {
-  send: '发送'
-}
+  home: "home",
+  realtime: "realtime",
+  graphql: "graphql",
+  settings: "settings",
+  request: "request",
+  install_pwa: "install_pwa",
+  support_us: "support_us",
+  tweet: "tweet",
+  options: "options",
+  communication: "communication",
+  endpoint: "endpoint",
+  schema: "schema",
+  theme: "theme",
+  subscribe: "subscribe",
+  choose_language: "choose_language",
+  shortcuts: "shortcuts",
+  send_request: "send_request",
+  save_to_collections: "save_to_collections",
+  copy_request_link: "copy_request_link",
+  reset_request: "reset_request",
+  support_us_on: "support_us_on",
+  open_collective: "open_collective",
+  paypal: "paypal",
+  patreon: "patreon",
+  javascript_code: "javascript_code",
+  method: "method",
+  path: "path",
+  label: "label",
+  again: "again",
+  content_type: "content_type",
+  raw_input: "raw_input",
+  parameter_list: "parameter_list",
+  raw_request_body: "raw_request_body",
+  show_code: "show_code",
+  hide_code: "hide_code",
+  show_prerequest_script: "show_prerequest_script",
+  hide_prerequest_script: "hide_prerequest_script",
+  authentication: "authentication",
+  authentication_type: "authentication_type",
+  include_in_url: "include_in_url",
+  parameters: "parameters",
+  expand_response: "expand_response",
+  collapse_response: "collapse_response",
+  hide_preview: "hide_preview",
+  preview_html: "preview_html",
+  history: "history",
+  collections: "collections",
+  import_curl: "import_curl",
+  import: "import",
+  generate_code: "generate_code",
+  request_type: "request_type",
+  generated_code: "generated_code",
+  status: "status",
+  headers: "headers",
+  websocket: "websocket",
+  waiting_for_connection: "(waiting_for_connection)",
+  message: "message",
+  sse: "sse",
+  server: "server",
+  events: "events",
+  url: "url",
+  get_schema: "get_schema",
+  header_list: "header_list",
+  add_new: "add_new",
+  response: "response",
+  query: "query",
+  queries: "queries",
+  mutations: "mutations",
+  subscriptions: "subscriptions",
+  types: "types",
+  send: "send",
+  background: "background",
+  color: "color",
+  labels: "labels",
+  multi_color: "multi_color",
+  enabled: "enabled",
+  disabled: "disabled",
+  proxy: "proxy",
+  postwoman_official_proxy_hosting: "postwoman_official_proxy_hosting",
+  read_the: "read_the",
+  apollotv_privacy_policy: "apollotv_privacy_policy"
+};
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -31,7 +31,7 @@
            class="icon"
            id="installPWA"
            @click.prevent="showInstallPrompt()"
-            v-tooltip="'Install PWA'"
+            v-tooltip="$t('install_pwa')"
          >
            <i class="material-icons">offline_bolt</i>
          </button>
@@ -47,7 +47,7 @@
                  v-close-popover
                >
                  <i class="material-icons">keyboard</i>
-                  <span>Shortcuts</span>
+                  <span>{{ $t("shortcuts") }}</span>
                </button>
              </div>
              <div>
@@ -57,7 +57,7 @@
                  v-close-popover
                >
                  <i class="material-icons">favorite</i>
-                  <span>Support us</span>
+                  <span>{{ $t("support_us") }}</span>
                </button>
              </div>
              <div>
@@ -76,7 +76,7 @@
                      d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
                    />
                  </svg>
-                  <span>Tweet</span>
+                  <span>{{ $t("tweet") }}</span>
                </button>
              </div>
            </template>
@@ -95,7 +95,7 @@
            <nuxt-link
              :to="localePath('index')"
              :class="linkActive('/')"
-              v-tooltip.right="'Home'"
+              v-tooltip.right="$t('home')"
              aria-label="Home"
            >
              <logo alt style="height: 24px;"></logo>
@@ -103,21 +103,21 @@
            <nuxt-link
              :to="localePath('realtime')"
              :class="linkActive('/realtime')"
-              v-tooltip.right="'Realtime'"
+              v-tooltip.right="$t('realtime')"
            >
              <i class="material-icons">settings_input_hdmi</i>
            </nuxt-link>
            <nuxt-link
              :to="localePath('graphql')"
              :class="linkActive('/graphql')"
-              v-tooltip.right="'GraphQL'"
+              v-tooltip.right="$t('graphql')"
            >
              <i class="material-icons">cloud</i>
            </nuxt-link>
            <nuxt-link
              :to="localePath('settings')"
              :class="linkActive('/settings')"
-              v-tooltip.right="'Settings'"
+              v-tooltip.right="$t('settings')"
              aria-label="Settings"
            >
              <i class="material-icons">settings</i>
@@ -127,17 +127,17 @@
            <nav class="secondary-nav">
              <ul>
                <li>
-                  <a href="#request" v-tooltip.right="'Request'">
+                  <a href="#request" v-tooltip.right="$t('request')">
                    <i class="material-icons">cloud_upload</i>
                  </a>
                </li>
                <li>
-                  <a href="#options" v-tooltip.right="'Options'">
+                  <a href="#options" v-tooltip.right="$t('options')">
                    <i class="material-icons">toc</i>
                  </a>
                </li>
                <li>
-                  <a href="#response" v-tooltip.right="'Response'">
+                  <a href="#response" v-tooltip.right="$t('response')">
                    <i class="material-icons">cloud_download</i>
                  </a>
                </li>
@@ -148,12 +148,12 @@
            <nav class="secondary-nav">
              <ul>
                <li>
-                  <a href="#request" v-tooltip.right="'Request'">
+                  <a href="#request" v-tooltip.right="$t('request')">
                    <i class="material-icons">cloud_upload</i>
                  </a>
                </li>
                <li>
-                  <a href="#response" v-tooltip.right="'Communication'">
+                  <a href="#response" v-tooltip.right="$t('communication')">
                    <i class="material-icons">cloud_download</i>
                  </a>
                </li>
@@ -164,12 +164,12 @@
            <nav class="secondary-nav">
              <ul>
                <li>
-                  <a href="#endpoint" v-tooltip.right="'Endpoint'">
+                  <a href="#endpoint" v-tooltip.right="$t('endpoint')">
                    <i class="material-icons">cloud_upload</i>
                  </a>
                </li>
                <li>
-                  <a href="#schema" v-tooltip.right="'Schema'">
+                  <a href="#schema" v-tooltip.right="$t('schema')">
                    <i class="material-icons">cloud_download</i>
                  </a>
                </li>
@@ -180,12 +180,12 @@
            <nav class="secondary-nav">
              <ul>
                <li>
-                  <a href="#theme" v-tooltip.right="'Theme'">
+                  <a href="#theme" v-tooltip.right="$t('theme')">
                    <i class="material-icons">brush</i>
                  </a>
                </li>
                <li>
-                  <a href="#proxy" v-tooltip.right="'Proxy'">
+                  <a href="#proxy" v-tooltip.right="$t('proxy')">
                    <i class="material-icons">public</i>
                  </a>
                </li>
@@ -239,25 +239,22 @@
            target="_blank"
            rel="noopener"
          >
-            <button class="icon" v-tooltip="'Subscribe'">
+            <button class="icon" v-tooltip="$t('subscribe')">
              <i class="material-icons">email</i>
            </button>
          </a>
          <v-popover>
-            <button class="icon" v-tooltip="'Choose Language'">
+            <button class="icon" v-tooltip="$t('choose_language')">
              <i class="material-icons">translate</i>
            </button>
            <template slot="popover">
-              <div v-for="locale in availableLocales"
-              :key="locale.code">
-              <nuxt-link
-                :to="switchLocalePath(locale.code)"
-              >
-                <button class="icon" v-close-popover>
-                  {{ locale.name }}
-                </button>
-              </nuxt-link>
-            </div>
+              <div v-for="locale in availableLocales" :key="locale.code">
+                <nuxt-link :to="switchLocalePath(locale.code)">
+                  <button class="icon" v-close-popover>
+                    {{ locale.name }}
+                  </button>
+                </nuxt-link>
+              </div>
            </template>
          </v-popover>
        </div>
@@ -268,7 +265,7 @@
        <ul>
          <li>
            <div class="flex-wrap">
-              <h3 class="title">Shortcuts</h3>
+              <h3 class="title">{{ $t("shortcuts") }}</h3>
              <div>
                <button class="icon" @click="showShortcuts = false">
                  <i class="material-icons">close</i>
@@ -281,22 +278,22 @@
      <div slot="body">
        <br />
        <div>
-          <label>Send Request</label>
+          <label>{{ $t("send_request") }}</label>
          <kbd>⌘ G</kbd>
        </div>
        <br />
        <div>
-          <label>Save to Collections</label>
+          <label>{{ $t("save_to_collections") }}</label>
          <kbd>⌘ S</kbd>
        </div>
        <br />
        <div>
-          <label>Copy Request Link</label>
+          <label>{{ $t("copy_request_link") }}</label>
          <kbd>⌘ K</kbd>
        </div>
        <br />
        <div>
-          <label>Reset Request</label>
+          <label>{{ $t("reset_request") }}</label>
          <kbd>⌘ L</kbd>
        </div>
        <br />
@@ -308,7 +305,7 @@
        <ul>
          <li>
            <div class="flex-wrap">
-              <h3 class="title">Support us on</h3>
+              <h3 class="title">{{ $t("support_us_on") }}</h3>
              <div>
                <button class="icon" @click="showSupport = false">
                  <i class="material-icons">close</i>
@@ -327,7 +324,7 @@
          >
            <button class="icon">
              <i class="material-icons">favorite</i>
-              <span>Open Collective</span>
+              <span>{{ $t("open_collective") }}</span>
            </button>
          </a>
        </div>
@@ -339,7 +336,7 @@
          >
            <button class="icon">
              <i class="material-icons">favorite</i>
-              <span>PayPal</span>
+              <span>{{ $t("paypal") }}</span>
            </button>
          </a>
        </div>
@@ -351,7 +348,7 @@
          >
            <button class="icon">
              <i class="material-icons">favorite</i>
-              <span>Patreon</span>
+              <span>{{ $t("patreon") }}</span>
            </button>
          </a>
        </div>
--- a/middleware/parsedefaulturl.js
+++ b/middleware/parsedefaulturl.js
@@ -1,8 +1,5 @@
-export default function ({
-  route,
-  redirect
-}) {
-  if (route.fullPath !== '/') {
-    return redirect('/');
+export default function({ route, redirect }) {
+  if (route.fullPath !== "/") {
+    return redirect("/");
  }
 }
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -3,50 +3,57 @@
 export const meta = {
  name: "Postwoman",
  shortDescription: "API request builder",
-  description: "The Postwoman API request builder helps you create your requests faster, saving you precious time on your development."
+  description:
+    "The Postwoman API request builder helps you create your requests faster, saving you precious time on your development."
 };
 // Sets the base path for the router.
 // Important for deploying to GitHub pages.
 // -- Travis includes the author in the repo slug,
 //    so if there's a /, we need to get everything after it.
-let repoName = (process.env.TRAVIS_REPO_SLUG || '').split('/').pop();
-export const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
-  router: {
-    base: `/${repoName}/`
-  }
-} : {
-  router: {
-    base: '/'
-  }
-};
+let repoName = (process.env.TRAVIS_REPO_SLUG || "").split("/").pop();
+export const routerBase =
+  process.env.DEPLOY_ENV === "GH_PAGES"
+    ? {
+        router: {
+          base: `/${repoName}/`
+        }
+      }
+    : {
+        router: {
+          base: "/"
+        }
+      };
 export default {
-  mode: 'spa',
+  mode: "spa",
  /*
   ** Headers of the page
   */
  server: {
-    host: '0.0.0.0', // default: localhost
+    host: "0.0.0.0" // default: localhost
  },
  head: {
    title: `${meta.name} \u2022 ${meta.shortDescription}`,
-    meta: [{
-        charset: 'utf-8'
+    meta: [
+      {
+        charset: "utf-8"
      },
      {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover, minimal-ui'
+        name: "viewport",
+        content:
+          "width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover, minimal-ui"
      },
      {
-        hid: 'description',
-        name: 'description',
-        content: meta.description || ''
+        hid: "description",
+        name: "description",
+        content: meta.description || ""
      },
      {
-        name: 'keywords',
-        content: 'postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql'
+        name: "keywords",
+        content:
+          "postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql"
      },
      {
-        name: 'X-UA-Compatible',
+        name: "X-UA-Compatible",
        content: "IE=edge, chrome=1"
      },
      {
@@ -63,152 +70,154 @@ export default {
      },
      // Add to homescreen for Chrome on Android. Fallback for PWA (handled by nuxt)
      {
-        name: 'application-name',
+        name: "application-name",
        content: meta.name
      },
      // Add to homescreen for Safari on iOS
      {
-        name: 'apple-mobile-web-app-capable',
-        content: 'yes'
+        name: "apple-mobile-web-app-capable",
+        content: "yes"
      },
      {
-        name: 'apple-mobile-web-app-status-bar-style',
-        content: 'black-translucent'
+        name: "apple-mobile-web-app-status-bar-style",
+        content: "black-translucent"
      },
      {
-        name: 'apple-mobile-web-app-title',
+        name: "apple-mobile-web-app-title",
        content: meta.name
      },
      // Windows phone tile icon
      {
-        name: 'msapplication-TileImage',
+        name: "msapplication-TileImage",
        content: `${routerBase.router.base}icons/icon-144x144.png`
      },
      {
-        name: 'msapplication-TileColor',
-        content: '#252628'
+        name: "msapplication-TileColor",
+        content: "#252628"
      },
      {
-        name: 'msapplication-tap-highlight',
-        content: 'no'
+        name: "msapplication-tap-highlight",
+        content: "no"
      },
      // OpenGraph
      {
-        property: 'og:site_name',
+        property: "og:site_name",
        content: meta.name
      },
      {
-        property: 'og:url',
-        content: 'https://postwoman.io'
+        property: "og:url",
+        content: "https://postwoman.io"
      },
      {
-        property: 'og:type',
-        content: 'website'
+        property: "og:type",
+        content: "website"
      },
      {
-        property: 'og:title',
+        property: "og:title",
        content: `${meta.name} \u2022 ${meta.shortDescription}`
      },
      {
-        property: 'og:description',
+        property: "og:description",
        content: meta.description
      },
      {
-        property: 'og:image',
+        property: "og:image",
        content: `${routerBase.router.base}logo.jpg`
      },
      // Twitter
      {
-        name: 'twitter:card',
+        name: "twitter:card",
        content: "summary_large_image"
      },
      {
-        name: 'twitter:site',
+        name: "twitter:site",
        content: "@liyasthomas"
      },
      {
-        name: 'twitter:creator',
+        name: "twitter:creator",
        content: "@liyasthomas"
      },
      {
-        name: 'twitter:url',
+        name: "twitter:url",
        content: "https://postwoman.io"
      },
      {
-        name: 'twitter:title',
+        name: "twitter:title",
        content: `${meta.name} \u2022 ${meta.shortDescription}`
      },
      {
-        name: 'twitter:description',
+        name: "twitter:description",
        content: meta.description
      },
      {
-        name: 'twitter:image',
+        name: "twitter:image",
        content: `${routerBase.router.base}logo.jpg`
-      },
+      }
    ],
-    link: [{
-        rel: 'icon',
-        type: 'image/x-icon',
+    link: [
+      {
+        rel: "icon",
+        type: "image/x-icon",
        href: `${routerBase.router.base}favicon.ico`
      },
      // Home-screen icons (iOS)
      {
-        rel: 'apple-touch-icon',
+        rel: "apple-touch-icon",
        href: `${routerBase.router.base}icons/icon-48x48.png`
      },
      {
-        rel: 'apple-touch-icon',
-        sizes: '72x72',
+        rel: "apple-touch-icon",
+        sizes: "72x72",
        href: `${routerBase.router.base}icons/icon-72x72.png`
      },
      {
-        rel: 'apple-touch-icon',
-        sizes: '96x96',
+        rel: "apple-touch-icon",
+        sizes: "96x96",
        href: `${routerBase.router.base}icons/icon-96x96.png`
      },
      {
-        rel: 'apple-touch-icon',
-        sizes: '144x144',
+        rel: "apple-touch-icon",
+        sizes: "144x144",
        href: `${routerBase.router.base}icons/icon-144x144.png`
      },
      {
-        rel: 'apple-touch-icon',
-        sizes: '192x192',
+        rel: "apple-touch-icon",
+        sizes: "192x192",
        href: `${routerBase.router.base}icons/icon-192x192.png`
-      },
+      }
    ]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: {
-    color: 'var(--ac-color)'
+    color: "var(--ac-color)"
  },
  /*
   ** Customize the loading indicator
   */
  loadingIndicator: {
-    name: 'pulse',
-    color: 'var(--ac-color)',
-    background: 'var(--bg-color)'
+    name: "pulse",
+    color: "var(--ac-color)",
+    background: "var(--bg-color)"
  },
  /*
   ** Global CSS
   */
  css: [
-    '~/assets/css/styles.scss',
-    '~/assets/css/themes.scss',
-    '~/assets/css/fonts.scss'
+    "~/assets/css/styles.scss",
+    "~/assets/css/themes.scss",
+    "~/assets/css/fonts.scss"
  ],
  /*
   ** Plugins to load before mounting the App
   */
-  plugins: [{
-      src: '~/plugins/vuex-persist'
+  plugins: [
+    {
+      src: "~/plugins/vuex-persist"
    },
    {
-      src: '~/plugins/v-tooltip'
+      src: "~/plugins/v-tooltip"
    }
  ],
  /*
@@ -220,16 +229,19 @@ export default {
   */
  modules: [
    // See https://goo.gl/OOhYW5
-    ['@nuxtjs/pwa'],
-    ['@nuxtjs/axios'],
-    ['@nuxtjs/toast'],
-    ['@nuxtjs/google-analytics'],
-    ['@nuxtjs/sitemap'],
-    ['@nuxtjs/google-tag-manager', {
-      id: process.env.GTM_ID || 'GTM-MXWD8NQ'
-    }],
-    ['@nuxtjs/robots'],
-    ['nuxt-i18n']
+    ["@nuxtjs/pwa"],
+    ["@nuxtjs/axios"],
+    ["@nuxtjs/toast"],
+    ["@nuxtjs/google-analytics"],
+    ["@nuxtjs/sitemap"],
+    [
+      "@nuxtjs/google-tag-manager",
+      {
+        id: process.env.GTM_ID || "GTM-MXWD8NQ"
+      }
+    ],
+    ["@nuxtjs/robots"],
+    ["nuxt-i18n"]
  ],
  pwa: {
    manifest: {
@@ -245,86 +257,87 @@ export default {

    meta: {
      description: meta.shortDescription,
-      theme_color: "#252628",
+      theme_color: "#252628"
    },

-    icons: ((sizes) => {
+    icons: (sizes => {
      let icons = [];
      for (let size of sizes) {
        icons.push({
-          "src": `${routerBase.router.base}icons/icon-${size}x${size}.png`,
-          "type": "image/png",
-          "sizes": `${size}x${size}`
+          src: `${routerBase.router.base}icons/icon-${size}x${size}.png`,
+          type: "image/png",
+          sizes: `${size}x${size}`
        });
      }
      return icons;
    })([48, 72, 96, 144, 192, 512])
  },
  toast: {
-    position: 'bottom-center',
+    position: "bottom-center",
    duration: 3000,
-    theme: 'bubble',
+    theme: "bubble",
    keepOnHover: true
  },
  googleAnalytics: {
-    id: process.env.GA_ID || 'UA-61422507-2'
+    id: process.env.GA_ID || "UA-61422507-2"
  },
  sitemap: {
-    hostname: 'https://postwoman.io'
+    hostname: "https://postwoman.io"
  },
  robots: {
-    UserAgent: '*',
-    Disallow: '',
-    Allow: '/',
-    Sitemap: 'https://postwoman.io/sitemap.xml'
+    UserAgent: "*",
+    Disallow: "",
+    Allow: "/",
+    Sitemap: "https://postwoman.io/sitemap.xml"
  },
  i18n: {
-    locales: [{
-        code: 'en',
-        name: 'English',
-        iso: 'en-US',
-        file: 'en-US.js'
+    locales: [
+      {
+        code: "en",
+        name: "English",
+        iso: "en-US",
+        file: "en-US.js"
      },
      {
-        code: 'es',
-        name: 'Español',
-        iso: 'es-ES',
-        file: 'es-ES.js'
+        code: "es",
+        name: "Español",
+        iso: "es-ES",
+        file: "es-ES.js"
      },
      {
-        code: 'fr',
-        name: 'Français',
-        iso: 'fr-FR',
-        file: 'fr-FR.js'
+        code: "fr",
+        name: "Français",
+        iso: "fr-FR",
+        file: "fr-FR.js"
      },
      {
-        code: 'fa',
-        name: 'Farsi',
-        iso: 'fa-IR',
-        file: 'fa-IR.js'
+        code: "fa",
+        name: "Farsi",
+        iso: "fa-IR",
+        file: "fa-IR.js"
      },
      {
-        code: 'pt',
-        name: 'Português Brasileiro',
-        iso: 'pt-BR',
-        file: 'pt-BR.js'
+        code: "pt",
+        name: "Português Brasileiro",
+        iso: "pt-BR",
+        file: "pt-BR.js"
      },
      {
-        code: 'cn',
-        name: '简体中文',
-        iso: 'zh-CN',
-        file: 'zh-CN.js'
+        code: "cn",
+        name: "简体中文",
+        iso: "zh-CN",
+        file: "zh-CN.js"
      },
      {
-        code: 'id',
-        name: 'Bahasa Indonesia',
-        iso: 'id-ID',
-        file: 'id-ID.js'
+        code: "id",
+        name: "Bahasa Indonesia",
+        iso: "id-ID",
+        file: "id-ID.js"
      }
    ],
-    defaultLocale: 'en',
+    defaultLocale: "en",
    lazy: true,
-    langDir: 'lang/'
+    langDir: "lang/"
  },
  /*
   ** Build configuration
@@ -345,4 +358,4 @@ export default {
   ** Router configuration
   */
  ...routerBase
-}
+};
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -5,7 +5,7 @@
        <pw-section class="blue" label="Endpoint" ref="endpoint">
          <ul>
            <li>
-              <label for="url">URL</label>
+              <label for="url">{{ $t("url") }}</label>
              <input
                id="url"
                type="url"
@@ -17,7 +17,7 @@
              <li>
                <label for="get" class="hide-on-small-screen">&nbsp;</label>
                <button id="get" name="get" @click="getSchema">
-                  Get Schema
+                  {{ $t("get_schema") }}
                  <span><i class="material-icons">send</i></span>
                </button>
              </li>
@@ -29,7 +29,7 @@
          <ul>
            <li>
              <div class="flex-wrap">
-                <label for="headerList">Header List</label>
+                <label for="headerList">{{ $t("header_list") }}</label>
                <div>
                  <button
                    class="icon"
@@ -95,7 +95,7 @@
            <li>
              <button class="icon" @click="addRequestHeader">
                <i class="material-icons">add</i>
-                <span>Add New</span>
+                <span>{{ $t("add_new") }}</span>
              </button>
            </li>
          </ul>
@@ -103,7 +103,7 @@

        <pw-section class="green" label="Schema" ref="schema">
          <div class="flex-wrap">
-            <label>response</label>
+            <label>{{ $t("response") }}</label>
            <div>
              <button
                class="icon"
@@ -152,7 +152,7 @@
        </pw-section>
        <pw-section class="cyan" label="Query" ref="query">
          <div class="flex-wrap">
-            <label for="gqlQuery">Query</label>
+            <label for="gqlQuery">{{ $t("query") }}</label>
            <div>
              <button
                class="icon"
@@ -179,7 +179,7 @@
        </pw-section>
        <pw-section class="purple" label="Response" ref="response">
          <div class="flex-wrap">
-            <label for="responseField">Response</label>
+            <label for="responseField">{{ $t("response") }}</label>
            <div>
              <button
                class="icon"
@@ -217,7 +217,7 @@
              checked="checked"
            />
            <label v-if="queryFields.length > 0" for="queries-tab"
-              >Queries</label
+              >{{ $t("queries") }}</label
            >
            <div v-if="queryFields.length > 0" class="tab">
              <div v-for="field in queryFields" :key="field.name">
@@ -233,7 +233,7 @@
              checked="checked"
            />
            <label v-if="mutationFields.length > 0" for="mutations-tab"
-              >Mutations</label
+              >{{ $t("mutations") }}</label
            >
            <div v-if="mutationFields.length > 0" class="tab">
              <div v-for="field in mutationFields" :key="field.name">
@@ -249,7 +249,7 @@
              checked="checked"
            />
            <label v-if="subscriptionFields.length > 0" for="subscriptions-tab"
-              >Subscriptions</label
+              >{{ $t("subscriptions") }}</label
            >
            <div v-if="subscriptionFields.length > 0" class="tab">
              <div v-for="field in subscriptionFields" :key="field.name">
@@ -264,7 +264,7 @@
              name="side"
              checked="checked"
            />
-            <label v-if="gqlTypes.length > 0" for="gqltypes-tab">Types</label>
+            <label v-if="gqlTypes.length > 0" for="gqltypes-tab">{{ $t("types") }}</label>
            <div v-if="gqlTypes.length > 0" class="tab">
              <div v-for="type in gqlTypes" :key="type.name">
                <gql-type :gqlType="type" />
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,7 @@
          <ul>
            <li>
              <div class="flex-wrap">
-                <label for="generatedCode">JavaScript Code</label>
+                <label for="generatedCode">{{ $t("javascript_code") }}</label>
                <div>
                  <a
                    href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts"
@@ -39,7 +39,7 @@
        <pw-section class="blue" label="Request" ref="request">
          <ul>
            <li>
-              <label for="method">Method</label>
+              <label for="method">{{ $t("method") }}</label>
              <select id="method" v-model="method" @change="methodChange">
                <option>GET</option>
                <option>HEAD</option>
@@ -51,7 +51,7 @@
              </select>
            </li>
            <li>
-              <label for="url">URL</label>
+              <label for="url">{{ $t("url") }}</label>
              <input
                :class="{ error: !isValidURL }"
                @keyup.enter="isValidURL ? sendRequest() : null"
@@ -62,7 +62,7 @@
              />
            </li>
            <li>
-              <label for="path">Path</label>
+              <label for="path">{{ $t("path") }}</label>
              <input
                @keyup.enter="isValidURL ? sendRequest() : null"
                id="path"
@@ -72,7 +72,7 @@
              />
            </li>
            <li>
-              <label for="label">Label</label>
+              <label for="label">{{ $t("label") }}</label>
              <input
                id="label"
                name="label"
@@ -98,7 +98,7 @@
                  ref="sendButton"
                >
                  {{ $t("send") }}
-                  <span id="hidden-message">Again</span>
+                  <span id="hidden-message">{{ $t("again") }}</span>
                  <span>
                    <i class="material-icons">send</i>
                  </span>
@@ -113,7 +113,7 @@
          >
            <ul>
              <li>
-                <label for="contentType">Content Type</label>
+                <label for="contentType">{{ $t("content_type") }}</label>
                <autocomplete
                  :source="validContentTypes"
                  :spellcheck="false"
@@ -127,8 +127,8 @@
                <div class="flex-wrap">
                  <span>
                    <pw-toggle :on="rawInput" @change="rawInput = $event"
-                      >Raw Input
-                      {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
+                      >{{ $t("raw_input") }}
+                      {{ rawInput ? $t("enabled") : $t("disabled") }}</pw-toggle
                    >
                  </span>
                  <div>
@@ -154,7 +154,7 @@
            <div v-if="!rawInput">
              <ul>
                <li>
-                  <label for="reqParamList">Parameter List</label>
+                  <label for="reqParamList">{{ $t("parameter_list") }}</label>
                  <textarea
                    id="reqParamList"
                    readonly
@@ -216,7 +216,7 @@
                    name="addrequest"
                  >
                    <i class="material-icons">add</i>
-                    <span>Add New</span>
+                    <span>{{ $t("add_new") }}</span>
                  </button>
                </li>
              </ul>
@@ -224,7 +224,7 @@
            <div v-else>
              <ul>
                <li>
-                  <label for="rawBody">Raw Request Body</label>
+                  <label for="rawBody">{{ $t("raw_request_body") }}</label>
                  <textarea
                    id="rawBody"
                    @keydown="formatRawParams"
@@ -251,7 +251,7 @@
                @click="isHidden = !isHidden"
                :disabled="!isValidURL"
                v-tooltip.bottom="{
-                  content: isHidden ? 'Show Code' : 'Hide Code'
+                  content: isHidden ? $t('show_code') : $t('hide_code')
                }"
              >
                <i class="material-icons">flash_on</i>
@@ -261,8 +261,8 @@
                id="preRequestScriptButton"
                v-tooltip.bottom="{
                  content: !showPreRequestScript
-                    ? 'Show Pre-Request Script'
-                    : 'Hide Pre-Request Script'
+                    ? $t('show_prerequest_script')
+                    : $t('hide_prerequest_script')
                }"
                @click="showPreRequestScript = !showPreRequestScript"
              >
@@ -313,7 +313,7 @@

        <section id="options">
          <input id="tab-one" type="radio" name="options" checked="checked" />
-          <label for="tab-one">Authentication</label>
+          <label for="tab-one">{{ $t("authentication") }}</label>
          <div class="tab">
            <pw-section
              class="cyan"
@@ -323,7 +323,7 @@
              <ul>
                <li>
                  <div class="flex-wrap">
-                    <label for="auth">Authentication Type</label>
+                    <label for="auth">{{ $t("authentication") }}</label>
                    <div>
                      <button
                        class="icon"
@@ -392,19 +392,19 @@
                <pw-toggle
                  :on="!urlExcludes.auth"
                  @change="setExclude('auth', !$event)"
-                  >Include in URL</pw-toggle
+                  >{{ $t("include_in_url") }}</pw-toggle
                >
              </div>
            </pw-section>
          </div>
          <input id="tab-two" type="radio" name="options" />
-          <label for="tab-two">Headers</label>
+          <label for="tab-two">{{ $t("headers") }}</label>
          <div class="tab">
            <pw-section class="orange" label="Headers" ref="headers">
              <ul>
                <li>
                  <div class="flex-wrap">
-                    <label for="headerList">Header List</label>
+                    <label for="headerList">{{ $t("header_list") }}</label>
                    <div>
                      <button
                        class="icon"
@@ -471,20 +471,20 @@
                <li>
                  <button class="icon" @click="addRequestHeader">
                    <i class="material-icons">add</i>
-                    <span>Add New</span>
+                    <span>{{ $t("add_new") }}</span>
                  </button>
                </li>
              </ul>
            </pw-section>
          </div>
          <input id="tab-three" type="radio" name="options" />
-          <label for="tab-three">Parameters</label>
+          <label for="tab-three">{{ $t("parameters") }}</label>
          <div class="tab">
            <pw-section class="pink" label="Parameters" ref="parameters">
              <ul>
                <li>
                  <div class="flex-wrap">
-                    <label for="paramList">Parameter List</label>
+                    <label for="paramList">{{ $t("parameter_list") }}</label>
                    <div>
                      <button
                        class="icon"
@@ -549,7 +549,7 @@
                <li>
                  <button class="icon" @click="addRequestParam">
                    <i class="material-icons">add</i>
-                    <span>Add New</span>
+                    <span>{{ $t("add_new") }}</span>
                  </button>
                </li>
              </ul>
@@ -565,7 +565,7 @@
        >
          <ul>
            <li>
-              <label for="status">status</label>
+              <label for="status">{{ $t("status") }}</label>
              <input
                :class="statusCategory ? statusCategory.className : ''"
                :value="response.status || '(waiting to send request)'"
@@ -586,7 +586,7 @@
          <ul v-if="response.body">
            <li>
              <div class="flex-wrap">
-                <label for="body">response</label>
+                <label for="body">{{ $t("response") }}</label>
                <div>
                  <button
                    class="icon"
@@ -595,8 +595,8 @@
                    v-if="response.body"
                    v-tooltip="{
                      content: !expandResponse
-                        ? 'Expand response'
-                        : 'Collapse response'
+                        ? $t('expand_response')
+                        : $t('collapse_response')
                    }"
                  >
                    <i class="material-icons" v-if="!expandResponse"
@@ -655,7 +655,7 @@
                  >
                  <i class="material-icons" v-else>visibility_off</i>
                  <span>{{
-                    previewEnabled ? "Hide Preview" : "Preview HTML"
+                    previewEnabled ? $t("hide_preview") : $t("preview_html")
                  }}</span>
                </button>
              </div>
@@ -667,7 +667,7 @@
      <aside class="sticky-inner inner-right">
        <section>
          <input id="history-tab" type="radio" name="side" checked="checked" />
-          <label for="history-tab">History</label>
+          <label for="history-tab">{{ $t("history") }}</label>
          <div class="tab">
            <history
              @useHistory="handleUseHistory"
@@ -675,7 +675,7 @@
            ></history>
          </div>
          <input id="collection-tab" type="radio" name="side" />
-          <label for="collection-tab">Collections</label>
+          <label for="collection-tab">{{ $t("collections") }}</label>
          <div class="tab">
            <pw-section class="yellow" label="Collections" ref="collections">
              <collections />
@@ -695,7 +695,7 @@
          <ul>
            <li>
              <div class="flex-wrap">
-                <h3 class="title">Import cURL</h3>
+                <h3 class="title">{{ $t("import_curl") }}</h3>
                <div>
                  <button class="icon" @click="showModal = false">
                    <i class="material-icons">close</i>
@@ -722,7 +722,7 @@
            <li>
              <button class="icon" @click="handleImport">
                <i class="material-icons">get_app</i>
-                <span>Import</span>
+                <span>{{ $t("import") }}</span>
              </button>
            </li>
          </ul>
@@ -734,7 +734,7 @@
          <ul>
            <li>
              <div class="flex-wrap">
-                <h3 class="title">Generate code</h3>
+                <h3 class="title">{{ $t("generate_code") }}</h3>
                <div>
                  <button class="icon" @click="isHidden = true">
                    <i class="material-icons">close</i>
@@ -747,7 +747,7 @@
        <div slot="body">
          <ul>
            <li>
-              <label for="requestType">Request Type</label>
+              <label for="requestType">{{ $t("request_type") }}</label>
              <select id="requestType" v-model="requestType">
                <option>JavaScript XHR</option>
                <option>Fetch</option>
@@ -758,7 +758,7 @@
          <ul>
            <li>
              <div class="flex-wrap">
-                <label for="generatedCode">Generated Code</label>
+                <label for="generatedCode">{{ $t("generated_code") }}</label>
                <div>
                  <button
                    class="icon"
@@ -1483,7 +1483,7 @@ export default {
      headers = Object.assign(
        // Clone the app headers object first, we don't want to
        // mutate it with the request headers added by default.
-        Object.assign({}, this.headers),
+        Object.assign({}, this.headers)

        // We make our temporary headers object the source so
        // that you can override the added headers if you
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -2,12 +2,12 @@
  <div class="page">
    <section id="options">
      <input id="tab-one" type="radio" name="options" checked="checked" />
-      <label for="tab-one">WebSocket</label>
+      <label for="tab-one">{{ $t("websocket") }}</label>
      <div class="tab">
        <pw-section class="blue" label="Request" ref="request">
          <ul>
            <li>
-              <label for="url">URL</label>
+              <label for="url">{{ $t("url") }}</label>
              <input
                id="url"
                type="url"
@@ -56,13 +56,13 @@
                    }}{{ logEntry.payload }}</span
                  >
                </span>
-                <span v-else>(waiting for connection)</span>
+                <span v-else>{{ $t("waiting_for_connection") }}</span>
              </div>
            </li>
          </ul>
          <ul>
            <li>
-              <label for="message">Message</label>
+              <label for="message">{{ $t("message") }}</label>
              <input
                id="message"
                name="message"
@@ -81,7 +81,7 @@
                  :disabled="!connectionState"
                  @click="sendMessage"
                >
-                  Send
+                  {{ $t("send") }}
                  <span>
                    <i class="material-icons">send</i>
                  </span>
@@ -92,12 +92,12 @@
        </pw-section>
      </div>
      <input id="tab-two" type="radio" name="options" />
-      <label for="tab-two">SSE</label>
+      <label for="tab-two">{{ $t("sse") }}</label>
      <div class="tab">
        <pw-section class="blue" label="Request" ref="request">
          <ul>
            <li>
-              <label for="server">Server</label>
+              <label for="server">{{ $t("server") }}</label>
              <input
                id="server"
                type="url"
@@ -137,7 +137,7 @@
        >
          <ul>
            <li>
-              <label for="log">Events</label>
+              <label for="log">{{ $t("events") }}</label>
              <div id="log" name="log" class="log">
                <span v-if="events.log">
                  <span
@@ -148,7 +148,7 @@
                    }}{{ logEntry.payload }}</span
                  >
                </span>
-                <span v-else>(waiting for connection)</span>
+                <span v-else>{{ $t("waiting_for_connection") }}</span>
              </div>
              <div id="result"></div>
            </li>
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -3,7 +3,7 @@
    <pw-section class="cyan" label="Theme" ref="theme">
      <ul>
        <li>
-          <h3 class="title">Background</h3>
+          <h3 class="title">{{ $t("background") }}</h3>
          <div class="backgrounds">
            <span
              :key="theme.class"
@@ -22,7 +22,7 @@
      </ul>
      <ul>
        <li>
-          <h3 class="title">Color</h3>
+          <h3 class="title">{{ $t("color") }}</h3>
          <div class="colors">
            <span
              :key="entry.color"
@@ -41,14 +41,14 @@
      </ul>
      <ul>
        <li>
-          <h3 class="title">Labels</h3>
+          <h3 class="title">{{ $t("color") }}</h3>
          <span>
            <pw-toggle
              :on="settings.FRAME_COLORS_ENABLED"
              @change="toggleSetting('FRAME_COLORS_ENABLED')"
-              >Multi-color
+              >{{ $t("multi_color") }}
              {{
-                settings.FRAME_COLORS_ENABLED ? "Enabled" : "Disabled"
+                settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled")
              }}</pw-toggle
            >
          </span>
@@ -64,8 +64,10 @@
              <pw-toggle
                :on="settings.PROXY_ENABLED"
                @change="toggleSetting('PROXY_ENABLED')"
-                >Proxy
-                {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}</pw-toggle
+                >{{ $t("proxy") }}
+                {{
+                  settings.PROXY_ENABLED ? $t("enabled") : $t("disabled")
+                }}</pw-toggle
              >
            </span>
            <a
@@ -83,7 +85,7 @@
      <ul>
        <li>
          <div class="flex-wrap">
-            <label for="url">URL</label>
+            <label for="url">{{ $t("url") }}</label>
            <button
              class="icon"
              @click="settings.PROXY_URL = `https://postwoman.apollotv.xyz/`"
@@ -103,11 +105,14 @@
      <ul class="info">
        <li>
          <p>
-            Postwoman's Official Proxy is hosted by ApolloTV.
+            {{ $t("postwoman_official_proxy_hosting") }}
            <br />
-            Read the
-            <a href="https://apollotv.xyz/legal" target="_blank" rel="noopener"
-              >ApolloTV privacy policy</a
+            {{ $t("read_the") }}
+            <a
+              href="https://apollotv.xyz/legal"
+              target="_blank"
+              rel="noopener"
+              >{{ $t("apollotv_privacy_policy") }}</a
            >.
          </p>
        </li>
--- a/plugins/v-tooltip.js
+++ b/plugins/v-tooltip.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
-import VTooltip from 'v-tooltip';
+import Vue from "vue";
+import VTooltip from "v-tooltip";

 Vue.use(VTooltip);
--- a/plugins/vuex-persist.js
+++ b/plugins/vuex-persist.js
@@ -1,7 +1,5 @@
 import VuexPersistence from "vuex-persist";

-export default ({
-  store
-}) => {
+export default ({ store }) => {
  new VuexPersistence().plugin(store);
-}
+};
--- a/store/index.js
+++ b/store/index.js
@@ -1,20 +1,18 @@
-import Vuex from 'vuex';
-import state from './state';
-import VuexPersist from 'vuex-persist'
+import Vuex from "vuex";
+import state from "./state";
+import VuexPersist from "vuex-persist";

 export default {
  install(Vue) {
    Vue.use(Vuex);

    const vuexLocalStorage = new VuexPersist({
-      key: 'vuex',
+      key: "vuex",
      storage: window.localStorage,
-      reducer: ({
-        ...request
-      }) => ({
+      reducer: ({ ...request }) => ({
        ...request
      })
-    })
+    });

    const store = new Vuex.Store({
      state,
@@ -22,5 +20,5 @@ export default {
    });

    Vue.prototype.$store = store;
-  },
+  }
 };
--- a/store/mutations.js
+++ b/store/mutations.js
@@ -1,73 +1,73 @@
 export default {
-  setState({request}, {attribute, value}) {
-    request[attribute] = value
+  setState({ request }, { attribute, value }) {
+    request[attribute] = value;
  },

-  setGQLState({gql}, {attribute, value}) {
+  setGQLState({ gql }, { attribute, value }) {
    gql[attribute] = value;
  },

-  addGQLHeader({gql}, object) {
+  addGQLHeader({ gql }, object) {
    gql.headers.push(object);
  },

-  removeGQLHeader({gql}, index) {
+  removeGQLHeader({ gql }, index) {
    gql.headers.splice(index, 1);
  },

-  setGQLHeaderKey({gql}, {index, value}) {
+  setGQLHeaderKey({ gql }, { index, value }) {
    gql.headers[index].key = value;
  },

-  setGQLHeaderValue({gql}, {index, value}) {
+  setGQLHeaderValue({ gql }, { index, value }) {
    gql.headers[index].value = value;
  },

-  addHeaders({request}, value) {
+  addHeaders({ request }, value) {
    request.headers.push(value);
  },

-  removeHeaders({request}, index) {
-    request.headers.splice(index, 1)
+  removeHeaders({ request }, index) {
+    request.headers.splice(index, 1);
  },

-  setKeyHeader({request}, {index, value}) {
-    request.headers[index].key = value
+  setKeyHeader({ request }, { index, value }) {
+    request.headers[index].key = value;
  },

-  setValueHeader({request}, {index, value}) {
-    request.headers[index].value = value
+  setValueHeader({ request }, { index, value }) {
+    request.headers[index].value = value;
  },

-  addParams({request}, value) {
+  addParams({ request }, value) {
    request.params.push(value);
  },

-  removeParams({request}, index) {
-    request.params.splice(index, 1)
+  removeParams({ request }, index) {
+    request.params.splice(index, 1);
  },

-  setKeyParams({request}, {index, value}) {
-    request.params[index].key = value
+  setKeyParams({ request }, { index, value }) {
+    request.params[index].key = value;
  },

-  setValueParams({request}, {index, value}) {
-    request.params[index].value = value
+  setValueParams({ request }, { index, value }) {
+    request.params[index].value = value;
  },

-  addBodyParams({request}, value) {
+  addBodyParams({ request }, value) {
    request.bodyParams.push(value);
  },

-  removeBodyParams({request}, index) {
-    request.bodyParams.splice(index, 1)
+  removeBodyParams({ request }, index) {
+    request.bodyParams.splice(index, 1);
  },

-  setKeyBodyParams({request}, {index, value}) {
-    request.bodyParams[index].key = value
+  setKeyBodyParams({ request }, { index, value }) {
+    request.bodyParams[index].key = value;
  },

-  setValueBodyParams({request}, {index, value}) {
-    request.bodyParams[index].value = value
-  },
+  setValueBodyParams({ request }, { index, value }) {
+    request.bodyParams[index].value = value;
+  }
 };
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import Vue from "vue";

 export const SETTINGS_KEYS = [
  /**
@@ -61,20 +61,27 @@ export const SETTINGS_KEYS = [

 export const state = () => ({
  settings: {},
-  collections: [{
-    name: 'My Collection',
-    folders: [],
-    requests: [],
-  }],
+  collections: [
+    {
+      name: "My Collection",
+      folders: [],
+      requests: []
+    }
+  ],
  selectedRequest: {},
-  editingRequest: {},
+  editingRequest: {}
 });

 export const mutations = {
-
-  applySetting({settings}, setting) {
-    if (setting == null || !(setting instanceof Array) || setting.length !== 2) {
-      throw new Error("You must provide a setting (array in the form [key, value])");
+  applySetting({ settings }, setting) {
+    if (
+      setting == null ||
+      !(setting instanceof Array) ||
+      setting.length !== 2
+    ) {
+      throw new Error(
+        "You must provide a setting (array in the form [key, value])"
+      );
    }

    const [key, value] = setting;
@@ -103,151 +110,160 @@ export const mutations = {
    }
  },

-  addNewCollection({collections}, collection) {
+  addNewCollection({ collections }, collection) {
    collections.push({
-      name: '',
+      name: "",
      folders: [],
      requests: [],
-      ...collection,
-    })
-  },
-
-  removeCollection({collections}, payload) {
-    const {
-      collectionIndex
-    } = payload;
-    collections.splice(collectionIndex, 1)
-  },
-
-  editCollection({collections}, payload) {
-    const {
-      collection,
-      collectionIndex
-    } = payload
-    collections[collectionIndex] = collection
-  },
-
-  addNewFolder({collections}, payload) {
-    const {
-      collectionIndex,
-      folder
-    } = payload;
-    collections[collectionIndex].folders.push({
-      name: '',
-      requests: [],
-      ...folder,
+      ...collection
    });
  },

-  editFolder({collections}, payload) {
-    const {
-      collectionIndex,
-      folder,
-      folderIndex
-    } = payload;
-    Vue.set(collections[collectionIndex].folders, folderIndex, folder)
+  removeCollection({ collections }, payload) {
+    const { collectionIndex } = payload;
+    collections.splice(collectionIndex, 1);
  },

-  removeFolder({collections}, payload) {
-    const {
-      collectionIndex,
-      folderIndex
-    } = payload;
-    collections[collectionIndex].folders.splice(folderIndex, 1)
+  editCollection({ collections }, payload) {
+    const { collection, collectionIndex } = payload;
+    collections[collectionIndex] = collection;
  },

-  addRequest({collections}, payload) {
-    const {
-      request
-    } = payload;
+  addNewFolder({ collections }, payload) {
+    const { collectionIndex, folder } = payload;
+    collections[collectionIndex].folders.push({
+      name: "",
+      requests: [],
+      ...folder
+    });
+  },
+
+  editFolder({ collections }, payload) {
+    const { collectionIndex, folder, folderIndex } = payload;
+    Vue.set(collections[collectionIndex].folders, folderIndex, folder);
+  },
+
+  removeFolder({ collections }, payload) {
+    const { collectionIndex, folderIndex } = payload;
+    collections[collectionIndex].folders.splice(folderIndex, 1);
+  },
+
+  addRequest({ collections }, payload) {
+    const { request } = payload;

    // Request that is directly attached to collection
    if (request.folder === -1) {
      collections[request.collection].requests.push(request);
-      return
+      return;
    }

-    collections[request.collection].folders[request.folder].requests.push(request);
+    collections[request.collection].folders[request.folder].requests.push(
+      request
+    );
  },

-  editRequest({collections}, payload) {
+  editRequest({ collections }, payload) {
    const {
      requestOldCollectionIndex,
      requestOldFolderIndex,
      requestOldIndex,
      requestNew,
      requestNewCollectionIndex,
-      requestNewFolderIndex,
-    } = payload
+      requestNewFolderIndex
+    } = payload;

-    const changedCollection = requestOldCollectionIndex !== requestNewCollectionIndex
-    const changedFolder = requestOldFolderIndex !== requestNewFolderIndex
-    const changedPlace = changedCollection || changedFolder
+    const changedCollection =
+      requestOldCollectionIndex !== requestNewCollectionIndex;
+    const changedFolder = requestOldFolderIndex !== requestNewFolderIndex;
+    const changedPlace = changedCollection || changedFolder;

    // set new request
    if (requestNewFolderIndex !== undefined) {
-      Vue.set(collections[requestNewCollectionIndex].folders[requestNewFolderIndex].requests, requestOldIndex, requestNew)
-    }
-    else {
-      Vue.set(collections[requestNewCollectionIndex].requests, requestOldIndex, requestNew)
+      Vue.set(
+        collections[requestNewCollectionIndex].folders[requestNewFolderIndex]
+          .requests,
+        requestOldIndex,
+        requestNew
+      );
+    } else {
+      Vue.set(
+        collections[requestNewCollectionIndex].requests,
+        requestOldIndex,
+        requestNew
+      );
    }

    // remove old request
    if (changedPlace) {
      if (requestOldFolderIndex !== undefined) {
-        collections[requestOldCollectionIndex].folders[requestOldFolderIndex].requests.splice(requestOldIndex, 1)
-      }
-      else {
-        collections[requestOldCollectionIndex].requests.splice(requestOldIndex, 1)
+        collections[requestOldCollectionIndex].folders[
+          requestOldFolderIndex
+        ].requests.splice(requestOldIndex, 1);
+      } else {
+        collections[requestOldCollectionIndex].requests.splice(
+          requestOldIndex,
+          1
+        );
      }
    }
  },

-  saveRequestAs({collections}, payload) {
-    const {
-      request,
-      collectionIndex,
-      folderIndex,
-      requestIndex,
-    } = payload
+  saveRequestAs({ collections }, payload) {
+    const { request, collectionIndex, folderIndex, requestIndex } = payload;

-    const specifiedCollection = collectionIndex !== undefined
-    const specifiedFolder = folderIndex !== undefined
-    const specifiedRequest = requestIndex !== undefined
+    const specifiedCollection = collectionIndex !== undefined;
+    const specifiedFolder = folderIndex !== undefined;
+    const specifiedRequest = requestIndex !== undefined;

    if (specifiedCollection && specifiedFolder && specifiedRequest) {
-      Vue.set(collections[collectionIndex].folders[folderIndex].requests, requestIndex, request)
-    }
-    else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
-      const requests = collections[collectionIndex].folders[folderIndex].requests
+      Vue.set(
+        collections[collectionIndex].folders[folderIndex].requests,
+        requestIndex,
+        request
+      );
+    } else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
+      const requests =
+        collections[collectionIndex].folders[folderIndex].requests;
      const lastRequestIndex = requests.length - 1;
-      Vue.set(requests, lastRequestIndex + 1, request)
+      Vue.set(requests, lastRequestIndex + 1, request);
    } else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
-      const requests = collections[collectionIndex].requests
-      Vue.set(requests, requestIndex, request)
+      const requests = collections[collectionIndex].requests;
+      Vue.set(requests, requestIndex, request);
    } else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
-      const requests = collections[collectionIndex].requests
+      const requests = collections[collectionIndex].requests;
      const lastRequestIndex = requests.length - 1;
-      Vue.set(requests, lastRequestIndex + 1, request)
+      Vue.set(requests, lastRequestIndex + 1, request);
    }
-
  },

-  saveRequest({collections}, payload) {
-    const {
-      request
-    } = payload;
+  saveRequest({ collections }, payload) {
+    const { request } = payload;

    // Remove the old request from collection
-    if (request.hasOwnProperty('oldCollection') && request.oldCollection > -1) {
-      const folder = request.hasOwnProperty('oldFolder') && request.oldFolder >= -1 ? request.oldFolder : request.folder;
+    if (request.hasOwnProperty("oldCollection") && request.oldCollection > -1) {
+      const folder =
+        request.hasOwnProperty("oldFolder") && request.oldFolder >= -1
+          ? request.oldFolder
+          : request.folder;
      if (folder > -1) {
-        collections[request.oldCollection].folders[folder].requests.splice(request.requestIndex, 1)
+        collections[request.oldCollection].folders[folder].requests.splice(
+          request.requestIndex,
+          1
+        );
      } else {
-        collections[request.oldCollection].requests.splice(request.requestIndex, 1)
+        collections[request.oldCollection].requests.splice(
+          request.requestIndex,
+          1
+        );
      }
-    } else if (request.hasOwnProperty('oldFolder') && request.oldFolder !== -1) {
-      collections[request.collection].folders[folder].requests.splice(request.requestIndex, 1)
+    } else if (
+      request.hasOwnProperty("oldFolder") &&
+      request.oldFolder !== -1
+    ) {
+      collections[request.collection].folders[folder].requests.splice(
+        request.requestIndex,
+        1
+      );
    }

    delete request.oldCollection;
@@ -255,31 +271,37 @@ export const mutations = {

    // Request that is directly attached to collection
    if (request.folder === -1) {
-      Vue.set(collections[request.collection].requests, request.requestIndex, request)
-      return
+      Vue.set(
+        collections[request.collection].requests,
+        request.requestIndex,
+        request
+      );
+      return;
    }

-    Vue.set(collections[request.collection].folders[request.folder].requests, request.requestIndex, request)
+    Vue.set(
+      collections[request.collection].folders[request.folder].requests,
+      request.requestIndex,
+      request
+    );
  },

-  removeRequest({collections}, payload) {
-    const {
-      collectionIndex,
-      folderIndex,
-      requestIndex
-    } = payload;
+  removeRequest({ collections }, payload) {
+    const { collectionIndex, folderIndex, requestIndex } = payload;

    // Request that is directly attached to collection
    if (folderIndex === -1) {
-      collections[collectionIndex].requests.splice(requestIndex, 1)
-      return
+      collections[collectionIndex].requests.splice(requestIndex, 1);
+      return;
    }

-    collections[collectionIndex].folders[folderIndex].requests.splice(requestIndex, 1)
+    collections[collectionIndex].folders[folderIndex].requests.splice(
+      requestIndex,
+      1
+    );
  },

-  selectRequest(state, {request}) {
+  selectRequest(state, { request }) {
    state.selectedRequest = Object.assign({}, request);
-  },
-
+  }
 };
--- a/store/state.js
+++ b/store/state.js
@@ -1,24 +1,24 @@
 export default () => ({
  request: {
-    method: 'GET',
-    url: 'https://reqres.in',
-    path: '/api/users',
-    label: '',
-    auth: 'None',
-    httpUser: '',
-    httpPassword: '',
-    passwordFieldType: 'password',
-    bearerToken: '',
+    method: "GET",
+    url: "https://reqres.in",
+    path: "/api/users",
+    label: "",
+    auth: "None",
+    httpUser: "",
+    httpPassword: "",
+    passwordFieldType: "password",
+    bearerToken: "",
    headers: [],
    params: [],
    bodyParams: [],
-    rawParams: '',
+    rawParams: "",
    rawInput: false,
-    requestType: '',
-    contentType: '',
+    requestType: "",
+    contentType: ""
  },
  gql: {
-    url: 'https://rickandmortyapi.com/graphql',
+    url: "https://rickandmortyapi.com/graphql",
    headers: [],
    query: ""
  }