From 18f22fdffa04e344251ad1da184743f6c5a98dc2 Mon Sep 17 00:00:00 2001 From: Tobias Kurze Date: Tue, 12 Mar 2019 16:44:28 +0100 Subject: [PATCH] added babel and INCORRECT vue-flag-icon type definitions -> disabled check (js lib instead of ts) --- package-lock.json | 18 ++++++++++ package.json | 2 ++ src/@types/vue-flag-icon/index.d.ts | 9 +++++ src/components/HelloWorld.vue | 14 ++++---- src/main.ts | 8 +++++ src/plugins/i18n.ts | 31 +++++++++++++++++ src/router.ts | 2 +- src/scss/_variables.scss | 5 +++ src/views/About.vue | 6 ++++ src/views/Home.vue | 54 ++++++++++++++++++++++------- vue.config.js | 11 ++++++ 11 files changed, 140 insertions(+), 20 deletions(-) create mode 100644 src/@types/vue-flag-icon/index.d.ts create mode 100644 src/plugins/i18n.ts create mode 100644 src/scss/_variables.scss create mode 100644 vue.config.js diff --git a/package-lock.json b/package-lock.json index 9d1ec0d..218be7d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b136a66..3856dce 100644 --- a/package.json +++ b/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" diff --git a/src/@types/vue-flag-icon/index.d.ts b/src/@types/vue-flag-icon/index.d.ts new file mode 100644 index 0000000..871cf4e --- /dev/null +++ b/src/@types/vue-flag-icon/index.d.ts @@ -0,0 +1,9 @@ +/**declare module 'vue-flag-icon' { + //export type iae >; + + //interface VuePlugin { + // install: any; + //} + type VuePlugin = string; + export default VuePlugin; +}**/ diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index aafc85e..6f15dfc 100644 --- a/src/components/HelloWorld.vue +++ b/src/components/HelloWorld.vue @@ -1,18 +1,18 @@ diff --git a/src/main.ts b/src/main.ts index e9c1f28..b1de6ea 100644 --- a/src/main.ts +++ b/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), diff --git a/src/plugins/i18n.ts b/src/plugins/i18n.ts new file mode 100644 index 0000000..5300a01 --- /dev/null +++ b/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 +}); diff --git a/src/router.ts b/src/router.ts index fe7b662..45ffba5 100644 --- a/src/router.ts +++ b/src/router.ts @@ -26,6 +26,6 @@ export default new Router({ path: '*', name: 'notFound', component: NotFound, - } + }, ], }); diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..83be125 --- /dev/null +++ b/src/scss/_variables.scss @@ -0,0 +1,5 @@ +/* + * Copyright (c) 2019. Tobias Kurze + */ + +$bg-classroom: #232323; diff --git a/src/views/About.vue b/src/views/About.vue index 3fa2807..a563102 100644 --- a/src/views/About.vue +++ b/src/views/About.vue @@ -3,3 +3,9 @@

This is an about page

+ + diff --git a/src/views/Home.vue b/src/views/Home.vue index 2187e5c..0bdf1f6 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,18 +1,48 @@ + + diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..049dc0a --- /dev/null +++ b/vue.config.js @@ -0,0 +1,11 @@ +module.exports = { + css: { + loaderOptions: { + sass: { + data: ` + @import "@/scss/_variables.scss"; + ` + } + } + } +};