Teil 1 - Ein neues Projekt mit Nuxt, TailwindCSS, NuxtContent, Nuxt i18n erstellen

Einführung

In dieser Serie werde ich eine Nuxt-Webanwendung mit einer Startseite und einem einfachen Design mit Hilfe von TailwindCSS einrichten und einen Blog-Bereich mit Hilfe von nuxt/content hinzufügen. Der letzte Schritt wird die Konfiguration von nuxt/i18n sein, damit du verschiedene Sprachen zu deiner Webanwendung hinzufügen kannst. Dieser Teil der Serie fokussiert sich auf das Erstellen eines Nuxt Projektes mit der Installation der notwendigen Zusatzpakete mit der Kommandozeile (CLI).

Nuxt

Nuxt ist ein Framework, das auf Vue.js aufbaut und zusätzliche Funktionen wie automatische Komponentenimports, dateibasiertes Routing und Composables für serverseitiges Rendering (SSR)-freundliche Verwendung bietet. Hier sind die wichtigsten Vorteile von Nuxt und wie es sich von Vue 3 unterscheidet:

Welche Vorteile bietet Nuxt

• Vereinfachte Entwicklung: Nuxt vereinfacht die Entwicklung von serverseitig gerenderten Anwendungen und ermöglicht es Entwicklern, sich auf die Anwendungslogik anstelle von Infrastrukturdetails zu konzentrieren.
• Leistungssteigerung: Nuxt 3, basierend auf Vue 3, bietet eine bessere Leistung mit schnellerem Rendern aufgrund von Verbesserungen im Vue Virtual DOM und optimierten Bündelgrößen.
• SEO-Verbesserung: Nuxt.js verbessert die SEO durch serverseitiges Rendern (SSR), was eine bessere Verarbeitung durch Suchmaschinen-Crawler im Vergleich zu typischen SPA-Anwendungen wie Vue.js ermöglicht.
• TypeScript-Unterstützung: Sowohl Vue 3 als auch Nuxt 3 sind in TypeScript geschrieben, was eine vollständig typisierte Codebasis für die Vermeidung von Fehlern und die Dokumentation der API-Nutzung bietet.

Unterschied zu Vue 3

• Compositions-API: Nuxt 3 nutzt die in Vue 3 eingeführte Compositions-API, die eine bessere Wiederverwendung von Logik ermöglicht und Code nach Anliegen in komplexen Komponenten gruppieren kann.
• Schnelleres Rendern: Mit Verbesserungen im Vue Virtual DOM und optimierten Bündelgrößen bietet Nuxt 3 schnelleres Rendern für sowohl clientseitige als auch serverseitige Anwendungen.
• Kleinere Bündelgröße: Nuxt 3 konzentriert sich auf die Reduzierung der Bündelgröße, indem die meisten Funktionen von Vue tree-shakable gemacht werden, was zu minimalen Anwendungsgrößen führt.

Zusammenfassend bietet sowohl Vue 3 als auch Nuxt leistungsstarke Funktionen für die Webentwicklung, wobei Nuxt durch seine SSR-Fähigkeiten, SEO-Verbesserungen und verbesserte Leistung durch optimiertes Rendern und kleinere Bündelgrößen im Vergleich zu Vue 3 hervorsticht.

Einrichtungsanleitung

Voraussetzungen

Node.js und npm werden benötigt, damit du dieser Anleitung folgen kannst. Falls Node.js nicht installiert ist, besuche die offizielle Node.js-Website oder lade es dir über Homebrew mit folgendem Befehl herunter: brew install node

Schritt-für-Schritt-Anleitung

Schritt 1: Nuxt-App einrichten

Erstelle ein neues Projekt mit folgendem Befehl: npx nuxi@latest init <projekt-name>

Der Befehl zeigt dir die Auswahl des Paketmanagers an:

❯ Welchen Paketmanager möchten Sie verwenden?
● npm
○ pnpm
○ yarn
○ bun

Ich wähle npm. Wähle hier deinen passenden Paketmanager aus und bestätigte deine Auswahl mit Enter.

Dadurch wird die Nuxt-App in einem separaten Verzeichnis erstellt. Wechsele zum neu erstellten Projektordner: cd <projekt-name> Dein Projektordner sollte wie folgt aussehen:

.
├── README.md
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── node_modules
│   └── ...
├── public
│   └── favicon.ico
├── server
│   └── tsconfig.json
└── tsconfig.json

