Vuetify 3でアプリを多言語対応させる

これはなに

Vue 3 + Vuetify 3で多言語対応するやり方のメモ。 Vuetify 3はデフォルトで多言語対応できるため、vue-i18nは使わない。

環境

Vue 3.2.45
Vuetify 3.1.1
TypeScript 4.9.4
Vue Router 4.1.6
Vite 3.2.5

yarn create vuetifyでプロジェクトを作成した前提とする。

ディレクトリ構造

必要なファイルだけ示す。

root
|-- package.json
|-- src
|   |-- App.vue
|   |-- i18n
|   |   `-- locale
|   |       |-- en.ts
|   |       `-- ja.ts
|   |-- main.ts
|   |-- plugins
|   |   |-- index.ts
|   |   |-- vuetify.ts
|   |   `-- webfontloader.ts
|   `-- vite-env.d.ts
|-- tsconfig.json
|-- tsconfig.node.json
|-- vite.config.ts
`-- yarn.lock

言語ファイルを用意する

まず、言語ファイルを用意する。

root/src/i18n/locale/内に、多言語対応したい言語のTypeScriptファイルを作成する。今回は日本語と英語に対応させるため、ja.tsとen.tsをつくる。

root/src/i18n/locale/ja.ts

import { ja } from 'vuetify/locale';

export default {
  ...ja,

  test: 'テストメッセージ1',
  temp: {
    test: 'テストメッセージ2',
  },
};

root/src/i18n/locale/en.ts

import { en } from 'vuetify/locale';

export default {
  ...en,

  test: 'Test message 1',
  temp: {
    test: 'Test message 2',
  },
};

'vuetify/locale'からimportしているのは、Vuetifyのコンポーネントで利用される言語定義ファイルである。これを読み込み展開することで、Vuetifyのコンポーネントをいじることなく多言語化できる。

それに加えて、独自の定義もできる。今回testという名前で定義しているものがそれにあたる。この名前testおよびその内容は任意に定義できる。また、tempのように階層化しても定義できる。

言語ファイルを読み込む

Vuetifyで言語ファイルを読み込むため、root/src/plugins/vuetify.tsに下記を追記する。

root/src/plugins/vuetify.ts

/**
 * plugins/vuetify.ts
 *
 * Framework documentation: https://vuetifyjs.com`
 */

// Styles
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';

// Composables
import { createVuetify } from 'vuetify';

+ // i18n
+ import en from '@/i18n/locale/en';
+ import ja from '@/i18n/locale/ja';

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
+ locale: {
+   locale: 'ja',
+   fallback: 'en',
+   messages: { en, ja },
+ },
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#1867C0',
          secondary: '#5CBBF6',
        },
      },
    },
  },
});

localeにはデフォルトの言語を、fallbackにはブラウザなどで言語が設定されていない場合に適用する言語を指定する¹。 messagesには利用したいすべての言語を入れる。

テキストを表示する

最後に、定義した言語のテキストを表示する。

root/src/App.vue

<script setup lang="ts">
  //
</script>

<template>
  <v-app>
    <v-main>
      <v-btn @click="$vuetify.locale.current = 'ja'"> 日本語 </v-btn>
      <v-btn @click="$vuetify.locale.current = 'en'"> English </v-btn>
      <p>{{ $vuetify.locale.t('$vuetify.test') }}</p>
      <p>{{ $vuetify.locale.t('$vuetify.temp.test') }}</p>
    </v-main>
  </v-app>
</template>

$vuetify.locale.currentを変更することで、アプリの言語設定が変わる。また、言語ファイルで定義したテキストは、$vuetify.locale.t('$vuetify.test')の形で読み込める。なお、今回はApp.vueに直接書いたが、これらの関数および値は任意のVueファイルで読み込める。

ここまでできたらyarn devしてアプリを立ち上げる。ボタンをクリックして言語が変われば成功。

参考文献・URL

対応している言語はVuetify公式を参照。 ↩︎