search

CodingCab / ShipTown

https://demo.myshiptown.com
0 stars 0 forks source link

Implement Internalization on Frontend #717

Open ArturHanusek opened 2 days ago

ArturHanusek commented 2 days ago

We need to implement translations. Please start with ProductPage

Below came from ChatGPT - use as guideline

Task: Implement Translation in Vue 2 Project

Instructions for Implementation

  1. Install vue-i18n:

    • Install the vue-i18n package using npm: 
      npm install vue-i18n --save

  2. Create Translation Files:

    • Create a folder named locales in the project root.
    • Add JSON files for each language (e.g., en.json, fr.json).
    • Example content for en.json: 
      {
"welcome": "Welcome",
"hello": "Hello, {name}!"
}
    • Example content for fr.json: 
      {
"welcome": "Bienvenue",
"hello": "Bonjour, {name}!"
}

  3. Configure vue-i18n in main.js:

    • Import the vue-i18n library and the translation files.
    • Configure vue-i18n and attach it to the Vue instance.

    • Example:

      import Vue from 'vue';
import VueI18n from 'vue-i18n';

import en from './locales/en.json';
import fr from './locales/fr.json';

Vue.use(VueI18n);

const messages = {
en,
fr,
};

const i18n = new VueI18n({
locale: 'en', // Default language
fallbackLocale: 'en', // Fallback language
messages,
});

new Vue({
i18n,
render: h => h(App),
}).$mount('#app');

  4. Update Components to Use Translations:

    • Use the $t method in Vue templates to display translation keys.

    • Example component:

      <template>
<div>
 <p>{{ $t('welcome') }}</p>
 <p>{{ $t('hello', { name: 'John' }) }}</p>
 <button @click="switchLanguage('fr')">Switch to French</button>
 <button @click="switchLanguage('en')">Switch to English</button>
</div>
</template>

<script>
export default {
methods: {
 switchLanguage(lang) {
   this.$i18n.locale = lang;
 },
},
};
</script>

  5. Configure Fallback for Missing Translations:

    • Ensure a fallback language is set in the vue-i18n configuration to handle missing translations.
    • Example: 
      const i18n = new VueI18n({
locale: 'en',
fallbackLocale: 'en',
messages,
});

  6. Test and Verify:

    • Test the application with multiple languages to ensure translations work correctly.
    • Verify the language switcher changes the locale dynamically and updates the displayed content.

Deliverables