Teil 3 - Implementierung einer Landing Page mit Nuxt und i18n

In diesem Tutorial wird eine Landing Page mit Nuxt, TailwindCSS und i18n implementiert, einschließlich einer Hero-Sektion, Feature-Sektion und Footer-Sektion mit Sprachumschaltung.

08.09.2024

Einführung

In den vorherigen Teilen dieser Serie haben wir ein Nuxt-Projekt aufgesetzt und die grundlegende Konfiguration für i18n vorgenommen. In diesem dritten Teil werden wir eine einfache Landing Page mit drei Hauptsektionen implementieren: einer Hero-Sektion, einer Feature-Sektion und einer Footer-Sektion. Zusätzlich werden wir einen Sprachen-Dropdown in der Hero-Sektion integrieren, der es ermöglicht, die Sprache der gesamten Seite zu ändern.

Voraussetzungen

Bevor wir beginnen, stelle sicher, dass du die vorherigen Teile dieser Serie abgeschlossen hast:

  1. Teil 1 - Ein neues Projekt mit Nuxt, TailwindCSS, NuxtContent, Nuxt i18n erstellen
  2. Teil 2 - Konfiguration von nuxt/i18n

Schritt-für-Schritt-Anleitung

Schritt 1: Vorbereitung der Übersetzungen

Zuerst müssen wir unsere Übersetzungsdateien erweitern, um den neuen Inhalt für unsere Landing Page aufzunehmen. Öffne die Dateien locales/en-US.json und locales/de-DE.json und füge folgende Inhalte hinzu:

en-US.json:

{
  "hero": {
    "title": "Welcome to Our Amazing App",
    "subtitle": "Discover a new way of doing things",
    "cta": "Get Started"
  },
  "features": {
    "title": "Our Features",
    "feature1": {
      "title": "Easy to Use",
      "description": "Our app is designed with simplicity in mind"
    },
    "feature2": {
      "title": "Powerful",
      "description": "Unlock the full potential of our tools"
    },
    "feature3": {
      "title": "Secure",
      "description": "Your data is safe with us"
    }
  },
  "footer": {
    "copyright": "© 2024 Amazing App. All rights reserved.",
    "links": {
      "privacy": "Privacy Policy",
      "terms": "Terms of Service"
    }
  }
}

de-DE.json:

{
  "hero": {
    "title": "Willkommen bei unserer fantastischen App",
    "subtitle": "Entdecke eine neue Art, Dinge zu erledigen",
    "cta": "Jetzt loslegen"
  },
  "features": {
    "title": "Unsere Funktionen",
    "feature1": {
      "title": "Einfach zu bedienen",
      "description": "Unsere App wurde mit Blick auf Einfachheit entwickelt"
    },
    "feature2": {
      "title": "Leistungsstark",
      "description": "Nutze das volle Potenzial unserer Tools"
    },
    "feature3": {
      "title": "Sicher",
      "description": "Deine Daten sind bei uns sicher"
    }
  },
  "footer": {
    "copyright": "© 2024 Fantastische App. Alle Rechte vorbehalten.",
    "links": {
      "privacy": "Datenschutzrichtlinie",
      "terms": "Nutzungsbedingungen"
    }
  }
}

Schritt 2: Erstellen der Landing Page Komponenten

Wir werden separate Komponenten für jede Sektion unserer Landing Page erstellen. Erstelle einen neuen Ordner components in deinem Projektverzeichnis, falls er noch nicht existiert.

Hero-Komponente

Erstelle eine neue Datei components/Hero.vue mit folgendem Inhalt:

<template>
  <section class="bg-blue-600 text-white py-20">
    <div class="mx-auto px-4 w-full">
      <div class="flex justify-between items-center">
        <div class="w-2/3">
          <h1 class="text-5xl font-bold mb-4">{{ $t('hero.title') }}</h1>
          <p class="text-xl mb-8">{{ $t('hero.subtitle') }}</p>
          <button class="bg-white text-blue-600 py-2 px-6 rounded-full font-bold hover:bg-blue-100 transition duration-300">
            {{ $t('hero.cta') }}
          </button>
        </div>
        <div class="ml-auto">
          <LanguageSelector />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import LanguageSelector from './LanguageSelector.vue';
</script>

Feature-Komponente

Erstelle eine neue Datei components/Features.vue:

<template>
  <section class="py-20">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-12">{{ $t('features.title') }}</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div v-for="i in 3" :key="i" class="bg-white p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-semibold mb-2">{{ $t(`features.feature${i}.title`) }}</h3>
          <p>{{ $t(`features.feature${i}.description`) }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

Erstelle eine neue Datei components/Footer.vue:

<template>
  <footer class="bg-gray-800 text-white py-8">
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center">
        <p>{{ $t('footer.copyright') }}</p>
        <div>
          <a href="#" class="mr-4 hover:text-blue-300">{{ $t('footer.links.privacy') }}</a>
          <a href="#" class="hover:text-blue-300">{{ $t('footer.links.terms') }}</a>
        </div>
      </div>
    </div>
  </footer>
</template>

LanguageSelector-Komponente

Erstelle eine neue Datei components/LanguageSelector.vue:

<template>
  <select v-model="$i18n.locale" class="bg-white text-blue-600 py-2 px-4 rounded">
    <option v-for="locale in $i18n.locales" :key="locale.code" :value="locale.code">
      {{ locale.name }}
    </option>
  </select>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { locale, locales } = useI18n();
</script>

Schritt 3: Zusammensetzen der Landing Page

Jetzt, da wir alle Komponenten erstellt haben, können wir sie in unserer Hauptseite zusammenführen. Öffne die Datei pages/index.vue und ersetze den Inhalt durch:

<template>
  <div>
    <Hero />
    <Features />
    <FooterComponent />
  </div>
</template>

<script setup lang="ts">
import Hero from '~/components/Hero.vue';
import Features from '~/components/Features.vue';
import FooterComponent from '~/components/Footer.vue';
</script>

Schritt 4: Testen der Landing Page

Starte den Entwicklungsserver mit npm run dev und öffne http://localhost:3000 in deinem Browser. Du solltest nun deine neue Landing Page sehen, komplett mit Hero-Sektion, Feature-Sektion und Footer. Der Sprachen-Dropdown in der Hero-Sektion sollte es dir ermöglichen, zwischen Deutsch und Englisch zu wechseln, wobei sich der gesamte Inhalt der Seite entsprechend ändert.

Zusammenfassung

In diesem dritten Teil unserer Serie haben wir erfolgreich eine einfache, aber effektive Landing Page mit Nuxt, TailwindCSS und i18n implementiert. Wir haben gelernt, wie man:

  1. Übersetzungen für verschiedene Seitenelemente vorbereitet
  2. Separate Komponenten für Hero, Features und Footer erstellt
  3. Einen Sprachen-Dropdown implementiert, der die gesamte Seitensprache ändert
  4. Alle Komponenten zu einer vollständigen Landing Page zusammenfügt

Diese Grundlage kann nun weiter ausgebaut und an spezifische Projektanforderungen angepasst werden. In zukünftigen Tutorials könnten wir uns damit beschäftigen, wie man den Blog-Bereich mit nuxt/content integriert oder fortgeschrittenere i18n-Funktionen implementiert.

Im nächsten Teil werden wir mit Hilfe des nuxt_content Modules Markdown Inhalte auf unserer Webseite anzeigen lassen und mit Hilfe von TailwindCSS stylen.

Den Code aus diesem Tutorial findest du auf Github.