Client - init locales files ('en' and 'fr')

This commit is contained in:
Sam 2021-08-04 09:53:17 +02:00
parent 04f64b750c
commit 1e77fa68b6
17 changed files with 78 additions and 48 deletions

View File

@ -1,30 +0,0 @@
<template>
<p>{{ t('hello') }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({
name: 'HelloI18n',
setup() {
const { t } = useI18n({
inheritLocale: true,
useScope: 'local',
})
// Something todo ..
return { t }
},
})
</script>
<i18n>
{
"en": {
"hello": "Hello i18n in SFC!"
}
}
</i18n>

View File

@ -17,17 +17,19 @@
></i> ></i>
</div> </div>
<div class="nav-items-app-menu" @click="closeMenu()"> <div class="nav-items-app-menu" @click="closeMenu()">
<router-link class="nav-item" to="/">Dashboard</router-link> <router-link class="nav-item" to="/">{{
<span class="nav-item">Workout</span> t('dashboard.DASHBOARD')
<span class="nav-item">Statistics</span> }}</router-link>
<span class="nav-item">Admin</span> <span class="nav-item">{{ t('workouts.WORKOUTS') }}</span>
<span class="nav-item">Add Workout</span> <span class="nav-item">{{ t('statistics.STATISTICS') }}</span>
<span class="nav-item">{{ t('administration.ADMIN') }}</span>
<span class="nav-item">{{ t('workouts.ADD_WORKOUT') }}</span>
</div> </div>
<div class="nav-items-user-menu"> <div class="nav-items-user-menu">
<span class="nav-item">User</span> <span class="nav-item">User</span>
<span class="nav-item">Logout</span> <span class="nav-item">{{ t('user.LOGOUT') }}</span>
<span class="nav-item">Register</span> <span class="nav-item">{{ t('user.REGISTER') }}</span>
<span class="nav-item">Login</span> <span class="nav-item">{{ t('user.LOGIN') }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -36,18 +38,20 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue' import { defineComponent, ref } from 'vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({ export default defineComponent({
name: 'NavBar', name: 'NavBar',
setup() { setup() {
let isMenuOpen = ref(false) let isMenuOpen = ref(false)
const { t } = useI18n()
function openMenu() { function openMenu() {
isMenuOpen.value = true isMenuOpen.value = true
} }
function closeMenu() { function closeMenu() {
isMenuOpen.value = false isMenuOpen.value = false
} }
return { isMenuOpen, openMenu, closeMenu } return { isMenuOpen, openMenu, closeMenu, t }
}, },
}) })
</script> </script>

View File

@ -7,17 +7,13 @@ import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'
* See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
*/ */
function loadLocaleMessages(): LocaleMessages<VueMessageType> { function loadLocaleMessages(): LocaleMessages<VueMessageType> {
const locales = require.context( const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.ts$/i)
'./locales',
true,
/[A-Za-z0-9-_,\s]+\.json$/i
)
const messages: LocaleMessages<VueMessageType> = {} const messages: LocaleMessages<VueMessageType> = {}
locales.keys().forEach((key) => { locales.keys().forEach((key) => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i) const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) { if (matched && matched.length > 1) {
const locale = matched[1] const locale = matched[1]
messages[locale] = locales(key) messages[locale] = locales(key).default
} }
}) })
return messages return messages

View File

@ -1,3 +0,0 @@
{
"message": "hello i18n !!"
}

View File

@ -0,0 +1,3 @@
{
"ADMIN": "Admin"
}

View File

@ -0,0 +1,3 @@
{
"DASHBOARD": "Dashboard"
}

View File

@ -0,0 +1,13 @@
import AdministrationTranslations from './administration.json'
import DashboardTranslations from './dashboard.json'
import StatisticsTranslations from './statistics.json'
import UserTranslations from './user.json'
import WorkoutsTranslations from './workouts.json'
export default {
administration: AdministrationTranslations,
dashboard: DashboardTranslations,
statistics: StatisticsTranslations,
user: UserTranslations,
workouts: WorkoutsTranslations,
}

View File

@ -0,0 +1,3 @@
{
"STATISTICS": "Statistics"
}

View File

@ -0,0 +1,5 @@
{
"LOGIN": "Login",
"LOGOUT": "Logout",
"REGISTER": "Register"
}

View File

@ -0,0 +1,4 @@
{
"ADD_WORKOUT": "Add workout",
"WORKOUTS": "Workouts"
}

View File

@ -0,0 +1,3 @@
{
"ADMIN": "Admin"
}

View File

@ -0,0 +1,3 @@
{
"DASHBOARD": "Tableau de Bord"
}

View File

@ -0,0 +1,13 @@
import AdministrationTranslations from './administration.json'
import DashboardTranslations from './dashboard.json'
import StatisticsTranslations from './statistics.json'
import UserTranslations from './user.json'
import WorkoutsTranslations from './workouts.json'
export default {
administration: AdministrationTranslations,
dashboard: DashboardTranslations,
statistics: StatisticsTranslations,
user: UserTranslations,
workouts: WorkoutsTranslations,
}

View File

@ -0,0 +1,3 @@
{
"STATISTICS": "Statistiques"
}

View File

@ -0,0 +1,5 @@
{
"LOGIN": "Se connecter",
"LOGOUT": "Se déconnecter",
"REGISTER": "S'inscrire"
}

View File

@ -0,0 +1,4 @@
{
"ADD_WORKOUT": "Ajouter une séance",
"WORKOUTS": "Séances"
}

View File

@ -6,6 +6,7 @@
"jsx": "preserve", "jsx": "preserve",
"importHelpers": true, "importHelpers": true,
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,