Intlayer와 Vite, Vue로 국제화(i18n) 시작하기

<script setup lang="ts">import { ref } from "vue";import { useIntlayer } from "vue-intlayer";defineProps({  msg: String,});const {  count,  edit,  checkOut,  officialStarter,  learnMore,  vueDocs,  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://vuejs.org/guide/quick-start.html#local" target="_blank"      >create-vue</a    >, <officialStarter />  </p>  <p>    <learnMore />    <a      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"      target="_blank"      ><vueDocs /></a    >.  </p>  <p class="read-the-docs"><readTheDocs /></p>  <p class="read-the-docs">{{ readTheDocs }}</p></template>

<template>  <div class="locale-switcher">    <select v-model="selectedLocale" @change="changeLocale">      <option v-for="loc in availableLocales" :key="loc" :value="loc">        {{ getLocaleName(loc) }}      </option>    </select>  </div></template><script setup lang="ts">import { ref, watch } from "vue";import { getLocaleName } from "intlayer";import { useLocale } from "vue-intlayer";// 로케일 정보와 setLocale 함수 가져오기const { locale, availableLocales, setLocale } = useLocale();// ref로 선택된 로케일 추적const selectedLocale = ref(locale.value);// 선택이 변경될 때 로케일 업데이트const changeLocale = () => setLocale(selectedLocale.value);// selectedLocale을 전역 locale과 동기화 유지watch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";import HelloWorld from "@components/HelloWorld.vue";import LocaleSwitcher from "@components/LocaleSwitcher.vue";import { ref, watch } from "vue";const content = useIntlayer("app"); // 관련 intlayer 선언 파일 생성</script><template>  <div>    <LocaleSwitcher />    <a href="https://vite.dev" target="_blank">      <img src="/vite.svg" class="logo" :alt="content.viteLogo" />    </a>    <a href="https://vuejs.org/" target="_blank">      <img src="./assets/vue.svg" class="logo vue" :alt="content.vueLogo" />    </a>  </div>  <HelloWorld :msg="content.title" /></template>

<script setup lang="ts">import LocaleSwitcher from "@components/LocaleSwitcher.vue";</script><template>  <nav>    <LocaleSwitcher />  </nav>  <RouterView /></template>

<template>  <div class="locale-switcher">    <select v-model="selectedLocale" @change="changeLocale">      <option v-for="loc in availableLocales" :key="loc" :value="loc">        {{ getLocaleName(loc) }}      </option>    </select>  </div></template><script setup lang="ts">import { ref, watch } from "vue";import { useRouter } from "vue-router";import { Locales, getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Vue Router 가져오기const router = useRouter();// 로케일 정보와 setLocale 함수 가져오기const { locale, availableLocales, setLocale } = useLocale({  onLocaleChange: (newLocale) => {    // 현재 경로를 가져와서 로케일이 적용된 URL 생성    const currentPath = router.currentRoute.value.fullPath;    const localizedPath = getLocalizedUrl(currentPath, newLocale);    // 페이지를 새로고침하지 않고 로케일이 적용된 경로로 이동    router.push(localizedPath);  },});// 선택된 로케일을 ref로 추적const selectedLocale = ref(locale.value);// 선택이 변경될 때 로케일을 업데이트합니다.const changeLocale = () => {  setLocale(selectedLocale.value);};// selectedLocale을 전역 로케일과 동기화 상태로 유지합니다.watch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

<script setup lang="ts">import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";// 현재 로케일에 따라 HTML 속성을 적용합니다useI18nHTMLAttributes();</script><template>  <!-- 앱 템플릿 --></template>

<template>  <a :href="localizedHref" v-bind="$attrs">    <slot />  </a></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  href: {    type: String,    required: true,  },});const { locale } = useLocale();// 링크가 외부 링크인지 확인const isExternalLink = computed(() => /^https?:\/\//.test(props.href || ""));// 내부 링크에 대해 로컬라이즈된 href 생성const localizedHref = computed(() =>  isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value));</script>

<template>  <router-link :to="localizedTo" v-bind="$attrs">    <slot />  </router-link></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  to: {    type: [String, Object],    required: true,  },});const { locale } = useLocale();// router-link용으로 지역화된 to-prop 생성const localizedTo = computed(() => {  if (typeof props.to === "string") {    return getLocalizedUrl(props.to, locale.value);  } else {    // 'to'가 객체인 경우, path 속성을 현지화합니다.    return {      ...props.to,      path: getLocalizedUrl(props.to.path ?? "/", locale.value),    };  }});</script>

<template>  <div>    <!-- Vue 라우터 -->    <RouterLink to="/">루트</RouterLink>    <RouterLink to="/home">홈</RouterLink>    <!-- 기타 -->    <Link href="/">루트</Link>    <Link href="/home">홈</Link>  </div></template><script setup lang="ts">import Link from "@components/Link.vue";import RouterLink from "@components/RouterLink.vue";</script>

<template>  <div>    <myMarkdownContent />  </div></template><script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myMarkdownContent } = useIntlayer("my-component");</script>