Asked thg 9 10, 3:54 AM 141 0 1
  • 141 0 1
+1

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

Share
  • 141 0 1

Em đang làm project về Laravel & VueJs, em muốn thay đổi đa ngôn ngữ trong Vuejs thì làm như thế nào ạ. Em cảm ơn ạ.

Avatar Bùi Huy Hoàng @BuiHuyHoang
thg 9 10, 4:22 AM

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 Screenshot from 2021-09-10 11-08-02.png 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 😄

0
| Reply
Share
Avatar Hưởng Đức @dhuong99262
thg 9 10, 8:07 AM

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

0
| Reply
Share
Avatar Hưởng Đức @dhuong99262
thg 9 10, 8:51 AM

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

0
| Reply
Share
Avatar Bùi Huy Hoàng @BuiHuyHoang
thg 9 10, 8:52 AM

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

0
| Reply
Share
Avatar Hưởng Đức @dhuong99262
thg 9 10, 8:54 AM
0
| Reply
Share
Avatar Bùi Huy Hoàng @BuiHuyHoang
thg 9 10, 9:13 AM

@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';
0
| Reply
Share
Avatar Hưởng Đức @dhuong99262
thg 9 10, 9:39 AM

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

0
| Reply
Share
Avatar Bùi Huy Hoàng @BuiHuyHoang
thg 9 10, 9:41 AM

@dhuong99262 @@ lỗi ntn b

0
| Reply
Share
Avatar Hưởng Đức @dhuong99262
thg 9 10, 9:45 AM

@BuiHuyHoang e ib được k?

0
| Reply
Share
Avatar Bùi Huy Hoàng @BuiHuyHoang
thg 9 10, 9:47 AM
0
| Reply
Share
Avatar Hưởng Đức @dhuong99262
thg 9 10, 9:49 AM

@BuiHuyHoang e xin inf

0
| Reply
Share
Avatar Bùi Huy Hoàng @BuiHuyHoang
thg 9 10, 9:51 AM
0
| Reply
Share

1 ANSWERS


Answered thg 9 10, 3:58 AM
+1

Bên phía bên VueJS thì bạn dùng cái này nhé https://kazupon.github.io/vue-i18n/

Share
Viblo
Let's register a Viblo Account to get more interesting posts.