Vue I18n Translation Issues

import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createI18n } from 'vue-i18n';
import { createApp, h } from 'vue';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import NavBar from './components/NavBar.vue';
import en from './i18n/en.json';
import es from './i18n/es.json';

const savedLang = localStorage.getItem('lang') || 'en';
const i18n = createI18n({
legacy: false,
locale: savedLang, // set default locale
fallbackLocale: 'en', // fallback locale in case the current locale is not available
messages: {
en,
es
}
})

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
title: (title) => `${title} – ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob('./Pages/**/*.vue'),
),
setup({ el, App, props, plugin }) {
const app = createApp({ render: () => h(App, props) });

// Use plugins
app.use(i18n);
app.use(plugin);
app.use(ZiggyVue);
app.config.globalProperties.t = (…args) => i18n.global.t(…args);
// Register global components
app.component('NavBar', NavBar);

// Mount the app
app.mount(el);
},
progress: {
color: '#4B5563',
},
});
{{ t('Contact Us') }} not translating in vue fiels

### Steps to Troubleshoot

1. **Check the Translation Files**:
Make sure that your translation files (`en.json` and `es.json`) contain the correct key-value pairs. For example, your `en.json` should look something like this:

{
     "Contact Us": "Contact Us"
   }

And your `es.json` should look like this:

{
     "Contact Us": "Contáctenos"
   }

2. **Ensure Correct Usage of the Translation Function**:
In your Vue components, ensure you're calling the translation function correctly. The template syntax for using the translation function is slightly different from normal JavaScript. You can use it directly in the template section of your Vue component:

<template>
     <div>
       {{ $t('Contact Us') }}
     </div>
   </template>

If you want to use it in the “ section, you can access it like this:

this.$i18n.t('Contact Us');

3. **Check the Language Setting**:
Ensure that the language is being set correctly. You’re retrieving the language preference from `localStorage`. Confirm that this value is set properly and that your translations for the selected language exist. You might want to log the `savedLang` to check its value.

4. **Reactivity and Component Lifecycle**:
If the language changes dynamically (e.g., based on user input), ensure that your components reactively update. You might need to use a `watch` or a computed property to react to changes in the locale.

5. **Debugging**:
Add console logs to verify the `locale` and `messages` in your i18n instance to ensure they are being set correctly. For example:

console.log('Current locale:', i18n.global.locale);
   console.log('Available messages:', i18n.global.messages);

### Example Component

Here’s a simple example of how you might structure a Vue component with the translation:

<template>
  <div>
    <h1>{{ $t('Contact Us') }}</h1>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('es')">Español</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang; // Change the locale
      localStorage.setItem('lang', lang); // Save to localStorage
    }
  }
}
</script>

### Final Steps
Once you’ve checked and adjusted all of the above, your translations should work properly. If you continue to have issues, make sure to look for any console errors that might give more insight into what's going wrong.