{"id":51427,"date":"2022-06-16T12:37:33","date_gmt":"2022-06-16T11:37:33","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=51427&#038;post_type=knowledgebase&#038;preview_id=51427"},"modified":"2025-10-01T20:18:43","modified_gmt":"2025-10-01T19:18:43","slug":"nuxt-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/","title":{"rendered":"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework"},"content":{"rendered":"<p>Nuxt.js ist das intuitivste <a href=\"https:\/\/kinsta.com\/de\/blog\/vue-js\/\">Vue-Framework<\/a>, das derzeit verf\u00fcgbar ist. Es kombiniert die Leistungsf\u00e4higkeit von Vue.js mit serverseitigen Rendering-Funktionen, um es noch leistungsf\u00e4higer zu machen. Du kannst eine komplette Vue.js-Anwendung mit clientseitigem Rendering, eine umfassende statisch generierte Anwendung und eine monolithische Anwendung erstellen.<\/p>\n<p>Nuxt.js l\u00f6st das Problem der Strukturierung deines Vue.js-Projekts, da es mit einer unternehmenstauglichen Frontend-Entwicklungsarchitektur ausgestattet ist. Die Funktionen von Nuxt.js sind bereits nach Industriestandards strukturiert, um Unternehmensanwendungen zu erstellen.<\/p>\n<p>In diesem Leitfaden lernst du Nuxt.js kennen und erf\u00e4hrst, was du damit bauen kannst und wie es von innen heraus funktioniert.<\/p>\n<p><div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><br \/>\n<\/p>\n<h2>Was ist Nuxt.js?<\/h2>\n<p>Nuxt.js ist ein serverseitiges Rendering-Framework, das auf Vue.js aufbaut. Es abstrahiert den Gro\u00dfteil der komplexen Konfiguration, die mit der Verwaltung von asynchronen Daten, Middleware und Routing verbunden ist. Au\u00dferdem hilft es bei der Strukturierung von <a href=\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/\">Vue.js-Anwendungen<\/a>, indem es eine standardisierte Architektur f\u00fcr den Aufbau einfacher oder unternehmensweiter Vue.js-Anwendungen verwendet.<\/p>\n<figure id=\"attachment_123662\" aria-describedby=\"caption-attachment-123662\" style=\"width: 1144px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123662 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/nuxt-js-logo.jpeg\" alt=\"Ein Screenshot zeigt das offizielle Nuxt.js-Logo.\" width=\"1144\" height=\"758\"><figcaption id=\"caption-attachment-123662\" class=\"wp-caption-text\">Nuxt.js offizielles Logo (Bildquelle: <a href=\"https:\/\/medium.com\/ucars-tech\/so-we-migrated-our-entire-front-end-to-nuxt-js-fec14247d3a5\">Medium<\/a>)<\/figcaption><\/figure>\n<h2>Wof\u00fcr wird Nuxt.js verwendet?<\/h2>\n<p>Mit Nuxt.js kannst du viele verschiedene Arten von Anwendungen erstellen. Im Folgenden findest du die drei beliebtesten Anwendungen, die mit Nuxt.js erstellt wurden.<\/p>\n<h3>Statisch generierte Seiten<\/h3>\n<p>Diese Art von Webseite ben\u00f6tigt keine externe Inhaltsquelle &#8211; der Inhalt ist bereits in das HTML eingebettet. Beispiele f\u00fcr solche Webseiten sind <a href=\"https:\/\/kinsta.com\/de\/blog\/portfolio-website\/\">Portfolio<\/a>-, Demo- und Tutorial-Webseiten.<\/p>\n<h3>Single-Page-Anwendungen (SPA)<\/h3>\n<p>Bei diesem Frontend-Entwicklungsansatz werden dynamische Inhalte von einer externen API abgerufen und auf der Client-Seite angezeigt. Die meisten <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/\">JavaScript-Frameworks<\/a> wie Vue.js, React.js, Angular und Ember.js sind allesamt Single-Page Application Frameworks.<\/p>\n<p>Dar\u00fcber hinaus wird das Routing-System einer SPA mit der <a href=\"https:\/\/kinsta.com\/de\/blog\/html-vs-html5\/\">HTML 5<\/a> History API oder dem Location Hash f\u00fcr das Routing erreicht, was es Entwicklern erm\u00f6glicht, die URL einer Webseite zu \u00e4ndern, ohne die Seite komplett zu aktualisieren.<\/p>\n<h3>Universelle Anwendungen<\/h3>\n<p>der Begriff &#8222;universelle Anwendung&#8220; beschreibt die Verwendung eines serverseitigen Rendering-Ansatzes, bei dem die Daten des Clients auf dem Server abgerufen werden, bevor die Seite im Browser des Clients vollst\u00e4ndig gerendert wird.<\/p>\n<p>Das serverseitige Rendering (SSR) ist ein bekanntes Problem in Vue.js, weil es m\u00fchsam konfiguriert werden muss, um es richtig zu machen.<\/p>\n<p>Nuxt.js l\u00f6st das SSR-Problem in Vue.js, was f\u00fcr die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-seo\/\">Suchmaschinenoptimierung (SEO)<\/a> hilfreich ist. Nuxt.js kann Universal-Anwendungen sogar zu einer vollwertigen Monolith-Anwendung ausbauen, bei der sich Frontend und Backend eine einzige Codebasis teilen.<\/p>\n<h2>Wie funktioniert Nuxt.js?<\/h2>\n<p>Nuxt.js funktioniert genauso wie ein serverseitiges Framework, wenn ein Nutzer eine Webseite besucht. Wenn das serverseitige Rendering aktiviert ist, werden die Anfragen jedes Mal auf dem Server gerendert, wenn der Nutzer eine Seite anfordert. Wenn das clientseitige Rendering aktiviert ist, wird der Inhalt der Seite mithilfe von JavaScript im Browser gerendert.<\/p>\n<p>Dies sind die wichtigsten Aktionen und Methoden, die in Nuxt.js verwendet werden:<\/p>\n<ul>\n<li>nuxtServerInit (Action): Dies ist der erste Lifecycle-Hook, der auf der Serverseite aufgerufen wird, wenn der Vuex-Store aktiviert ist. Es handelt sich um eine Vuex-Aktion, die nur auf der Serverseite aufgerufen wird, um den Store vorzubef\u00fcllen, und schlie\u00dflich kann sie verwendet werden, um andere Aktionen im Vuex-Store zu starten.<\/li>\n<\/ul>\n<ul>\n<li>validate() (Funktion): Die validate-Methode wird vor dem Rendern von Seitenkomponenten aufgerufen. Sie ist n\u00fctzlich, um dynamische Parameter einer Seitenkomponente zu validieren.<\/li>\n<\/ul>\n<ul>\n<li>Die asyncData()-Methode wird verwendet, um Daten zu holen und auf der Serverseite zu rendern, w\u00e4hrend die <a href=\"https:\/\/nuxtjs.org\/api\/pages-fetch\/\" target=\"_blank\" rel=\"noopener noreferrer\">fetch()-Methode<\/a> verwendet wird, um den Store zu f\u00fcllen, bevor die Seite gerendert wird.<\/li>\n<\/ul>\n<p>Wenn eine Nuxt.js-Webseite zum Beispiel einen ersten Seitenaufruf erh\u00e4lt, ruft sie die Aktion <code>nuxtServerInit<\/code> auf, um die Vuex-Zust\u00e4nde zu aktualisieren (wenn sie im Vuex-Store definiert sind). Andernfalls, wenn <code>nuxtServerInit<\/code> nicht definiert ist, geht sie zu einer anderen Phase \u00fcber.<\/p>\n<p>Als N\u00e4chstes wird in dieser Reihenfolge nach Middlewares gesucht. Zuerst wird in der Datei <code>nuxt.config.js<\/code> nach einer globalen Middleware gesucht. Wenn sie definiert ist, wird sie ausgef\u00fchrt, bevor die <code>layout<\/code> Seiten auf Middleware \u00fcberpr\u00fcft werden. Zum Schluss wird die Middleware der einzelnen Seiten ausgef\u00fchrt, einschlie\u00dflich der untergeordneten Seiten.<\/p>\n<p>Nachdem alle Middlewares der Reihe nach ausgef\u00fchrt wurden, wird gepr\u00fcft, ob die Route dynamisch ist und die erstellte und gepr\u00fcfte Methode <code>validate()<\/code> ausgef\u00fchrt.<\/p>\n<p>Als N\u00e4chstes wird die Methode <code>asyncData()<\/code> der Seite aufgerufen, um Daten auf der Serverseite zu holen und zu rendern, bevor die Methode <code>fetch()<\/code> aufgerufen wird, um den Vuex-Speicher auf der Clientseite aufzuf\u00fcllen.<\/p>\n<p>Zu diesem Zeitpunkt sollte die Seite alle Daten und Inhalte enthalten, die zur Anzeige einer richtigen Webseite ben\u00f6tigt werden. Dann wird die Seite von der Nuxt.js-Engine gerendert und dem Besucher angezeigt, womit der Prozess abgeschlossen ist.<\/p>\n<p>Dieses Flussdiagramm veranschaulicht alle Schritte, die zum Rendern einer einzelnen Seite n\u00f6tig sind:<\/p>\n<figure id=\"attachment_123663\" aria-describedby=\"caption-attachment-123663\" style=\"width: 1244px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123663 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/nuxt-lifecycle.png\" alt=\"Ein Screenshot zeigt die Nuxt.js Lifecycle Hooks und den Initialisierungsprozess\" width=\"1244\" height=\"1759\"><figcaption id=\"caption-attachment-123663\" class=\"wp-caption-text\">Ein \u00dcberblick \u00fcber die Nuxt.js Lifecycle Hooks (Quelle: <a href=\"https:\/\/nuxtjs.org\/docs\/2.x\/concepts\/nuxt-lifecycle\">Nuxt Webseite<\/a>)<\/figcaption><\/figure>\n<p>Egal, welches Tool du benutzt, du wirst dich immer sicherer f\u00fchlen, wenn du verstehst, wie das Tool unter der Haube funktioniert. Mit der obigen Erkl\u00e4rung, wie Nuxt.js unter der Haube funktioniert, wird es leicht zu verstehen sein. Lass uns die Vorteile von Nuxt.js f\u00fcr dein n\u00e4chstes Projekt erkunden.<\/p>\n<h2>Vorteile von Nuxt.js<\/h2>\n<p>Als N\u00e4chstes wollen wir \u00fcber die Vorteile des Nuxt.js Frameworks sprechen und warum es in letzter Zeit so beliebt geworden ist.<\/p>\n<h3>Erstellen von Universal Apps ohne gro\u00dfen Aufwand<\/h3>\n<p>Nuxt.js macht die Erstellung von serverseitigen Rendering-Anwendungen sehr einfach. Wenn du schon einmal versucht hast, eine serverseitig gerenderte Anwendung mit Vue.js zu entwickeln, hast du wahrscheinlich schwierige H\u00fcrden \u00fcberwunden, denn es gibt unz\u00e4hlige Konfigurationsm\u00f6glichkeiten sowohl f\u00fcr die Server- als auch f\u00fcr die Clientseite.<\/p>\n<p>Die SSR-Funktion ist bereits in Nuxt.js integriert und einfach zu bedienen. Sie erm\u00f6glicht den Zugriff auf die Eigenschaften <code>isServer<\/code> und <code>isClient<\/code> deiner Komponenten, um zu entscheiden, ob du etwas auf der Client- oder der Serverseite renderst.<\/p>\n<p>Au\u00dferdem gibt es die Methode <code>asyncData<\/code>, die f\u00fcr das Abrufen und Rendern von Daten auf der Serverseite deiner Seitenkomponente zust\u00e4ndig ist.<\/p>\n<h3>Statisch gerenderte Vue-Apps mit Universal Benefit<\/h3>\n<p>Statisch generierte Webseiten sind in der Webbranche auf dem Vormarsch. Mit einem einzigen <code>nuxt generate<\/code> Befehl kannst du eine statische Version deiner Webseite mit dem gesamten HTML-Code und den entsprechenden Routen erstellen.<\/p>\n<p>Der Befehl <code>nuxt generate<\/code> funktioniert genau wie der Universal Application-Ansatz mit allen aktivierten SSR-Funktionen, allerdings f\u00fcr eine statisch generierte Webseite.<\/p>\n<p>In Nuxt.js ist eine statisch generierte Webseite so, als w\u00fcrdest du eine leistungsstarke Universalanwendung erstellen, ohne dass ein Server f\u00fcr die SSR-Funktionen ben\u00f6tigt wird.<\/p>\n<h3>Automatisches Code-Splitting<\/h3>\n<p>Einer der Gr\u00fcnde, warum Nuxt.js so leistungsf\u00e4hig ist, ist die Codeaufteilung, bei der eine Route eine einzelne <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/\">JavaScript-Datei<\/a> erh\u00e4lt, die nur den Code enth\u00e4lt, der f\u00fcr die Ausf\u00fchrung dieser Route ben\u00f6tigt wird, wodurch die Gr\u00f6\u00dfe deiner Anwendung reduziert wird.<\/p>\n<p>Diese Code-Splitting-Funktion nutzt die Webpack-Konfiguration, die bei der Erstellung einer statischen Version deiner Webseite bereits integriert ist.<\/p>\n<h3>Hot Reload<\/h3>\n<p>Hot Reload ist eine gro\u00dfartige Funktion, mit der die zeitaufw\u00e4ndige Methode der Softwareentwicklung, \u00c4nderungen zu aktualisieren, gel\u00f6st wird.<\/p>\n<p>Sie ist so konfiguriert, dass der Entwicklungsserver automatisch aktualisiert wird, wenn du eine Datei im Stammverzeichnis \u00e4nderst.<\/p>\n<p>Bei der Entwicklung und der Arbeit an <code>.vue<\/code> Dateien verwendet es eine Webpack-Konfiguration, um nach \u00c4nderungen zu suchen und alles f\u00fcr dich zu kompilieren. Dieser Ansatz spart Entwicklern Zeit und f\u00f6rdert eine schnellere Anwendungsentwicklung.<\/p>\n<h3>ES6\/ES7-Kompilierung erhalten<\/h3>\n<p>Nuxt.js ist mit Webpack und Babel vorinstalliert, um die neuesten JavaScript-Versionen wie <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">ES6 und ES7 in JavaScript<\/a> zu \u00fcbersetzen und zu kompilieren, das auf \u00e4lteren Browsern ausgef\u00fchrt werden kann.<\/p>\n<p>Babel ist so konfiguriert, dass alle <code>.vue<\/code> Dateien und der ES6-Code innerhalb der Skript-Tags in JavaScript kompiliert werden, das in allen Browsern funktioniert.<\/p>\n<p>Mit dieser Funktion ist es nicht mehr n\u00f6tig, browserkompatible Anwendungen manuell zu erstellen und die Konfiguration von Grund auf neu einzurichten.<\/p>\n<h2>Wie man eine Nuxt.js App erstellt<\/h2>\n<p>In diesem Abschnitt erf\u00e4hrst du, wie du eine Nuxt.js Anwendung erstellst. Bevor wir uns damit besch\u00e4ftigen, wollen wir einige der wichtigsten Konzepte f\u00fcr die Entwicklung einer Nuxt.js-Anwendung erl\u00e4utern.<\/p>\n<h3>Nuxt.js Anwendung erstellen<\/h3>\n<p>Das Erstellen eines neuen Projekts ist einfach und unkompliziert. Du kannst ein Projekt mit verschiedenen Ans\u00e4tzen erstellen, die in der offiziellen Dokumentation aufgef\u00fchrt sind, aber der am meisten bevorzugte und empfohlene Ansatz ist die Verwendung der CLI.<\/p>\n<p>Um eine neue Anwendung mit der CLI zu erstellen, musst du sicherstellen, dass du <a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">npx installiert<\/a> hast (npx wird standardm\u00e4\u00dfig mitgeliefert, wenn du yarn oder npm 5.2.0 installierst).<\/p>\n<p>Als N\u00e4chstes gibst du den folgenden Befehl in den Ordner ein, in dem du dein Projekt ablegen m\u00f6chtest:<\/p>\n<pre><code class=\"language-bash\">npx create-nuxt-app \ncd \nnpm run dev<\/code><\/pre>\n<p>Achte darauf, dass du den Projektnamen&gt; durch deinen tats\u00e4chlichen Projektnamen ersetzt.<\/p>\n<h3>Die Nuxt.js Ordnerstruktur verstehen<\/h3>\n<p>Wenn du eine neue Anwendung mit einer der verschiedenen Installationsmethoden aus der offiziellen Dokumentation erstellst, siehst du verschiedene Dateien und Ordner, die von der CLI erzeugt werden. Diese Dateien und Ordner sind wichtig und erfordern, dass einige der Ordner ohne zus\u00e4tzliche Konfiguration unver\u00e4ndert bleiben.<\/p>\n<p>Wir werden uns die Ordnerstruktur ansehen, jede Datei und jeden Ordner besprechen und ihre Bedeutung kennen.<\/p>\n<figure id=\"attachment_123664\" aria-describedby=\"caption-attachment-123664\" style=\"width: 1432px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123664 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/nuxt_page.png\" alt=\"Ein Screenshot der Nuxt.js-Ordnerstruktur zeigt die verschiedenen Dateien, die von Nuxt.js CLI erzeugt werden.\" width=\"1432\" height=\"884\"><figcaption id=\"caption-attachment-123664\" class=\"wp-caption-text\">Neu erstellte Nuxt.js Ordnerstruktur<\/figcaption><\/figure>\n<h4>1. .nuxt<\/h4>\n<p>Das .nuxt-Verzeichnis wird versteckt und erzeugt, wenn du deinen Entwicklungsserver startest. Es hei\u00dft <code>build directory<\/code>. Das Verzeichnis enth\u00e4lt erzeugte Dateien oder Artefakte, wenn du den Befehl <code>npm run build<\/code> ausf\u00fchrst.<\/p>\n<p>Du kannst die Dateien in diesem Verzeichnis nur zu Debugging-Zwecken \u00e4ndern, da die Dateien automatisch wieder generiert werden, sobald du den Befehl <code>dev<\/code> oder <code>build<\/code> ausf\u00fchrst.<\/p>\n<h4>2. Assets<\/h4>\n<p>Der Ordner Assets enth\u00e4lt alle nicht kompilierten Assets wie Bilder, Schriftarten, SASS-Dateien und Stylus. Webpack kompiliert jede Datei, die in diesem Verzeichnis enthalten ist, w\u00e4hrend des Rendering-Prozesses.<\/p>\n<h4>3. Komponenten<\/h4>\n<p>Das Komponentenverzeichnis \u00e4hnelt dem Komponentenverzeichnis in Vue.js, in dem alle deine Vue-Komponenten gespeichert sind. Komponenten sind die Dateien, aus denen die verschiedenen Teile deiner Seiten bestehen und die wiederverwendet und in deine Seiten, Layouts und andere Komponenten importiert werden k\u00f6nnen.<\/p>\n<h4>4. Layouts<\/h4>\n<p>Der Ordner Layouts speichert das Layout deiner Anwendung und ist sehr n\u00fctzlich, wenn du die verschiedenen Strukturen deiner Anwendung f\u00fcr authentifizierte Benutzer oder Gastbenutzer trennen willst.<\/p>\n<p>Du kannst viele Layouts erstellen, die der Struktur deiner Anwendung entsprechen. Manchmal m\u00f6chtest du vielleicht, dass einige Seiten auf deiner Webseite unterschiedliche Seitenleisten, Kopfzeilen, Fu\u00dfzeilen usw. haben. Diese und weitere Elemente werden mithilfe der Layoutdateien im Ordner layouts strukturiert.<\/p>\n<h4>5. Middleware<\/h4>\n<p>Middlewares sind benutzerdefinierte Funktionen, die vor dem Rendern einer Seite oder einer Gruppe von Seiten (Layout) ausgef\u00fchrt werden k\u00f6nnen. Sie k\u00f6nnen im Ordner middlewares in Nuxt.js definiert und gespeichert werden.<\/p>\n<p>Middlewares sind sehr praktisch, wenn du eine Webseite nur f\u00fcr Mitglieder erstellst. Wenn du den Zugang zu bestimmten Seiten einschr\u00e4nken willst, kannst du eine Middleware einrichten, die pr\u00fcft, ob ein Benutzer angemeldet ist oder nicht.<\/p>\n<p>In Nuxt.js funktionieren Middlewares \u00e4hnlich wie Middlewares in anderen <a href=\"https:\/\/kinsta.com\/de\/blog\/backend-vs-frontend\/\">Backend-Programmier-Frameworks<\/a> wie <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-express-js\/\">ExpressJS<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/laravel-9\/\">Laravel<\/a> usw. Es gibt drei verschiedene Arten von Middlewares: benannte, anonyme und Router-Middlewares.<\/p>\n<h4>6. Pages<\/h4>\n<p>Das Verzeichnis <code>pages<\/code> ist die Grundlage des Nuxt.js Routing-Systems, da es alle <code>.vue<\/code> Dateien in diesem Verzeichnis liest und die Router-Konfiguration automatisch erstellt.<\/p>\n<p>Das Verzeichnis <code>pages<\/code> enth\u00e4lt die Ansichten und Routen deiner Anwendung, und jede Seitenkomponente ist auch eine Standard-Vue-Komponente.<\/p>\n<p>Dennoch behandelt Nuxt.js sie wie eine Route, indem es spezielle Attribute und Funktionen hinzuf\u00fcgt, um die Entwicklung deiner universellen Anwendung so einfach wie m\u00f6glich zu machen.<\/p>\n<h4>7. Plugins<\/h4>\n<p>Das Verzeichnis <code>plugins<\/code> enth\u00e4lt JavaScript-Codes, die vor der Instanziierung der Vue.js-Stammanwendung ausgef\u00fchrt werden sollen. Hier kannst du Vue-Plugins hinzuf\u00fcgen und Funktionen oder Konstanten einf\u00fcgen.<\/p>\n<p>In Nuxt.js erstellst du statt der Funktion <code>Vue.use()<\/code> einfach eine neue Datei im Plugins-Ordner und injizierst dein Vue-Plugin in die Vue-Instanz mithilfe der Datei nuxt.config.js.<\/p>\n<h4>8. Static<\/h4>\n<p>Der Ordner static enth\u00e4lt alle statischen Dateien in deinem Projekt, die sich wahrscheinlich nicht \u00e4ndern werden oder die ohne Kompilierung gerendert werden sollen.<\/p>\n<p>Alle Dateien im static-Verzeichnis werden automatisch von Nuxt.js bereitgestellt und sind \u00fcber die <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-eine-url\/\">Stamm-URL<\/a> deines Projekts erreichbar.<\/p>\n<p>Dieses Verzeichnis eignet sich hervorragend f\u00fcr Dateien wie das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-favicon\/\">Favicon<\/a>, die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-robots-txt\/\">robots.txt<\/a>, etc.<\/p>\n<h4>9. Store<\/h4>\n<p>Das Verzeichnis store enth\u00e4lt alle Dateien deines Vuex-Stores und ist standardm\u00e4\u00dfig in Module unterteilt.<\/p>\n<p>Der Vuex-Store ist bei der Auslieferung standardm\u00e4\u00dfig deaktiviert. Du musst den Store aktivieren, indem du eine <code>index.js<\/code> Datei im Store-Verzeichnis erstellst.<\/p>\n<p>Ein Vuex-Store ist notwendig, wenn du <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-enterprise\/\">ein Unternehmensprojekt erstellst und verwaltest<\/a>. Deshalb ist Nuxt.js bereits mit einem Vuex-Store ausgestattet und so konfiguriert, dass es f\u00fcr die Entwicklung von Unternehmensanwendungen geeignet ist.<\/p>\n<h3>Nuxt.js Seiten und Routing-System<\/h3>\n<p>Nuxt.js macht das Routing-System so einfach wie das Anlegen von Verzeichnissen und Dateien im Verzeichnis <code>pages<\/code>. Es generiert automatisch eine Router-Datei, die auf den Dateien und der Ordnerstruktur dieses Verzeichnisses basiert.<\/p>\n<p>Wenn du zum Beispiel eine <code>about.vue<\/code> Datei im pages Verzeichnis hast, wird die Route automatisch umgewandelt und du kannst die Route dann in deinem Browser besuchen, um den Inhalt der &#8222;About&#8220;-Seite zu sehen.<\/p>\n<p>Mit diesem Routing-System kannst du au\u00dferdem drei verschiedene Routen definieren, indem du nur Dateien und Ordner erstellst. Schauen wir uns diese Routentypen genauer an.<\/p>\n<h4>1. Basis-Routing<\/h4>\n<p>Als Basis-Routing werden die Routen bezeichnet, die keine zus\u00e4tzlichen Konfigurationen ben\u00f6tigen, damit sie funktionieren. Es ist die einfachste Art des Routings und kann so einfach sein wie <code>\/about<\/code>, <code>\/contact<\/code>, etc.<\/p>\n<p>Um ein einfaches Routing-System zu erstellen, kannst du dein Seitenverzeichnis wie folgt strukturieren:<\/p>\n<pre><code class=\"language-json\">pages\/\n--| services.vue\n--| contact.vue\n--| index.vue<\/code><\/pre>\n<p>Nuxt.js erstellt automatisch eine Router-Datei mit den Dateien, die du im Seitenverzeichnis hinzugef\u00fcgt hast:<\/p>\n<pre><code class=\"language-js\">router: {\n  routes: [\n    {\n      name: 'index',\n      path: '\/',\n      component: 'pages\/index.vue'\n    },\n    {\n      name: \u2018services\u2019,\n      path: '\/services\u2019,\n      component: 'pages\/services\u2019\n    },\n    {\n      name: 'contact',\n      path: '\/contact',\n      component: 'pages\/contact'\n    },\n  ]\n}<\/code><\/pre>\n<p>Jetzt sind alle unsere Dateien ordentlich strukturiert und werden automatisch geroutet.<\/p>\n<h4>2. Verschachteltes Routing<\/h4>\n<p>Verschachtelte Routen sind Routen, die innerhalb einer \u00fcbergeordneten Route erstellt werden. Verschachtelte Routen werden verwendet, um mehrere Ebenen von tiefem Routing zu erstellen.<\/p>\n<p>Um verschachtelte Routen zu erstellen, legst du einen \u00fcbergeordneten Ordner an und platzierst alle Routendateien in diesem Ordner.<\/p>\n<p>Versuchen wir, eine verschachtelte Route zu erstellen:<\/p>\n<pre><code class=\"language-json\">pages\/\n --| dashboard\/\n -----| user.vue\n -----| settings.vue\n --| dashboard.vue\n --| services.vue\n --| contact.vue\n --| index.vue<\/code><\/pre>\n<p>In der obigen Ordnerstruktur haben wir eine neue Datei und einen neuen Ordner mit demselben Namen wie <code>dashboard<\/code> erstellt und dann die Dateien <code>user.vue<\/code> und <code>settings.vue<\/code> als Unterordner des Ordners <code>dashboard<\/code> hinzugef\u00fcgt.<\/p>\n<p>Diese einfache Ordnerstruktur erzeugt einen Router mit Routen, die der folgenden \u00e4hneln:<\/p>\n<pre><code class=\"language-js\">router: {\n  routes: [\n    {\n      name: 'index',\n      path: '\/',\n      component: 'pages\/index.vue'\n    },\n    {\n      name: 'services',\n      path: '\/services',\n      component: 'pages\/services'\n    },\n    {\n      name: 'contact',\n      path: '\/contact',\n      component: 'pages\/contact'\n    },\n    {\n      name: 'dashboard',\n      path: '\/dashboard',\n      component: 'pages\/dashboard.vue',\n      children: [\n        {\n          name: 'dashboard-user',\n          path: '\/dashboard\/user',\n          component: 'pages\/dashboard\/user.vue'\n        },\n        {\n          name: 'dashboard-settings',\n          path: '\/dashboard\/settings',\n          component: 'pages\/dashboard\/settings.vue'\n        }\n      ]\n    }\n  ]\n}<\/code><\/pre>\n<p>Verschachtelte Routen sind in Vue.js etwas umst\u00e4ndlich zu erstellen, vor allem, wenn du viele davon erstellen musst, wie du im obigen Codebeispiel sehen kannst, aber Nuxt.js macht es einfach und leicht, indem es nur Vue-Dateien in einem verschachtelten Ordner erstellt.<\/p>\n<h4>3. Dynamisches Routing<\/h4>\n<p>Dynamische Routen werden mit unbekannten Routen erstellt, weil sie entweder von einem API-Aufruf abh\u00e4ngen oder du die Seite nicht wiederholt erstellen willst. Das sind Routen, die \u00fcber eine Variable definiert werden, die entweder ein Name, eine Nummer oder eine ID ist, die aus den Kundendaten der App abgerufen wird.<\/p>\n<p>Das ist zum Beispiel n\u00fctzlich, wenn du eine Nachrichten-App entwickelst, bei der du die ID oder den Slug des Beitrags nicht kennst, auf den der Nutzer zum Lesen klicken wird. Mit der dynamischen Route kannst du die ID\/den Slug des Beitrags abrufen und den richtigen Beitrag mit der ID\/dem Slug darstellen.<\/p>\n<p>Um eine dynamische Route zu erstellen, f\u00fcgst du einen Unterstrich an den Namen der .vue-Datei oder des Verzeichnisses an. Du kannst die Datei oder das Verzeichnis beliebig benennen, aber der Unterstrich muss hinzugef\u00fcgt werden, damit sie dynamisch sind.<\/p>\n<p>Wenn du zum Beispiel eine Datei <code>_slug.vue<\/code> im Verzeichnis pages definierst, kannst du mit dem Objekt <code>params.slug<\/code> auf den Wert zugreifen. Wir zeigen dir anhand eines Beispiels, wie du eine dynamische Route erstellst:<\/p>\n<pre><code class=\"language-json\">pages\/\n--|user\/\n-----| index.vue\n-----| about.vue\n-----| _routeName\n-------| index.vue\n-------| info.vue\n--| dashboard\/\n-----| user.vue\n-----| settings.vue\n--| dashboard.vue\n--| services.vue\n--| _id.vue\n--| contact.vue\n--| index.vue<\/code><\/pre>\n<p>Wenn du den Unterstrich an <code>_id<\/code> und <code>_routeName<\/code> anh\u00e4ngst, wird eine dynamische Route f\u00fcr die Seite mit der ID param erstellt, zusammen mit einer \u00fcbergeordneten Route mit einem String param und den oben genannten Unterrouten. Diese Seitenstruktur erzeugt einen Router mit den folgenden Routen innerhalb der Datei:<\/p>\n<pre><code class=\"language-js\">   {\n      name: 'work',\n      path: '\/work',\n      component: 'pages\/work'\n    },\n    {\n      name: 'contact',\n      path: '\/contact',\n      component: 'pages\/contact'\n    },\n    {\n      name: 'id',\n      path: '\/:id',\n      component: 'pages\/_id.vue'\n    }\n    {\n      name: 'user',\n      path: '\/user',\n      component: 'pages\/user\/index.vue'\n    },\n    {\n      name: 'user-about',\n      path: '\/user\/about',\n      component: 'pages\/user\/about.vue'\n    },\n    {\n      name: 'user-routeName',\n      path: '\/user\/:routeName',\n      component: 'pages\/user\/_routeName\/index.vue'\n    },\n    {\n      name: 'user-routeName-info',\n      path: '\/user\/:routeName\/info',\n      component: 'pages\/user\/route.vue'\n    },\n    {\n      name: 'dashboard',\n      path: '\/dashboard',\n      component: 'pages\/dashboard.vue',\n      children: [\n        {\n          name: 'dashboard-user',\n          path: '\/dashboard\/user',\n          component: 'pages\/dashboard\/user.vue'\n        },\n        {\n          name: 'dashboard-settings',\n          path: '\/dashboard\/settings',\n          component: 'pages\/dashboard\/settings.vue'\n        }\n      ]\n    }\n  ]\n}<\/code><\/pre>\n<p>Nachdem wir nun die verschiedenen Routing-Systeme im Nuxt.js-Framework kennengelernt haben, wollen wir nun lernen, wie man Vuex-Stores erstellt und verwaltet.<\/p>\n<h3>Vuex Stores in Nuxt.js verwenden<\/h3>\n<p>Nuxt.js l\u00f6st ein gro\u00dfes Problem der Vue-Struktur, indem es den Umgang mit Vuex bei der Erstellung eines Enterprise-Projekts vereinfacht. Der Store-Ordner wird automatisch erstellt, wenn du eine neue Anwendung erstellst.<\/p>\n<p>Du kannst den Vuex Store aktivieren, indem du eine <code>index.js<\/code> Datei im Store-Ordner erstellst. Mit dieser einfachen Verbesserung ist der Vuex-Store nun so strukturiert und moduliert, wie es in der offiziellen Vuex-Dokumentation beschrieben ist, was die Entwicklung umfangreicher Anwendungen f\u00f6rdert.<\/p>\n<p>Deine <code>index.js<\/code> Datei sollte die folgende Struktur enthalten, damit sie der Struktur deines Vuex Stores in Nuxt.js entspricht. Schauen wir uns das mal an:<\/p>\n<pre><code class=\"language-js\">export const state = () =&gt; ({\n  \n})\nexport const getters = {\n\n}\nexport const mutations = {\n  \n}\nexport const actions = {\n  \n}<\/code><\/pre>\n<p>Nuxt.js erm\u00f6glicht es dir, in deiner gro\u00dfen Anwendung den <a href=\"https:\/\/www.planetgeek.ch\/2012\/01\/25\/3077\/\" target=\"_blank\" rel=\"noopener noreferrer\">Split-by-Feature-Ansatz<\/a> zu verwenden. Bei diesem Ansatz erstellst du verschiedene Vuex-Store-Dateien, die den Funktionen in deiner Anwendung entsprechen. Wenn deine Anwendung zum Beispiel Benutzer, Beitr\u00e4ge und Kommentare enth\u00e4lt, kannst du verschiedene Dateien wie <code>users.js<\/code>, <code>posts.js<\/code> und <code>comments.js<\/code> in deinem Store-Verzeichnis erstellen.<\/p>\n<p>Mit dieser Methode ist es einfach, je nach Funktion der Anwendung auf eine bestimmte Speicherdatei zuzugreifen, wodurch das m\u00fchsame Suchen und Aktualisieren von Daten zu einem m\u00fchelosen Spaziergang wird.<\/p>\n\n<h2>Zusammenfassung<\/h2>\n<p>Nuxt.js ist ein sehr beliebtes SSR- und statisch generiertes Vue-Frontend-Framework. Es l\u00f6st nicht nur das Problem der Konfiguration und Einrichtung von SSR in Vue-Anwendungen &#8211; es f\u00f6rdert auch die Entwicklung von Unternehmensanwendungen, indem es Best Practices bei der Strukturierung und Architektur von gro\u00dfen Vue-Anwendungen befolgt.<\/p>\n<p>In diesem Leitfaden erf\u00e4hrst du alles, was du \u00fcber Nuxt.js wissen musst, und was du damit bauen kannst. Wir haben statisch generierte Seiten, Single-Page-Anwendungen (SPAs) und Universal-Anwendungen besprochen und erkl\u00e4rt, wie du sie mit Nuxt.js entwickeln kannst.<\/p>\n<p>Jetzt hast du selbst gesehen, wie einfach und vorteilhaft es sein kann, Nuxt.js f\u00fcr dein n\u00e4chstes gro\u00dfes Unternehmensprojekt zu w\u00e4hlen. Lass uns im Kommentarbereich wissen, was du mit diesen neuen Superkr\u00e4ften bauen wirst!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nuxt.js ist das intuitivste Vue-Framework, das derzeit verf\u00fcgbar ist. Es kombiniert die Leistungsf\u00e4higkeit von Vue.js mit serverseitigen Rendering-Funktionen, um es noch leistungsf\u00e4higer zu machen. Du kannst &#8230;<\/p>\n","protected":false},"author":193,"featured_media":51428,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[705,465,445,738,739],"topic":[951,976,987],"class_list":["post-51427","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-frontend-development","tag-javascript","tag-javascript-frameworks","tag-nuxt","tag-nuxt-js","topic-javascript-frameworks","topic-smtp","topic-vue-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework<\/title>\n<meta name=\"description\" content=\"Neu bei Nuxt.js? Wir erkl\u00e4ren dir alles, was du wissen musst, um mit diesem beliebten, auf Vue.js basierenden JavaScript-Framework loszulegen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework\" \/>\n<meta property=\"og:description\" content=\"Neu bei Nuxt.js? Wir erkl\u00e4ren dir alles, was du wissen musst, um mit diesem beliebten, auf Vue.js basierenden JavaScript-Framework loszulegen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-16T11:37:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:18:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Solomon Eseme\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Neu bei Nuxt.js? Wir erkl\u00e4ren dir alles, was du wissen musst, um mit diesem beliebten, auf Vue.js basierenden JavaScript-Framework loszulegen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"14\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework\",\"datePublished\":\"2022-06-16T11:37:33+00:00\",\"dateModified\":\"2025-10-01T19:18:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/\"},\"wordCount\":2995,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg\",\"keywords\":[\"frontend development\",\"JavaScript\",\"JavaScript Frameworks\",\"nuxt\",\"nuxt.js\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/\",\"name\":\"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg\",\"datePublished\":\"2022-06-16T11:37:33+00:00\",\"dateModified\":\"2025-10-01T19:18:43+00:00\",\"description\":\"Neu bei Nuxt.js? Wir erkl\u00e4ren dir alles, was du wissen musst, um mit diesem beliebten, auf Vue.js basierenden JavaScript-Framework loszulegen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-Frameworks\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/javascript-frameworks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"caption\":\"Solomon Eseme\"},\"description\":\"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me\",\"sameAs\":[\"https:\/\/masteringbackend.com\",\"https:\/\/linkedin.com\/in\/solomoneseme\",\"https:\/\/x.com\/kaperskyguru\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework","description":"Neu bei Nuxt.js? Wir erkl\u00e4ren dir alles, was du wissen musst, um mit diesem beliebten, auf Vue.js basierenden JavaScript-Framework loszulegen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/","og_locale":"de_DE","og_type":"article","og_title":"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework","og_description":"Neu bei Nuxt.js? Wir erkl\u00e4ren dir alles, was du wissen musst, um mit diesem beliebten, auf Vue.js basierenden JavaScript-Framework loszulegen.","og_url":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2022-06-16T11:37:33+00:00","article_modified_time":"2025-10-01T19:18:43+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Neu bei Nuxt.js? Wir erkl\u00e4ren dir alles, was du wissen musst, um mit diesem beliebten, auf Vue.js basierenden JavaScript-Framework loszulegen.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Solomon Eseme","Gesch\u00e4tzte Lesezeit":"14\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework","datePublished":"2022-06-16T11:37:33+00:00","dateModified":"2025-10-01T19:18:43+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/"},"wordCount":2995,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg","keywords":["frontend development","JavaScript","JavaScript Frameworks","nuxt","nuxt.js"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/","url":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/","name":"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg","datePublished":"2022-06-16T11:37:33+00:00","dateModified":"2025-10-01T19:18:43+00:00","description":"Neu bei Nuxt.js? Wir erkl\u00e4ren dir alles, was du wissen musst, um mit diesem beliebten, auf Vue.js basierenden JavaScript-Framework loszulegen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/nuxt-js\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/nuxt-js.jpg","width":1460,"height":730,"caption":"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/nuxt-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"JavaScript-Frameworks","item":"https:\/\/kinsta.com\/de\/thema\/javascript-frameworks\/"},{"@type":"ListItem","position":3,"name":"Was ist Nuxt.js? Erfahre mehr \u00fcber das intuitive Vue-Framework"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","caption":"Solomon Eseme"},"description":"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me","sameAs":["https:\/\/masteringbackend.com","https:\/\/linkedin.com\/in\/solomoneseme","https:\/\/x.com\/kaperskyguru"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/51427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=51427"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/51427\/revisions"}],"predecessor-version":[{"id":51904,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/51427\/revisions\/51904"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51427\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51427\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51427\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51427\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51427\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51427\/translations\/fr"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51427\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/51428"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=51427"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=51427"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=51427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}