در پروژه vue cli3 پلاگین i18n را نصب کرده ایم. یک کامپوننت برای تغییر زبان با نام LanguageSwitcher ایجاد کرده و در appbar فراخوانی کرده ایم.

در پیش نمایش سایت هرچه روی 'فارسی' کلیک میکنیم محتوا فارسی نمیشود.

محتوای کامپوننت:

<template>
    <div class="locale-changer">

        <v-select
                v-model="$i18n.locale"
                :items="locales"
                item-text="name"
                item-value="code"
                return-object
        >
            <template slot='selection' slot-scope='{ item }'>
                {{'{{'}} item.name }}
            </template>
            <template slot='item' slot-scope='{ item }'>
                {{'{{'}} item.name }}
            </template>
        </v-select>
    </div>
</template>

<script>
    export default {
        name: 'locale-changer',
        data() {
            return {
                locales: [
                    {
                        name: 'English',
                        flag: 'fa-book',
                        code: 'en',
                    },
                    {
                        name: 'فارسی',
                        flag: 'fa-book',
                        code: 'fa',
                    },
                ]
            }
        },
    }
</script>

لاگ کنسول مرورگر:

[HMR] Waiting for update signal from WDS...