Erste Schritte mit der Internationalisierung (i18n) mit Intlayer, Vite und Vue

Dieses Paket befindet sich in der Entwicklung. Siehe das Issue für weitere Informationen. Zeigen Sie Ihr Interesse an Intlayer für Vue, indem Sie das Issue liken.

Was ist Intlayer?

Intlayer ist eine innovative, Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die Unterstützung mehrerer Sprachen in modernen Webanwendungen zu vereinfachen.

Mit Intlayer können Sie:

• Übersetzungen einfach verwalten mit deklarativen Wörterbüchern auf Komponentenebene.
• Metadaten, Routen und Inhalte dynamisch lokalisieren.
• TypeScript-Unterstützung sicherstellen mit automatisch generierten Typen, die die Autovervollständigung und Fehlererkennung verbessern.
• Von erweiterten Funktionen profitieren, wie dynamische Spracherkennung und -umschaltung.

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Vite- und Vue-Anwendung

Schritt 1: Abhängigkeiten installieren

Installieren Sie die notwendigen Pakete mit npm:

npm install intlayer vue-intlayer vite-intlayer

• intlayer

  Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, Inhaltsdeklaration, Transpilation und CLI-Befehle bereitstellt.

• vue-intlayer Das Paket, das Intlayer in Vue-Anwendungen integriert. Es bietet Kontextanbieter und Composables für die Internationalisierung in Vue.

• vite-intlayer Beinhaltet das Vite-Plugin zur Integration von Intlayer mit dem Vite-Bundler sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, Verwaltung von Cookies und URL-Weiterleitung.

Schritt 2: Konfiguration Ihres Projekts

Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Ihre weiteren Sprachen    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

Über diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen einrichten, Intlayer-Logs in der Konsole deaktivieren und mehr. Eine vollständige Liste der verfügbaren Parameter finden Sie in der Konfigurationsdokumentation.

Schritt 3: Intlayer in Ihre Vite-Konfiguration integrieren

Fügen Sie das Intlayer-Plugin in Ihre Konfiguration ein.

import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [vue(), intlayerPlugin()],});

Das intlayerPlugin() Vite-Plugin wird verwendet, um Intlayer mit Vite zu integrieren. Es stellt sicher, dass Inhaltsdeklarationsdateien erstellt und im Entwicklungsmodus überwacht werden. Es definiert Intlayer-Umgebungsvariablen innerhalb der Vite-Anwendung. Zusätzlich bietet es Aliase zur Leistungsoptimierung.

Schritt 4: Ihre Inhalte deklarieren

Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:

