@intlayer/docs 5.5.8

package/de/packages/react-intlayer/useIntlayerAsync.md

@@ -0,0 +1,226 @@
+# React-Integration: `useIntlayerAsync` Hook Dokumentation
+
+Der `useIntlayerAsync` Hook erweitert die Funktionalität von `useIntlayer`, indem er nicht nur vorgerenderte Wörterbücher zurückgibt, sondern auch Updates asynchron abruft. Dies macht ihn ideal für Anwendungen, die ihren lokalisierten Inhalt nach dem ersten Rendern häufig aktualisieren.
+
+## Übersicht
+
+- **Asynchrones Laden von Wörterbüchern:**  
+  Beim ersten Mount gibt `useIntlayerAsync` zunächst vorab abgerufene oder statisch gebündelte Wörterbücher zurück (ähnlich wie `useIntlayer`) und ruft dann asynchron neue verfügbare Wörterbücher ab und integriert diese.
+- **Verwaltung des Ladezustands:**  
+  Der Hook bietet auch einen `isLoading`-Status, der anzeigt, wann ein Wörterbuch abgerufen wird. Dies ermöglicht es Entwicklern, Ladeindikatoren oder Skeleton-Zustände für eine reibungslosere Benutzererfahrung anzuzeigen.
+
+## Einrichtung der Umgebung
+
+Intlayer bietet ein Headless Content Source Management (CSM)-System, das es Nicht-Entwicklern ermöglicht, Anwendungsinhalte nahtlos zu verwalten und zu aktualisieren. Mit dem intuitiven Dashboard von Intlayer kann Ihr Team lokalisierten Text, Bilder und andere Ressourcen bearbeiten, ohne den Code direkt zu ändern. Dies optimiert den Content-Management-Prozess, fördert die Zusammenarbeit und stellt sicher, dass Updates schnell und einfach durchgeführt werden können.
+
+So starten Sie mit Intlayer:
+
+1. **Registrieren Sie sich und erhalten Sie ein Zugriffstoken** unter [https://intlayer.org/dashboard](https://intlayer.org/dashboard).
+2. **Fügen Sie Anmeldeinformationen zu Ihrer Konfigurationsdatei hinzu:**  
+   Konfigurieren Sie in Ihrem React-Projekt den Intlayer-Client mit Ihren Anmeldeinformationen:
+
+   ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+   import type { IntlayerConfig } from "intlayer";
+
+   export default {
+     // ...
+     editor: {
+       clientId: process.env.INTLAYER_CLIENT_ID,
+       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     },
+   } satisfies IntlayerConfig;
+   ```
+
+   ```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+   import { type IntlayerConfig } from "intlayer";
+
+   /** @type {import('intlayer').IntlayerConfig} */
+   const config = {
+     // ...
+     editor: {
+       clientId: process.env.INTLAYER_CLIENT_ID,
+       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     },
+   };
+
+   export default config;
+   ```
+
+   ```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+   /** @type {import('intlayer').IntlayerConfig} */
+   const config = {
+     // ...
+     editor: {
+       clientId: process.env.INTLAYER_CLIENT_ID,
+       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     },
+   };
+
+   module.exports = config;
+   ```
+
+3. **Laden Sie ein neues Wörterbuch zu Intlayer hoch:**
+
+   ```bash
+   npx intlayer dictionary push -d my-first-dictionary-key
+   ```
+
+   Dieser Befehl lädt Ihre anfänglichen Inhaltswörterbücher hoch, sodass sie für asynchrones Abrufen und Bearbeiten über die Intlayer-Plattform verfügbar sind.
+
+## Importieren von `useIntlayerAsync` in React
+
+Importieren Sie `useIntlayerAsync` in Ihren React-Komponenten:
+
+```ts codeFormat="typescript"
+import { useIntlayerAsync } from "react-intlayer";
+```
+
+```js codeFormat="esm"
+import { useIntlayerAsync } from "react-intlayer";
+```
+
+```js codeFormat="commonjs"
+const { useIntlayerAsync } = require("react-intlayer");
+```
+
+## Parameter
+
+1. **`key`**:  
+   **Typ**: `DictionaryKeys`  
+   Der Schlüssel des Wörterbuchs, der verwendet wird, um den lokalisierten Inhaltsblock zu identifizieren. Dieser Schlüssel sollte in Ihren Inhaltsdeklarationsdateien definiert sein.
+
+2. **`locale`** (optional):  
+   **Typ**: `Locales`  
+   Die spezifische Sprache, die Sie anvisieren möchten. Wenn nicht angegeben, verwendet der Hook die Sprache aus dem aktuellen Intlayer-Kontext.
+
+3. **`isRenderEditor`** (optional, Standardwert ist `true`):  
+   **Typ**: `boolean`  
+   Bestimmt, ob der Inhalt für die Darstellung mit der Intlayer-Editor-Overlay bereit sein soll. Wenn auf `false` gesetzt, werden editor-spezifische Funktionen aus den zurückgegebenen Wörterbuchdaten ausgeschlossen.
+
+## Rückgabewert
+
+Der Hook gibt ein Wörterbuchobjekt zurück, das lokalisierten Inhalt enthält, der nach `key` und `locale` geordnet ist. Es enthält auch ein `isLoading`-Boolean, das anzeigt, ob ein Wörterbuch gerade abgerufen wird.
+
+## Beispielverwendung in einer React-Komponente
+
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+import { useEffect, type FC } from "react";
+import { useIntlayerAsync } from "react-intlayer";
+
+export const ComponentExample: FC = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("Inhalt wird geladen...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      {isLoading ? (
+        <div>
+          <h1>Laden…</h1>
+          <p>Bitte warten Sie, während der Inhalt aktualisiert wird.</p>
+        </div>
+      ) : (
+        <div>
+          <h1>{title.value}</h1>
+          <p>{description.value}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.mjx" codeFormat="esm"
+import { useEffect } from "react";
+import { useIntlayerAsync } from "react-intlayer";
+
+const ComponentExample = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("Inhalt wird geladen...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      {isLoading ? (
+        <div>
+          <h1>Laden…</h1>
+          <p>Bitte warten Sie, während der Inhalt aktualisiert wird.</p>
+        </div>
+      ) : (
+        <div>
+          <h1>{title.value}</h1>
+          <p>{description.value}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.csx" codeFormat="commonjs"
+const { useEffect } = require("react");
+const { useIntlayerAsync } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("Inhalt wird geladen...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      {isLoading ? (
+        <div>
+          <h1>Laden…</h1>
+          <p>Bitte warten Sie, während der Inhalt aktualisiert wird.</p>
+        </div>
+      ) : (
+        <div>
+          <h1>{title.value}</h1>
+          <p>{description.value}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+**Wichtige Punkte:**
+
+- Beim ersten Rendern stammen `title` und `description` aus dem vorab abgerufenen oder statisch eingebetteten Wörterbuch.
+- Während `isLoading` `true` ist, wird im Hintergrund ein aktualisiertes Wörterbuch abgerufen.
+- Sobald der Abruf abgeschlossen ist, werden `title` und `description` mit dem neuesten Inhalt aktualisiert, und `isLoading` kehrt zu `false` zurück.
+
+## Umgang mit Attribut-Lokalisierung
+
+Sie können auch lokalisierte Attributwerte für verschiedene HTML-Eigenschaften abrufen (z. B. `alt`, `title`, `aria-label`):
+
+```jsx
+<img src={title.image.src.value} alt={title.image.alt.value} />
+```
+
+## Wörterbuchdateien
+
+Alle Inhalts-Schlüssel müssen in Ihren Inhaltsdeklarationsdateien definiert sein, um Typsicherheit zu gewährleisten und Laufzeitfehler zu vermeiden. Diese Dateien ermöglichen die TypeScript-Validierung und stellen sicher, dass Sie immer auf vorhandene Schlüssel und Sprachen verweisen.
+
+Anleitungen zur Einrichtung von Inhaltsdeklarationsdateien finden Sie [hier](https://github.com/aymericzip/intlayer/blob/main/docs/de/dictionary/get_started.md).
+
+## Weitere Informationen
+
+- **Intlayer Visual Editor:**  
+  Integrieren Sie den Intlayer Visual Editor, um Inhalte direkt über die Benutzeroberfläche zu verwalten und zu bearbeiten. Weitere Details [hier](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_visual_editor.md).
+
+---
+
+**Zusammenfassend** ist `useIntlayerAsync` ein leistungsstarker React-Hook, der die Benutzererfahrung verbessert und die Aktualität der Inhalte durch die Kombination von vorgerenderten oder vorab abgerufenen Wörterbüchern mit asynchronen Wörterbuch-Updates sicherstellt. Durch die Nutzung von `isLoading` und auf TypeScript basierenden Inhaltsdeklarationen können Sie dynamische, lokalisierte Inhalte nahtlos in Ihre React-Anwendungen integrieren.

package/de/packages/react-intlayer/useLocale.md

@@ -0,0 +1,184 @@
+# React-Integration: `useLocale` Hook Dokumentation
+
+Dieser Abschnitt bietet umfassende Details zum `useLocale` Hook aus der `react-intlayer` Bibliothek, die für die Verwaltung von Lokalisierungen in React-Anwendungen entwickelt wurde.
+
+## Importieren von `useLocale` in React
+
+Um den `useLocale` Hook in Ihre React-Anwendung zu integrieren, importieren Sie ihn aus dem entsprechenden Paket:
+
+```typescript codeFormat="typescript"
+import { useLocale } from "react-intlayer"; // Wird in React-Komponenten für die Lokalisierungsverwaltung verwendet
+```
+
+```javascript codeFormat="esm"
+import { useLocale } from "react-intlayer"; // Wird in React-Komponenten für die Lokalisierungsverwaltung verwendet
+```
+
+```javascript codeFormat="commonjs"
+const { useLocale } = require("react-intlayer"); // Wird in React-Komponenten für die Lokalisierungsverwaltung verwendet
+```
+
+## Übersicht
+
+Der `useLocale` Hook bietet eine einfache Möglichkeit, auf die Lokalisierungseinstellungen innerhalb von React-Komponenten zuzugreifen und diese zu manipulieren. Er ermöglicht den Zugriff auf die aktuelle Lokalisierung, die Standardlokalisierung, alle verfügbaren Lokalisierungen und Funktionen zum Aktualisieren der Lokalisierungseinstellungen.
+
+## Verwendung
+
+So können Sie den `useLocale` Hook in einer React-Komponente verwenden:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useLocale } from "react-intlayer";
+
+const LocaleSwitcher: FC = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>Aktuelle Lokalisierung: {locale}</h1>
+      <p>Standardlokalisierung: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default LocaleSwitcher;
+```
+
+```jsx fileName="src/components/LocaleSwitcher.mjx" codeFormat="esm"
+import { useLocale } from "react-intlayer";
+
+const LocaleSwitcher = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>Aktuelle Lokalisierung: {locale}</h1>
+      <p>Standardlokalisierung: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default LocaleSwitcher;
+```
+
+```jsx fileName="src/components/LocaleSwitcher.csx" codeFormat="commonjs"
+const { useLocale } = require("react-intlayer");
+
+const LocaleSwitcher = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>Aktuelle Lokalisierung: {locale}</h1>
+      <p>Standardlokalisierung: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default LocaleSwitcher;
+```
+
+## Parameter und Rückgabewerte
+
+Wenn Sie den `useLocale` Hook aufrufen, gibt er ein Objekt mit den folgenden Eigenschaften zurück:
+
+- **`locale`**: Die aktuelle Lokalisierung, die im React-Kontext festgelegt ist.
+- **`defaultLocale`**: Die primäre Lokalisierung, die in der Konfiguration definiert ist.
+- **`availableLocales`**: Eine Liste aller verfügbaren Lokalisierungen, die in der Konfiguration definiert sind.
+- **`setLocale`**: Eine Funktion, um die aktuelle Lokalisierung im Anwendungskontext zu aktualisieren.
+
+## Beispiel
+
+Dieses Beispiel zeigt eine Komponente, die den `useLocale` Hook verwendet, um einen Lokalisierungsumschalter zu rendern, der es Benutzern ermöglicht, die Lokalisierung der Anwendung dynamisch zu ändern:
+
+```tsx fileName="src/components/LocaleSelector.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useLocale } from "react-intlayer";
+
+const LocaleSelector: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  const handleLocaleChange = (newLocale) => {
+    setLocale(newLocale);
+  };
+
+  return (
+    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
+      {availableLocales.map((locale) => (
+        <option key={locale} value={locale}>
+          {locale}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+```jsx fileName="src/components/LocaleSelector.mjx" codeFormat="esm"
+import { useLocale } from "react-intlayer";
+
+const LocaleSelector = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  const handleLocaleChange = (newLocale) => {
+    setLocale(newLocale);
+  };
+
+  return (
+    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
+      {availableLocales.map((locale) => (
+        <option key={locale} value={locale}>
+          {locale}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+```jsx fileName="src/components/LocaleSelector.csx" codeFormat="commonjs"
+const { useLocale } = require("react-intlayer");
+
+const LocaleSelector = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  const handleLocaleChange = (newLocale) => {
+    setLocale(newLocale);
+  };
+
+  return (
+    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
+      {availableLocales.map((locale) => (
+        <option key={locale} value={locale}>
+          {locale}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## Fazit
+
+Der `useLocale` Hook aus `react-intlayer` ist ein unverzichtbares Werkzeug für die Verwaltung von Lokalisierungen in Ihren React-Anwendungen. Er bietet die Funktionalität, die erforderlich ist, um Ihre Anwendung effektiv an verschiedene internationale Zielgruppen anzupassen.

package/de/packages/react-native-intlayer/index.md

@@ -0,0 +1,57 @@
+**Intlayer** ist eine Suite von Paketen, die speziell für JavaScript-Entwickler entwickelt wurde. Es ist kompatibel mit Frameworks wie React, React und Express.js.
+
+**Das `react-native-intlayer` Paket** ermöglicht es Ihnen, Ihre Vite-Anwendung zu internationalisieren. Es enthält das Metro-Plugin, um die Konfiguration über Umgebungsvariablen im [Metro-Bundler](https://docs.expo.dev/guides/customizing-metro/) festzulegen.
+
+## Warum Ihre React Native Anwendung internationalisieren?
+
+Die Internationalisierung Ihrer React Native Anwendung ist entscheidend, um ein globales Publikum effektiv zu bedienen. Sie ermöglicht es Ihrer Anwendung, Inhalte und Nachrichten in der bevorzugten Sprache jedes Benutzers bereitzustellen. Diese Fähigkeit verbessert die Benutzererfahrung und erweitert die Reichweite Ihrer Anwendung, indem sie für Menschen aus verschiedenen sprachlichen Hintergründen zugänglicher und relevanter wird.
+
+## Konfiguration
+
+Das `react-native-intlayer` Paket funktioniert nahtlos mit dem [`react-intlayer` Paket](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/react-intlayer/index.md) und dem [`intlayer` Paket](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/intlayer/index.md). Schauen Sie sich die entsprechende Dokumentation für weitere Informationen an.
+
+## Installation
+
+Installieren Sie das erforderliche Paket mit Ihrem bevorzugten Paketmanager:
+
+```bash packageManager="npm"
+npm install react-native-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add react-native-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add react-native-intlayer
+```
+
+## Beispiel für die Nutzung
+
+Sehen Sie ein Beispiel, wie Sie die Plugins in Ihre Vite-Konfiguration einbinden können.
+
+```js
+// metro.config.js
+const { getDefaultConfig } = require("expo/metro-config");
+const { configMetroIntlayer } = require("react-native-intlayer/metro");
+
+module.exports = (async () => {
+  const defaultConfig = getDefaultConfig(__dirname);
+
+  return await configMetroIntlayer(defaultConfig);
+})();
+```
+
+## Beherrschen der Internationalisierung Ihrer Vite-Anwendung
+
+Intlayer bietet viele Funktionen, die Ihnen helfen, Ihre Vite-Anwendung zu internationalisieren.
+
+**Um mehr über diese Funktionen zu erfahren, lesen Sie den [React Internationalisierung (i18n) mit Intlayer und React Native](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_with_react_native+expo.md) Leitfaden für React Native Anwendungen.**
+
+## Lesen Sie mehr über Intlayer
+
+- [Intlayer Website](https://intlayer.org)
+- [Intlayer Dokumentation](https://intlayer.org/doc)
+- [Intlayer GitHub](https://github.com/aymericzip/intlayer)
+
+- [Stellen Sie Ihre Fragen an unsere intelligente Dokumentation](https://intlayer.org/docchat)

package/de/packages/react-scripts-intlayer/index.md

@@ -0,0 +1,57 @@
+# react-scripts-intlayer: NPM-Paket zur Verwendung von Intlayer in einer React Create App-Anwendung
+
+**Intlayer** ist eine Suite von Paketen, die speziell für JavaScript-Entwickler entwickelt wurden. Es ist kompatibel mit Frameworks wie React, React und Express.js.
+
+**Das `react-scripts-intlayer`-Paket** enthält die `react-scripts-intlayer`-Befehle und Plugins zur Integration von Intlayer in eine auf Create React App basierende Anwendung. Diese Plugins basieren auf [craco](https://craco.js.org/) und beinhalten zusätzliche Konfigurationen für den [Webpack](https://webpack.js.org/) Bundler.
+
+## Konfiguration
+
+Das `react-scripts-intlayer`-Paket funktioniert nahtlos mit dem [`react-intlayer`-Paket](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/react-intlayer/index.md) und dem [`intlayer`-Paket](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/intlayer/index.md). Schauen Sie sich die entsprechende Dokumentation für weitere Informationen an.
+
+## Installation
+
+Installieren Sie das notwendige Paket mit Ihrem bevorzugten Paketmanager:
+
+```bash packageManager="npm"
+npm install react-scripts-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add react-scripts-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add react-scripts-intlayer
+```
+
+## Verwendung
+
+### CLI-Befehle
+
+Das `react-scripts-intlayer`-Paket bietet die folgenden CLI-Befehle:
+
+- `npx react-scripts-intlayer build`: Baut die React-Anwendung mit der Intlayer-Konfiguration.
+- `npx react-scripts-intlayer start`: Startet den Entwicklungsserver mit der Intlayer-Konfiguration.
+
+### Ersetzen der package.json-Skripte
+
+Um das `react-scripts-intlayer`-Paket zu verwenden, müssen Sie die `package.json`-Skripte durch die folgenden Befehle ersetzen:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "start": "react-scripts-intlayer start",
+    "build": "react-scripts-intlayer build"
+  }
+}
+```
+
+## Eigene Webpack-Konfiguration verwenden
+
+`react-scripts-intlayer` basiert auf [craco](https://craco.js.org/), das es Ihnen ermöglicht, die Webpack-Konfiguration anzupassen.
+Wenn Sie die Webpack-Konfiguration anpassen müssen, können Sie auch Ihre eigene Einrichtung basierend auf dem Intlayer-Craco-Plugin implementieren. [Beispiel hier ansehen](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
+
+## Lesen Sie den vollständigen Intlayer-Leitfaden für React Create App
+
+Intlayer bietet viele Funktionen, um Ihnen bei der Internationalisierung Ihrer React-Anwendung zu helfen.
+[Sehen Sie, wie Sie Intlayer mit React Create App verwenden können](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_with_create_react_app.md).

package/de/packages/solid-intlayer/index.md

@@ -0,0 +1,3 @@
+this doc will be automatically generated translated from the english doc
+
+see /docs/en/packages/solid-intlayer/index.md

package/de/packages/svelte-intlayer/index.md

@@ -0,0 +1,3 @@
+this doc will be automatically generated translated from the english doc
+
+see /docs/en/packages/svelte-intlayer/index.md

package/de/packages/vite-intlayer/index.md

@@ -0,0 +1,53 @@
+# vite-intlayer: NPM-Paket zur Internationalisierung (i18n) einer Vite-Anwendung
+
+**Intlayer** ist eine Suite von Paketen, die speziell für JavaScript-Entwickler entwickelt wurde. Es ist kompatibel mit Frameworks wie React, React und Express.js.
+
+**Das `vite-intlayer`-Paket** ermöglicht es Ihnen, Ihre Vite-Anwendung zu internationalisieren. Es enthält das Vite-Plugin, um die Konfiguration über Umgebungsvariablen im [Vite-Bundler](https://vitejs.dev/guide/why.html#why-bundle-for-production) festzulegen. Es bietet auch Middleware, um die bevorzugte Sprache des Benutzers zu erkennen und den Benutzer auf die entsprechende URL weiterzuleiten, wie in der [Konfiguration](https://github.com/aymericzip/intlayer/blob/main/docs/de/configuration.md) angegeben.
+
+## Warum Ihre Vite-Anwendung internationalisieren?
+
+Die Internationalisierung Ihrer Vite-Anwendung ist entscheidend, um ein globales Publikum effektiv zu bedienen. Sie ermöglicht es Ihrer Anwendung, Inhalte und Nachrichten in der bevorzugten Sprache jedes Benutzers bereitzustellen. Diese Fähigkeit verbessert die Benutzererfahrung und erweitert die Reichweite Ihrer Anwendung, indem sie für Menschen aus verschiedenen sprachlichen Hintergründen zugänglicher und relevanter wird.
+
+## Konfiguration
+
+Das `vite-intlayer`-Paket funktioniert nahtlos mit dem [`react-intlayer`-Paket](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/react-intlayer/index.md) und dem [`intlayer`-Paket](https://github.com/aymericzip/intlayer/blob/main/docs/de/packages/intlayer/index.md). Schauen Sie sich die entsprechende Dokumentation für weitere Informationen an.
+
+## Installation
+
+Installieren Sie das erforderliche Paket mit Ihrem bevorzugten Paketmanager:
+
+```bash packageManager="npm"
+npm install vite-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add vite-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add vite-intlayer
+```
+
+## Beispiel für die Nutzung
+
+Sehen Sie ein Beispiel, wie die Plugins in Ihre Vite-Konfiguration eingebunden werden können.
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [intlayerPlugin(), intLayerMiddlewarePlugin()],
+});
+```
+
+> 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 Optimierung der Leistung.
+
+> Das `intLayerMiddlewarePlugin()` fügt serverseitiges Routing zu Ihrer Anwendung hinzu. Dieses Plugin erkennt automatisch die aktuelle Sprache basierend auf der URL und setzt das entsprechende Sprach-Cookie. Wenn keine Sprache angegeben ist, bestimmt das Plugin die am besten geeignete Sprache basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Sprache erkannt wird, wird auf die Standardsprache umgeleitet.
+
+## Beherrschen der Internationalisierung Ihrer Vite-Anwendung
+
+Intlayer bietet viele Funktionen, um Ihnen bei der Internationalisierung Ihrer Vite-Anwendung zu helfen.
+
+**Um mehr über diese Funktionen zu erfahren, lesen Sie den [React-Internationalisierungsleitfaden (i18n) mit Intlayer und Vite und React](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_with_vite+react.md) für Vite- und React-Anwendungen.**

package/de/packages/vue-intlayer/index.md

@@ -0,0 +1,3 @@
+this doc will be automatically generated translated from the english doc
+
+see /docs/en/packages/vue-intlayer/index.md