Intlayer kullanarak Nuxt ve Vue web sitenizi çevirin | Uluslararasılaştırma (i18n)

İçindekiler

Intlayer Nedir?

Intlayer, modern web uygulamalarında çok dilli desteği basitleştirmek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma (i18n) kütüphanesidir.

Intlayer ile şunları yapabilirsiniz:

• Bileşen seviyesinde deklaratif sözlükler kullanarak çevirileri kolayca yönetin.
• Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
• Otomatik oluşturulan tiplerle TypeScript desteğini sağlayarak otomatik tamamlama ve hata tespitini geliştirin.
• Dinamik dil algılama ve değiştirme gibi gelişmiş özelliklerden faydalanın.

Nuxt Uygulamasında Intlayer Kurulumu Adım Adım Rehber

GitHub'da Uygulama Şablonunu inceleyin.

Adım 1: Bağımlılıkları Yükleyin

Gerekli paketleri npm kullanarak yükleyin:

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

• intlayer

  Konfigürasyon yönetimi, çeviri, içerik beyanı, transpile etme ve CLI komutları için uluslararasılaştırma araçları sağlayan temel paket.

• vue-intlayer Intlayer'ı Vue uygulamasıyla entegre eden paket. Vue bileşenleri için composables sağlar.

• nuxt-intlayer Nuxt uygulamalarıyla Intlayer'ı entegre eden Nuxt modülü. Otomatik kurulum, yerel algılama için middleware, çerez yönetimi ve URL yönlendirmesi sağlar.

Adım 2: Projenizin yapılandırması

Uygulamanızın dillerini yapılandırmak için bir konfigürasyon dosyası oluşturun:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Diğer dilleriniz
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'leri, middleware yönlendirmesini, çerez isimlerini, içerik bildirimlerinizin konumunu ve uzantısını ayarlayabilir, Intlayer loglarını konsolda devre dışı bırakabilir ve daha fazlasını yapabilirsiniz. Mevcut parametrelerin tam listesi için yapılandırma dokümantasyonuna bakınız.

Adım 3: Intlayer'ı Nuxt Yapılandırmanıza Entegre Edin

Intlayer modülünü Nuxt yapılandırmanıza ekleyin:

