Skip to content

Commit

Permalink
Regionalization added, so that texts are displayed according to the u…
Browse files Browse the repository at this point in the history
…ser's browser language.

To add new languages, create the json file in the locales folder in the same pattern as the existing ones, and add the translation.

Regionalization added, so that texts are displayed according to the user's browser language.
To add new languages, create the json file in the locales folder in the same pattern as the existing ones, and add the translation.
  • Loading branch information
saraiva1989 committed May 24, 2020
1 parent abe5754 commit 690a097
Show file tree
Hide file tree
Showing 11 changed files with 234 additions and 21 deletions.
2 changes: 2 additions & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
"lint": "vue-cli-service lint",
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
},
"dependencies": {
"core-js": "^3.3.2",
"vue": "^2.6.10"
"vue": "^2.6.10",
"vue-i18n": "^8.17.3"
},
"devDependencies": {
"@intlify/vue-i18n-loader": "^1.0.0",
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-eslint": "^4.0.0",
"@vue/cli-plugin-unit-mocha": "^4.0.0",
Expand All @@ -25,6 +28,7 @@
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-i18n": "~1.0.1",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
Expand Down
3 changes: 3 additions & 0 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ export default {
},
updateCardCvv (val) {
}
},
mounted () {
this.$i18n.locale = navigator.language
}
}
</script>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Card.vue
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
</label>
<div class="card-item__content">
<label :for="fields.cardName" class="card-item__info" :ref="fields.cardName">
<div class="card-item__holder">Card Holder</div>
<div class="card-item__holder">{{ $t('card.cardHolder') }}</div>
<transition name="slide-fade-up">
<div class="card-item__name" v-if="labels.cardName.length" key="1">
<transition-group name="slide-fade-right">
Expand All @@ -66,22 +66,22 @@
>{{n}}</span>
</transition-group>
</div>
<div class="card-item__name" v-else key="2">Full Name</div>
<div class="card-item__name" v-else key="2">{{ $t('card.fullName') }}</div>
</transition>
</label>
<div class="card-item__date" ref="cardDate">
<label :for="fields.cardMonth" class="card-item__dateTitle">Expires</label>
<label :for="fields.cardMonth" class="card-item__dateTitle">{{ $t('card.expires') }}</label>
<label :for="fields.cardMonth" class="card-item__dateItem">
<transition name="slide-fade-up">
<span v-if="labels.cardMonth" :key="labels.cardMonth">{{labels.cardMonth}}</span>
<span v-else key="2">MM</span>
<span v-else key="2">{{ $t('card.MM') }}</span>
</transition>
</label>
/
<label for="cardYear" class="card-item__dateItem">
<transition name="slide-fade-up">
<span v-if="labels.cardYear" :key="labels.cardYear">{{String(labels.cardYear).slice(2,4)}}</span>
<span v-else key="2">YY</span>
<span v-else key="2">{{ $t('card.YY') }}</span>
</transition>
</label>
</div>
Expand Down
16 changes: 8 additions & 8 deletions src/components/CardForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</div>
<div class="card-form__inner">
<div class="card-input">
<label for="cardNumber" class="card-input__label">Card Number</label>
<label for="cardNumber" class="card-input__label">{{ $t('cardForm.cardNumber') }}</label>
<input
type="tel"
:id="fields.cardNumber"
Expand All @@ -34,7 +34,7 @@
></button>
</div>
<div class="card-input">
<label for="cardName" class="card-input__label">Card Name</label>
<label for="cardName" class="card-input__label">{{ $t('cardForm.cardName') }}</label>
<input
type="text"
:id="fields.cardName"
Expand All @@ -49,15 +49,15 @@
<div class="card-form__row">
<div class="card-form__col">
<div class="card-form__group">
<label for="cardMonth" class="card-input__label">Expiration Date</label>
<label for="cardMonth" class="card-input__label">{{ $t('cardForm.expirationDate') }}</label>
<select
class="card-input__input -select"
:id="fields.cardMonth"
v-model="formData.cardMonth"
@change="changeMonth"
data-card-field
>
<option value disabled selected>Month</option>
<option value disabled selected>{{ $t('cardForm.month') }}</option>
<option
v-bind:value="n < 10 ? '0' + n : n"
v-for="n in 12"
Expand All @@ -72,7 +72,7 @@
@change="changeYear"
data-card-field
>
<option value disabled selected>Year</option>
<option value disabled selected>{{ $t('cardForm.year') }}</option>
<option
v-bind:value="$index + minCardYear"
v-for="(n, $index) in 12"
Expand All @@ -83,7 +83,7 @@
</div>
<div class="card-form__col -cvv">
<div class="card-input">
<label for="cardCvv" class="card-input__label">CVV</label>
<label for="cardCvv" class="card-input__label">{{ $t('cardForm.CVV') }}</label>
<input
type="tel"
class="card-input__input"
Expand All @@ -99,7 +99,7 @@
</div>
</div>

<button class="card-form__button" v-on:click="invaildCard">Submit</button>
<button class="card-form__button" v-on:click="invaildCard">{{ $t('cardForm.submit') }}</button>
</div>
</div>
</template>
Expand Down Expand Up @@ -241,7 +241,7 @@ export default {
sum += intVal
}
if (sum % 10 !== 0) {
alert('invaild card number')
alert(this.$t('cardForm.invalidCardNumber'))
}
},
blurCardNumber () {
Expand Down
23 changes: 23 additions & 0 deletions src/i18n.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)
}
})
return messages
}

export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()
})
21 changes: 21 additions & 0 deletions src/locales/en.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"message": "hello i18n !!",
"card": {
"cardHolder": "Card Holder",
"fullName": "Full Name",
"expires": "Expires",
"MM": "MM",
"YY": "YY"
},

"cardForm": {
"cardNumber": "Card Number",
"cardName": "Card Name",
"expirationDate": "Expiration Date",
"month": "Month",
"year": "Year",
"CVV": "CVV",
"submit": "Submit",
"invalidCardNumber": "Invalid Card Number"
}
}
21 changes: 21 additions & 0 deletions src/locales/pt.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"message": "hello i18n !!",
"card": {
"cardHolder": "Titular Cartão",
"fullName": "Nome Completo",
"expires": "Expira",
"MM": "MM",
"YY": "AA"
},

"cardForm": {
"cardNumber": "Numero do Cartão",
"cardName": "Nome Titular",
"expirationDate": "Data de Vencimento",
"month": "Mês",
"year": "Ano",
"CVV": "CVV",
"submit": "Enviar",
"invalidCardNumber": "Número do Cartão Inválido"
}
}
2 changes: 2 additions & 0 deletions src/main.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'

Vue.config.productionTip = false

new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
10 changes: 10 additions & 0 deletions vue.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
module.exports = {
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: true
}
}
}
Loading

0 comments on commit 690a097

Please sign in to comment.