Используйте переводы Vuetify и Vue -i18n - PullRequest
Новая
       5

Используйте переводы Vuetify и Vue -i18n

1 голос
/ 20 января 2020

Я использую Vuetify и хочу добавить свои собственные переводы для кнопок, например, а также использовать переводы, предоставленные Vuetify. В настоящее время у меня настроен файл конфигурации Vuetify, например: 

import Vue from "vue"
import Vuetify from "vuetify"
import "vuetify/dist/vuetify.min.css"
import "@fortawesome/fontawesome-free/css/all.css"
import VueI18n from "vue-i18n"
import messages from "./i18n"

import en from 'vuetify/es5/locale/en'
import nl from 'vuetify/es5/locale/nl'

Vue.use(Vuetify)
Vue.use(VueI18n)

const locale = navigator.language

const i18n = new VueI18n({
    locale: locale,
    messages: messages,
})

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: "#8BC34A",
                secondary: "#627ACC"
            }
        }
    },
    icons: {
        iconfont: "fa",
    },
    lang: {
        locales: { en, nl },
        current: locale,
        t: (key, ...params) => i18n.t(key, params),
    },
});

Мой locale установлен на nl, но также, когда я устанавливаю его на en, он выдает следующие ошибки:

Значение ключа '$ vuetify.noDataText' не является строкой! Невозможно перевести

значение ключевого пути '$ vuetify.noDataText'. Используйте значение keypath по умолчанию.

Но когда я добавляю сообщения перевода Vuetify в мой файл i18n, это работает: 

const messages = {
    en: {
        $vuetify: {
            noDataText: 'No data available',
        },
 }

Но в идеальной ситуации я бы нравится разделять переводы Vuetify, пользовательские переводы на голландский и пользовательские переводы Engli sh в разных файлах. Может кто-нибудь помочь мне узнать, как я могу отделить логи перевода c?

Ответы [ 2 ]

1 голос
/ 20 января 2020

Переменная messages, которую вы передаете конструктору VueI18n, является просто объектом, и поэтому вы можете составлять его так, как вам хочется. Вы можете составить его из нескольких файлов, чтобы в вашем i18n файле было что-то подобное: 

import en from './locales/en;
import nl from './locales/nl';

export default {
  en,
  nl
}

Ваш locales/en.js может выглядеть примерно так: 

import $vuetify from './locales/en_vuetify';

export default {
  //Your english translations
  'foo1': 'foo1',
  // Your english vuetify translations
  $vuetify
}

И ваш locales/en_vuetify.js выглядит следующим образом: 

import enVuetify from 'vuetify/es5/locale/en'

export default {
  // These are the default vuetify translations
  ...enVuetify,
  // Here you write your custom vuetify translations that will override the default ones
  'custom1': 'whatever'
}

И в вашем Vuetify объекте конфигурации вы можете оставить свойство lang следующим образом: 

lang: {
  t: (key, ...params) => i18n.t(key, params),
},

Таким образом vue-i18n единственный, кто заботится о переводах.

1 голос
/ 20 января 2020

Если вы не настраиваете переводы vuetify в vue -i18n, вам не нужно его интегрировать. Вы можете использовать vue -i18n обычным способом для ваших собственных строк в ваших компонентах и ​​не указывать lang.t в опциях vuetify.

...