import { defineNuxtConfig } from "nuxt/config";export default defineNuxtConfig({  // ... Mevcut Nuxt yapılandırmanız  modules: ["nuxt-intlayer"],});

nuxt-intlayer modülü, Intlayer'ın Nuxt ile entegrasyonunu otomatik olarak yönetir. İçerik bildirimlerinin oluşturulmasını ayarlar, geliştirme modunda dosyaları izler, yerel tespit için middleware sağlar ve yerelleştirilmiş yönlendirmeyi yönetir.

Adım 4: İçeriğinizi Bildirin

Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:

İçerik bildirimleriniz, uygulamanızın herhangi bir yerinde tanımlanabilir, yeter ki contentDir dizini içinde yer alsın (varsayılan olarak ./src). Ve içerik bildirim dosya uzantısıyla eşleşsin (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,cjs}).

Daha fazla detay için içerik bildirim dokümantasyonuna bakınız.

Adım 5: Intlayer'ı Kodunuzda Kullanın

Nuxt uygulamanızın her yerinde içerik sözlüklerinize useIntlayer composable'ı ile erişin:

<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'da İçeriğe Erişim

Intlayer, içeriğinize erişmek için farklı API'ler sunar:

• Bileşen tabanlı sözdizimi (önerilen): <myContent /> veya <Component :is="myContent" /> sözdizimini kullanarak içeriği bir Intlayer Node olarak render edin. Bu, Visual Editor ve CMS ile sorunsuz bir şekilde entegre olur.

• Metin tabanlı sözdizimi:
  İçeriği Visual Editor desteği olmadan düz metin olarak render etmek için {{ myContent }} kullanın.

• Ham HTML sözdizimi:
  İçeriği Visual Editor desteği olmadan ham HTML olarak render etmek için <div v-html="myContent" /> kullanın.

• Yapı bozma (Destructuration) sözdizimi:
  useIntlayer composable, içerikle birlikte bir Proxy döner. Bu proxy, reaktiviteyi koruyarak içeriğe erişmek için yapı bozma yöntemiyle ayrıştırılabilir.

  • const content = useIntlayer("myContent"); kullanın ve {{ content.myContent }} / <content.myContent /> şeklinde render edin.
  • Ya da içeriği yapı bozma ile almak için const { myContent } = useIntlayer("myContent"); kullanın ve {{ myContent}} / <myContent/> şeklinde render edin.

(İsteğe Bağlı) Adım 6: İçeriğinizin dilini değiştirin

İçeriğinizin dilini değiştirmek için useLocale composable tarafından sağlanan setLocale fonksiyonunu kullanabilirsiniz. Bu fonksiyon, uygulamanın yerel ayarını belirlemenize ve içeriği buna göre güncellemenize olanak tanır.

NuxtLink kullanarak diller arasında geçiş yapmak için bir bileşen oluşturun. Dil değiştirme için butonlar yerine link kullanmak, SEO ve sayfa keşfedilebilirliği açısından en iyi uygulamadır, çünkü bu sayede arama motorları sayfalarınızın tüm yerelleştirilmiş versiyonlarını tarayabilir ve indeksleyebilir.

<script setup lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Nuxt useRoute'u otomatik olarak import ederconst 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'i uygun href öznitelikleriyle ( getLocalizedUrl aracılığıyla) kullanmak, arama motorlarının sayfalarınızın tüm dil varyantlarını keşfetmesini sağlar. Bu, arama motoru tarayıcılarının takip etmeyebileceği yalnızca JavaScript ile yapılan dil değiştirmeye tercih edilir.

Sonra, app.vue dosyanızı layout kullanacak şekilde ayarlayın:

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

(İsteğe Bağlı) Adım 6b: Navigasyonlu Bir Layout Oluşturun

Nuxt layout'ları, sayfalarınız için ortak bir yapı tanımlamanıza olanak tanır. Dil değiştirici ve navigasyonu içeren varsayılan bir layout oluşturun:

<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="/">Ana Sayfa</Links>    <Links href="/about">Hakkında</Links>  </div></template>

Links bileşeni (aşağıda gösterilmiştir), dahili navigasyon bağlantılarının otomatik olarak yerelleştirilmesini sağlar.

(İsteğe Bağlı) Adım 7: Uygulamanıza yerelleştirilmiş Yönlendirme ekleyin

Nuxt, nuxt-intlayer modülünü kullandığınızda yerelleştirilmiş yönlendirmeyi otomatik olarak yönetir. Bu, sayfalar dizin yapınıza dayanarak her dil için otomatik olarak rotalar oluşturur.

Örnek:

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

Yerelleştirilmiş sayfalar oluşturmak için, pages/ dizininde Vue dosyalarınızı oluşturmanız yeterlidir. İşte iki örnek sayfa:

Ana Sayfa (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>

Hakkında Sayfası (pages/about.vue):

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("about-page");useHead({  title: content.metaTitle.raw, // Primitif string erişimi için .raw kullanın  meta: [    {      name: "description",      content: content.metaDescription.raw, // Primitif string erişimi için .raw kullanın    },  ],});</script><template>  <h1><content.title /></h1></template>

Not: useHead Nuxt'ta otomatik olarak içe aktarılır. İçerik değerlerine ihtiyaçlarınıza bağlı olarak .value (reaktif) veya .raw (primitif string) ile erişebilirsiniz.

nuxt-intlayer modülü otomatik olarak:

• Kullanıcının tercih ettiği yerel dili algılar
• URL üzerinden yerel dil değişimini yönetir
• Uygun <html lang=""> özniteliğini ayarlar
• Yerel dil çerezlerini yönetir
• Kullanıcıları uygun yerelleştirilmiş URL'ye yönlendirir

(İsteğe Bağlı) Adım 8: Yerelleştirilmiş Bir Link Bileşeni Oluşturma

Uygulamanızın navigasyonunun mevcut locale'a uygun olmasını sağlamak için özel bir Links bileşeni oluşturabilirsiniz. Bu bileşen, dahili URL'lerin önüne otomatik olarak mevcut dili ekler; bu, SEO ve sayfa keşfedilebilirliği için çok önemlidir.

<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();// Son yolu hesaplaconst finalPath = computed(() => {  // 1. Linkin harici olup olmadığını kontrol et  const isExternal = /^https?:\/\//.test(props.href || "");  // 2. Eğer harici ise, olduğu gibi döndür (NuxtLink <a> etiketi oluşturmayı yönetir)  if (isExternal) return props.href;  // 3. Eğer dahili ise, URL'yi yerelleştir  const targetLocale = props.locale || currentLocale.value;  return getLocalizedUrl(props.href, targetLocale);});</script><template>  <NuxtLink :to="finalPath" v-bind="$attrs">    <slot />  </NuxtLink></template>

Sonra bu bileşeni uygulamanızın her yerinde kullanabilirsiniz:

<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="/">Anasayfa</Links>    <Links href="/about">Hakkında</Links>  </div></template>

NuxtLink'i yerelleştirilmiş yollarla kullanarak şunları sağlarsınız:

• Arama motorları sayfalarınızın tüm dil versiyonlarını tarayabilir ve dizine ekleyebilir
• Kullanıcılar yerelleştirilmiş URL'leri doğrudan paylaşabilir
• Tarayıcı geçmişi, dil önekli URL'lerle doğru şekilde çalışır

(İsteğe Bağlı) Adım 9: Meta Verileri ve SEO'yu Yönetme

Nuxt, useHead composable (otomatik olarak içe aktarılır) aracılığıyla mükemmel SEO yetenekleri sunar. Intlayer'ı, yerelleştirilmiş meta verileri yönetmek için .raw veya .value erişicisini kullanarak temel string değerini almak için kullanabilirsiniz:

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";// useHead Nuxt'ta otomatik olarak içe aktarılırconst content = useIntlayer("about-page");useHead({  title: content.metaTitle.raw, // Temel string erişimi için .raw kullanın  meta: [    {      name: "description",      content: content.metaDescription.raw, // İlkel string erişimi için .raw kullanın    },  ],});</script><template>  <h1><content.title /></h1></template>

Alternatif olarak, Vue reaktivitesi olmadan içeriği almak için import { getIntlayer } from "intlayer" fonksiyonunu kullanabilirsiniz.

İçerik değerlerine erişim:

• İlkel string değeri almak için .raw kullanın (reaktif değil)
• Reaktif değeri almak için .value kullanın
• Görsel Editör desteği için <content.key /> bileşen sözdizimini kullanın

İlgili içerik bildirimi oluşturun:

import { t, type Dictionary } from "intlayer";

const aboutPageContent = {
  key: "about-page",
  content: {
    metaTitle: t({
      en: "Hakkımızda - Şirketim",
      fr: "À Propos - Ma Société",
      es: "Acerca de Nosotros - Mi Empresa",
    }),
    metaDescription: t({
      en: "Şirketimiz ve misyonumuz hakkında daha fazla bilgi edinin",
      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: "Hakkımızda",
      fr: "À Propos",
      es: "Acerca de Nosotros",
    }),
  },
} satisfies Dictionary;

export default aboutPageContent;

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir. Bu, bu dosyaların Git deposuna commit edilmesini önler.

Bunu yapmak için .gitignore dosyanıza aşağıdaki talimatları ekleyebilirsiniz:

# Intlayer tarafından oluşturulan dosyaları göz ardı et.intlayer

VS Code Eklentisi

Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi Intlayer VS Code Uzantısını yükleyebilirsiniz.

VS Code Marketplace'ten Yükleyin

Bu uzantı şunları sağlar:

• Çeviri anahtarları için Otomatik tamamlama.
• Eksik çeviriler için Gerçek zamanlı hata tespiti.
• Çevrilmiş içeriğin Satır içi önizlemeleri.
• Çevirileri kolayca oluşturup güncellemek için Hızlı işlemler.

Uzantının nasıl kullanılacağı hakkında daha fazla bilgi için Intlayer VS Code Uzantısı dokümantasyonuna bakabilirsiniz.

Daha İleri Gitmek

Daha ileri gitmek için, görsel editörü uygulayabilir veya içeriğinizi CMS kullanarak dışa aktarabilirsiniz.