Đa ngôn ngữ Laravel & VueJs như thế nào ạ?

Bạn có thể tham khảo cách làm của mình với project vuejs như sau:

• Cài package "vue-i18n".
• import và use nó ở file "app.js"

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: 'vi', // locale mặc định
    messages,
});

const app = new Vue({
    i18n,
    render: h => h(App),
});

-Thêm folder "locales" với file "index.js" và các file locale.js tương ứng. ở đây mình ví dụ 2 ngôn ngữ là tiếng anh và tiếng việt nội dung file index.js như sau

import en from './en';
import vi from './vi';

export default {
    en,
    vi,
};

file vi.js và en.js sẽ chứa nội dung cần translate dạng như sau file en.js

const en = {
hi: 'Hi ',
}

file vi.js

const vi = {
hi: 'Xin Chào ',
}

-Thêm 1 component switchLanguage, dưới đây là component của mình, bạn có thể style tùy ý

<template>
    <div>
        <select v-model="$i18n.locale" class="switch-locale">
            <option
                v-for="lang in langs"
                :key="lang.key"
                :value="lang.key"
            >
                {{ lang.lable }}
            </option>
        </select>
    </div>
</template>

<script>
    export default {
        name: 'SwitchLocale',
        data() {
            return {
                langs: [
                    {
                        key: 'vi',
                        lable: 'Tiếng việt',
                    },
                    {
                        key: 'en',
                        lable: 'English',
                    },
                ],
            };
        },
    };
</script>

<style>
    .switch-locale {
        width: 130px;
        height: 35px;
        outline: 0;
        border-radius: 4px;
        border: 1px solid #909399d9;
        background: white;
    }
</style>

-Cuối cùng là thay nội dung cần đa ngôn ngữ ở thẻ html ví dụ bạn

<h1> Xin Chào </h1>

Bạn cần chuyển lại thành

<h1> {{ $t('hi') }} </h1>

Chúc bạn thành công

@BuiHuyHoang thanks bác. Mk vẫn chưa fix được

@BuiHuyHoang Bác chỉ lại giúp mk vs.

@dhuong99262 b đang mắc chỗ nào nhỉ

@BuiHuyHoang

@dhuong99262 à mình quên mất là file vi.js vs en.js cần phải export nó ra nhé bạn thêm ở file en.js

export default en;

tương tự với file vi.js. Với lại file app.js b cũng import thêm

import messages from './locales/index';

@BuiHuyHoang Em làm vẫn lỗi ạ.

@dhuong99262 @@ lỗi ntn b

@BuiHuyHoang e ib được k?

@dhuong99262 oki b

@BuiHuyHoang e xin inf

@dhuong99262 bui.huy.hoang@sun-asterisk.com