Skip to content

Commit 39ecc7d

Browse files
lcharettelcharette
committed
Change som locale keys
1 parent cac4d18 commit 39ecc7d

4 files changed

Lines changed: 69 additions & 51 deletions

File tree

‎app/assets/components/NavBar.vue‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
<script setup>
2-
import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
32
import { useRouter } from 'vue-router'
3+
import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
4+
import { useConfigStore, useTranslator } from '@userfrosting/sprinkle-core/stores'
45
const router = useRouter()
6+
const config = useConfigStore()
57
68
// Logout API variables
79
const auth = useAuthStore()
10+
11+
// Translator
12+
const { $t } = useTranslator()
813
</script>
914

1015
<template>
11-
<UFNavBar title="Userfrosting" :to="{ name: 'home' }">
12-
<UFNavBarItem :to="{ name: 'about' }" label="About" />
16+
<UFNavBar :title="config.get('site.title')" :to="{ name: 'home' }">
17+
<UFNavBarItem :to="{ name: 'about' }" :label="$t('ABOUT')" />
1318
<UFNavBarItem
1419
:to="{ name: 'account.register' }"
15-
label="Register"
20+
:label="$t('REGISTER')"
1621
v-if="!auth.isAuthenticated" />
1722
<UFNavBarLogin
1823
v-if="!auth.isAuthenticated"
@@ -23,8 +28,8 @@ const auth = useAuthStore()
2328
:avatar="auth.user.avatar"
2429
:meta="auth.user.user_name">
2530
<UFNavBarUserCardButton label="Admin Panel" :to="{ name: 'admin.dashboard' }" />
26-
<UFNavBarUserCardButton label="My Account" :to="{ name: 'account.settings' }" />
27-
<UFNavBarUserCardButton label="Logout" @click="auth.logout()" />
31+
<UFNavBarUserCardButton :label="$t('ACCOUNT.MY')" :to="{ name: 'account.settings' }" />
32+
<UFNavBarUserCardButton :label="$t('LOGOUT')" @click="auth.logout()" />
2833
</UFNavBarUserCard>
2934
</UFNavBar>
3035
</template>

