▲ Community Session: Nuxt auf Vercel

VVercel
컴퓨터/소프트웨어자격증/평생교육AI/미래기술

Transcript

00:00:00Und wenn ich zum Beispiel ein Portfolio möchte, ist es vielleicht nicht so wichtig zu sagen, dass ich dies benutze, aber
00:00:13ja, man hat direkt das, was man will, und kann sein Projekt dann schnell bearbeiten.
00:00:29Das war's dann erst mal zu den Agents, ich weiß nicht, ob wir sonst noch Ideen haben.
00:00:38Du kannst die Blogposts erwähnen, in denen alles im Detail erklärt wird, wie es
00:00:45implementiert wurde, und auch, dass der Quellcode Open Source ist.
00:00:49Wenn ihr tiefer in die Erstellung des Nuxt-Agents auf der Website eintauchen wollt, welche Komponenten
00:00:55wir nutzen, um auf der Seite den Denkprozess und alles unter der Haube zu zeigen,
00:01:02und wenn ihr dazu beitragen wollt, weitere Features hinzuzufügen, ist das wohl der Punkt, an dem
00:01:08man anfangen kann zu lernen.
00:01:11Und das ist auch nicht das Einzige, oder?
00:01:13Denn Hugo hat das MCP-Toolkit gebaut, das es jeder Nuxt-Website ermöglicht, auch ein
00:01:22MCP-Server zu sein und in jede KI integriert zu werden, die das unterstützt.
00:01:30Und Nuxt.com ist wirklich zum Fokus für viele Dinge geworden.
00:01:35Man würde nie glauben, dass es diese API hat.
00:01:39Es ist unsere Module-API, die die Nuxt-Devtools antreibt.
00:01:42Sie hat MCP-Server, eine ganze Menge sogar, mit denen man sich von der Nuxt-App aus,
00:01:48vom KI-Agenten aus verbinden kann, und nun wurde sie mit Chat-Funktion ausgebaut.
00:01:53Ich meine, jemand muss Hugo stoppen.
00:01:55Er ist einfach zu gut.
00:01:59Vielen Dank.
00:02:03Etwas, das er gemacht hat – ich versuche mal, meinen ganzen Bildschirm zu teilen –
00:02:10finde ich ziemlich beeindruckend.
00:02:11Ich weiß nicht, ob ihr jetzt meinen Bildschirm seht.
00:02:15Ja.
00:02:16Es ist dieser Admin-Bereich – tut mir leid, Leute, ihr werdet euch nicht damit verbinden können, aber
00:02:22wir haben dieses Widget auf der Website, über das ihr Feedback geben könnt.
00:02:27Und das ist tatsächlich sehr nützlich für uns, um zu wissen, auf welche Seiten wir uns
00:02:32mit der Zeit konzentrieren müssen. Verbessert es sich?
00:02:37Und er hat vor Kurzem den MCP-Admin veröffentlicht, den wir in unsere Konversation eingebunden haben, sofern
00:02:47ich mich hier nicht irre.
00:02:50Ich könnte fragen: Geh in den Nuxt-Admin-MCP und zeig mir die Seite mit dem meisten Feedback
00:03:04oder wie man sie verbessern kann.
00:03:09Und so wird er normalerweise, wenn ich es richtig konfiguriert habe, den Aufruf starten, aber das ist der
00:03:16Admin... ja.
00:03:23Das dachte ich mir.
00:03:24Ich glaube, ich muss den Agenten namens Nuxt-Admin-MCP nutzen und ihn nach dem Feedback
00:03:35zur schlechtesten Seite fragen und wie man sie verbessern kann.
00:03:42Vielleicht ist dieser hier der richtige, sollte er eigentlich sein, ja.
00:03:56Dann sagt er uns, dass diese Seite eine durchschnittliche Bewertung hat.
00:04:00Wir hatten nur drei Rückmeldungen, aber so können wir einige Anhaltspunkte verstehen,
00:04:07wie man diese Seite verbessern kann.
00:04:09Es liegt wahrscheinlich daran, dass es nur Feedback aus einer Woche ist.
00:04:12Wir können nach mehr fragen.
00:04:14Ja, genau.
00:04:17Und noch etwas, woran wir gearbeitet haben: Du hast Nuxt Content erwähnt, und Nuxt Content
00:04:21ist unser Basis-CMS, bei dem wir unsere gesamte Dokumentation im DOM haben und
00:04:29Komponenten innerhalb von Markdown verwenden können.
00:04:32In den letzten Monaten haben wir an einem Projekt namens Comark gearbeitet.
00:04:36Wir haben den Kern des Inhalts extrahiert, um ihn öffnen zu können und
00:04:44mit dem SvelteKit-Team sowie dem Nuxt-Team zusammenzuarbeiten, um dieses Markdown mit
00:04:50Komponenten zur Laufzeit zu haben.
00:04:53Und wenn wir über KI sprechen: Dieses Projekt unterstützt auch Streaming und Auto-Closing.
00:05:00Wir haben hier ein laufendes Feature, das gerade entsteht; das ist die beste Gelegenheit
00:05:10zu sagen: Generiere mir eine Seite über, sagen wir mal, Basketballschuhe.
00:05:20Und wir können... im Moment streamt die KI im Grunde reines Markdown, aber indem wir
00:05:26der KI beibringen, diese Syntax zu nutzen, kann sie anfangen, Landingpages zu generieren,
00:05:33die diese Komponenten unter der Haube verwenden.
00:05:37Das ist noch ein sehr frühes Stadium, aber es ist sehr vielversprechend, und wir wollen
00:05:44es in den nächsten Wochen in der V1 für alle zugänglich machen.
00:05:51Das ist der aktuelle Fortschritt bei Markdown.
00:05:56Und ja, ich denke, Daniel hat vielleicht auch Fortschritte, die er teilen möchte.
00:06:01Oder – ich sehe gerade, dass er weg ist.
00:06:03Oh, er ist wieder da.
00:06:04Pünktlich.
00:06:05Er ist zurück.
00:06:06Hallo.
00:06:07Willkommen.
00:06:08Wisst ihr, ich halte euch nur gerne auf Trab.
00:06:17Ja, ich habe gerade über Comark und Nuxt Content gesprochen, und
00:06:28dann dachte ich, Daniel möchte vielleicht etwas dazu sagen.
00:06:30Und dann habe ich gemerkt, dass du kurz aus dem Call warst.
00:06:35Nun, ja.
00:06:37Ich denke, eines der sehr interessanten Dinge ist – ich weiß nicht, wie viele Leute
00:06:44hier gerade zuhören?
00:06:45Wie verrät man Geheimnisse über Dinge, über deren Umsetzung wir nachdenken?
00:06:52Gib den Leuten, was sie wollen, aber sag es niemandem weiter, okay?
00:06:57Es bleibt nur unter uns und den sehr engen Freunden, die gerade zuhören. Wir sprechen
00:07:12darüber, wie wir Nuxt verbessern können.
00:07:14Lange Zeit gab es diesen Punkt – und das überschneidet sich ein wenig mit dieser speziellen Seite –
00:07:19aber Nuxt war für eine sehr, sehr lange Zeit
00:07:25eine Lösung für SEO.
00:07:26Die Leute haben Nuxt benutzt und direkt hervorragende Suchmaschinenergebnisse
00:07:33erhalten.
00:07:34Tatsächlich war Nuxt eine Zeit lang ganz oben in den Suchergebnissen für Next.js,
00:07:42stimmt das, Sebastian? Du erinnerst dich auch daran, oder?
00:07:46Leute haben nach "Next" gesucht und Nuxt war ganz oben in der Liste, aber das stimmt nicht mehr.
00:07:50Wir ranken absolut nicht mehr für "Next".
00:07:51Aber wir überlegen, was wir mit Dingen wie Nuxt Content tun können, damit Nuxt
00:07:53die beste, eine phänomenale Plattform für Suchmaschinenoptimierung bleibt.
00:07:59Was also tun, wenn Leute nach Informationen über dein Produkt suchen,
00:08:05und sie vielleicht andere Dinge wie einen Agenten benutzen oder
00:08:10einen Smart Speaker oder so etwas?
00:08:16Wie bekommen sie Informationen über deine Seite?
00:08:19Dazu haben wir eine Menge geplant.
00:08:22Ich leite dieses Projekt nicht selbst, um das klarzustellen, aber wir im Team tun es.
00:08:24Ich will nicht zu viele Geheimnisse ausplaudern, aber es ist erwähnenswert,
00:08:28wenn es um coole neue Dinge geht, die im Bereich Nuxt Content
00:08:33passieren könnten.
00:08:37Ja.
00:08:38Danke.
00:08:39Wenn ihr euch die letzten Pull Requests im Nuxt.com-Repo oder der
00:08:40Nuxt UI Dokumentation anseht: Benjamin und Hugo haben mehr AEO-Optimierungen vorangetrieben.
00:08:47Wenn also ein Agent versucht, die Nuxt-Dokumentation zu crawlen, und wir
00:08:53das über den Accept-Header erkennen, der nach modernem Text verlangt, dann liefern wir
00:09:00direkt die modernen Seiten aus. Das Gleiche gilt, wenn wir den User-Agent erkennen.
00:09:06Wir machen das für alle Seiten und versuchen, JSON-LD hinzuzufügen, also mehr Inhalte,
00:09:13damit Agenten verstehen, was sie crawlen, und um das Kontextfenster zu verkleinern,
00:09:19indem wir ihnen den Inhalt direkt geben.
00:09:24Bisher experimentieren wir und überlegen, welche Features Teil des Cores
00:09:26oder unseres Core-Moduls sein könnten. Aber bevor wir refactoren und
00:09:31über etwas Agnostisches nachdenken, müssen wir erst selbst experimentieren
00:09:36und sehen, wie die Community es annimmt und ob es Sinn ergibt, da sich alles
00:09:42so schnell entwickelt.
00:09:48Wir haben über LLMs.txt und MCP gesprochen, jetzt geht es um Markdown im Header.
00:09:49Wie wird das in zwei Wochen aussehen?
00:09:56Wir wollen Features nicht direkt in den Core bringen, wenn wir sie später
00:09:58wieder als veraltet markieren müssen.
00:10:06Wir gehen also Schritt für Schritt vor, experimentieren aber, wann immer es geht.
00:10:07Eines der Dinge, die ich an Nuxt liebe – wir sprachen ja über das Modul-Ökosystem
00:10:16und die Tatsache, dass es erweiterbar ist.
00:10:21Das bedeutet, man kann Dinge wie diese bauen, die nicht im Core landen müssen.
00:10:24Sie können erst mal ein Experiment sein.
00:10:28Es kann etwas sein, das Leute in der Produktion auf ihren Websites nutzen, und wir können
00:10:31echtes Feedback bekommen, nicht nur konzeptionelles Feedback zu einem RFC,
00:10:35sondern praktisches Feedback zu realen Projekten oder Anwendungsfällen,
00:10:42bevor wir die Entscheidung treffen müssen, ob etwas
00:10:46ein Core-Modul wird oder nicht.
00:10:53Ich sehe gerade nicht, ob es Fragen im Live-Chat gibt,
00:10:56die wir beantworten könnten.
00:11:07Ich hätte da eine Frage. Ich weiß, du hast schon ein wenig die Geheimnisse geteilt,
00:11:08woran ihr gerade arbeitet, aber gibt es etwas Kommendes bei Nuxt, auf das du
00:11:15besonders gespannt bist und das du teilen kannst?
00:11:20Es gibt viele Dinge, auf die ich mich freue, aber ich möchte nicht...
00:11:32Nun, eines der Dinge ist, dass wir alles für die kommende Version 5
00:11:40vorbereiten.
00:11:44Darüber sprechen wir schon eine Weile.
00:11:45Nitro Version 3 ist das Hauptfeature, das dies mit sich bringt,
00:11:47und das Ökosystem auf diesen Schritt vorzubereiten, ist viel Arbeit, aber es ist
00:11:55definitiv die richtige Richtung.
00:12:01Nitro bringt uns näher an Webstandards heran.
00:12:02Ein wirklich minimaler Server-Wrapper, der so weit wie möglich nativ ist,
00:12:05egal ob auf Bun, Deno, Node oder was auch immer.
00:12:12Und ich denke, dieser Wechsel wird etwas sein, worüber die Leute sofort
00:12:18sehr glücklich sein werden. Ich nutze Version 5 Nightly bereits lokal.
00:12:24Es ist schon jetzt eine wahre Freude, es zu benutzen, obwohl es noch nicht mal
00:12:31in einer Beta oder Alpha ist.
00:12:36Schön.
00:12:38Wir hatten einen Kommentar aus der Community: Jemand ist sehr gespannt auf V5.
00:12:39Und noch eine Frage: Was sind deine Top-Empfehlungen oder Tipps zur
00:12:45Optimierung von Nuxt-Workloads auf Vercel?
00:12:50Hugo, willst du anfangen? Nuxt auf Vercel optimieren... denn es
00:12:53kommt darauf an, in welcher Hinsicht – was meinst du mit Optimierung?
00:13:07Geschwindigkeit, Build oder Laufzeit?
00:13:14Ja, ich denke, da gibt es viele Wege, aber ich werde zumindest auf den
00:13:19Laufzeit-Teil eingehen.
00:13:28Eines der Dinge, die wir in Nuxt noch herauszufinden versuchen, ist, wie wir
00:13:29dem Nutzer vorschlagen können, ob eine Seite gecacht oder gerendert werden sollte.
00:13:36Es ist immer knifflig, da wir Komponenten haben können, die Daten abrufen und in Seiten
00:13:44verwendet werden. Man kann Authentifizierung direkt in der gesamten App haben.
00:13:49In diesem Fall möchte man nicht cachen – oder wenn man anfängt, Seiten mit
00:13:53Authentifizierung zu cachen, sagen wir, man hat einen Header, der den angemeldeten Nutzer anzeigt,
00:13:58dann muss man sicherstellen, dass man einen Platzhalter vorrendert.
00:14:03Man muss sicherstellen, dass kein Hydration-Fehler auftritt, weil man erst auf der Client-Seite
00:14:09merkt, dass man eingeloggt ist.
00:14:13Ich würde sagen, dass wir in Nuxt dieses sehr mächtige Feature haben, das auch
00:14:14von Nitro kommt: die Route Rules.
00:14:21Mit diesen Route Rules kann man Teile der Routen über Muster definieren.
00:14:22Man kann sagen: Für diese Gruppe, etwa einen Admin-Bereich unter /admin,
00:14:24deaktiviere SSR. Das brauche ich für diesen Teil nicht.
00:14:29Für /blog/** nutzt man dann
00:14:35ISR, weil wir Blogposts nicht jede Sekunde ändern.
00:14:37So kann man die inkrementelle statische Generierung in der jeweiligen Version nutzen.
00:14:45Mit diesen Route Rules kann man Teile der App mit nur wenigen
00:14:50Konfigurationszeilen optimieren.
00:14:55Das wäre meine wichtigste Empfehlung, bevor man in die Produktion geht:
00:15:01Prüft eure Route Rules.
00:15:03Klasse.
00:15:10Danke.
00:15:12Eine Sache noch... schieß los.
00:15:13Oh, Verzeihung.
00:15:14Was man sich mal ansehen sollte, ist NPMX.
00:15:18NPMX ist, falls ihr es noch nicht kennt, ein Ersatz für npmjs.com.
00:15:20Es ist ein Browser für das NPM-Registry, gebaut mit Nuxt und
00:15:23gehostet auf Vercel, und wir haben es wirklich extrem auf Performance getrimmt.
00:15:30Wenn ihr also wissen wollt, wie man etwas auf Vercel für Performance optimiert
00:15:36und sehen wollt, wie das in einer echten App aussieht, die für
00:15:42viele Seitenaufrufe skaliert – es nutzen wirklich viele Leute –, dann schaut es euch an.
00:15:45Dort seht ihr die Route Rules in Aktion und auch das Caching.
00:15:49Wir nutzen Caching mit inkrementeller statischer Generierung.
00:15:58Wir bauen und cachen also Payloads, wenn nötig. Wir nutzen das neue Feature
00:16:01aus Nuxt 4.4, den Payload-Cache, sogar für nicht vorgerenderte Seiten, was
00:16:09ich extrem cool finde.
00:16:17Es bedeutet, dass man die Vorteile nutzt, Daten abzurufen, bevor man die Seite überhaupt aufruft.
00:16:27Die Daten, die für diese Seite benötigt werden, werden vom Framework bereits im Voraus geladen.
00:16:28Und das sorgt für eine wirklich, wirklich schnelle Nutzererfahrung.
00:16:34Es gibt noch viel mehr zu entdecken, was ihr vielleicht auch auf
00:16:39eurer Website ausprobieren könnt.
00:16:45Großartig.
00:16:52Vielen Dank.
00:16:53Wir hatten auch einen Kommentar: Jemand sagte, er habe Nuxt noch nie probiert,
00:16:54Danke.
00:16:55Wir haben auch einen Kommentar erhalten: „Habe Nuxt noch nie ausprobiert,
00:17:03vielleicht ist es jetzt einen Versuch wert."
00:17:04Wir haben also einige Nuxt-neugierige Leute im Publikum. Was ist für sie
00:17:09der beste Weg, um mit Nuxt anzufangen?
00:17:12Wir haben ja schon einige KI-Tools erwähnt, aber gibt es dazu
00:17:16noch weitere Empfehlungen?
00:17:17Ich denke, im Moment haben wir die Nuxt-Agents. Sie können einem
00:17:24wirklich gute Tipps geben, wo man anfangen soll, wenn man ein Template
00:17:29oder die Dokumentation für einen Start bei Null nutzen möchte.
00:17:31Wir haben viele Templates auf Nuxt.com, aber auch auf Nuxt UI,
00:17:39und wir haben Nuxt.new mit weiteren Vorlagen. Aber man kann
00:17:48jetzt auch direkt den Agent fragen.
00:17:51In der Nuxt UI-Dokumentation kann man es auch bereits in v0 öffnen,
00:17:57falls man erst mal mit dem Projekt chatten möchte, bevor man zur IDE wechselt.
00:18:08Ich finde oft, wenn man anfängt – also ich hatte zwar keine Probleme,
00:18:12bei Null zu starten, aber ich persönlich klone mir gerne ein Minimalprojekt.
00:18:17Ich habe mein eigenes Template auf GitHub: Daniel Roe slash Nuxt-site-template.
00:18:23Nuxt-site-template.
00:18:24Das kann man klonen.
00:18:25Es ist sehr minimal, enthält aber Dinge wie Unit-Tests und Ähnliches,
00:18:31die den LLMs signalisieren, dass ich das Projekt in diesem Stil
00:18:37weiterführen möchte.
00:18:38Ich finde, solche minimalen Templates wirken für LLMs ein bisschen wie Impfkristalle.
00:18:44Impfkristalle.
00:18:45Sie weisen die richtige Richtung und geben die nötige Orientierung,
00:18:50damit es so wächst, wie man es sich wahrscheinlich wünscht.
00:18:52Und eigentlich braucht man darüber hinaus nichts Spezielles.
00:18:56Man kann natürlich Dinge hinzufügen, aber nötig ist es nicht.
00:19:01Man kann einfach mit einem Template oder einem einfachen „Nuxt New“-Projekt starten und sagen:
00:19:09„Das ist es, was ich bauen möchte."
00:19:10Und ich finde, LLMs sind phänomenal darin.
00:19:12Sie haben damit keinerlei Probleme.
00:19:14Das Wichtigste bei allem Neuen ist meiner Meinung nach,
00:19:19Lerngelegenheiten zu schaffen und nicht nur Ergebnisse zu erzielen, oder?
00:19:24Klar, es sieht toll aus, aber ab wann hat man das Gefühl, es wirklich ausprobiert zu haben?
00:19:29Man hat Nuxt nicht wirklich probiert, wenn alles für einen erstellt wurde.
00:19:33Wenn man also Möglichkeiten einbauen kann, um das LLM zu bitten: „Gib mir eine Tour"
00:19:40oder „Erklär mir die Nuxt-Features anhand dessen, was du gebaut hast."
00:19:45So etwas ist wirklich nützlich, weil es die Zusammenhänge verdeutlicht.
00:19:49Erstens hilft es einem beim Review des erstellten Codes,
00:19:51und zweitens lernt man dazu und erwirbt neue Fähigkeiten.
00:19:56Suchen Sie mal nach Dr. Cat Hicks auf GitHub.
00:20:02Sie hat Claude-Skills entwickelt, um Lerngelegenheiten bei allem zu schaffen,
00:20:07was man tut – kleine 10-Minuten-Übungen inmitten von Coding-Herausforderungen,
00:20:12um die Dinge zu verinnerlichen, mit denen der Agent arbeitet.
00:20:17Wir haben beispiellosen Zugang zu Wissen und können Dinge tun,
00:20:22von denen wir vor sechs Monaten vielleicht noch keine Ahnung hatten.
00:20:29Entscheidend ist, wie wir uns als Menschen weiterentwickeln
00:20:35und solche Gewohnheiten sowie Lernpausen in unseren Alltag einbauen.
00:20:41Ich denke, das ist sehr wichtig, wenn wir wollen, dass unser Gehirn sich weiterentwickelt.
00:20:46Das ist ein sehr guter Punkt. Ich bin ja auch ein recht neuer Nuxt-Nutzer
00:20:56und komme hauptsächlich von Svelte. Ich habe meinen Agenten
00:21:02die Konzepte von Svelte auf Nuxt übertragen lassen. Also definitiv ein Pluspunkt für Lern-Agents.
00:21:08Möchte jemand etwas ergänzen? Entschuldigung. Das ist großartig.
00:21:17Ich teile meinen Bildschirm noch einmal. Nuxt ist wirklich ein progressives Framework.
00:21:26Man kann mit einem minimalen Projekt und einer einzigen app.vue-Datei starten.
00:21:32Das ist das Grundgerüst, und dann fügt man schrittweise Routing und Data-Fetching hinzu.
00:21:40Wir haben das Feature der Auto-Imports, was eine der besten Verbesserungen
00:21:45für die Developer Experience war. Mit dem Aufstieg der KI
00:21:51überlegen wir – man kann es ohnehin deaktivieren, wenn man Imports
00:21:56lieber direkt im Code hat. Aber für mich ist das der beste Weg zum Start.
00:22:03Wir führen auch EVALS für Nuxt auf verschiedenen Modellen aus.
00:22:11Bisher beherrschen sie das Nuxt-Wissen ziemlich gut, auch ohne
00:22:21spezielle Tricks wie .m-Skills oder eine agent.md-Datei.
00:22:28Wer sich für MCP interessiert – ich muss kurz prüfen, wo das genau ist –
00:22:35aber ich glaube, wir haben diesen MCP-Server, den man direkt in VS Code hinzufügen kann.
00:22:49Wir sind KI-gestützt, aber bisher sind die Agents auch ohne
00:22:57den MCP-Server ziemlich gut. Meine Empfehlung: Mit einem minimalen Setup starten
00:23:03und Features schrittweise hinzufügen. Wenn man KI nutzt,
00:23:10sollte man sie nach dem „Warum“ fragen. Wie Daniel sagte, ist das der Schlüssel,
00:23:16um das Gehirn aktiv zu halten. Ganz genau. Wir haben noch ein paar Fragen,
00:23:25um diesen Abschnitt abzuschließen. Eine aus dem Chat: Ich sehe," : "dass Nuxt
00:23:30oft in der deutschen E-Commerce-Community genutzt wird. Glaubt ihr,
00:23:36dass Nuxt in Europa populärer ist als in den USA oder ist es ausgeglichen?
00:23:42Nun, ich lebe in Edinburgh, Sebastian und Hugo sind in London.
00:23:51Maya, du bist auch in Europa. Ich bin vielleicht der Falsche, um zu beurteilen,
00:23:57wie populär Nuxt in den USA ist, aber mein Gefühl sagt mir: Es ist in Europa beliebter.
00:24:02Oft ist das so. React scheint in Nordamerika populärer zu sein,
00:24:09während Vue im Rest der Welt viel Anklang fand. Das scheint auch auf Nuxt zuzutreffen,
00:24:15aber das müssen wir ändern. Wir brauchen mehr Nuxt-Nutzer in den USA,
00:24:19vielleicht ein Core-Team-Mitglied von dort. Wer weiß.
00:24:25Nuxt auf der ganzen Welt! Nächste Frage von X: Da sich Nuxt schnell entwickelt,
00:24:35von 3 auf 4 zu 5 – was ist die beste Strategie für Teams für sichere Produktiv-Migrationen,
00:24:41besonders bei SSR- und Nitro-Änderungen?
00:24:50Bisher wissen wir es nicht genau. Ich fange mal an.
00:24:58Zwischen Nuxt 3 und Nuxt 4 gab es fast keine Breaking Changes,
00:25:03oder sie waren sehr gut dokumentiert. Man kann die Seite einfach der KI geben
00:25:11und sie um Hilfe bitten. Aber auch ohne KI war die Migration recht einfach.
00:25:17Nur bei sehr speziellen, fortgeschrittenen Features konnte es
00:25:21zu Problemen kommen. Daniel hat für ein reibungsloses Upgrade gesorgt.
00:25:27Von 2 auf 3 war es schwieriger wegen des Wechsels von Vue 2 auf Vue 3," : "da das
00:25:33ein anderes Framework und ein anderer Ansatz war – die Composable-Ära.
00:25:40Wir haben uns auch entschieden, die gesamte Server-Engine neu zu schreiben,
00:25:46damit sie in Serverless-Umgebungen performant läuft. Diese zwei großen Rewrites...
00:25:53Das nächste Major-Release wird zugänglich sein, und es gibt diese
00:26:01Kompatibilitätsschicht, die wir gebaut haben. Man kann sich also frühzeitig
00:26:08auf V5 oder kommende Features und Breaking Changes vorbereiten.
00:26:15Man kann sich also wappnen, und Daniel kann hier fortfahren.
00:26:22Ich denke, das ist der Punkt. Eines der wichtigsten Ziele ist für uns," : "dass wir
00:26:26vorwärts- und rückwärtskompatibel sein wollen. Das Upgrade von 3 auf 4
00:26:34sollte ganz bewusst beweisen, dass man keine Angst vor Breaking Changes
00:26:39oder Major-Releases in Nuxt haben muss. Manchmal fühlt es sich so an,
00:26:45als stecke man fest und könne kein Major-Release veröffentlichen.
00:26:50Unser Plan ist, mindestens jedes Jahr ein neues zu veröffentlichen.
00:26:57Interessanterweise deckt sich das mit vielen anderen Projekten. Schaut man sich
00:27:01zum Beispiel Node an, passt deren neuer Zeitplan mit jährlichen
00:27:09Major-Releases sehr gut zu unserem. Allgemein ist das Muster:
00:27:15Wenn man Nuxt nutzt, baut man ein Projekt wie ein Haus.
00:27:21Es ist lebendig. Wie ein Haus braucht es mal neue Farbe oder kleine Ausbesserungen.
00:27:28Man möchte, dass die Website die Best Practices von heute nutzt,
00:27:33nicht nur die von damals, als man sie schrieb. Deshalb muss Nuxt sich weiterentwickeln," : "um
00:27:38das zu bieten, was man für eine großartige Website braucht. In den letzten
00:27:46Monaten gab es einige Supply-Chain-Angriffe auf NPM. Das unterstreicht," : "wie wichtig
00:27:52es ist, bei allen Abhängigkeiten auf dem neuesten Stand zu bleiben.
00:27:57Man muss versuchen, die neuesten Versionen zu verfolgen. Unsere Verantwortung
00:28:03als Paket-Ersteller ist es, diese Upgrade-Schritte so schmerzlos
00:28:08wie möglich zu gestalten. Wenn man also feststellt, dass ein Nuxt-Upgrade
00:28:14mühsam ist, dann ist das ein Problem. Sagt es mir, beschwert euch bitte bei mir,
00:28:21denn das wollen wir nicht. Wir wollen nicht, dass die Leute fragen: „Wie
00:28:25mache ich das Upgrade?", sondern: „Es war eine Freude! Ich habe für das Major-Upgrade
00:28:29nur einen halben Tag gebraucht, nicht zwei Monate."
00:28:36Darauf wollen wir optimieren – nicht nur, weil Websites es brauchen,
00:28:42sondern weil das Ökosystem es braucht. Die Leute sollen keine Angst vor Upgrades haben.
00:28:47Und wer Daniel kontaktieren möchte: Er ist auf BlueSky unter roe.dev zu finden.
00:28:54Man findet mich fast überall. Großartig, schön gesagt, danke. Ich möchte
00:29:01unsere Fragerunde mit dem Thema Community abschließen. Vor Kurzem sah ich ein Foto,
00:29:07ich weiß nicht mehr, von welcher Konferenz, aber einer von euch sprach dort.
00:29:11Es gab ein Bild der Community und dort stand so etwas wie: „Nuxt dreht sich um Menschen."
00:29:16Ihr scheint eine tolle Community zu haben. Erzählt uns von ihnen, wie kann man
00:29:20mitmachen, beitragen und so weiter? Erzählt uns mehr.
00:29:30Ich glaube, Daniel ist eingefroren. Ja, das war Daniel Roe auf der Vue.js Amsterdam." : "Glaube ich.
00:29:40Wenn man dabei sein will: Wir haben einen sehr aktiven Discord-Server.
00:29:47Dort teilen wir viele Neuigkeiten. Und natürlich GitHub – die Issues und
00:29:54Pull Requests sind der Ort, an dem der Code geschrieben wird.
00:30:00Dort werden Ideen implementiert und geteilt. Wer helfen möchte, hat viele
00:30:07Möglichkeiten: Bei Issues helfen, Ideen einbringen oder Erfahrungen" : "und
00:30:15Demos teilen. Wir haben auch Twitter-Accounts, Nuxt_js, und einen BlueSky-Account." : "Wir
00:30:20nutzen nuxt.com. Ich glaube, wir haben Mastodon und eine LinkedIn-Showcase-Seite." : "Falls
00:30:26ihr auf LinkedIn seid. Wir haben kein Instagram und auch kein
00:30:31SoundCloud, aber Discord ist auch ein schöner Ort zum Verweilen.
00:30:39Wenn ihr Fragen habt, chattet einfach mit uns. Wir sind da.
00:30:46Ich denke an all die Leute, mit denen wir uns austauschen, die Module erstellen...
00:30:51Man muss nicht direkt am Core mitarbeiten. Das ist das Schöne an Nuxt:" : "Man
00:30:54kann mit einem Template anfangen, das man teilen möchte, oder mit einem Modul," : "weil
00:31:00man ein Feature gebaut hat, und dieses dann mit der ganzen Community teilen.
00:31:05Wir haben über 300 gepflegte Module für die aktuelle Version von Nuxt," : "von
00:31:10mehr als 1.000 Mitwirkenden. Also bitte, kommt vorbei und verbringt Zeit mit uns.
00:31:17Es wird euch gefallen. Ja, auf geht's! Daniel, ich glaube, man hört dich nicht.
00:31:27Aber er sagte, wir hätten SoundCloud, glaube ich. Er wollte wohl noch etwas
00:31:51zur Community ergänzen. Vielleicht bastelt er gerade am ersten Track
00:31:55für SoundCloud. Ich möchte nur sagen – und ich bin froh, dass du es ansprichst:
00:32:05Die Community ist das Beste an Nuxt. Und ich finde," : "bei Open Source
00:32:13geht es nur um die Community. Denn Open Source bedeutet," : "dass man etwas nimmt
00:32:17und zu jemand anderem sagt: „Hey, was denkst du darüber? Gefällt es dir?
00:32:21Willst du helfen, es besser zu machen?" Und diese Community macht
00:32:26Open Source erst lohnenswert. Das ist der Grund, warum wir es tun.
00:32:32Das ist der ganze Sinn. Ich glaube fest daran, dass die contributing.md
00:32:38wichtiger ist als die agents.md. Lieber hätte ich null Agents und viele Leute
00:32:44als umgekehrt. Was es wertvoll macht, sind die Menschen," : "die mir
00:32:50am Herzen liegen und Teil des Projekts sind. Und das galt ehrlich gesagt
00:32:56nicht nur für Nuxt, sondern auch für die Vue-Community. Sie war schon immer so.
00:33:00Es dreht sich alles um die Gemeinschaft, und es ist immer wunderbar," : "zu sehen,
00:33:06wie neue Leute dazukommen und anfangen beizutragen. Dazu gehört auch," : "einfach
00:33:12reinzukommen und um Hilfe zu bitten. So fing es bei mir auch an – ich habe
00:33:18die Leute in Discord genervt, um Antworten auf meine Fragen zu finden.
00:33:23Ich liebe das. Ein Hoch auf die Menschen und die Community! Man kann Dinge
00:33:28veröffentlichen und mit der Welt teilen. Wir sehen das gerne. Wir kommen zum Ende.
00:33:34Ich bin so inspiriert von dem Tempo und der Qualität eurer Arbeit.
00:33:40Ich freue mich sehr auf den weiteren Weg von Nuxt. Ein großes Dankeschön
00:33:45an euch, das restliche Nuxt-Team, die Maintainer, Contributor und die Community.
00:33:50Danke an Sebastian, Daniel und Hugo, dass ihr heute dabei wart.
00:33:55Dankeschön.
00:33:56Danke.
00:33:57Tschüss.
00:33:58An das Publikum: Eine Sache noch. Bleibt dran! Ich möchte Eve
00:33:59von der Vercel Academy begrüßen.
00:34:07Hallo, Maya.
00:34:08Hallo, Eve. Willkommen zurück.
00:34:09Vielen Dank. Ich freue mich, dich zu sehen. Das ist der schönste Teil meines Monats:
00:34:11Einen Kurs zu veröffentlichen, mich zurückzulehnen und allen zuzuhören. Dieses Team
00:34:18ist einfach voller Koryphäen, so gut. Und du gehörst auch dazu.
00:34:25Ich würde gerne mehr darüber hören, was du mit dem neuen Kurs" : "ausgeheckt
00:34:36hast.
00:34:40Ja, wir freuen uns sehr, heute einen neuen Kurs zu starten. Mein Bildschirm wird geteilt:
00:34:48Nuxt auf Vercel. Er ist für Leute gedacht, die aus der React-Welt kommen.
00:34:55Er bietet sozusagen die Übersetzungsebene zwischen React- und Nuxt-Projekten.
00:35:03Wenn man also einen neuen Job antritt oder an einem Nebenprojekt arbeitet und denkt:
00:35:08„Ich will das nutzen, weiß aber nicht, wie ich anfangen soll."
00:35:12Dann ist das der Weg. Natürlich helfen die Agents auch dabei, und man sollte
00:35:16alle Tools nutzen, aber das hier hilft beim Aufbau eines echten Projekts.
00:35:24Wir bauen eine App zum Finden von heißen Quellen, damit man seine Lieblingswanderungen
00:35:30und Quellen findet. Schaut es euch an, es kommen noch viele Kurse auf Vercel Academy.
00:35:34Großartig. Vielen Dank, Eve. Das Publikum sollte wissen: Eve hat die besten Kurse,
00:35:40und sie lebt das Motto „Bauen, um zu lernen“. Schaut es euch unbedingt an," : "wir
00:35:45fügen auch einen Link hinzu. Ich freue mich darauf, das selbst durchzugehen
00:35:50und mehr mit Nuxt zu bauen. Vielen Dank, dass du heute dabei warst. Danke.
00:35:59Wir sind am Ende unserer Community-Session. Vielen Dank an unsere Community," : "dass
00:36:03ihr Zeit mit uns verbracht habt. Wir hoffen, es hat euch gefallen. Für künftige
00:36:09Sessions findet ihr alle Details auf [community.vercel.com/live](https://community.vercel.com/live).
00:36:16Wir haben auch viele Events in Planung. Schaut auf unserer Event-Seite" : "oder
00:36:20Meetup-Seite nach Terminen online oder in eurer Nähe. Und ganz frisch:" : "Die
00:36:26Tickets für „Vercel Ship“ sind da! Das Event findet an verschiedenen Orten" : "auf
00:36:32der Welt statt. Schaut auf [vercel.com/ship](https://vercel.com/ship) vorbei und bewerbt euch" : "um
00:36:37eure Tickets. Ein Besuch lohnt sich schon allein wegen des Designs und der Interaktionen.
00:36:43Das Team hat sich da wirklich selbst übertroffen. Das war's von mir. Vielen Dank!
00:36:47Habt einen schönen Tag. Tschüss.

Key Takeaway

Nuxt transformiert sich durch MCP-Integration, AEO-Optimierung und das Comark-Projekt zu einer KI-nativen Plattform, die durch Route Rules und Nitro 3 hohe Performance bei gleichzeitig vereinfachten Major-Upgrades bietet.

Highlights

  • Das MCP-Toolkit ermöglicht es jeder Nuxt-Website, als MCP-Server zu agieren und direkt in KI-Systeme integriert zu werden.

  • Die Optimierung für Agentic Engine Optimization (AEO) erfolgt durch die Erkennung von Crawlern über Accept-Header und die Bereitstellung von Inhalten im modernen Textformat oder als JSON-LD.

  • Route Rules in der Nuxt-Konfiguration erlauben die gezielte Steuerung von Caching-Strategien wie ISR für Blogs oder das Deaktivieren von SSR für Admin-Bereiche.

  • Das neue Projekt Comark extrahiert den Kern von Nuxt Content, um Markdown mit SvelteKit-Kompatibilität, Streaming und Auto-Closing-Funktionen zur Laufzeit zu ermöglichen.

  • Nuxt 5 basiert auf Nitro Version 3 und zielt auf eine noch engere Annäherung an Webstandards sowie volle Kompatibilität mit Bun, Deno und Node ab.

  • Die Performance-Referenz NPMX nutzt den neuen Payload-Cache aus Nuxt 4.4, um Daten für Seiten bereits vor dem eigentlichen Aufruf durch den Nutzer zu laden.

Timeline

KI-Integration und MCP-Server

  • Nuxt-Websites fungieren durch das MCP-Toolkit als eigenständige Server für künstliche Intelligenz.
  • Der Quellcode für den Nuxt-Agenten ist Open Source und dokumentiert den gesamten Implementierungsprozess.
  • Die Modul-API treibt sowohl die Devtools als auch die neuen Chat-Funktionen der Plattform an.

Die Architektur von Nuxt.com wurde erweitert, um als zentraler Knotenpunkt für KI-Agenten zu dienen. Durch die Integration des Model Context Protocols (MCP) können externe KIs direkt auf die APIs der Website zugreifen. Entwickler haben die Möglichkeit, den Denkprozess der Agenten unter der Haube nachzuvollziehen und eigene Features zum Open-Source-Projekt beizutragen.

Datengetriebene Optimierung über Admin-Agenten

  • Ein spezieller Nuxt-Admin-MCP-Agent analysiert Nutzerfeedback direkt in der Konversation.
  • Die KI identifiziert Seiten mit niedrigen Bewertungen und liefert konkrete Verbesserungsvorschläge.
  • Feedback-Widgets auf der Website dienen als primäre Datenquelle für die Priorisierung von Inhalten.

Ein internes Widget sammelt kontinuierlich Rückmeldungen der Besucher, um den Fokus auf reparaturbedürftige Bereiche zu lenken. Durch die Anbindung an einen MCP-Admin-Agenten lässt sich dieses Feedback per Natural Language Query auswerten. So können beispielsweise Seiten mit nur drei Rückmeldungen trotz geringer Datenmenge erste Anhaltspunkte für strukturelle Mängel liefern.

Evolution von Inhalten mit Comark

  • Das Projekt Comark ermöglicht die Nutzung von Komponenten innerhalb von Markdown zur Laufzeit.
  • Die Zusammenarbeit mit dem SvelteKit-Team fördert ein framework-agnostisches Content-System.
  • KI-gestütztes Streaming erlaubt die automatische Generierung kompletter Landingpages aus Markdown-Syntax.

Comark stellt eine Extraktion des Nuxt Content Kerns dar und zielt auf die Version 1.0 in den kommenden Wochen ab. Das System unterstützt modernes Streaming und Auto-Closing von Tags, was besonders bei der KI-Generierung von Inhalten vorteilhaft ist. Eine Demonstration zeigt, wie durch einfache Prompts wie die Erstellung einer Seite über Basketballschuhe komplexe Layouts mit Live-Vorschau entstehen.

AEO und moderne SEO-Strategien

  • Nuxt setzt auf Agentic Engine Optimization (AEO), um Dokumentationen für KI-Crawler optimal lesbar zu machen.
  • JSON-LD reduziert das benötigte Kontextfenster für KI-Modelle durch strukturierte Daten.
  • Experimentelle Features werden zunächst als Module getestet, bevor sie in den Core einfließen.

Während Nuxt historisch für klassisches SEO bekannt war, verschiebt sich der Fokus nun auf die Auffindbarkeit durch KI-Agenten und Smart Speaker. Durch die Erkennung von User-Agents in den Pull Requests der Dokumentation werden gezielt modernere Textformate ausgeliefert. Dieser schrittweise Ansatz verhindert, dass veraltete Technologien fest im Framework-Kern verankert werden, während das Ökosystem agil bleibt.

Roadmap zu Nuxt 5 und Nitro 3

  • Nitro Version 3 fungiert als minimaler Server-Wrapper für native Webstandards.
  • Die neue Engine gewährleistet konsistente Performance auf Bun, Deno und Node.
  • Nuxt 5 befindet sich bereits im Nightly-Status und wird für das Ökosystem vorbereitet.

Die kommende Version 5 legt den Schwerpunkt auf technologische Verschlankung und Standardisierung. Nitro 3 bildet das Fundament, um Nuxt so nah wie möglich an die native Ausführung in verschiedenen Laufzeitumgebungen zu bringen. Erste Tests mit Nightly-Builds zeigen bereits eine deutliche Verbesserung der Entwicklererfahrung, noch bevor die offizielle Alpha-Phase startet.

Performance-Optimierung auf Vercel

  • Route Rules ermöglichen die granulare Steuerung von ISR, SSR und Caching pro URL-Muster.
  • Der Payload-Cache aus Nuxt 4.4 beschleunigt die Nutzererfahrung durch Vorladen von Daten.
  • Das Projekt NPMX dient als Open-Source-Referenz für extrem optimierte Nuxt-Workloads.

Zur Maximierung der Geschwindigkeit auf Vercel wird empfohlen, Route Rules für unterschiedliche Bereiche der App zu definieren, etwa statische Generierung für Blogs und Client-seitiges Rendering für geschützte Admin-Bereiche. NPMX demonstriert die praktische Anwendung dieser Regeln und zeigt, wie Caching in Kombination mit inkrementeller statischer Generierung (ISR) bei hohen Zugriffszahlen skaliert. Der Payload-Cache sorgt dabei dafür, dass notwendige Daten bereits vor dem Klick des Nutzers bereitstehen.

Lernstrategien und Community-Einstieg

  • Minimale Templates dienen als Orientierungshilfe für LLMs beim Code-Design.
  • KI-Modelle sollten explizit nach dem Warum gefragt werden, um echte Lerngelegenheiten zu schaffen.
  • Nuxt verzeichnet in Europa eine besonders starke Verbreitung im E-Commerce-Sektor.

Ein effektiver Einstieg gelingt durch minimale Setups wie das Nuxt-site-template, das als Basis für KI-gestütztes Coding fungiert. Es wird geraten, KI-Tools nicht nur zur Ergebniserzeugung, sondern als Tutoren zu nutzen, die Features anhand des generierten Codes erklären. Während Nuxt global wächst, ist die Akzeptanz in Europa, insbesondere im Vergleich zu React in Nordamerika, derzeit überdurchschnittlich hoch.

Migrationspfade und Open Source Kultur

  • Jährliche Major-Releases folgen dem Node.js-Zeitplan für vorhersehbare Upgrades.
  • Kompatibilitätsschichten minimieren den Aufwand bei Versionswechseln auf wenige Stunden.
  • Das Ökosystem umfasst über 300 gepflegte Module von mehr als 1.000 Mitwirkenden.

Die Strategie von Nuxt sieht vor, Major-Upgrades so schmerzlos wie möglich zu gestalten, um die Sicherheit der Supply Chain durch aktuelle Abhängigkeiten zu gewährleisten. Im Gegensatz zum schwierigen Wechsel von Version 2 auf 3 sind künftige Migrationen auf Vorwärtskompatibilität ausgelegt. Die Community bildet das Herzstück, wobei Discord und GitHub als zentrale Plattformen für den Austausch und die Entwicklung von Modulen dienen.

Community Posts

View all posts