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

package-lock.json

@@ -5496,6 +5496,11 @@
         }
       }
     },
+    "flag-icon-css": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-2.9.0.tgz",
+      "integrity": "sha512-SeHvGEB43XFPZiJz6lFFRGHfp+Db+s1qGiClW70cZauQVbPM42wImlNUEuXSXs94kPchz7xvoxP0QK1y6FxLfg=="
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -12864,6 +12869,14 @@
         }
       }
     },
+    "vue-flag-icon": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/vue-flag-icon/-/vue-flag-icon-1.0.6.tgz",
+      "integrity": "sha1-AwT9/uvZgqa/mFxjPDRv88bS+dc=",
+      "requires": {
+        "flag-icon-css": "^2.8.0"
+      }
+    },
     "vue-functional-data-merge": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-2.0.7.tgz",
@@ -12875,6 +12888,11 @@
       "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.9.0.tgz",
+      "integrity": "sha512-8wr/D9yU8CLC8ne9stdQn/N58E7GRSUSO75bCucj2AIFTDyjGfoze5RxFvh2w3e7yxgnz5x+ooOIcoX59PHguQ=="
+    },
     "vue-loader": {
       "version": "15.7.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.0.tgz",

package.json

@@ -13,6 +13,8 @@
     "bootstrap-vue": "^2.0.0-rc.13",
     "vue": "^2.6.6",
     "vue-class-component": "^6.0.0",
+    "vue-flag-icon": "^1.0.6",
+    "vue-i18n": "^8.9.0",
     "vue-property-decorator": "^7.0.0",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

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>
+      {{ $t('guide') }}<br>
-      check out the
+      {{ $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">
+    <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+        <div>
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+            <button v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)">
-  </div>
+                <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 {Component, Vue} from 'vue-property-decorator';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+    import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+    import i18n from '@/plugins/i18n';
 
-@Component({
+    @Component({
-  components: {
+        components: {
-    HelloWorld,
+            HelloWorld,
-  },
+        },
-})
+    })
-export default class Home extends Vue {}
+    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>

vue.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    css: {
+        loaderOptions: {
+            sass: {
+                data: `
+          @import "@/scss/_variables.scss";
+        `
+            }
+        }
+    }
+};