Intlayer ve Nuxt ile uluslararasılaştırma (i18n) başlangıç kılavuzu

GitHub'da Uygulama Şablonuna bakın.

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 düzeyinde bildirimsel sözlükler kullanarak çevirileri kolayca yönetin.
• Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
• Otomatik tamamlama ve hata algılama ile TypeScript desteği sağlayın.
• Dinamik yerel algılama ve anahtarlama gibi gelişmiş özelliklerden yararlanın.

Nuxt Uygulamasında Intlayer Kurulumu Adım Adım Kılavuzu

Adım 1: Bağımlılıkları Kurma

Gerekli paketleri npm kullanarak kurun:

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

• intlayer

  Yapılandırma yönetimi, çeviri, içerik bildirimi, derleme ve CLI komutları için uluslararasılaştırma araçları sağlayan çekirdek paket.

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

• nuxt-intlayer Intlayer'ı Nuxt uygulamaları ile 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: Projenizi Yapılandırma

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

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Diğer yerel ayarlarınız    ],    defaultLocale: Locales.ENGLISH,  },  content: {    contentDir: ["."], // Çünkü varsayılan olarak Intayer, içerik bildirim dosyalarını `./src` dizininden izleyecek  },};export default config;

Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'ler, middleware yönlendirmesi, çerez adları, içerik bildirimlerinizin konumu ve uzantısı, konsolda Intlayer günlüklerinin devre dışı bırakılması ve daha fazlasını ayarlayabilirsiniz. Kullanılabilir parametrelerin tam listesi için yapılandırma dokümantasyonuna bakın.

Adım 3: Nuxt Yapılandırmanızda Intlayer'ı Entegre Etme

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 bildirim oluşturmasını ayarlar, geliştirme modunda dosyaları izler, yerel algılama 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:

import { t, type Dictionary } from "intlayer";const helloWorldContent = {  key: "helloworld",  content: {    count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),    edit: t({      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",    }),    checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),    nuxtIntlayer: t({      en: "Nuxt Intlayer documentation",      fr: "Documentation de Nuxt Intlayer",      es: "Documentación de Nuxt Intlayer",    }),    learnMore: t({      en: "Learn more about Nuxt in the ",      fr: "En savoir plus sur Nuxt dans la ",      es: "Aprenda más sobre Nuxt en la ",    }),    nuxtDocs: t({      en: "Nuxt Documentation",      fr: "Documentation Nuxt",      es: "Documentación de Nuxt",    }),    readTheDocs: t({      en: "Click on the Nuxt logo to learn more",      fr: "Cliquez sur le logo Nuxt pour en savoir plus",      es: "Haga clic en el logotipo de Nuxt para obtener más información",    }),  },} satisfies Dictionary;export default helloWorldContent;

İçerik bildirimleriniz, contentDir dizinine dahil edildiği sürece uygulamanızın herhangi bir yerinde tanımlanabilir (varsayılan olarak, ./src). Ve içerik bildirim dosyası uzantısıyla eşleşmelidir (varsayılan olarak, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

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

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

useIntlayer composable'ını kullanarak Nuxt uygulamanız boyunca içerik sözlüklerinize 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): İçeriği Intlayer Düğümü olarak işlemek için <myContent /> veya <Component :is="myContent" /> sözdizimini kullanın. Bu, Görsel Düzenleyici ve CMS ile sorunsuz bir şekilde entegre olur.

• Dize tabanlı sözdizimi: Görsel Düzenleyici desteği olmadan içeriği düz metin olarak işlemek için {{ myContent }} kullanın.

• Ham HTML sözdizimi: Görsel Düzenleyici desteği olmadan içeriği ham HTML olarak işlemek için <div v-html="myContent" /> kullanın.

• Yapılandırma sözdizimi: useIntlayer composable'ı, içeriği döndüren bir Proxy döndürür. Bu proxy, reaktiviteyi korurken içeriğe erişmek için yapılandırılabilir.

  • const content = useIntlayer("myContent"); Ve {{ content.myContent }} / <content.myContent /> kullanın.
  • Veya const { myContent } = useIntlayer("myContent"); Ve {{ myContent}} / <myContent/> kullanarak içeriği yapılandırın.

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

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

Diller arasında geçiş yapmak için bir bileşen oluşturun:

<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";// Yerel ayar bilgilerini ve setLocale fonksiyonunu alınconst { locale, availableLocales, setLocale } = useLocale();// Seçilen yerel ayarı bir ref ile takip edinconst selectedLocale = ref(locale.value);// Seçim değiştiğinde yerel ayarı güncelleyinconst changeLocale = () => setLocale(selectedLocale.value);// Seçilen yerel ayarı küresel yerel ayar ile senkronize tutunwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script></template><style scoped>.locale-switcher {  margin: 1rem 0;}select {  padding: 0.5rem;  border-radius: 0.25rem;  border: 1px solid #ccc;}</style>

Ardından, bu bileşeni sayfalarınızda veya düzeninizde kullanın:

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";import LocaleSwitcher from "~/components/LocaleSwitcher.vue";const content = useIntlayer("app"); // İlgili intlayer bildirim dosyası oluşturun</script><template>  <div>    <header>      <LocaleSwitcher />    </header>    <main>      <NuxtPage />    </main>  </div></template>

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

nuxt-intlayer modülünü kullanırken Nuxt, yerelleştirilmiş yönlendirmeyi otomatik olarak yönetir. Bu, sayfalar dizin yapınıza göre her dil için rotaları otomatik olarak 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ş bir sayfa oluşturmak için, pages/ dizininde Vue dosyalarınızı oluşturun:

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("about");</script><template>  <div>    <h1>{{ content.title }}</h1>    <p>{{ content.description }}</p>  </div></template>

nuxt-intlayer modülü otomatik olarak:

• Kullanıcının tercih ettiği yerel ayarı algılar
• URL aracılığıyla yerel ayar anahtarlamayı yönetir
• Uygun <html lang=""> özelliğini ayarlar
• Yerel ayar çerezlerini yönetir
• Kullanıcıları uygun yerelleştirilmiş URL'ye yönlendirir

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

Uygulamanızın navigasyonunun mevcut yerel ayarı saygı göstermesini sağlamak için, özel bir LocalizedLink bileşeni oluşturabilirsiniz. Bu bileşen, dahili URL'leri otomatik olarak mevcut dille önekler.

<template>  <NuxtLink :to="localizedHref" v-bind="$attrs">    <slot />  </NuxtLink></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  to: {    type: String,    required: true,  },});const { locale } = useLocale();// Bağlantının harici olup olmadığını kontrol edinconst isExternalLink = computed(() => /^https?:\/\//.test(props.to || ""));// Dahili bağlantılar için yerelleştirilmiş bir href oluşturunconst localizedHref = computed(() =>  isExternalLink.value ? props.to : getLocalizedUrl(props.to, locale.value));</script>

Ardından, bu bileşeni uygulamanız boyunca kullanın:

<template>  <div>    <LocalizedLink to="/about">      {{ content.aboutLink }}    </LocalizedLink>    <LocalizedLink to="/contact">      {{ content.contactLink }}    </LocalizedLink>  </div></template><script setup lang="ts">import { useIntlayer } from "vue-intlayer";import LocalizedLink from "~/components/LocalizedLink.vue";const content = useIntlayer("home");</script>

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

Nuxt, mükemmel SEO yetenekleri sağlar. Yerelleştirilmiş meta verileri yönetmek için Intlayer'ı kullanabilirsiniz:

<script setup lang="ts">import { useSeoMeta } from "nuxt/app";import { getIntlayer } from "intlayer";import { useLocale } from "vue-intlayer";const { locale } = useLocale();const content = getIntlayer("about-meta", locale.value);useSeoMeta({  title: content.title,  description: content.description,});</script><template>  <div>    <h1>{{ content.pageTitle }}</h1>    <p>{{ content.pageContent }}</p>  </div></template>

Karşılık gelen içerik bildirimini oluşturun:

import { t, type Dictionary } from "intlayer";import type { useSeoMeta } from "nuxt/app";const aboutMetaContent = {  key: "about-meta",  content: {    title: t({      en: "About Us - My Company",      fr: "À Propos - Ma Société",      es: "Acerca de Nosotros - Mi Empresa",    }),    description: t({      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 nuestra misión",    }),  },} satisfies Dictionary<Parameters<typeof useSeoMeta>[0]>;export default aboutMetaContent;

TypeScript Yapılandırma

Intlayer, TypeScript'ten faydalanmak ve kod tabanınızı daha güçlü hale getirmek için modül genişletmesi kullanır.

TypeScript yapılandırmanızın otomatik olarak oluşturulan türleri içerdiğinden emin olun.

{  // ... Mevcut TypeScript yapılandırmalarınız  "include": [    // ... Mevcut TypeScript yapılandırmalarınız    ".intlayer/**/*.ts", // Otomatik olarak oluşturulan türleri dahil edin  ],}

Git Yapılandırma

Intlayer tarafından oluşturulan dosyaları yok saymanız önerilir. Bu, onları Git deponuza göndermekten kaçınmanıza olanak tanır.

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

# Intlayer tarafından oluşturulan dosyaları yok say.intlayer

VS Code Uzantısı

Intlayer ile geliştirme deneyiminizi geliştirmek için, resmi Intlayer VS Code Uzantısı'nı kurabilirsiniz.

VS Code Marketplace'ten Kurun

Bu uzantı şunları sağlar:

• Çeviri anahtarları için otomatik tamamlama.
• Eksik çeviriler için gerçek zamanlı hata algılama.
• Çevrilmiş içeriğin satır içi önizlemeleri.
• Çevirileri kolayca oluşturmak ve güncellemek için hızlı eylemler.

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

Daha Fazla İlerleyin

Daha fazla ilerlemek için, görsel düzenleyiciyi uygulayabilir veya içeriğinizi CMS kullanarak harici hale getirebilirsiniz.

Dokümantasyon Geçmişi