import { t, type Dictionary } from "intlayer";const helloWorldContent = {  key: "helloworld",  content: {    count: t({      de: "Anzahl ist ",      en: "count is ",      fr: "le compte est ",      es: "el recuento es ",    }),    edit: t({      de: "Bearbeiten Sie <code>components/HelloWorld.vue</code> und speichern Sie, um HMR zu testen",      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({      de: "Schauen Sie sich ",      en: "Check out ",      fr: "Vérifiez ",      es: "Compruebe ",    }),    officialStarter: t({      de: ", den offiziellen Vue + Vite Starter",      en: ", the official Vue + Vite starter",      fr: ", le starter officiel Vue + Vite",      es: ", el starter oficial Vue + Vite",    }),    learnMore: t({      de: "Erfahren Sie mehr über IDE-Unterstützung für Vue im ",      en: "Learn more about IDE Support for Vue in the ",      fr: "En savoir plus sur le support IDE pour Vue dans le ",      es: "Aprenda más sobre el soporte IDE para Vue en el ",    }),    vueDocs: t({      de: "Vue-Dokumentation Skalierungsleitfaden",      en: "Vue Docs Scaling up Guide",      fr: "Vue Docs Scaling up Guide",      es: "Vue Docs Scaling up Guide",    }),    readTheDocs: t({      de: "Klicken Sie auf die Vite- und Vue-Logos, um mehr zu erfahren",      en: "Click on the Vite and Vue logos to learn more",      fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",      es: "Haga clic en los logotipos de Vite y Vue para obtener más información",    }),  },} satisfies Dictionary;export default helloWorldContent;

const { t } = require("intlayer");

/* @type {import('intlayer').Dictionary} / const appContent = { key: "helloworld", content: { count: t({ de: "Anzahl ist ", en: "count is ", fr: "le compte est ", es: "el recuento es " }), edit: t({ de: "Bearbeiten Sie components/HelloWorld.vue und speichern Sie, um HMR zu testen", en: "Edit components/HelloWorld.vue and save to test HMR", fr: "Éditez components/HelloWorld.vue et enregistrez pour tester HMR", es: "Edita components/HelloWorld.vue y guarda para probar HMR", }), checkOut: t({ de: "Schauen Sie sich ", en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }), officialStarter: t({ de: "den offiziellen Vue + Vite Starter", en: "the official Vue + Vite starter", fr: "le starter officiel Vue + Vite", es: "el starter oficial Vue + Vite", }), learnMore: t({ de: "Erfahren Sie mehr über die IDE-Unterstützung für Vue im ", en: "Learn more about IDE Support for Vue in the ", fr: "En savoir plus sur le support IDE pour Vue dans le ", es: "Aprenda más sobre el soporte IDE para Vue en el ", }), vueDocs: t({ de: "Vue-Dokumentation Skalierungsleitfaden", en: "Vue Docs Scaling up Guide", fr: "Vue Docs Scaling up Guide", es: "Vue Docs Scaling up Guide", }), readTheDocs: t({ de: "Klicken Sie auf die Vite- und Vue-Logos, um mehr zu erfahren", en: "Click on the Vite and Vue logos to learn more", fr: "Cliquez sur les logos Vite et Vue pour en savoir plus", es: "Haga clic en los logotipos de Vite y Vue para obtener más información", }), }, };

module.exports = appContent;

Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, solange sie im Verzeichnis contentDir enthalten sind (standardmäßig ./src). Und sie müssen mit der Dateierweiterung der Inhaltsdeklaration übereinstimmen (standardmäßig .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}). Weitere Details finden Sie in der Dokumentation zur Inhaltsdeklaration.

Schritt 5: Nutzen Sie Intlayer in Ihrem Code

Um die Internationalisierungsfunktionen von Intlayer in Ihrer Vue-Anwendung zu nutzen, müssen Sie zunächst die Intlayer-Singleton-Instanz in Ihrer Hauptdatei registrieren. Dieser Schritt ist entscheidend, da er den Internationalisierungskontext für alle Komponenten in Ihrer Anwendung bereitstellt und Übersetzungen überall in Ihrer Komponentenstruktur zugänglich macht.

import { createApp } from "vue";import { installIntlayer } from "vue-intlayer";import App from "./App.vue";import "./style.css";const app = createApp(App);// Injektion des Providers auf oberster EbeneinstallIntlayer(app);// App mountenapp.mount("#app");

Greifen Sie auf Ihre Inhaltswörterbücher in Ihrer gesamten Anwendung zu, indem Sie eine Haupt-Vue-Komponente erstellen und die useIntlayer-Composables verwenden:

<script setup lang="ts">import { ref } from "vue";import { useIntlayer } from "vue-intlayer";defineProps({  msg: String,});const content = useIntlayer("helloworld");const count = ref(0);</script><template>  <h1>{{ msg }}</h1>  <div class="card">    <button type="button" @click="count++">      {{ content.count }}{{ count }}    </button>    <p v-html="content.edit.value"></p>  </div>  <p>    {{ content.checkOut }}    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"      >create-vue</a    >, {{ content.officialStarter }}  </p>  <p>    {{ content.learnMore }}    <a      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"      target="_blank"      >{{ content.vueDocs }}</a    >.  </p>  <p class="read-the-docs">{{ content.readTheDocs }}</p></template>

Wenn Sie Ihren Inhalt in einem Attribut wie alt, title, href, aria-label usw. verwenden möchten, müssen Sie den Wert der Funktion mit .value aufrufen, wie:

html

<img src="./logo.svg" :alt="content.image.value" />

(Optional) Schritt 6: Ändern Sie die Sprache Ihres Inhalts

Um die Sprache Ihres Inhalts zu ändern, können Sie die Funktion setLocale verwenden, die vom useLocale-Composable bereitgestellt wird. Diese Funktion ermöglicht es Ihnen, die Sprache der Anwendung festzulegen und den Inhalt entsprechend zu aktualisieren.

Erstellen Sie eine Komponente, um zwischen Sprachen zu wechseln:

<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";// Abrufen von Lokalisierungsinformationen und setLocale-Funktionconst { locale, availableLocales, setLocale } = useLocale();// Verfolgen der ausgewählten Sprache mit einem Refconst selectedLocale = ref(locale.value);// Aktualisieren der Sprache, wenn sich die Auswahl ändertconst changeLocale = () => setLocale(selectedLocale.value);// Halten Sie selectedLocale synchron mit der globalen Sprachewatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

Verwenden Sie diese Komponente dann in Ihrer App.vue:

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";import HelloWorld from "@components/HelloWorld.vue";import LocaleSwitcher from "@components/LocaleSwitcher.vue";import { ref, watch } from "vue";const content = useIntlayer("app"); // Erstellen Sie die zugehörige Intlayer-Deklarationsdatei</script><template>  <div>    <LocaleSwitcher />    <a href="https://vite.dev" target="_blank">      <img src="/vite.svg" class="logo" :alt="content.viteLogo" />    </a>    <a href="https://vuejs.org/" target="_blank">      <img src="./assets/vue.svg" class="logo vue" :alt="content.vueLogo" />    </a>  </div>  <HelloWorld :msg="content.title" /></template>

(Optional) Schritt 7: Fügen Sie Ihrer Anwendung lokalisierte Routen hinzu

Das Hinzufügen lokalisierter Routen in einer Vue-Anwendung erfolgt typischerweise mit Vue Router und Sprachpräfixen. Dies erstellt eindeutige Routen für jede Sprache, was für SEO und SEO-freundliche URLs nützlich ist.

Beispiel:

- https://example.com/about- https://example.com/de/about- https://example.com/fr/about

Zuerst installieren Sie Vue Router:

npm install intlayer vue-router

Erstellen Sie dann eine Router-Konfiguration, die lokalisierungsbasierte Routen behandelt:

import {  configuration,  getPathWithoutLocale,  localeFlatMap,  type Locales,} from 'intlayer';import { createIntlayerClient } from 'vue-intlayer';import { createRouter, createWebHistory } from 'vue-router';import HomeView from './views/home/HomeView.vue';import RootView from './views/root/Root.vue';// Abrufen der Internationalisierungskonfigurationconst { internationalization, middleware } = configuration;const { defaultLocale } = internationalization;/** * Deklarieren Sie die Routen mit lokalisierungsspezifischen Pfaden und Metadaten. */const routes = localeFlatMap((localizedData) => [  {    path: `${localizedData.urlPrefix}/`,    name: `Root-${localizedData.locale}`,    component: RootView,    meta: {      locale: localizedData.locale,    },  },  {    path: `${localizedData.urlPrefix}/home`,    name: `Home-${localizedData.locale}`,    component: HomeView,    meta: {      locale: localizedData.locale,    },  },]);// Erstellen Sie die Router-Instanzexport const router = createRouter({  history: createWebHistory(),  routes,});// Fügen Sie eine Navigationswächter für die Lokalisierungsbehandlung hinzurouter.beforeEach((to, _from, next) => {  const client = createIntlayerClient();  const metaLocale = to.meta.locale as Locales | undefined;  if (metaLocale) {    // Wiederverwenden der im Meta der Route definierten Lokalisierung    client.setLocale(metaLocale);    next();  } else {    // Fallback: keine Lokalisierung im Meta, möglicherweise nicht übereinstimmende Route    // Optional: 404 behandeln oder zur Standardlokalisierung umleiten    client.setLocale(defaultLocale);    if (middleware.prefixDefault) {      next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);    } else {      next(getPathWithoutLocale(to.path));    }  }});

Der Name wird verwendet, um die Route im Router zu identifizieren. Er sollte eindeutig über alle Routen hinweg sein, um Konflikte zu vermeiden und eine ordnungsgemäße Navigation und Verlinkung zu gewährleisten.

Registrieren Sie dann den Router in Ihrer main.js-Datei:

import { createApp } from "vue";import App from "./App.vue";import { router } from "./router";import "./style.css";const app = createApp(App);// Fügen Sie den Router zur App hinzuapp.use(router);// Mounten Sie die Appapp.mount("#app");

Aktualisieren Sie dann Ihre App.vue-Datei, um die RouterView-Komponente zu rendern. Diese Komponente zeigt die übereinstimmende Komponente für die aktuelle Route an.

<script setup lang="ts">import LocaleSwitcher from "@components/LocaleSwitcher.vue";</script><template>  <nav>    <LocaleSwitcher />  </nav>  <RouterView /></template>

Parallel dazu können Sie auch das intLayerMiddlewarePlugin verwenden, um serverseitiges Routing zu Ihrer Anwendung hinzuzufügen. Dieses Plugin erkennt automatisch die aktuelle Lokalisierung basierend auf der URL und setzt das entsprechende Lokalisierungs-Cookie. Wenn keine Lokalisierung angegeben ist, bestimmt das Plugin die am besten geeignete Lokalisierung basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Lokalisierung erkannt wird, wird zur Standardlokalisierung umgeleitet.

import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [vue(), intlayerPlugin(), intLayerMiddlewarePlugin()],});

(Optional) Schritt 8: Ändern Sie die URL, wenn sich die Lokalisierung ändert

Um die URL automatisch zu aktualisieren, wenn der Benutzer die Sprache ändert, können Sie die LocaleSwitcher-Komponente so anpassen, dass sie Vue Router verwendet:

<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 { useRouter } from "vue-router";import { Locales, getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Vue Router abrufenconst router = useRouter();// Lokalisierungsinformationen und setLocale-Funktion abrufenconst { locale, availableLocales, setLocale } = useLocale({  onLocaleChange: (newLocale) => {    // Aktuelle Route abrufen und eine lokalisierte URL erstellen    const currentPath = router.currentRoute.value.fullPath;    const localizedPath = getLocalizedUrl(currentPath, newLocale);    // Zur lokalisierten Route navigieren, ohne die Seite neu zu laden    router.push(localizedPath);  },});// Verfolgen Sie die ausgewählte Lokalisierung mit einem Refconst selectedLocale = ref(locale.value);// Aktualisieren Sie die Lokalisierung, wenn sich die Auswahl ändertconst changeLocale = () => {  setLocale(selectedLocale.value);};// Halten Sie die selectedLocale mit der globalen Lokalisierung synchronwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

Tipp: Für bessere SEO und Barrierefreiheit verwenden Sie Tags wie <a href="/de/home" hreflang="de">, um auf lokalisierte Seiten zu verlinken, wie in Schritt 10 gezeigt. Dadurch können Suchmaschinen sprachspezifische URLs ordnungsgemäß entdecken und indexieren. Um das Verhalten einer SPA beizubehalten, können Sie die Standardnavigation mit @click.prevent verhindern, die Lokalisierung mit useLocale ändern und programmgesteuert mit Vue Router navigieren.

<ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">  <li>    <a      hreflang="x-default"      aria-label="Wechseln zu Englisch"      target="_self"      aria-current="page"      href="/de/doc/get-started"    >      <div>        <div><span dir="ltr" lang="en">English</span><span>Englisch</span></div>        <span>EN</span>      </div>    </a>  </li>  <li>    <a      hreflang="es"      aria-label="Wechseln zu Spanisch"      target="_self"      href="/es/doc/get-started"    >      <div>        <span dir="ltr" lang="es">Español</span><span>Spanisch</span>        <span>ES</span>      </div>    </a>  </li></ol>

(Optional) Schritt 9: Ändern Sie die HTML-Sprach- und Richtungsattribute

Wenn Ihre Anwendung mehrere Sprachen unterstützt, ist es wichtig, die Attribute lang und dir des <html>-Tags an die aktuelle Lokalisierung anzupassen. Dadurch wird sichergestellt:

• Barrierefreiheit: Screenreader und unterstützende Technologien verlassen sich auf das richtige lang-Attribut, um Inhalte korrekt auszusprechen und zu interpretieren.
• Textrendering: Das dir-Attribut (Richtung) stellt sicher, dass Text in der richtigen Reihenfolge gerendert wird (z. B. von links nach rechts für Englisch, von rechts nach links für Arabisch oder Hebräisch), was für die Lesbarkeit entscheidend ist.
• SEO: Suchmaschinen verwenden das lang-Attribut, um die Sprache Ihrer Seite zu bestimmen und die richtigen lokalisierten Inhalte in den Suchergebnissen bereitzustellen.

Durch die dynamische Aktualisierung dieser Attribute bei einem Lokalisierungswechsel gewährleisten Sie eine konsistente und zugängliche Benutzererfahrung für alle unterstützten Sprachen.

import { watch } from "vue";import { useLocale } from "vue-intlayer";import { getHTMLTextDir } from "intlayer";/** * Composable, das die `lang`- und `dir`-Attribute des HTML <html>-Elements * basierend auf der aktuellen Sprache aktualisiert. * * @example * // In Ihrer App.vue oder einer globalen Komponente * import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes' * * useI18nHTMLAttributes() */export function useI18nHTMLAttributes() {  const { locale } = useLocale();  // Aktualisieren der HTML-Attribute, wenn sich die Sprache ändert  watch(    () => locale.value,    (newLocale) => {      if (!newLocale) return;      // Aktualisieren des Sprachattributs      document.documentElement.lang = newLocale;      // Festlegen der Textrichtung (ltr für die meisten Sprachen, rtl für Arabisch, Hebräisch usw.)      document.documentElement.dir = getHTMLTextDir(newLocale);    },    { immediate: true }  );}

Verwenden Sie dieses Composable in Ihrer App.vue oder einer globalen Komponente:

<script setup lang="ts">import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";// Anwenden der HTML-Attribute basierend auf der aktuellen SpracheuseI18nHTMLAttributes();</script><template>  <!-- Ihr App-Template --></template>

(Optional) Schritt 10: Erstellen einer lokalisierten Link-Komponente

Um sicherzustellen, dass die Navigation Ihrer Anwendung die aktuelle Sprache berücksichtigt, können Sie eine benutzerdefinierte Link-Komponente erstellen. Diese Komponente fügt automatisch interne URLs mit der aktuellen Sprache vor, sodass beispielsweise ein französischsprachiger Benutzer, der auf einen Link zur "Über"-Seite klickt, zu /fr/about statt zu /about weitergeleitet wird.

Dieses Verhalten ist aus mehreren Gründen nützlich:

• SEO und Benutzererfahrung: Lokalisierte URLs helfen Suchmaschinen, sprachspezifische Seiten korrekt zu indexieren, und bieten Benutzern Inhalte in ihrer bevorzugten Sprache.
• Konsistenz: Durch die Verwendung eines lokalisierten Links in Ihrer gesamten Anwendung stellen Sie sicher, dass die Navigation innerhalb der aktuellen Sprache bleibt und unerwartete Sprachwechsel vermieden werden.
• Wartbarkeit: Die Zentralisierung der Lokalisierungslogik in einer einzigen Komponente vereinfacht die Verwaltung von URLs und macht Ihren Code einfacher zu warten und zu erweitern, wenn Ihre Anwendung wächst.

<template>  <a :href="localizedHref" v-bind="$attrs">    <slot />  </a></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  href: {    type: String,    required: true,  },});const { locale } = useLocale();// Prüfen, ob der Link extern istconst isExternalLink = computed(() => /^https?:///.test(props.href || ""));// Erstellen eines lokalisierten href für interne Linksconst localizedHref = computed(() =>  isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value));</script>

Für die Verwendung mit Vue Router erstellen Sie eine router-spezifische Version:

<template>  <router-link :to="localizedTo" v-bind="$attrs">    <slot />  </router-link></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  to: {    type: [String, Object],    required: true,  },});const { locale } = useLocale();// Erstellen eines lokalisierten to-Props für router-linkconst localizedTo = computed(() => {  if (typeof props.to === "string") {    return getLocalizedUrl(props.to, locale.value);  } else {    // Wenn 'to' ein Objekt ist, lokalisieren Sie die path-Eigenschaft    return {      ...props.to,      path: getLocalizedUrl(props.to.path ?? "/", locale.value),    };  }});</script>

Verwenden Sie diese Komponenten in Ihrer Anwendung:

<template>  <div>    <!-- Vue Router -->    <RouterLink to="/">Root</RouterLink>    <RouterLink to="/home">Home</RouterLink>    <!-- Andere -->    <Link href="/">Root</Link>    <Link href="/home">Home</Link>  </div></template><script setup lang="ts">import Link from "@components/Link.vue";import RouterLink from "@components/RouterLink.vue";</script>

TypeScript konfigurieren

Intlayer verwendet Modul-Erweiterungen, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.

Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält.

{  // ... Ihre bestehenden TypeScript-Konfigurationen  "include": [    // ... Ihre bestehenden TypeScript-Konfigurationen    ".intlayer/**/*.ts", // Einbinden der automatisch generierten Typen  ],}

Git-Konfiguration

Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dadurch vermeiden Sie, diese in Ihr Git-Repository einzuchecken.

Fügen Sie dazu die folgenden Anweisungen zu Ihrer .gitignore-Datei hinzu:

# Ignorieren der von Intlayer generierten Dateien.intlayer

VS Code Erweiterung

Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle Intlayer VS Code Erweiterung installieren.

Installieren Sie sie aus dem VS Code Marketplace

Diese Erweiterung bietet:

• Autovervollständigung für Übersetzungsschlüssel.
• Echtzeit-Fehlererkennung für fehlende Übersetzungen.
• Inline-Vorschauen von übersetzten Inhalten.
• Schnellaktionen, um Übersetzungen einfach zu erstellen und zu aktualisieren.

Weitere Details zur Verwendung der Erweiterung finden Sie in der Intlayer VS Code Erweiterungsdokumentation.

Weiterführende Schritte

Um weiterzugehen, können Sie den visuellen Editor implementieren oder Ihre Inhalte mit dem CMS auslagern.