Vuetify国际化

Install vue-i18n.

yarn add vue-i18n 

New a file named index.js and placed it into src/i18n.

import Vue from "vue";
import VueI18n from "vue-i18n";
import en from "./vuetify/en";
import cn from "./vuetify/zhHans";

Vue.use(VueI18n);

const messages = {
  en,
  cn,
};

const i18n = new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || "cn",
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
  messages: messages,
});

export default i18n;

Edit src/main.js and import i18n from ./i18n.

import Vue from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
import i18n from "./i18n";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  i18n,
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

A sample vue file.

<template>
  <v-container>
    <v-card>
      <v-card-title>
        {{ $t("title.attendances") }}
        <v-spacer />
	  </v-card-title>
    </v-card>
  </v-container>
</template>