✨ Basic I18N

Author: AnandChowdhary

components/Translate.vue

@@ -0,0 +1,15 @@
+<template>
+  <span>{{ en[t] }}</span>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import flat from "flat";
+import en from "@/locales/en";
+
+@Component
+export default class Translate extends Vue {
+  en = flat(en);
+  @Prop({ required: true }) t;
+}
+</script>

locales/en.ts

@@ -108,5 +108,12 @@ export default {
     10: "October",
     11: "November",
     12: "December"
+  },
+  pages: {
+    index: {
+      hero: {
+        title: "Staart is a SaaS starter for your next big idea."
+      }
+    }
   }
 };

package.json

@@ -23,6 +23,7 @@
     "countries-and-timezones": "^1.0.1",
     "date-fns": "^1.30.1",
     "downloadjs": "^1.4.7",
+    "flat": "^4.1.0",
     "hashids": "^1.2.2",
     "jwt-decode": "^2.2.0",
     "meta-ctrl-enter": "^1.0.2",

pages/index.vue

@@ -4,7 +4,7 @@
       <div class="container">
         <div class="row">
           <div>
-            <h1>Staart is a SaaS starter for your next big idea.</h1>
+            <h1><Translate t="pages.index.hero.title" /></h1>
             <p style="max-width: 500px">
               Written in TypeScript and Vue, Staart gives you a 6-month
               headstart in building your SaaS product. Free and open-source.
@@ -452,6 +452,7 @@ import {
   faVuejs,
   faAccessibleIcon
 } from "@fortawesome/free-brands-svg-icons";
+import Translate from "@/components/Translate.vue";
 library.add(
   faSync,
   faMagic,
@@ -480,6 +481,7 @@ library.add(
     isAuthenticated: "auth/isAuthenticated"
   }),
   components: {
+    Translate,
     FontAwesomeIcon
   }
 })

yarn.lock

@@ -4401,6 +4401,13 @@ flat-cache@^2.0.1:
     rimraf "2.6.3"
     write "1.0.3"
 
+flat@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/flat/-/flat-4.1.0.tgz#090bec8b05e39cba309747f1d588f04dbaf98db2"
+  integrity sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==
+  dependencies:
+    is-buffer "~2.0.3"
+
 flatted@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.0.tgz#55122b6536ea496b4b44893ee2608141d10d9916"
@@ -5284,7 +5291,7 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-buffer@^2.0.2:
+is-buffer@^2.0.2, is-buffer@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
   integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==