Pages配下にlang-[lang]ディレクトリを作成し、lang-[lang]ディレクトリ内で普段通りにコードを記述していきます。
PageMeta component
vue
<template>
<Head>
<Localization>
<template #en>
<PageMeta
title="Quick start"
description="use-bootstrap is the front-end framework based on Nuxt3 and Bootstrap5."
/>
</template>
<template #ja>
<PageMeta
title="はじめる"
description="use-bootstrap は、Nuxt3 と Bootstrap5 をベースにしたフロントエンド フレームワークです。"
/>
</template>
</Localization>
</Head>
<NuxtLayout>
Page Contents
</NuxtLayout>
</template>
Change Language
<LocaleNavItemDropdown>内の:localesで言語の変更が行えます。
vue
<template>
<NavbarNavList>
<LocaleNavItemDropdown :locales="['En', 'Ja']" />
</NavbarNavList>
</template>
Localization Content
<Localization>内の<template>に#en等を追加する事により、言語設定を変更した際に表示が切り替わるようになります。
こんにちは! This is Japanese
vue
<template>
<Localization>
<template #en>
<h2>Hi! This is English</h2>
</template>
<template #ja>
<h2>こんにちは! This is Japanese</h2>
</template>
</Localization>
</template>
LocalLink
現在の言語設定に基づいたページを表示します
vue
<template>
<Row>
<Col auto>
<Anchor
to="/lang-[lang]/extend/components/localization/#localLink"
dynamic-route
>
Jump Current Language Page
</Anchor>
</Col>
<Col auto>
<Anchor
to="/lang-ja/extend/components/localization/#localLink"
>
Jump Language [ja] Page
</Anchor>
</Col>
<Col auto>
<Anchor
to="/lang-en/extend/components/localization/#localLink"
>
Jump Language [en] Page
</Anchor>
</Col>
<Col auto>
<b-p>Now: {{ $route.params.lang }}</b-p>
</Col>
</Row>
</template>