Как установить язык в vuetify?

Question

Я пытаюсь настроить локали с помощью:

Vue.use(Vuetify, {
    lang: {
        locales: { 
            'en-US' : {
                "dataIterator": {
                    "rowsPerPageText": "Items per page:",
                    "rowsPerPageAll": "All",
                    "pageText": "{0}-{1} of {2}",
                    "noResultsText": "No matching records found",
                    "nextPage": "Next page",
                    "prevPage": "Previous page"
                },
                "dataTable": {
                    "rowsPerPageText": "Rows per page:"
                },
                "noDataText": "No data available"
            } 
        },
        current: 'en-US'
    }
});

, а затем позже меняю текущую локаль с помощью:

this.$vuetify.lang.current = 'en-US';

, но я получаю предупреждения о том, что Vue не имеетперевод для текущей локали.

Кто-нибудь знает почему?

Answer 1

Если вы используете Vuetify из CDN (в браузере через тег <script>), Vue уже установил плагин Vuetify при загрузке скрипта, поэтому повторный вызов Vue.use(Vuetify, ...) позже фактически не имеет никакого эффекта.Доступный языковой стандарт по умолчанию (и только) en.

Вы все еще можете обновить доступные языковые стандарты в своем App created хуке:

created() {
  this.$vuetify.lang.locales = {
    en: {
      noDataText: 'Nothing'
    },
    es: {
      noDataText: 'Nada'
    }
  }
},

new Vue({
  el: '#app',
  created() {
    this.$vuetify.lang.locales = {
      en: {
        noDataText: 'Nothing'
      },
      es: {
        noDataText: 'Nada'
      }
    }
  },
  methods: {
    changeLocale() {
      const currentLang = this.$vuetify.lang.current;
      this.$vuetify.lang.current = currentLang === 'es'
                                 ? 'en'
                                 : 'es';
    }
  }
})

<script src="https://unpkg.com/vue@2.6.7"></script>
<script src="https://unpkg.com/vuetify@1.5.4/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@1.5.4/dist/vuetify.min.css">

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-btn @click="changeLocale">Change locale</v-btn>
        <div>{{ $vuetify.lang.current }} - {{ $vuetify.t('$vuetify.noDataText') }}</div>
      </v-container>
    </v-content>
  </v-app>
</div>