Schulung · Workshop · Coaching · Beratung

Nuxt.js für Einsteiger: Schulung zu SSR, Routing und Nitro

Nuxt.js für Einsteiger: Server-Rendering, Routing und Deployment

Dauer: ab 1 Tag (8 UE) | Preis: ab 900 EUR (netto) | Live online oder vor Ort | Termin nach Vereinbarung

Nach dem Kurs entwickeln Sie mit Nuxt Vue-Anwendungen, die auf dem Server rendern und von Suchmaschinen gefunden werden: dateibasiertes Routing, Datenabruf mit useFetch, eigene Server-Routen mit Nitro und Deployment.

Gesamtpreis für bis zu 3 Teilnehmende · Unverbindliche Anfrage · Keine Vorkasse

Was braucht eine Vue-Anwendung, damit Suchmaschinen und langsame Geräte sie mögen?

Nuxt.js für Einsteiger zeigt, wie Sie aus Vue-Kenntnissen vollständige Webanwendungen mit Server-Rendering machen. Nuxt liefert die HTML-Seite fertig gerendert aus, erzeugt Routen aus der Ordnerstruktur, lädt Daten mit useFetch einmal auf dem Server statt doppelt und bringt mit Nitro einen eigenen Server für API-Endpunkte mit. Dazu kommen Meta-Tags für SEO und ein Build, der sich ohne Umbau auf verschiedene Hosting-Anbieter bringen lässt.

Sie legen ein Projekt mit npm create nuxt@latest an, dem Nachfolger von create-nuxt-app, und lernen die Verzeichnisse kennen: Seiten, Layouts, Komponenten, Server-Routen und die generierten Ordner .nuxt und .output. Danach folgen dynamische Routen, Middleware, Datenabruf mit useFetch und useAsyncData, Server-Routen mit defineEventHandler, Meta-Daten mit useSeoMeta, Plugins und Module wie Nuxt Image. Am Ende stehen die Rendering-Modi – SSR, statische Generierung, hybride routeRules – und das Deployment auf Vercel, Cloudflare oder einen eigenen Node-Server.

Nuxt setzt Vue voraus: Template-Syntax, Komponenten und Reaktivität werden nur kurz wiederholt und im Seminar Vue.js für Einsteiger vermittelt. Für Tests von Komponenten und Stores verweisen wir auf Vue.js Testen und Debuggen.

In WebStorm hilft der AI Assistant von JetBrains, ein Nuxt-Projekt zügig zu erweitern – vorausgesetzt, er fällt nicht auf Nuxt-2-Wissen zurück: die Option asyncData, den alten fetch()-Hook oder das Modul @nuxtjs/axios. Sie lernen, Vorschläge daran zu messen, Hydration-Fehler mit Komponente und Stelle zu beschreiben und Server-Routen erst nach Typprüfung und SSR-Build zu übernehmen.

Alle Übungsschritte führen zu einer zusammenhängenden Anwendung und lassen sich auf ein eigenes Vorhaben übertragen, etwa einen Relaunch einer Firmenwebsite oder ein Kundenportal mit eigenem Backend.

Viele Teams greifen zu Nuxt wegen der SEO und bleiben wegen des Servers. Erst ist es nur das vorgerenderte HTML für Google, dann eine kleine Route, die den Schlüssel für die Wetter-API versteckt, dann die Formularverarbeitung – und plötzlich braucht das Frontend kein separates Backend mehr. Die eigentliche Lernkurve bei Nuxt ist nicht das Routing, sondern das Denken in zwei Laufzeitumgebungen: Was läuft auf dem Server, was im Browser, und was darf auf keinen Fall im Client-Bundle landen?

Was Sie danach können

  • Sie legen ein Nuxt-Projekt an und erklären, welche Aufgabe die einzelnen Verzeichnisse haben
  • Sie bauen Seiten mit dateibasiertem Routing, dynamischen Routen, Layouts und Middleware
  • Sie laden Daten mit useFetch und useAsyncData, ohne sie auf Server und Client doppelt abzurufen
  • Sie schreiben Server-Routen mit Nitro und halten Geheimnisse aus dem Client-Bundle heraus
  • Sie setzen Meta-Tags für SEO, wählen einen Rendering-Modus je Route und stellen die Anwendung bereit

