言語

Pages配下にlang-[lang]ディレクトリを作成し、lang-[lang]ディレクトリ内で普段通りにコードを記述していきます。

definePageMeta Script

Set Page Meta

vue/pages/**/*.vue

<script setup lang="ts">
definePageMeta({
 'title:en': 'Localization',
 'description:en': `Displays the page title and summary in the current language.`,
 'title:ja': '多言語対応',
 'description:ja': 'ページのタイトル、概要を現在の言語で表示します。',
});
</script>

<template>
 <div> Some page contents </div>
</template>

Retrieve Localized Page Meta

vue/pages/**/*.vue

<script setup lang="ts">
definePageMeta({
 'title:en': 'Localization',
 'description:en': `Displays the page title and summary in the current language`,
 'title:ja': '多言語対応',
 'description:ja': 'ページのタイトル、概要を現在の言語で表示します',
});
</script>

<template>
 <ViewState
  v-slot="title"
  src="localization://title"
 >
  <h1>{{ title.data }}</h1>
 </ViewState>
 <ViewState
  v-slot="description"
  src="localization://description"
 >
  <p class="lead">
   {{ description.data }}
  </p>
 </ViewState>
</template>

PageMeta component

vue

<template>
 <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>
</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

現在の言語設定に基づいたページを表示します

Jump Current Language Page

Jump Language [ja] Page

Jump Language [en] Page

Now: ja

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>

Bootstrap

言語