added babel and INCORRECT vue-flag-icon type definitions -> disabled check (js lib instead of ts)

src/@types/vue-flag-icon/index.d.ts

@@ -0,0 +1,9 @@
+/**declare module 'vue-flag-icon' {
+    //export type iae <Instance extends PluginObject<T>>;
+
+    //interface VuePlugin {
+    //    install: any;
+    //}
+    type VuePlugin = string;
+    export default VuePlugin;
+}**/

src/components/HelloWorld.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
+    <h1>{{ $t('welcomeMsg') }}</h1>
     <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
+      {{ $t('guide') }}<br>
+      {{ $t('checkout') }}
       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
     </p>
-    <h3>Installed CLI Plugins</h3>
+    <h3>{{ $t('plugins') }}</h3>
     <ul>
       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha" target="_blank" rel="noopener">unit-mocha</a></li>
     </ul>
-    <h3>Essential Links</h3>
+    <h3>{{ $t('links') }}</h3>
     <ul>
       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
@@ -20,14 +20,14 @@
       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
     </ul>
-    <h3>Ecosystem</h3>
+    <h3>{{ $t('ecosystem') }}</h3>
     <ul>
       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
+  </ul>
   </div>
 </template>
 

src/main.ts

@@ -2,10 +2,18 @@ import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
+import i18n from '@/plugins/i18n';
+// @ts-ignore
+import FlagIcon from 'vue-flag-icon';
+// following is to avoid missing type definitions
+// const FlagIcon = require('vue-flag-icon');
+
+Vue.use(FlagIcon);
 
 Vue.config.productionTip = false;
 
 new Vue({
+  i18n,
   router,
   store,
   render: (h) => h(App),

src/plugins/i18n.ts

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+Vue.use(VueI18n);
+
+
+const messages = {
+    en: {
+        welcomeMsg: 'Welcome to Your Vue.js + TypeScript App',
+        guide: 'For a guide and recipes on how to configure / customize this project,',
+        checkout: 'check out the',
+        plugins: 'Installed CLI Plugins',
+        links: 'Essential Links',
+        ecosystem: 'Ecosystem',
+    },
+    es: {
+        welcomeMsg: 'Bienvenido a tu aplicación Vue.js + TypeScript',
+        guide: 'Para una guía y recetas sobre cómo configurar / personalizar este proyecto,',
+        checkout: 'revisar la',
+        plugins: 'Plugins de CLI instalados',
+        links: 'Enlaces esenciales',
+        ecosystem: 'Ecosistema',
+    },
+};
+
+
+export default new VueI18n({
+    locale: 'en', // set locale
+    fallbackLocale: 'es', // set fallback locale
+    messages, // set locale messages
+});

src/router.ts

@@ -26,6 +26,6 @@ export default new Router({
       path: '*',
       name: 'notFound',
       component: NotFound,
-    }
+    },
   ],
 });

src/scss/_variables.scss

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2019. Tobias Kurze
+ */
+
+$bg-classroom: #232323;

src/views/About.vue

@@ -3,3 +3,9 @@
     <h1>This is an about page</h1>
   </div>
 </template>
+
+<style lang="scss">
+.about {
+  background: $bg-classroom;
+}
+</style>

src/views/Home.vue

@@ -1,18 +1,48 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
+    <div class="home">
+        <div>
+            <button v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)">
+                <flag :iso="entry.flag" v-bind:squared="false"/>
+                {{entry.title}}
+            </button>
+        </div>
+        <img alt="Vue logo" src="../assets/logo.png">
+        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+    </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+    import {Component, Vue} from 'vue-property-decorator';
+    import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+    import i18n from '@/plugins/i18n';
 
-@Component({
-  components: {
-    HelloWorld,
-  },
-})
-export default class Home extends Vue {}
+    @Component({
+        components: {
+            HelloWorld,
+        },
+    })
+    export default class Home extends Vue {
+        public data() {
+            return {
+                languages: [
+                    {flag: 'us', language: 'en', title: 'English'},
+                    {flag: 'es', language: 'es', title: 'Español'},
+                    {flag: 'de', language: 'de', title: 'Deutsch'},
+                ],
+            };
+        }
+
+        public changeLocale(locale: string): void {
+            i18n.locale = locale;
+        }
+    }
 </script>
+
+<style>
+    button {
+        padding: 15px;
+        border: 2px solid green;
+        font-size: 18px;
+        margin: 15px;
+    }
+</style>