How to add my own translations to my vuetify 2.x web app?

Question

I'm currently writing my first web app with vuetify 2.x and vue-i18n. Unfortunately I can't get i18n working for my own translations.

I have a menu with the following entry

      <v-menu bottom left offset-y transition="slide-y-transition">
        <template v-slot:activator="{ on }">
          <v-btn icon v-on="on">
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>
        <v-list>
          <v-list-item @click="showAllItems">
            <v-list-item-title>
              {{ $vuetify.lang.t("cancelFilters") }}
            </v-list-item-title>
          </v-list-item>
          <v-list-item @click="showNonZeroItems">
            <v-list-item-title>
              {{ $vuetify.lang.t("maskZero") }}
            </v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>

But the keys are displayed instead of the English or other language. I set English as the fallback language.

The function exist and is working, but my translations are not taken in account.

This is the content of src/locales/en.json. I wasn't sure if keys may contain spaces.

{
  "search": "Search",
  "cancelFilters": "Cancel filters",
  "maskZero": "Mask zero counts",
  "maskUnchecked": "Mask unchecked",
  "maskChecked": "Mask checked",
  "sharingCode": "Sharing code",
  "preferences": "Preferences",
  "addList": "Add list",
  "disconnect": "Disconnect",
  "sponsoringLink": "Sponsoring link"
}

I saw that the json files in the locales directory are all loaded in the src/i18n.js file.

What are the missing steps required to get my translations ?

How can I change the current language ?

Solution: I found out how to use my own translations defined in en.json. Simply replace $vuetify.lang.tby $i18n.t. As simple as that. It still remains to find how to change the current language.

Answer 1

$vuetify.lang is just a lightweight implementation designed to be used internally by Vuetify's components to translate strings like v-select's no-data-text. These props can take plain strings (no-data-text="There's nothing here") as well as translation keys, so keys need to be prefixed with $vuetify (no-data-text="$vuetify.noDataText").

Obviously this isn't very usable and doesn't give you much flexibility, so for translating the rest of your site we recommend using vue-i18n instead. We also show how to store customised vuetify translations in the vue-i18n json files: https://vuetifyjs.com/en/features/internationalization/#vue-i18n