Vue, как я могу использовать Vue I18n в routre?

Понял )

Vue, как я могу использовать Vue I18n в routre?

Alex, покажите кнопочку найти не могу

Vue, как я могу использовать Vue I18n в routre?

Подскажите что за кнопочка и где она, найти не могу

Vue, как я могу использовать Vue I18n в routre?

Понятно, но без него тоже работает

Vue, как я могу использовать Vue I18n в routre?

Спасибо, все заработало.

watch: {
        '$i18n.locale'() {
            document.title = this.$i18n.t(this.$route.meta.title)
        },
        '$route': {
            handler(to) {
               document.title = this.$i18n.t(to.meta.title)
            },
            immediate: true
        }
    },

а зачем эта строчка immediate: true

Vue, как я могу использовать Vue I18n в routre?

watch: {
'$i18n.locale'() {
document.title = this.i18n.t(this.$route.meta.title)
}
},

Не работает этот вариант, на английский язык также заголовок не переводит и
к тому же при клике на пункты меню теперь перестал меняться заголовок страницы

Vue, как я могу использовать Vue I18n в routre?

Alex,

Сама функция переключения
в компьютед-свойстах делать сайд-эффекты - плохая практика

Почему, а как тогда правильно сделать?
Что такое сайд-эффекты?

Vue, как я могу использовать Vue I18n в routre?

switchLocale() {
            if (this.$i18n.locale === 'ru') {
                this.$i18n.locale = 'en'
            } else {
                this.$i18n.locale = 'ru'
            }
            window.localStorage.setItem('Language', this.$i18n.locale)
        }

Vue, как я могу использовать Vue I18n в routre?

Alex,

Переключение языков

<v-btn class="font-weight-regular ml-3" style="background: #1F6BA7" fab flat small @click="switchLocale()">
            {{ displayLocale.toLocaleUpperCase() }}
        </v-btn>

Сама функция переключения

computed: {
        displayLocale() {
            return this.$i18n.locale === 'ru' ? 'en' : 'ru'
        }
}

Чуть ниже watch()

watch: {
        $route(to, from) {
            //document.title = to.meta.title || '';
            document.title = to.meta.title ? to.meta.title() || '' : '';
        },
    },

При клике на пункты меню соответственно меняется и заголовок страницы,
а при переключении английский язык, заголовок страницы остается на русском,
только при нажатии на F5 заголовок становится на английском.
Это работало с этим вариантом document.title = to.meta.title || '';
Ваш вариант вообще никак не работает. (

Это все в одном файле

Vue, как я могу использовать Vue I18n в routre?

До дома доберусь постараюсь скинуть как у меня сделано

Vue, как я могу использовать Vue I18n в routre?

Alex,
navbar.vue самый высокий.

Vue, как я могу использовать Vue I18n в routre?

Alex,
watch() прописан в главном компоненте navbar, где генерируется меню,
смена происходит при клике на язык (Английский, Русский )

Vue, как я могу использовать Vue I18n в routre?

Alex,
попробовал, не меняется, Заголовок страницы

после F5, только

Vue, как я могу использовать Vue I18n в routre?

Спасибо, все заработало ).

Еще если не сложно подскажите.
Все переключается на другой язык, кроме Title страницы
у меня такой код или как-то по другому нужно?

watch: {
        $route(to, from) {
            document.title = to.meta.title || '';
        },
    },

Нужно F5 нажимать, после этого срабатывает

Vue, как я могу использовать Vue I18n в routre?

Алексей Ярков,
поменял я местами тоже самое (

Vue, как я могу использовать Vue I18n в routre?

Alex,
Вот мой main.js

import Vue from 'vue'
import App from './App'
import Vuetify from 'vuetify'
import router from './router'
import axios from 'axios'
import VueI18n from 'vue-i18n'
import store from './store';
import english from '@/lang/english.js'
import russian from '@/lang/russian.js'

Vue.use(VueI18n)

let messages = {
    en : english,
    ru : russian,
}

const i18n = new VueI18n({
    //locale: 'ru',
    locale: window.localStorage.Language || 'ru',

    fallbackLocale: 'ru',
    messages
})
Vue.config.productionTip = false

Vue.use(Vuetify)

Vue.axios = Vue.prototype.$http = axios.create({
    baseURL: 'http://localhost:5000/api'
})


/* eslint-disable no-new */
new Vue({
    el: '#app',
    i18n,
    router,
    store,
    components: { App },
    template: '<App/>',
    created() {
      this.$vuetify.theme.primary = '#01579B'
    }
})

Vue, как я могу использовать Vue I18n в routre?

Алексей Шашенков, а можно по подробней что за фабрику?

Vue, как я могу использовать Vue I18n в routre?

Вот эта ошибка
В компонентах работает, а в js не хочет

Vue, какие способы есть для передачи id при клике на пункт меню?

Да, точно, что-то я не сообразил, спасибо. )

Как в компоненте получить данные из хранилища?

Нет, так не получается стал объект, перестал выводится список товаров
и id неправильное

До этого был массив