Перевод вашего сайта на Nuxt и Vue с использованием Intlayer | Интернационализация (i18n)

Содержание

Почему Intlayer лучше альтернатив?

По сравнению с основными решениями, такими как @nuxtjs/i18n или i18next, Intlayer — это решение со встроенными оптимизациями, такими как:

Пошаговое руководство по настройке Intlayer в приложении Nuxt

Смотрите Шаблон приложения на GitHub.

1. 1

   Установка зависимостей

   Установите необходимые пакеты с помощью npm:

   bash

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

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

   • intlayer

     Основной пакет, предоставляющий инструменты интернационализации для управления конфигурацией, перевода, объявления контента, транспиляции и CLI-команд.

   • vue-intlayer Пакет, который интегрирует Intlayer с приложением Vue. Он содержит composables для Vue-компонентов.

   • nuxt-intlayer Модуль Nuxt, который интегрирует Intlayer с приложениями Nuxt. Он обеспечивает автоматическую настройку, middleware для определения локали, управление cookie и перенаправление URL.

2. 2

   Конфигурация вашего проекта

   Создайте файл конфигурации для настройки языков вашего приложения:

   intlayer.config.ts

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // Ваши другие локали
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;

   Через этот конфигурационный файл вы можете настроить локализованные URL, перенаправление через middleware, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к документации по конфигурации.

