Nuxt3 多言語対応サイトを作る

Nuxt3の作り方です。

対応言語　日本語、英語
URLタイプ　日本語：/ja/　英語：/en/

i18nをインストール

npm install @nuxtjs/i18n

※npm install vue-i18nの場合は関数が重複指定になる場合あるので上記のNuxt公式をお勧めします。

i18n設定ファイルを作成

i18n/i18n.ts

import en from '../locales/en.json';
import ja from '../locales/ja.json';

export default defineI18nConfig(() => ({
    legacy: false,
    locale: 'ja',
    fallbackLocale: 'ja',
    silentTranslationWarn: true,
    missingWarn: false,
    messages: {
        en,
        ja,
    },
}));

nuxt.config.tsを設定

nuxt.config.ts

export default defineNuxtConfig({
    modules: ['@nuxtjs/i18n'],
    i18n: {
        vueI18n: './i18n.ts',
        strategy: 'prefix',
        locales: ['ja', 'en'], // used in URL path prefix
        defaultLocale: 'ja',
    },
});

参考サイト

• i18nドキュメント
• Nuxt3ドキュメント
• Vue I18nドキュメント

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選