Intlayer を使って Nuxt と Vue のウェブサイトを翻訳する | 国際化（i18n）

npm install intlayer vue-intlayernpm install --save-dev nuxt-intlayernpx intlayer init

import { defineNuxtConfig } from "nuxt/config";export default defineNuxtConfig({  // ... 既存のNuxt設定  modules: ["nuxt-intlayer"],});

<script setup lang="ts">import { ref } from "vue";import { useIntlayer } from "vue-intlayer";defineProps({  msg: String,});const {  count,  edit,  checkOut,  nuxtIntlayer,  learnMore,  nuxtDocs,  readTheDocs,} = useIntlayer("helloworld");const countRef = ref(0);</script><template>  <h1>{{ msg }}</h1>  <div class="card">    <button type="button" @click="countRef++">      <count />      {{ countRef }}    </button>    <p v-html="edit"></p>  </div>  <p>    <checkOut />    <a href="https://nuxt.com/docs/getting-started/introduction" target="_blank"      >Nuxt</a    >、<nuxtIntlayer />  </p>  <p>    <learnMore />    <a href="https://nuxt.com" target="_blank"><nuxtDocs /></a>。  </p>  <p class="read-the-docs"><readTheDocs /></p>  <p class="read-the-docs">{{ readTheDocs }}</p></template>

<script setup lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// NuxtはuseRouteを自動インポートしますconst route = useRoute();const { locale, availableLocales, setLocale } = useLocale();</script><template>  <nav class="locale-switcher">    <NuxtLink      v-for="localeEl in availableLocales"      :key="localeEl"      :to="getLocalizedUrl(route.fullPath, localeEl)"      class="locale-link"      :class="{ 'active-locale': localeEl === locale }"      @click="setLocale(localeEl)"    >      {{ getLocaleName(localeEl) }}    </NuxtLink>  </nav></template>

<template>  <NuxtLayout>    <NuxtPage />  </NuxtLayout></template>

<script setup lang="ts">import Links from "~/components/Links.vue";import LocaleSwitcher from "~/components/LocaleSwitcher.vue";</script><template>  <div>    <header>      <LocaleSwitcher />    </header>    <main>      <slot />    </main>    <Links href="/">ホーム</Links>    <Links href="/about">アバウト</Links>  </div></template>

pages/├── index.vue          → /, /fr, /es├── about.vue          → /about, /fr/about, /es/about└── contact/    └── index.vue      → /contact, /fr/contact, /es/contact

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("home-page");useHead({  title: content.metaTitle.raw,  meta: [    {      name: "description",      content: content.metaDescription.raw,    },  ],});</script><template>  <h1><content.title /></h1></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("about-page");useHead({  title: content.metaTitle.raw, // プリミティブ文字列アクセスには .raw を使用  meta: [    {      name: "description",      content: content.metaDescription.raw, // プリミティブな文字列アクセスには .raw を使用    },  ],});</script><template>  <h1><content.title /></h1></template>

<script setup lang="ts">import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";interface Props {  href: string;  locale?: string;}const props = defineProps<Props>();const { locale: currentLocale } = useLocale();// 最終的なパスを計算するconst finalPath = computed(() => {  // 1. リンクが外部かどうかをチェック  const isExternal = /^https?:\/\//.test(props.href || "");  // 2. 外部の場合はそのまま返す（NuxtLinkが<a>タグの生成を処理）  if (isExternal) return props.href;  // 3. 内部リンクの場合、URLをローカライズする  const targetLocale = props.locale || currentLocale.value;  return getLocalizedUrl(props.href, targetLocale);});</script><template>  <NuxtLink :to="finalPath" v-bind="$attrs">    <slot />  </NuxtLink></template>

<script setup lang="ts">import Links from "~/components/Links.vue";import LocaleSwitcher from "~/components/LocaleSwitcher.vue";</script><template>  <div>    <header>      <LocaleSwitcher />    </header>    <main>      <slot />    </main>    <Links href="/">ホーム</Links>    <Links href="/about">アバウト</Links>  </div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";// useHeadはNuxtで自動インポートされますconst content = useIntlayer("about-page");useHead({  title: content.metaTitle.raw, // プリミティブな文字列アクセスには .raw を使用  meta: [    {      name: "description",      content: content.metaDescription.raw, // プリミティブな文字列アクセスには .raw を使用    },  ],});</script><template>  <h1><content.title /></h1></template>

# Intlayerによって生成されたファイルを無視する.intlayer