Use composition for translation
This commit is contained in:
+22
-22
@@ -1,20 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
const { loggedIn } = useUserSession();
|
||||
const { data, pending, refresh } = await useFetch('/api/home');
|
||||
|
||||
const { t, d } = useI18n();
|
||||
watch(loggedIn, () => refresh());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1 class="text-primary text-3xl">{{ $t('hello') }}</h1>
|
||||
<h1 class="text-primary text-3xl">{{ t('hello') }}</h1>
|
||||
<VaButton icon="refresh" @click="refresh" :disabled="pending">{{
|
||||
$t('layouts.refresh')
|
||||
t('layouts.refresh')
|
||||
}}</VaButton>
|
||||
|
||||
<div v-if="data">
|
||||
<div v-if="data.own !== null">
|
||||
<h2 class="my-4 text-2xl font-bold">
|
||||
{{ $t('page.home.joined_hunts') }}
|
||||
{{ t('page.home.joined_hunts') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<VaCard
|
||||
@@ -35,11 +35,11 @@ watch(loggedIn, () => refresh());
|
||||
{{ hunt.description }}
|
||||
<VaDivider />
|
||||
<div class="flex flex-col gap-2">
|
||||
<p>{{ $t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||
<p v-if="hunt.start">
|
||||
{{
|
||||
$t('page.home.start', {
|
||||
start: $d(hunt.start, {
|
||||
t('page.home.start', {
|
||||
start: d(hunt.start, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'medium'
|
||||
})
|
||||
@@ -48,35 +48,35 @@ watch(loggedIn, () => refresh());
|
||||
</p>
|
||||
<p v-if="hunt.end">
|
||||
{{
|
||||
$t('page.home.end', {
|
||||
start: $d(hunt.end, {
|
||||
t('page.home.end', {
|
||||
start: d(hunt.end, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'medium'
|
||||
})
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p>{{ $t('page.home.n_teams_joined', hunt._count.teams) }}</p>
|
||||
<p>{{ t('page.home.n_teams_joined', hunt._count.teams) }}</p>
|
||||
</div>
|
||||
</VaCardContent>
|
||||
</VaCard>
|
||||
<VaCard v-if="data.own.length <= 0">
|
||||
<VaCardTitle>{{ $t('page.home.no_hunt_joined') }}</VaCardTitle>
|
||||
<VaCardTitle>{{ t('page.home.no_hunt_joined') }}</VaCardTitle>
|
||||
<VaCardContent>{{
|
||||
$t('page.home.click_hunt_below_to_join')
|
||||
t('page.home.click_hunt_below_to_join')
|
||||
}}</VaCardContent>
|
||||
</VaCard>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<VaButton color="info" icon="login" :to="$localePath(`/login`)">{{
|
||||
$t('page.home.login_first')
|
||||
t('page.home.login_first')
|
||||
}}</VaButton>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<VaDivider />
|
||||
<h2 class="my-4 text-2xl font-bold">
|
||||
{{ $t('page.home.open_to_join') }}
|
||||
{{ t('page.home.open_to_join') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<VaCard
|
||||
@@ -95,11 +95,11 @@ watch(loggedIn, () => refresh());
|
||||
{{ hunt.description }}
|
||||
<VaDivider />
|
||||
<div class="flex flex-col gap-2">
|
||||
<p>{{ $t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||
<p v-if="hunt.start">
|
||||
{{
|
||||
$t('page.home.start', {
|
||||
start: $d(hunt.start, {
|
||||
t('page.home.start', {
|
||||
start: d(hunt.start, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'medium'
|
||||
})
|
||||
@@ -108,21 +108,21 @@ watch(loggedIn, () => refresh());
|
||||
</p>
|
||||
<p v-if="hunt.end">
|
||||
{{
|
||||
$t('page.home.end', {
|
||||
start: $d(hunt.end, {
|
||||
t('page.home.end', {
|
||||
start: d(hunt.end, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'medium'
|
||||
})
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p>{{ $t('page.home.n_teams_joined', hunt._count.teams) }}</p>
|
||||
<p>{{ t('page.home.n_teams_joined', hunt._count.teams) }}</p>
|
||||
</div>
|
||||
</VaCardContent>
|
||||
</VaCard>
|
||||
<VaCard v-if="data.others.length <= 0">
|
||||
<VaCardTitle>{{ $t('page.home.no_hunt_created') }}</VaCardTitle>
|
||||
<VaCardContent>{{ $t('page.home.new_hunts_soon') }}</VaCardContent>
|
||||
<VaCardTitle>{{ t('page.home.no_hunt_created') }}</VaCardTitle>
|
||||
<VaCardContent>{{ t('page.home.new_hunts_soon') }}</VaCardContent>
|
||||
</VaCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user