{"id":3477,"date":"2022-05-25T06:21:40","date_gmt":"2022-05-25T06:21:40","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"},"modified":"2026-04-28T14:07:07","modified_gmt":"2026-04-28T14:07:07","slug":"nuxt-3-ein-beliebtes-hybrides-vue-framework","status":"publish","type":"post","link":"https:\/\/thecodest.co\/de\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","title":{"rendered":"Nuxt 3 - ein beliebtes hybrides Vue-Framework"},"content":{"rendered":"<p><strong>Nuxt 3<\/strong> wurde umgestaltet und neu geschrieben, um ESM zu unterst\u00fctzen und <a href=\"https:\/\/thecodest.co\/de\/dictionary\/typescript-developer\/\">TypeScript<\/a> nativ. Es ist derzeit instabil und daher noch nicht produktionsreif. Der erste Kandidat (nuxt@3.0.0-rc.1) soll am 7. April 2022 ver\u00f6ffentlicht werden.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/zrzut-ekranu-2022-05-25-o-08.26.43.png\" alt=\"N\u00e4chste Tabelle \" title=\"Nuxt-Vergleichstabelle \"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.google.com\/url?q=https:\/\/v3.nuxtjs.org\/getting-started\/introduction\/%23comparison&amp;sa=D&amp;source=docs&amp;ust=1653463586111556&amp;usg=AOvVaw0WL5Cg-cEL0X_q8Kiu_fGy\" rel=\"nofollow\">Quelle<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ein neues Projekt starten<\/h2>\n\n\n\n<p>\u00d6ffnen Sie ein Terminal oder \u00f6ffnen Sie ein integriertes Terminal von Visual Studio <a href=\"https:\/\/thecodest.co\/de\/dictionary\/what-is-code-refactoring\/\">Code<\/a> und verwenden Sie den folgenden Befehl, um einen neuen Starter zu erstellen <a href=\"https:\/\/thecodest.co\/de\/dictionary\/why-do-projects-fail\/\">Projekt<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code>npx nuxi init nuxt3-app<\/code><\/code><\/pre>\n\n\n\n<p>\u00d6ffnen Sie den Ordner nuxt3-app:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code>cd nuxt3-app<\/code><\/code><\/code><\/pre>\n\n\n\n<p>Installieren Sie die Abh\u00e4ngigkeiten:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code>yarn installieren<\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Starten Sie den Entwicklungsserver:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code>Garnentwicklung<\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Erstellen Sie die Anwendung:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code><code>Garn herstellen<\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>F\u00fchren Sie die erstellte Anwendung aus:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code><code><code>Garnanfang<\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Was gibt es Neues?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Vue 3 Unterst\u00fctzung<\/h3>\n\n\n\n<p><strong><a href=\"https:\/\/thecodest.co\/de\/blog\/hire-vue-js-developers\/\">Vue<\/a> 3<\/strong> wurde mit mehreren neuen Funktionen ausgestattet, die die Erstellung und Wartung von Anwendungen wesentlich schneller und einfacher machen. Die wichtigsten \u00c4nderungen wurden an Global Vue vorgenommen <a href=\"https:\/\/thecodest.co\/de\/blog\/compare-staff-augmentation-firms-that-excel-in-api-team-staffing-for-financial-technology-projects\/\">API<\/a> und Ereignisse API. <strong>Vue 3<\/strong>f\u00fchrt auch neue Funktionen wie provide \/ inject, Composition API (unten beschrieben), Fragmente und Teleport ein.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/thecodest.co\/services\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/blog.webp\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Zusammensetzung API<\/h3>\n\n\n\n<p>Composition API ist eine integrierte Vue 3-Funktion, die eine Reihe von APIs bereitstellt, die die Verwendung importierter Funktionen anstelle der Deklaration von Optionen erm\u00f6glicht. Die Hauptvorteile der Composition API sind also eine bessere Wiederverwendung von Logik, eine flexiblere Codeorganisation und eine hervorragende TypeScript-Integration. Alle Teile der neuen API k\u00f6nnen auch au\u00dferhalb von <strong>Vue<\/strong> Komponenten.<\/p>\n\n\n\n<p><strong>Nuxt 3<\/strong> bietet ein neues Verzeichnis - <code>Verbundwerkstoffe\/<\/code> - die den automatischen Import von Vue-Verbundmaterial in die Anwendung erm\u00f6glicht.<\/p>\n\n\n\n<p>Beispiel komponierbar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code><code><code><code><code><code><code>\/\/ Es wird als useFoo() verf\u00fcgbar sein (camelCase des Dateinamens ohne Erweiterung)\n export default function () {\n   return useState('foo', () =&gt; 'bar')<code>\/\/ Es wird als useFoo() verf\u00fcgbar sein (camelCase des Dateinamens ohne Erweiterung)\n export default function () {\n   return useState('foo', () =&gt; 'bar')\n }<\/code>\n }<\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/code><\/pre>\n\n\n\n<p>Beispiel f\u00fcr die Verwendung eines Composable in einer <strong>Vue<\/strong> Komponente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;div&gt;{{ foo }}&lt;\/div&gt;\n&lt;\/&gt;<\/code><\/pre>\n\n\n\n<p>Wie Sie oben sehen k\u00f6nnen, wird ein zusammensetzbares Element als useFoo exportiert, genau wie im Konst-Namen angegeben. Wenn es keinen Exportnamen gibt, wird das Composable als pascelCase des Dateinamens zug\u00e4nglich sein. Es erm\u00f6glicht Ihnen auch, automatisch importierte Composables mit einem beliebten Vue Store Composable namens <a href=\"https:\/\/www.google.com\/url?q=https:\/\/pinia.vuejs.org\/&amp;sa=D&amp;source=docs&amp;ust=1653463671582173&amp;usg=AOvVaw1YVpJI3sNMeufnYVxcM43i\" rel=\"nofollow\">Pina<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/api.png\" alt=\"Beispiel f\u00fcr eine API-Struktur \" title=\"Optionen und Kompositions-API \"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/vuejs.org\/guide\/extras\/composition-api-faq.html#better-logic-reuse\" rel=\"nofollow\">Quelle<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Nitro-Motor<\/h3>\n\n\n\n<p>Nitro ist ein Full-Stack-Server, der Rollup und <a href=\"https:\/\/thecodest.co\/de\/blog\/find-your-node-js-expert-for-hire-today\/\">Node.js<\/a> Worker in der Entwicklung, um die Code- und Kontextisolierung zu gew\u00e4hrleisten. Sie umfasst auch eine Server-API und eine Server-Middleware. In der Produktion baut die Engine die Anwendung und den Server in einem Verzeichnis auf - `.output`. Das Besondere daran ist, dass die Ausgabe leichtgewichtig ist: minifiziert und ohne jegliche <a href=\"https:\/\/thecodest.co\/de\/dictionary\/what-is-node-js-used-for\/\">Knoten<\/a> Module. Mit Nitro k\u00f6nnen Sie die Ausgabe auf Node.js, Serverless, Workers, Edge-Side-Rendering oder als rein statische Ausgabe bereitstellen.&nbsp;<\/p>\n\n\n\n<p><strong>Nuxt 3<\/strong> bietet die M\u00f6glichkeit der Bereitstellung auf <a href=\"https:\/\/thecodest.co\/de\/dictionary\/azure-developer\/\">Azurblau<\/a> oder Netlify, ohne dass eine Konfiguration erforderlich ist, zusammen mit einer Firebase- oder Cloudflare-Bereitstellung mit minimaler Konfiguration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vite<\/h3>\n\n\n\n<p>Vite ist ein Frontend-Tool der n\u00e4chsten Generation, das eine integrierte Funktion f\u00fcr <strong> Nuxt 3<\/strong>. Dieses Tool bietet eine schnellere Entwicklungserfahrung f\u00fcr <a href=\"https:\/\/thecodest.co\/de\/blog\/find-your-ideal-stack-for-web-development\/\">Web<\/a> Projekte. F\u00fcr die Entwicklung bietet der Server Vite umfangreiche Funktionserweiterungen gegen\u00fcber nativen ES-Modulen und ein sehr schnelles Hot Module Replacement (HMR).<\/p>\n\n\n\n<p>W\u00e4hrend des Erstellungsprozesses b\u00fcndelt Vite den Code mit vorkonfigurierten Rollups, um die statischen Assets f\u00fcr die Produktion zu optimieren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Neue Dateistruktur<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/zrzut-ekranu-2022-05-25-o-08.52.47.png\" alt=\"Beispiel f\u00fcr eine Dateistruktur \" title=\"Verzeichnisstruktur \"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/v3.nuxtjs.org\/docs\" rel=\"nofollow\">Quelle<\/a><\/p>\n\n\n\n<p><strong>Nuxt 3<\/strong> f\u00fchrt eine leicht ver\u00e4nderte Dateistruktur ein. Die gr\u00f6\u00dften \u00c4nderungen wurden an `app.vue` vorgenommen - das `pages\/` Verzeichnis ist optional und wenn es nicht vorhanden ist, wird die Anwendung keinen Vue-Router enthalten, was n\u00fctzlich ist, wenn man eine Ladeseite oder eine Anwendung erstellt, die kein Routing ben\u00f6tigt.&nbsp;<\/p>\n\n\n\n<p>Beispiel app.vue-Datei:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">Hallo Welt!<\/code><\/pre>\n\n\n\n<p>Um Routing, Seiten und Layout einzubinden, m\u00fcssen Sie integrierte Komponenten verwenden, n\u00e4mlich `NuxtPage` und `NuxtLayout`. Beispiel:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;div&gt;\n&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p&gt;\n&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p&gt;\n&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>app.vue\" ist die Hauptkomponente der <strong>Nuxt-Anwendung<\/strong>so dass alles, was dort hinzugef\u00fcgt wird, global ist und auf jeder Seite erscheint.&nbsp;<\/p>\n\n\n\n<p>Die Ver\u00e4nderung der <strong>Nux<\/strong>t Verzeichnisstruktur wird das Verzeichnis `store\/` durch `composables\/` ersetzt, da <strong>Vue 3<\/strong>f\u00fchrt Composables ein, die die L\u00e4den ersetzen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Migration von Vue 2 auf Vue 3 mit Nuxt Bridge<\/h2>\n\n\n\n<p>Nuxt 3 f\u00fchrt die Nuxt Bridge ein - eine Vorw\u00e4rtskompatibilit\u00e4tsschicht, die Nuxt 2-Anwendungen mit Nuxt 3-Funktionen aufr\u00fcstet, so dass sie sich selbst St\u00fcck f\u00fcr St\u00fcck aufr\u00fcsten kann. Sie bietet Zugang zu Funktionen wie: Nitro-Engine, Composition API und neue CLI, indem man die Bridge einfach installiert und aktiviert.<\/p>\n\n\n\n<p>Nuxt Bridge ist abw\u00e4rtskompatibel, so dass \u00e4ltere Plugins und Module weiterhin funktionieren, w\u00e4hrend die Migration einfach und ohne Neuschreiben der gesamten Anwendung m\u00f6glich ist.<\/p>\n\n\n\n<p>Um Nuxt Bridge zu aktivieren, m\u00fcssen Sie sicherstellen, dass der Dev-Server nicht l\u00e4uft, dann alle Paket-Sperrdateien entfernen und `nuxt-edge` installieren:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">- \"nuxt\": \"^2.15.0\"\n\n\"nuxt-edge\": \"latest\"<\/code><\/pre>\n\n\n\n<p>Danach installieren Sie alle Abh\u00e4ngigkeiten neu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">Garn installieren<\/code><\/pre>\n\n\n\n<p>Ihre Migration mit Nuxt Bridge ist abgeschlossen!<\/p>\n\n\n\n<p>Eine andere M\u00f6glichkeit ist die Installation <strong>Nuxt<\/strong> Bridge als eine Entwicklungsabh\u00e4ngigkeit:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">yarn add --dev @nuxt\/bridge@npm:@nuxt\/bridge-edge<\/code><\/pre>\n\n\n\n<p>Dann m\u00fcssen Sie die Skripte in `package.json` aktualisieren, um die \u00c4nderungen zu ber\u00fccksichtigen, die der Nitro-Server in den Erstellungsprozess einbringt.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/thecodest.co\/contact\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/interested_in_cooperation_.png\" alt=\"Kooperationsbanner\"\/><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>Nuxt 3 ist die n\u00e4chste Generation des beliebten hybriden Vue-Frameworks, das es uns erm\u00f6glicht, Vue f\u00fcr die Erstellung von serverseitig gerenderten Anwendungen zu verwenden. Beta-Version wurde am 12. Oktober 2021 gestartet, die in Nuxt Vue 3, eine neue Intro-Engine, ein leichteres B\u00fcndel und adhook Vite.<\/p>","protected":false},"author":2,"featured_media":3478,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Nuxt 3 - a Popular Hybrid Vue Framework - The Codest<\/title>\n<meta name=\"description\" content=\"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/de\/blog\/nuxt-3-ein-beliebtes-hybrides-vue-framework\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nuxt 3 - a Popular Hybrid Vue Framework\" \/>\n<meta property=\"og:description\" content=\"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/de\/blog\/nuxt-3-ein-beliebtes-hybrides-vue-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-25T06:21:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-28T14:07:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Nuxt 3 &#8211; a Popular Hybrid Vue Framework\",\"datePublished\":\"2022-05-25T06:21:40+00:00\",\"dateModified\":\"2026-04-28T14:07:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\"},\"wordCount\":700,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\",\"name\":\"Nuxt 3 - a Popular Hybrid Vue Framework - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"datePublished\":\"2022-05-25T06:21:40+00:00\",\"dateModified\":\"2026-04-28T14:07:07+00:00\",\"description\":\"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/nuxt_3.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/nuxt-3-a-popular-hybrid-vue-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Nuxt 3 &#8211; a Popular Hybrid Vue Framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/de\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Nuxt 3 - ein beliebter hybrider Vue-Rahmen - The Codest","description":"Nuxt 3 ist die n\u00e4chste Generation des beliebten hybriden Vue-Frameworks, das es uns erm\u00f6glicht, Vue f\u00fcr die Erstellung von serverseitig gerenderten Anwendungen zu verwenden. Beta-Version wurde am 12. Oktober 2021 gestartet, die in Nuxt Vue 3, eine neue Intro-Engine, ein leichteres B\u00fcndel und adhook Vite.","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:\/\/thecodest.co\/de\/blog\/nuxt-3-ein-beliebtes-hybrides-vue-framework\/","og_locale":"de_DE","og_type":"article","og_title":"Nuxt 3 - a Popular Hybrid Vue Framework","og_description":"Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.","og_url":"https:\/\/thecodest.co\/de\/blog\/nuxt-3-ein-beliebtes-hybrides-vue-framework\/","og_site_name":"The Codest","article_published_time":"2022-05-25T06:21:40+00:00","article_modified_time":"2026-04-28T14:07:07+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Nuxt 3 &#8211; a Popular Hybrid Vue Framework","datePublished":"2022-05-25T06:21:40+00:00","dateModified":"2026-04-28T14:07:07+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"},"wordCount":700,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","articleSection":["Software Development"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","url":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/","name":"Nuxt 3 - ein beliebter hybrider Vue-Rahmen - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","datePublished":"2022-05-25T06:21:40+00:00","dateModified":"2026-04-28T14:07:07+00:00","description":"Nuxt 3 ist die n\u00e4chste Generation des beliebten hybriden Vue-Frameworks, das es uns erm\u00f6glicht, Vue f\u00fcr die Erstellung von serverseitig gerenderten Anwendungen zu verwenden. Beta-Version wurde am 12. Oktober 2021 gestartet, die in Nuxt Vue 3, eine neue Intro-Engine, ein leichteres B\u00fcndel und adhook Vite.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/nuxt_3.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/nuxt-3-a-popular-hybrid-vue-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Nuxt 3 &#8211; a Popular Hybrid Vue Framework"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"Der Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"Der Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/de\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts\/3477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/comments?post=3477"}],"version-history":[{"count":8,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts\/3477\/revisions"}],"predecessor-version":[{"id":8376,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts\/3477\/revisions\/8376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/media\/3478"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/media?parent=3477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/categories?post=3477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/tags?post=3477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}