Vue3プロジェクトでvue-i18nの翻訳ファイルをymlで読み込む

ymlのパスと型定義の場所を迷ったのでメモ

プロジェクトを作成

npm init vue@latest

cd 作成したプロジェクト

npm install

パッケージをインストール

npm i vue-i18n

npm i --save-dev @intlify/vite-plugin-vue-i18n

読み込むymlのパスを指定

// vite.config.ts
import { fileURLToPath, URL } from "node:url";
// 追加
import { resolve, dirname } from "node:path";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 追加
import vueI18n from "@intlify/vite-plugin-vue-i18n";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 下記にymlのパスを指定する
    vueI18n({
      include: resolve(
        dirname(fileURLToPath(import.meta.url)),
        "./src/i18n/locales/**"
      ),
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

型定義を追加

// tsconfig.vitest.json
{
  "extends": "./tsconfig.app.json",
  "exclude": [],
  "compilerOptions": {
    "composite": true,
    "lib": [],
    // typesに追加
    "types": ["node", "jsdom", "@intlify/vite-plugin-vue-i18n/client"]
  }
}

ymlの準備

# ./src/i18n/locales/ja.yml
hello: こんにちは

# ./src/i18n/locales/en.yml
hello: Hello!!

i18nの準備

// ./src/i18n/index.ts
import { createI18n } from "vue-i18n";

import messages from "@intlify/vite-plugin-vue-i18n/messages";

export const i18n = createI18n({
  locale: "ja", // set locale
  fallbackLocale: "en", // set fallback locale
  messages, // set locale messages
  legacy: false,
});

Vueにi18nを読み込む

// ./src/main.ts
import { createApp } from "vue";
import { createPinia } from "pinia";
// 追加
import { i18n } from "@/i18n";

import App from "./App.vue";
import router from "./router";

import "./assets/main.css";

const app = createApp(App);
// 追加
app.use(i18n);

app.use(createPinia());
app.use(router);

app.mount("#app");

設定完了！

あとは使用するだけ

<p>{{ $t("hello") }}</p>