Considering that there will be users from multiple different countries, you might need to add the support for multiple help you with that, we have made the template compatible with the multiple language functionality.

You can find the dropdown that changes the language in the header.

How does multi-language functionality works?

We have used the packages vue-i18n, you can install it by running the following commands in the terminal.

npm install vue-i18n

You will find language translator logic and design at below given path:

Implementing Language Translate Feature

After you finished installing above mentioned packages in your project, follow the below given steps to add the multi-language support.

Our Html component for language translate will look like this

<OnClickOutside  class="modal-content"  *v-if="style == 'basic'"  @trigger="active = false">
    <WidgetsButton
           :classes="'btn dropdown-toggle'" :type="'button'" :id="'open_dropdown_basic_btn'"
            @onClick="openDropDown()";>    
        <span><div class="iti-flag" :class="selectedLanguage.icon"></div> {{ selectedLanguage.language }}</span>
    </WidgetsButton>

    <ul class="dropdown-menu dropdown-menu-end language-dropdown" :class="{'show':active}" >
        <li v-for="language in languages" :key="language">
            <button class="dropdown-item"  @click="selectLanguage(language)">
                <div class="iti-flag" :class="language.icon"></div>
                <span>{{ language.language }}</span>
            </button>
        </li>
    </ul>
</OnClickOutside>

Language change logic and configuration:

import { OnClickOutside } from '@vueuse/components'
import { useI18n } from 'vue-i18n'
    const i18n = useI18n();
    let props = defineProps({
        style: { type: [String,Object], default: 'basic' }
    })
                                        
    let active = ref(false);
    let languages = ref([
    {
        language: 'English',
        code: 'en',
        icon: 'us'
    },
    {
        language: 'Français',
        code: 'fr',
        icon: 'fr'
    },
    ])
    let selectedLanguage = ref({
        language: 'English',
        code: 'en',
        icon: 'us'
        })
        
function selectLanguage(language) {
    active.value = false;
    i18n.locale.value = language.code
    selectedLanguage.value = language;
}
        
function openDropDown() {
    active.value = !active.value;
  }                            
}

JSON files for different languages

To translate words we have to provide the translation for each word, that we will do in a json file.

{
    "collections": "Collections",
    "collection_layouts": "Collection Layouts",
    "collection_left_sidebar": "Collection Left Sidebar",
    "collection_right_sidebar": "Collection Right Sidebar",
    "collection_no_sidebar": "Collection No Sidebar"
}

{
    "collections": "Collections",
    "collection_layouts": "Dispositions des collections",
    "collection_left_sidebar": "Collection restante Barre latérale",
    "collection_right_sidebar": "Barre latérale droite de la collection",
    "collection_no_sidebar": "Collection sans barre latérale",
}

Now We just need to configure the settings for language change in our i18n.js file.

Add the following code in your i18n.js file.

import { createI18n } from 'vue-i18n'
import en from '@/data/languages/en'
import fr from '@/data/languages/fr'
                                        
export default defineNuxtPlugin(({ vueApp }) => {
    const i18n = createI18n({
        legacy: false,
        globalInjection: true,
        locale: 'en',
        messages: {
            en:en,
            fr:fr
        }
    })
    vueApp.use(i18n)
})

Now we are all set to use language translation, you just have to add $t(" ") when you want a word to change when the language changes.

For Example:

Use a variable as follows:

{{ $t("some_variable") }}

Warning: Make sure that if you are using a variable then you have added the translation for every word possible in that variable in the json file.