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