Add language translations to JavaScript components

.gitignore

@@ -25,3 +25,4 @@ yarn-error.log
 /.php-cs-fixer.cache
 /storage/*.bucket
 /*.tar.gz
+/resources/lang/php_*.json

package.json

@@ -22,6 +22,7 @@
         "@vitejs/plugin-vue": "^5.1.2",
         "bootstrap": "^5.3.3",
         "clipboard": "^2.0.11",
+        "laravel-vue-i18n": "^2.7.7",
         "moment": "^2.30.1",
         "vue": "^3.4.38",
         "vue-markdown-render": "^2.2.1"

resources/js/app.js

@@ -16,7 +16,7 @@ window.submitDeletionForm = function (event) {
     const form = event.target.closest('form');
 
     if (form) {
-        if (confirm('Are you sure you want to delete this?')) {
+        if (confirm(trans('phrase.are-you-sure-delete'))) {
             form.submit();
         }
     } else {

resources/js/components/active-games/active-game.vue

@@ -18,7 +18,7 @@ const userCount = computed(() => props.users.length);
         </td>
         <td>{{ game.name }}</td>
         <td>
-            {{ userCount }} In Game
+            {{ $t('phrase.x-in-game', {x: userCount}) }}
         </td>
         <td class="users">
             <user-avatar v-for="user in users" :key="user.id" :user="user"></user-avatar>

resources/js/components/events/event-relative-time.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, watch, onMounted } from 'vue';
 import moment from 'moment';
+import {trans} from 'laravel-vue-i18n';
 
 const props = defineProps(['status', 'start', 'end', 'now']);
 
@@ -9,16 +10,16 @@ const relativeTimeText = ref('');
 const updateRelativeTimeText = () => {
     switch (props.status) {
         case 'past':
-            relativeTimeText.value = 'Ended ' + moment(props.end).fromNow();
+            relativeTimeText.value = trans('phrase.ended') + ' ' + moment(props.end).fromNow();
             break;
         case 'present':
-            relativeTimeText.value = 'Started ' + moment(props.start).fromNow();
+            relativeTimeText.value = trans('phrase.started') + ' ' + moment(props.start).fromNow();
             break;
         case 'future':
-            relativeTimeText.value = 'Starting ' + moment(props.start).fromNow();
+            relativeTimeText.value = trans('phrase.starting') + ' ' + moment(props.start).fromNow();
             break;
         default:
-            relativeTimeText.value = 'Unknown';
+            relativeTimeText.value = trans('phrase.unknown');
     }
 };
 

resources/js/components/events/event-schedule.vue

@@ -1,10 +1,11 @@
 <script setup>
-import {reactive} from 'vue';
+import {reactive, watch, computed} from 'vue';
 import FullCalendar from '@fullcalendar/vue3';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import bootstrap5Plugin from '@fullcalendar/bootstrap5';
+import {trans, isLoaded} from 'laravel-vue-i18n';
 
-const calendarOptions = reactive({
+const baseCalendarOptions = reactive({
     plugins: [timeGridPlugin, bootstrap5Plugin],
     themeSystem: 'bootstrap5',
     initialView: 'timeGridThreeDay',
@@ -25,15 +26,6 @@ const calendarOptions = reactive({
         end: 'today prev,next',
     },
     buttonIcons: false,
-    buttonText: {
-        today: 'Today',
-        month: 'Month',
-        week: 'Week',
-        day: 'Day',
-        list: 'List',
-        next: '>',
-        prev: '<',
-    },
     eventColor: '#157800',
     eventTextColor: '#fff',
     eventBorderColor: '#157800',
@@ -51,6 +43,29 @@ const calendarOptions = reactive({
     },
     events: '/api/events/',
 });
+
+// Create a computed property for buttonText
+const buttonText = computed(() => ({
+    today: trans('phrase.today'),
+    month: trans('phrase.month'),
+    week: trans('phrase.week'),
+    day: trans('phrase.day'),
+    list: trans('phrase.list'),
+    next: '>',
+    prev: '<',
+}));
+
+const calendarOptions = computed(() => ({
+    ...baseCalendarOptions,
+    buttonText: buttonText.value
+}));
+
+watch(isLoaded, (loaded) => {
+    if (loaded) {
+        buttonText.value;
+        calendarOptions.value;
+    }
+}, {immediate: true});
 </script>
 
 <template>

resources/js/components/events/event-status.vue

@@ -1,22 +1,19 @@
-<template>
-    <span :class="className">{{ statusName }}</span>
-</template>
-
 <script setup>
 import { computed } from 'vue';
+import {trans} from 'laravel-vue-i18n';
 
 const props = defineProps(['status']);
 
 const statusName = computed(() => {
     switch (props.status) {
         case 'past':
-            return 'Ended';
+            return trans('phrase.ended');
         case 'present':
-            return 'Now';
+            return trans('phrase.now');
         case 'future':
-            return 'Next';
+            return trans('phrase.next');
         default:
-            return 'Unknown';
+            return trans('phrase.unknown');
     }
 });
 
@@ -33,3 +30,7 @@ const className = computed(() => {
     }
 });
 </script>
+
+<template>
+    <span :class="className">{{ statusName }}</span>
+</template>

resources/js/components/fullscreen-button.vue

@@ -1,13 +1,14 @@
 <template>
     <transition name="fade">
         <div id="fullscreen-button" class="btn" v-show="visible" @click="toggleFullscreen">
-            <span class="fa fa-solid fa-expand" :title="Fullscreen" aria-hidden="true"></span>
+            <span class="fa fa-solid fa-expand" :title="trans('phrase.fullscreen')" aria-hidden="true"></span>
         </div>
     </transition>
 </template>
 
 <script setup>
 import {ref, onMounted, onBeforeUnmount} from 'vue';
+import {trans} from 'laravel-vue-i18n';
 
 const visible = ref(false);
 

resources/js/pages/active-games.js

@@ -1,5 +1,12 @@
 import ActiveGames from '../components/active-games/active-games.vue'
+import {i18nVue} from 'laravel-vue-i18n'
 
 const app = createApp({});
+app.use(i18nVue, {
+    resolve: async lang => {
+        const langs = import.meta.glob('../../lang/*.json');
+        return await langs[`../../lang/${lang}.json`]();
+    }
+})
 app.component('ActiveGames', ActiveGames);
 app.mount('#app');

resources/js/pages/events.js

@@ -1,5 +1,12 @@
 import Events from '../components/events/events.vue'
+import {i18nVue} from "laravel-vue-i18n";
 
 const app = createApp({});
+app.use(i18nVue, {
+    resolve: async lang => {
+        const langs = import.meta.glob('../../lang/*.json');
+        return await langs[`../../lang/${lang}.json`]();
+    }
+})
 app.component('Events', Events);
 app.mount('#app');

resources/js/pages/schedule.js

@@ -1,5 +1,12 @@
 import EventSchedule from '../components/events/event-schedule.vue'
+import {i18nVue} from "laravel-vue-i18n";
 
 const app = createApp({});
+app.use(i18nVue, {
+    resolve: async lang => {
+        const langs = import.meta.glob('../../lang/*.json');
+        return await langs[`../../lang/${lang}.json`]();
+    }
+})
 app.component('EventSchedule', EventSchedule);
 app.mount('#app');

resources/js/pages/slides.js

@@ -1,8 +1,15 @@
 import Slides from '../components/slides/slides.vue'
 import SlidesSingle from '../components/slides/slides-single.vue'
 import FullscreenButton from '../components/fullscreen-button.vue'
+import {i18nVue} from "laravel-vue-i18n";
 
 const app = createApp({});
+app.use(i18nVue, {
+    resolve: async lang => {
+        const langs = import.meta.glob('../../lang/*.json');
+        return await langs[`../../lang/${lang}.json`]();
+    }
+})
 app.component('Slides', Slides);
 app.component('SlidesSingle', SlidesSingle);
 app.component('FullscreenButton', FullscreenButton);

resources/lang/en/phrase.php

@@ -58,6 +58,7 @@
     'item-created-successfully' => ':Item created successfully',
     'item-not-found' => ':item not found',
     'item-already-exists' => ':item already exists!',
+    'fullscreen' => 'Fullscreen',
 
     /**
      * Resources.
@@ -112,7 +113,10 @@
     'you-can-only-sign-yourself-up-to-event' => 'You can only sign yourself up to an event',
     'timespan-to' => 'to',
     'upcoming' => 'Upcoming',
+    'next' => 'Next',
     'happening-now' => 'Happening now',
+    'now' => 'Now',
+    'started' => 'Started',
     'ended' => 'Ended',
     'starting' => 'Starting',
     'ending' => 'Ending',
@@ -123,6 +127,11 @@
     'closed' => 'Closed',
     'opening' => 'Opening',
     'closing' => 'Closing',
+    'today' => 'Today',
+    'month' => 'Month',
+    'week' => 'Week',
+    'day' => 'Day',
+    'list' => 'List',
 
     // Images
     'select-files' => 'Select files',

vite.config.js

@@ -1,6 +1,7 @@
 import {defineConfig} from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
+import i18n from 'laravel-vue-i18n/vite';
 
 export default defineConfig({
     plugins: [
@@ -33,6 +34,7 @@ export default defineConfig({
                 },
             },
         }),
+        i18n('resources/lang'),
     ],
     resolve: {
         alias: {