Zielgruppe und Voraussetzungen

  • Vue-Entwickler:innen, die SEO-fähige Websites oder Full-Stack-Anwendungen bauen wollen
  • Teams, die eine Vue-SPA auf Server-Rendering umstellen oder ein Nuxt-2-Projekt modernisieren
  • Frontend-Entwickler:innen, die kleine Backends ohne separaten Server umsetzen möchten
Themen und Inhalte für Ihre Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung:

Nuxt.js für Einsteiger: Server-Rendering, Routing und Deployment

Erste Schritte mit Nuxt
  • Was Nuxt zu Vue ergänzt: Server-Rendering, Konventionen statt Konfiguration, Server-Teil
  • Nuxt für die komplette Anwendung: Seiten und API-Endpunkte in einem Projekt
  • Projekt anlegen mit npm create nuxt@latest, Nachfolger von create-nuxt-app
  • Verzeichnisstruktur seit Nuxt 4: app/, server/, public/ und nuxt.config.ts
  • Generierte Ordner .nuxt und .output: Typen, Build-Ergebnis, nicht einchecken
  • Layouts mit <NuxtLayout> und Slot, Seiten im Ordner pages/
  • Erste Seite anlegen und mit <NuxtLink> verlinken
  • Auto-Imports für Komponenten, Composables und Vue-Funktionen
  • Nuxt DevTools: Routen, Komponenten und Payload der Seite einsehen
Dateibasiertes Routing
  • Aus Dateien in pages/ entsteht die Routentabelle
  • Verschachtelte Routen mit <NuxtPage> in Elternseiten
  • Dynamische Routen [id].vue, Catch-all [...slug].vue, Parameter über useRoute
  • Route Middleware mit defineNuxtRouteMiddleware für geschützte Bereiche
  • Fehlerseiten mit error.vue und createError
Datenabruf in Nuxt
  • Daten beim Server-Rendering laden und per Payload an den Browser übergeben
  • useFetch mit Schlüssel, Query-Parametern und reaktiven Abhängigkeiten
  • useAsyncData für eigene Abfragen, $fetch für Aktionen im Client
  • Nachfolger des Fetch-Hooks aus Nuxt 2: lazy, status und refresh in useFetch
  • Geteilter Zustand mit useState, Pinia-Modul im Überblick
Server-Routen mit Nitro
  • API-Endpunkte unter server/api/ mit defineEventHandler
  • Eingaben lesen mit getQuery und readBody, Validierung mit Zod
  • Geheimnisse über runtimeConfig und Umgebungsvariablen nur auf dem Server
  • Server-Middleware unter server/middleware/ für Logging und Header
SEO und Meta-Tags
  • Titel und Beschreibung je Seite mit useHead und useSeoMeta
  • Globale Vorgaben in app.head der nuxt.config.ts
  • Open-Graph-Daten, kanonische URLs und Sitemap per Modul
  • Übung Bildergalerie: dynamische Detailseiten mit eigenem Titel und Vorschaubild
Nuxt erweitern: Plugins und Module
  • Plugins mit defineNuxtPlugin, Varianten nur für Client oder Server
  • Module über modules in der nuxt.config.ts einbinden, npx nuxt module add
  • Nuxt Image: <NuxtImg> und <NuxtPicture> für responsive Bildformate
  • Bildoptimierung über Provider des jeweiligen Hosting-Anbieters
Rendering-Modi und Deployment
  • Server-Rendering, statische Generierung mit nuxt generate und reine SPA im Vergleich
  • Hybrid-Rendering mit routeRules: Vorrendern, Caching und SPA je Route
  • Bereitstellung auf Cloudflare Workers über das Nitro-Preset cloudflare_module
  • Bereitstellung auf Vercel, Umgebungsvariablen im Projekt hinterlegen
  • Eigener Node-Server: .output/server/index.mjs hinter einem Reverse Proxy
Nuxt mit dem JetBrains AI Assistant
  • Nuxt-2-Muster in Vorschlägen erkennen: Option asyncData, fetch()-Hook, @nuxtjs/axios
  • Nach jeder Änderung npx nuxt typecheck und einen SSR-Build als Prüfschritt ausführen
  • Hydration-Warnungen aus der Browserkonsole gezielt als Kontext übergeben
  • Vorgeschlagene Server-Routen auf Eingabevalidierung und Geheimnisse im Client-Bundle prüfen