3. 3

   Интеграция Intlayer в вашу конфигурацию Nuxt

   Добавьте модуль intlayer в вашу конфигурацию Nuxt:

   nuxt.config.ts

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   import { defineNuxtConfig } from "nuxt/config";export default defineNuxtConfig({  // ... Ваша существующая конфигурация Nuxt  modules: ["nuxt-intlayer"],});

   Модуль nuxt-intlayer автоматически обрабатывает интеграцию Intlayer с Nuxt. Он настраивает построение деклараций контента, отслеживает файлы в режиме разработки, предоставляет middleware для определения локали и управляет локализованной маршрутизацией.

4. 4

   Объявите ваш контент

   Создайте и управляйте вашими декларациями контента для хранения переводов:

   Ваши декларации контента могут быть определены в любом месте вашего приложения, при условии, что они включены в директорию contentDir (по умолчанию, ./src). И соответствуют расширению файла декларации контента (по умолчанию, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   Для получения дополнительной информации обратитесь к документации по декларации контента.

5. 5

   Использование Intlayer в вашем коде

   Получайте доступ к вашим словарям контента по всему приложению Nuxt, используя композицию useIntlayer:

   components/HelloWorld.vue

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

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

   Доступ к контенту в Intlayer

   Intlayer предлагает различные API для доступа к вашему контенту:

   • Синтаксис на основе компонентов (рекомендуется): Используйте синтаксис <myContent /> или <Component :is="myContent" /> для рендеринга контента как узла Intlayer. Это обеспечивает бесшовную интеграцию с Визуальным редактором и CMS.

   • Синтаксис на основе строк: Используйте {{ myContent }}, чтобы отобразить контент как простой текст, без поддержки Визуального редактора.

   • Синтаксис сырого HTML: Используйте <div v-html="myContent" />, чтобы отобразить контент как сырой HTML, без поддержки Визуального редактора.

   • Синтаксис деструктуризации: Композиция useIntlayer возвращает Proxy с контентом. Этот прокси можно деструктурировать для доступа к контенту, сохраняя реактивность.

     • Используйте const content = useIntlayer("myContent"); и {{ content.myContent }} / <content.myContent />.
     • Или используйте const { myContent } = useIntlayer("myContent"); и {{ myContent}} / <myContent/> для деструктуризации контента.
6. 6

   Изменение языка вашего контента

   Необязательно

   Чтобы изменить язык вашего контента, вы можете использовать функцию setLocale, предоставляемую композаблом useLocale. Эта функция позволяет установить локаль приложения и обновить контент соответственно.

   Создайте компонент для переключения между языками с помощью NuxtLink. Использование ссылок вместо кнопок для переключения локали, это лучшая практика для SEO и обнаруживаемости страниц, так как это позволяет поисковым системам сканировать и индексировать все локализованные версии ваших страниц:

   components/LocaleSwitcher.vue

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   <script setup lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Nuxt автоматически импортирует useRouteconst 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>

   Использование NuxtLink с правильными атрибутами href (через getLocalizedUrl) гарантирует, что поисковые системы смогут обнаружить все языковые варианты ваших страниц. Это предпочтительнее, чем переключение локали только с помощью JavaScript, которое поисковые роботы могут не распознать.

   Затем настройте ваш app.vue для использования layouts:

   app.vue

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

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

7. 7

   Добавьте локализованный роутинг в ваше приложение

   Необязательно

   Nuxt автоматически обрабатывает локализованный роутинг при использовании модуля nuxt-intlayer. Это создает маршруты для каждого языка автоматически на основе структуры вашего каталога страниц.

   Пример:

   plaintext

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

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

   Чтобы создать локализованные страницы, просто создайте ваши Vue-файлы в директории pages/. Вот два примера страниц:

   Главная страница (pages/index.vue):

   pages/index.vue

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

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

   Страница "О нас" (pages/about.vue):

   pages/about.vue

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

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

   Примечание: useHead автоматически импортируется в Nuxt. Вы можете получать доступ к значениям контента, используя либо .value (реактивный), либо .raw (примитивная строка), в зависимости от ваших потребностей.

   Модуль nuxt-intlayer автоматически:

   • Определяет предпочитаемую локаль пользователя
   • Обрабатывает переключение локали через URL
   • Устанавливает соответствующий атрибут <html lang="">
   • Управляет куки локали
   • Перенаправляет пользователей на соответствующий локализованный URL
8. 8

   Создание локализованного компонента ссылок

   Необязательно

   Чтобы навигация вашего приложения учитывала текущую локаль, вы можете создать пользовательский компонент Links. Этот компонент автоматически добавляет префикс текущего языка к внутренним URL, что важно для SEO и обнаруживаемости страниц.

   components/Links.vue

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

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

   Затем используйте этот компонент по всему вашему приложению:

   layouts/default.vue

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

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

   Используя NuxtLink с локализованными путями, вы обеспечиваете:

   • Поисковые системы могут сканировать и индексировать все языковые версии ваших страниц
   • Пользователи могут напрямую делиться локализованными URL
   • История браузера корректно работает с URL, содержащими префикс локали

9. 9

   Работа с метаданными и SEO

   Необязательно

   Nuxt предоставляет отличные возможности для SEO через композицию useHead (автоматически импортируется). Вы можете использовать Intlayer для обработки локализованных метаданных, используя аксессоры .raw или .value для получения примитивного строкового значения:

   pages/about.vue

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   <script setup lang="ts">import { useIntlayer } from "vue-intlayer";// useHead автоматически импортируется в Nuxtconst 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>

   В качестве альтернативы, вы можете использовать функцию import { getIntlayer } from "intlayer", чтобы получить контент без реактивности Vue.

   Доступ к значениям контента:

   • Используйте .raw для получения примитивного строкового значения (не реактивного)
   • Используйте .value для получения реактивного значения
   • Используйте синтаксис компонента <content.key /> для поддержки Визуального Редактора

   Создайте соответствующее объявление контента:

   pages/about-page.content.ts

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   import { t, type Dictionary } from "intlayer";
   
   const aboutPageContent = {
     key: "about-page",
     content: {
       metaTitle: t({
         en: "About Us - My Company",
         fr: "À Propos - Ma Société",
         es: "Acerca de Nosotros - Mi Empresa",
       }),
       metaDescription: t({
         en: "Узнайте больше о нашей компании и нашей миссии",
         fr: "En savoir plus sur notre société et notre mission",
         es: "Conozca más sobre nuestra empresa y nuestra misión",
       }),
       title: t({
         en: "О нас",
         fr: "À Propos",
         es: "Acerca de Nosotros",
       }),
     },
   } satisfies Dictionary;
   
   export default aboutPageContent;

(Необязательно) Шаг 6b: Создайте Layout с навигацией

Layouts в Nuxt позволяют определить общую структуру для ваших страниц. Создайте layout по умолчанию, который включает переключатель локали и навигацию:

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

Компонент Links (показан ниже) гарантирует, что внутренние навигационные ссылки автоматически локализуются.

Конфигурация Git

Рекомендуется игнорировать файлы, сгенерированные Intlayer. Это позволит избежать их коммита в ваш Git-репозиторий.

Для этого вы можете добавить следующие инструкции в ваш файл .gitignore:

# Игнорировать файлы, сгенерированные Intlayer.intlayer

Расширение VS Code

Чтобы улучшить ваш опыт разработки с Intlayer, вы можете установить официальное расширение Intlayer VS Code Extension.

Установить из VS Code Marketplace

Это расширение предоставляет:

• Автозаполнение ключей переводов.
• Обнаружение ошибок в реальном времени для отсутствующих переводов.
• Встроенный просмотр переведённого контента.
• Быстрые действия для лёгкого создания и обновления переводов.

Для получения дополнительной информации о том, как использовать расширение, обратитесь к документации Intlayer VS Code Extension.

Продвинуться дальше

Чтобы продвинуться дальше, вы можете реализовать визуальный редактор или вынести ваш контент, используя CMS.