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

Зміст

Що таке Intlayer?

Intlayer — інноваційна відкрита бібліотека для інтернаціоналізації (i18n), створена для спрощення підтримки багатомовності в сучасних вебдодатках.

За допомогою Intlayer ви можете:

• Легко керувати перекладами використовуючи декларативні словники на рівні компонентів.
• Динамічно локалізувати метадані, маршрути та контент.
• Забезпечити підтримку TypeScript за допомогою автоматично згенерованих типів, що покращує автозаповнення та виявлення помилок.
• Отримати переваги від розширених функцій, таких як динамічне виявлення локалі та перемикання.

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

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

Крок 1: Встановлення залежностей

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

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: Конфігурація вашого проєкту

Створіть файл конфігурації, щоб налаштувати мови вашого застосунку:

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: Інтеграція Intlayer у вашу конфігурацію Nuxt

Додайте модуль intlayer до вашої конфігурації Nuxt:

import { defineNuxtConfig } from "nuxt/config";export default defineNuxtConfig({  // ... Your existing Nuxt configuration  modules: ["nuxt-intlayer"],});

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

Крок 4: Оголосіть свій контент

Створюйте та керуйте деклараціями контенту для збереження перекладів:

import { type Dictionary, t } from "intlayer";const content = {  key: "home-page",  content: {    title: t({      uk: "Привіт, світ",      en: "Hello world",      fr: "Bonjour le monde",      es: "Hola mundo",    }),    metaTitle: t({      uk: "Ласкаво просимо | Мій додаток",      en: "Welcome | My Application",      fr: "Bienvenue | Mon Application",      es: "Bienvenido | Mi Aplicación",    }),    metaDescription: t({      uk: "Дізнайтеся про багатомовну домашню сторінку вашого Nuxt-додатка, що працює на Intlayer.",      en: "Discover your multilingual Nuxt app homepage powered by Intlayer.",      fr: "Découvrez la page d'accueil multilingue de votre application Nuxt propulsée par Intlayer.",      es: "Descubre la página de inicio multilingüe de tu aplicación Nuxt impulsada por Intlayer.",    }),  },} satisfies Dictionary;export default content;

Оголошення вашого контенту можуть бути визначені будь-де у вашому застосунку, за умови, що вони знаходяться в директорії contentDir (за замовчуванням ./src). І відповідають розширенню файлу оголошення контенту (за замовчуванням .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

Для детальнішої інформації див. документацію щодо оголошення контенту.

Крок 5: Використання Intlayer у вашому коді

Отримуйте доступ до ваших словників контенту в усьому Nuxt-застосунку за допомогою композиції useIntlayer:

<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: Змінити мову вашого контенту

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

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

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

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

(Необов'язково) Крок 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 (показаний нижче) забезпечує автоматичну локалізацію внутрішніх навігаційних посилань.

(Необов'язково) Крок 7: Додайте локалізовану маршрутизацію до вашого застосунку

Nuxt автоматично налаштовує локалізовану маршрутизацію при використанні модуля nuxt-intlayer. Це створює маршрути для кожної мови автоматично на основі структури каталогу pages.

Приклад:

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

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

<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: Створення локалізованого компонента посилань

Щоб гарантувати, що навігація вашого застосунку відповідає поточній локалі, ви можете створити власний компонент Links. Цей компонент автоматично додає префікс із поточною мовою до внутрішніх URL-адрес, що важливо для SEO та видимості сторінок у пошукових системах.

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

Використовуючи NuxtLink з локалізованими шляхами, ви гарантуєте, що:

• Пошукові системи можуть обходити та індексувати всі мовні версії ваших сторінок
• Користувачі можуть безпосередньо ділитися локалізованими URL-адресами
• Історія браузера коректно працює з URL-адресами, що мають префікс локалі

(За бажанням) Крок 9: Обробка метаданих та SEO

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

<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

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

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;

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

Рекомендується ігнорувати файли, згенеровані Intlayer. Це дозволяє уникнути їх коміту в ваш репозиторій Git.

Для цього ви можете додати такі інструкції до файлу .gitignore:

# Ігноруйте файли, згенеровані Intlayer.intlayer

Розширення VS Code

Щоб покращити ваш досвід розробки з Intlayer, ви можете встановити офіційне розширення Intlayer для VS Code.

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

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

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

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

Далі

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