Praxisprojekt: Veranstaltungskalender eines Stadtteilvereins
  • Veranstaltungsliste und Detailseiten mit dynamischen Routen und useFetch
  • Server-Route für Anmeldungen mit Validierung und Bestätigungsseite
  • SEO-Metadaten je Veranstaltung, Plakate über Nuxt Image
  • Startseite vorgerendert, Detailseiten mit Caching, Deployment auf Vercel

*) Die Inhalte werden individuell abgestimmt und mit Praxisbeispielen abgerundet.

Ein Symbol für einen Kalender.

Offene Termine

Kostenlose Reservierung
Ein Symbol für Angebot erhalten.

Unser Angebot

Individuelle Schulung für Einzelpersonen und Teams – live online oder vor Ort.

Dauer

Ein Symbol für Dauer.
ab 1 Tag (8 UE)

Die Dauer richtet sich nach Ihren Inhalten.

Preis

Ein Symbol für Preis.
ab 900 EUR (Nettopreis)
ab 1.071 EUR (Bruttopreis)

Die Preise verstehen sich bei Unternehmern gemäß § 14 BGB zzgl. MwSt. Der dargestellte Ab-Preis gilt für firmeninterne Veranstaltungen und entspricht dem niedrigsten Gesamtpreis für Veranstaltungen mit bis zu drei (3) Teilnehmenden.

Termin

Ein Symbol für einen Kalender.
Ganztägig + halbtägig
nach Vereinbarung

Ganztägig oder halbtägig nach Vereinbarung, live online oder vor Ort.

Ihre Vorteile

Ein Symbol für ein Vorgespräch durchführen.
Persönliches Vorgespräch
Ein Symbol für die individuelle Vorbereitung.
Individuelle Vorbereitung
Ein Symbol für Experten aus der Praxis.
Experten aus der Praxis
Ein Symbol für ein Zertifikat.
Inklusive Zertifikat

Unsere Garantien

1. Relevanz-Garantie

Wir passen den Inhalt spezifisch an die Bedürfnisse jedes Teilnehmers an. Irrelevante Themen werden ausgespart, um den größtmöglichen Nutzen zu garantieren.

2. Qualitäts-Garantie

Durch regelmäßiges Feedback optimieren wir unsere Schulungen kontinuierlich und garantieren Ihnen ein Lernerlebnis der Extraklasse.

3. Zufriedenheits-Garantie

Unsere Zufriedenheitsgarantie spricht für sich – bei Unzufriedenheit entstehen Ihnen keine Kosten.

Wir helfen gerne weiter!

Rufen Sie uns an, schreiben eine E-Mail oder nutzen das Kontaktformular.

Schulung anfragen

Unverbindlich · Keine Vorkasse

Einige Unternehmen, für die wir tätig waren

Terex Material Handling & Port Solutions AG

HitchHiker Software GmbH

WIdO-Wissenschaftliches Institut der AOK

Teilnehmer

Feedback

Herr Hecker ist sehr gut auf individuelle Wünsche, Fragen und Anregungen eingegangen. Eine sehr informative, interessante und gelungene Veranstaltung.
Teilnehmer

Feedback

Herr Hecker hat das Thema sehr anschaulich dargestellt und ist auf alle Fragen eingegangen. Ich fühle mich jetzt gut vorbereitet, um durchzustarten.
Teilnehmer

Feedback

Die gelassene, professionelle Art hat mir gut gefallen. Kompetent, engagiert, professionell. Gute Beispiele, sympathisches Auftreten. Eigene Themenideen wurden aufgegriffen.
Unser Angebot für Ihre firmeninterne Beratung, Coaching, Workshop, Training und Weiterbildung

Lösungen für Ihren Bedarf an Coaching, Workshop, Training, Schulung und Weiterbildung

Profitieren Sie von unserer langjährigen Expertise in der beruflichen Weiterbildung, modernen Lernmethoden und einem Portfolio von über 600 IT-, Online- und Digital-Beratungsleistungen.
Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Weiterbildung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

✓
Ein Symbol für eine einzelne Person.

Für eine Person

