CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
omega
omega

Reputation: 43833

How to set language in vuetify?

I'm trying to setup the locales with this:

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'
    }
});

and then later I change the current locale with:

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

but I get warnings about Vue not having a translation for the current locale.

Does anyone know why?

Upvotes: 3

Views: 9684

Answers (2)

schellmax
schellmax

Reputation: 6094

This issue has been reported in https://github.com/vuetifyjs/vuetify/issues/7644 and seems to be fixed now, as the bootstrap process was rebuilt in v2.0:

new Vue({
  el: '#app',
  vuetify: new Vuetify({
    lang: {
      t: (key, ...params) => i18n.t(key, params)
    }
  })
})

For a complete example have a look at this codepen.

Details on the changed bootstrapping to be found in the migration guide.

Upvotes: 0

tony19
tony19

Reputation: 138196

If you're using Vuetify from CDN (in the browser via a <script> tag), Vue has already installed the Vuetify plugin upon loading the script, so calling Vue.use(Vuetify, ...) again later actually has no effect. The default (and only) locale available is en.

You could still update the available locales in your App's created hook:

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/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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>

Upvotes: 3

Related Questions