Перекладіть ваш Nuxt і Vue вебсайт за допомогою Intlayer | Інтернаціоналізація (i18n)

Зміст

Чому варто обрати Intlayer, а не альтернативи?

Порівняно з основними рішеннями, такими як @nuxtjs/i18n або i18next, Intlayer — це рішення, яке постачається з інтегрованою оптимізацією, як-от:

Покроковий посібник налаштування Intlayer у Nuxt-застосунку

Перегляньте репозиторій Application Template на GitHub: https://github.com/aymericzip/intlayer-nuxt-4-template

1. 1

   Встановлення залежностей

   Встановіть необхідні пакети за допомогою відповідного пакетного менеджера:

   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({  // ... Your existing Nuxt configuration  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. Це безшовно інтегрується з Visual Editor та CMS.

   • Строковий синтаксис: Використовуйте {{ myContent }} щоб вивести контент як простий текст, без підтримки Visual Editor.

   • Синтаксис сирого HTML: Використовуйте <div v-html="myContent" /> щоб рендерити контент як сирий HTML, без підтримки Visual Editor.

   • Синтаксис деструктуризації: Composable useIntlayer повертає Proxy з контентом. Цей Proxy можна деструктурувати, щоб отримати доступ до контенту, зберігаючи реактивність.
   • Використовуйте const content = useIntlayer("myContent"); і {{ content.myContent }} / <content.myContent />.
   • Або використовуйте const { myContent } = useIntlayer("myContent"); і {{ myContent}} / <myContent/>, щоб деструктурувати контент.
6. 6

   Змінити мову вашого контенту

   Необов'язково

   Щоб змінити мову вашого контенту, ви можете використовувати функцію setLocale, яку надає composable useLocale. Ця функція дозволяє встановити локаль додатка та відповідно оновити контент.

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

   components/LocaleSwitcher.vue

   Копіювати вміст

   Копіювати код

   Скопіюйте код у буфер обміну

   <script setup lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Nuxt auto-imports 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. Це створює маршрути для кожної мови автоматично на основі структури каталогу pages.

   Приклад:

   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>

   Сторінка About (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="">
   • Керує cookie локалі
   • Перенаправляє користувачів на відповідний локалізований 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 /> для підтримки Visual Editor

   Створіть відповідну декларацію контенту:

   pages/about-page.content.ts

   Копіювати вміст

   Копіювати код

   Скопіюйте код у буфер обміну

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

(Необов'язково) Крок 6b: Створіть layout з навігацією

Nuxt layouts дозволяють визначити спільну структуру для ваших сторінок. Створіть default layout, який включає locale switcher та навігацію:

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

Встановити з VS Code Marketplace

Це розширення надає:

• Автозавершення для ключів перекладу.
• Виявлення помилок у реальному часі для відсутніх перекладів.
• Вбудований попередній перегляд перекладеного вмісту.
• Швидкі дії для швидкого створення та оновлення перекладів.

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

Далі

Щоб просунутися далі, ви можете реалізувати візуальний редактор або винести свій контент, використовуючи CMS.