Training & Coaching für Einzelpersonen

  • Passgenaue Inhalte auf den einzelnen Teilnehmer zugeschnitten
  • Ein sehr effektives Format, das schnell Ergebnisse bringt
  • Individuelles Training und Coaching motivieren und wirken
Jetzt anfragen
✓
Ein Symbol für eine Gruppe von Personen.

Für eine Gruppe

Training & Workshops für Teams und Abteilungen

  • Bedarfsgerechte Inhalte auf die Herausforderung der Praxis zugeschnitten
  • Konsequente Praxisorientierung, modernste Techniken und Tools
  • Neue Fähigkeiten und Kenntnisse nachhaltig in den Arbeitsalltag integrieren
Jetzt anfragen
✓
Ein Symbol für ein Unternehmen.

Für eine Firma

Training-Komplett-Lösungen für Ihr Unternehmen‍

  • Ganzheitliche Konzepte für Ihre Mitarbeiterentwicklung
  • Individueller Skill-Katalog zur Erweiterung Ihres internen Weiterbildungsangebots
  • Nachhaltige Personalentwicklung realisieren
Jetzt anfragen

Intern vorschlagen

Sie entscheiden nicht allein über die Schulung? Hier finden Sie die Agenda zum Weiterleiten und einen fertigen Vorschlag für die Person, die entscheidet.

Ohne Formular und ohne Anmeldung – Sie schicken den Vorschlag selbst.

So wird daraus Ihre Firmenschulung

1. Bedarf klären: Im kostenlosen Vorgespräch besprechen wir Ziele, Vorkenntnisse und Praxisaufgaben.

2. Angebot abstimmen: Inhalte, Format (live online oder vor Ort), Dauer und Preis legen wir gemeinsam fest.

3. Schulung durchführen: Sie arbeiten an Übungen aus Ihrem Alltag oder an einem neutralen Beispiel und nehmen konkrete nächste Schritte mit.

Häufige Fragen zur Schulung

Gilt der Ab-Preis pro Person oder für die Veranstaltung?

Die 900 EUR netto sind der niedrigste Gesamtpreis für eine firmeninterne Veranstaltung mit bis zu drei Teilnehmenden. Größere Gruppen und einen anderen Umfang bieten wir individuell an. Der verbindliche Preis steht in Ihrem Angebot.

Können wir eigene Aufgaben einbringen?

Ja. Welche Aufgaben sich eignen, welche Zugänge nötig sind und wie wir die Vertraulichkeit sichern, klären wir im Vorgespräch. Alternativ arbeiten wir an einem neutralen Beispiel.

Ist die Anfrage schon eine Buchung?

Nein. Sie erhalten zuerst ein abgestimmtes Angebot und entscheiden dann über die Beauftragung. Eine Vorkasse gibt es nicht.

Ihre unverbindliche und kostenlose Schulungsanfrage zum Thema

Nuxt.js für Einsteiger - Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung

Schildern Sie uns kurz Ihren Bedarf. Ziele, Inhalte und Termin stimmen wir persönlich mit Ihnen ab.

*) Die Angabe erfolgt freiwillig. Wir nutzen Ihre Telefonnummer ausschließlich, um Ihre Anfrage effizienter zu bearbeiten oder Rückfragen zu klären.

Ich interessiere mich für den Termin:

Termin anfragen

Das Angebot von "HECKER CONSULTING" richtet sich ausschließlich an Unternehmen und Behörden (iSv § 14 BGB). Verbraucher (§ 13 BGB) sind vom Vertragsschluss ausgeschlossen. Mit Absendung der Anfrage bestätigt der Anfragende, dass er nicht als Verbraucher, sondern in gewerblicher Tätigkeit handelt. § 312i Abs. 1 S. 1 Nr. 1-3 und S. 2 BGB (Pflichten im elektronischen Geschäftsverkehr) finden keine Anwendung.

Vielen Dank, Ihre Nachricht wurde empfangen!
Beim Absenden des Formulars ist etwas schiefgelaufen.
Beratung, Coaching, Workshop, Training, Schulung

Ähnliche Leistungen, die Sie interessieren könnten.

Wir erweitern ständig unser Beratungsportfolio. Über 600 IT-, Online-, Digital-Beratungsleistungen haben wir für Sie im Programm. Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Beratung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

Mehr IT-, Online-, Digital-Beratungsleistungen anzeigen >>
Nach oben