‎app/assets/router/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const router = createRouter({
1919
path: '/about',
2020
name: 'about',
2121
meta: {
22-
title: 'About'
22+
title: 'ABOUT'
2323
},
2424
component: () => import('../views/AboutView.vue')
2525
},
@@ -32,7 +32,7 @@ const router = createRouter({
3232
component: () => import('../layouts/LayoutDashboard.vue'),
3333
children: [...AdminRoutes],
3434
meta: {
35-
title: 'Admin'
35+
title: 'ADMIN'
3636
}
3737
}
3838
]

‎app/assets/views/AboutView.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script setup lang="ts">
22
import { onMounted } from 'vue'
33
import { usePageMeta } from '@userfrosting/sprinkle-core/composables'
4+
import { useTranslator } from '@userfrosting/sprinkle-core/stores'
5+
const { $t } = useTranslator()
46
const page = usePageMeta()
57
68
// Hide the title on this page
@@ -9,7 +11,7 @@ onMounted(() => {
911
})
1012
</script>
1113
<template>
12-
<h1>This is an about page</h1>
14+
<h1>{{ $t('ABOUT') }}</h1>
1315
<p>
1416
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
1517
labore et dolore magna aliqua. Sit amet luctus venenatis lectus magna. In hac habitasse

‎app/assets/views/HomeView.vue‎

Lines changed: 53 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script setup lang="ts">
22
import { computed } from 'vue'
3+
import { DateTime } from 'luxon'
34
import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
45
import { useConfigStore, useTranslator } from '@userfrosting/sprinkle-core/stores'
56
67
const auth = useAuthStore()
78
const config = useConfigStore()
8-
const { $t } = useTranslator()
9+
const { $t, $tdate } = useTranslator()
910
1011
const helloMsg = computed(() => {
1112
return $t('WELCOME_TO', {
@@ -18,25 +19,66 @@ const helloMsg = computed(() => {
1819
<template>
1920
<article class="uk-article">
2021
<h1 class="uk-article-title">{{ helloMsg }}</h1>
21-
<p class="uk-article-meta">
22-
Written by <a href="#">Angela Davis</a>, Professor on 29 September 2018.
22+
<p class="uk-article-meta">{{ $tdate(DateTime.now().toISO()) }}</p>
23+
<p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
24+
<p>
25+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
26+
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
27+
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
28+
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
29+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
30+
mollit anim id est laborum.
2331
</p>
24-
<p class="uk-text-lead">
25-
This is a demo of UserFrosting using a custom UiKit based template built using Vue 3.0
26-
</p>
27-
<p>All the content below is just for example and I've not added any functionality.</p>
2832

2933
<div class="uk-grid-small uk-child-width-auto" uk-grid>
3034
<div>
3135
<a class="uk-button uk-button-text" href="#">Read more</a>
3236
</div>
33-
<div>
34-
<a class="uk-button uk-button-text" href="#">5 Comments</a>
35-
</div>
3637
</div>
3738
</article>
3839

39-
<div style="padding-top: 25px; padding-bottom: 25px"></div>
40+
<hr class="uk-divider-icon" style="padding-top: 25px; padding-bottom: 25px" />
41+
42+
<div class="uk-child-width-1-2@s uk-grid-match" uk-grid>
43+
<div>
44+
<div class="uk-card uk-card-hover uk-card-body">
45+
<h3 class="uk-card-title">Lorem ipsum</h3>
46+
<p>
47+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
48+
incididunt ut labore et dolore magna aliqua.
49+
</p>
50+
</div>
51+
</div>
52+
<div>
53+
<div class="uk-card uk-card-hover uk-card-body">
54+
<h3 class="uk-card-title">Lorem ipsum</h3>
55+
<p>
56+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
57+
incididunt ut labore et dolore magna aliqua.
58+
</p>
59+
</div>
60+
</div>
61+
<div>
62+
<div class="uk-card uk-card-hover uk-card-body">
63+
<h3 class="uk-card-title">Lorem ipsum</h3>
64+
<p>
65+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
66+
incididunt ut labore et dolore magna aliqua.
67+
</p>
68+
</div>
69+
</div>
70+
<div>
71+
<div class="uk-card uk-card-hover uk-card-body">
72+
<h3 class="uk-card-title">Lorem ipsum</h3>
73+
<p>
74+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
75+
incididunt ut labore et dolore magna aliqua.
76+
</p>
77+
</div>
78+
</div>
79+
</div>
80+
81+
<div style="padding-top: 25px"></div>
4082

4183
<table class="uk-table uk-table-divider">
4284
<thead>
@@ -64,35 +106,4 @@ const helloMsg = computed(() => {
64106
</tr>
65107
</tbody>
66108
</table>
67-
68-
<hr class="uk-divider-icon" style="padding-top: 25px; padding-bottom: 25px" />
69-
70-
<div class="uk-child-width-1-2@s uk-grid-match" uk-grid>
71-
<div>
72-
<div class="uk-card uk-card-hover uk-card-body">
73-
<h3 class="uk-card-title">Hover</h3>
74-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
75-
</div>
76-
</div>
77-
<div>
78-
<div class="uk-card uk-card-hover uk-card-body">
79-
<h3 class="uk-card-title">Hover</h3>
80-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
81-
</div>
82-
</div>
83-
<div>
84-
<div class="uk-card uk-card-hover uk-card-body">
85-
<h3 class="uk-card-title">Hover</h3>
86-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
87-
</div>
88-
</div>
89-
<div>
90-
<div class="uk-card uk-card-hover uk-card-body">
91-
<h3 class="uk-card-title">Hover</h3>
92-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
93-
</div>
94-
</div>
95-
</div>
96-
97-
<div style="padding-top: 50px"></div>
98109
</template>

0 commit comments

Comments
 (0)