Starte das neue Projekt mit diesem Befehl: npm run dev. Du solltest folgende Ausgabe sehen.:

> dev
> nuxt dev

Nuxt 3.10.3 mit Nitro 2.9.1
  ➜ Lokal:    http://localhost:3000/
  ➜ Netzwerk:  Verwenden Sie --host, um freizugeben

  ➜ Entwicklertools: Drücken Sie Shift + Option + D im Browser (v1.0.8)

ℹ Vite-Server in 591 ms aufgewärmt
ℹ Vite-Client in 904 ms aufgewärmt
✔ Nuxt Nitro-Server in 228 ms gebaut                   nitro

Deine Anwendung funktioniert einwandfrei und du kannst die URL http://localhost:3000 besuchen und solltest eine Seite wie diese sehen:

Wenn du die Seite sehen kannst, hast du ein leeres Nuxt-Projekt initialisiert und die Grundlage für die nächsten Schritte geschaffen.

🚀 Herzlichen Glückwunsch 🚀

Lass uns fortfahren und die restlichen Pakete hinzufügen.

Schritt 2: TailwindCSS

Ich benutze TailwindCSS wirklich gerne, weil es mir hilft, meine Webanwendungen zu stylen. TailwindCSS ist ein Utility-First-CSS-Framework, das für seine schnellen Entwicklungsmöglichkeiten und Anpassungsoptionen bekannt ist. Es vereinfacht das Styling, indem es vordefinierte CSS-Klassen bereitstellt, die direkt in HTML angewendet werden können, und spart so Zeit und Mühe beim Schreiben von benutzerdefiniertem CSS von Grund auf. Installiere TailwindCSS mit folgendem Befehl:

npm install -D @nuxtjs/tailwindcss

Füge es in deine nuxt.config.ts Datei zu den Modulen hinzu:

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],
});

Schritt 3: Nuxt/i18n

Wenn du deine Webanwendung in mehreren Sprachen veröffentlichen möchtest, solltest du das Nuxt/i18n-Modul verwenden. Dieses Modul ist einfach zu verwenden und verfügt über eine großartige Dokumentation, falls du beim Einrichten auf Probleme stoßen solltet, kannst du dort nach einer Lösung suchen. Installiere i18n mit folgendem Befehl: npm install -D @nuxtjs/i18n

Füge es in deine nuxt.config.ts Datei zu den Modulen hinzu:

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss", "@nuxtjs/i18n"],
});

Schritt 4: Nuxt/Content

Nuxt Content ist ein Modul, das für Nuxt 3 entwickelt wurde und die Inhaltsverwaltung vereinfacht, indem es Dateien wie .md, .yml, .csv und .json im content/-Verzeichnis eines Nuxt-Projekts liest, um eine robuste Datenquelle für Anwendungen zu erstellen. Es ermöglicht Entwicklern, Vue-Komponenten innerhalb von Markdown-Dateien mithilfe der MDC-Syntax zu verwenden, unterstützt die Abfrage von Inhalten mit einer MongoDB-ähnlichen API und erleichtert die Bereitstellung in statischen und Node-Server-Hosting-Umgebungen. Die Vorteile von Nuxt Content umfassen eine effiziente Inhaltsverwaltung durch ein Dateibasiertes CMS, die nahtlose Integration von Vue-Komponenten in Markdown-Dateien, die vereinfachte Abfrage von Inhalten und vielseitige Bereitstellungsoptionen für verschiedene Arten von Projekten wie Blogs, Dokumentationsseiten, Portfolios. Installieren Sie nuxt/content mit folgendem Befehl: npm install @nuxt/content

Füge es in deine nuxt.config.ts Datei zu den Modulen hinzu:

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss", "@nuxtjs/i18n", "@nuxt/content"],
});

Zusammenfassung

Wenn du die aufgeführten Schritte ausgeführt hast, solltet du ein Grundgerüst für eine Nuxt Webanwendung haben. Dieses Grundgerüst kann nun mit Inhalt gefüllt werden. So können jetzt pagesangelegt und mit TailwindCSS gestylt werden. Darüber hinaus kannst du die Inhalte in verschiedenen Sprachen hinterlegen und so einem größeren Auditorim zu Verfügung stellen. Diese weiteren Schritte werden in den nächsten Posts genauer beschrieben.

Den Code aus diesem Tutorial findest du auf Github.