{"id":42772,"date":"2021-08-03T10:11:47","date_gmt":"2021-08-03T08:11:47","guid":{"rendered":"https:\/\/kinsta.com\/?p=98454"},"modified":"2023-07-27T13:49:32","modified_gmt":"2023-07-27T12:49:32","slug":"vue-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/vue-js\/","title":{"rendered":"10 Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst"},"content":{"rendered":"

Mit dem kontinuierlichen Aufstieg der Frontend-JavaScript-Frameworks<\/a>, einschlie\u00dflich des neuen Vue.js 3, ist es unerl\u00e4sslich geworden, mit ihnen Schritt zu halten und alles \u00fcber ihre neuen Features zu verstehen.<\/p>\n

In diesem Artikel werden wir uns mit Vue.js 3 und seinen neu hinzugef\u00fcgten Features<\/a> besch\u00e4ftigen. Diese neuen Features machen Vue.js noch robuster und machen es zu einem gro\u00dfartigen Framework, das du f\u00fcr dein n\u00e4chstes Projekt in Betracht ziehen solltest. Du erf\u00e4hrst im Detail 10 Dinge, die du \u00fcber Vue.js wissen solltest und wie es dir helfen wird, skalierbare und hochperformante Frontend-Anwendungen zu erstellen.<\/p>\n

Bist du bereit? Los geht’s!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was ist Vue.js?<\/h2>\n

Laut Evan You, dem Sch\u00f6pfer von Vue.js:<\/p>\n

„Vue.js ist eine flexiblere, weniger eigenwillige L\u00f6sung. Es ist nur ein Interface-Layer, so dass du es als leichtes Feature in Seiten verwenden kannst, anstatt eines vollwertigen SPA.“<\/em><\/p><\/blockquote>\n

Er wollte ein Frontend-Framework schaffen, das so m\u00e4chtig wie Angular<\/a> ist, aber auch „leichter“ und flexibler, ohne all die unn\u00f6tigen Plugins und Konzepte, die mit Angular einhergehen.<\/p>\n

Das Ergebnis war Vue.js, das heute eines der beliebtesten Frontend-Frameworks ist.<\/p>\n

\"Vue.js
Vue.js ist das zweitbeliebteste Frontend-Framework. (Quelle: State of JS 2020<\/a>)<\/figcaption><\/figure>\n\n

Warum Entwickler Vue.js verwenden<\/h2>\n

Verschiedene Gr\u00fcnde treiben einen Entwickler dazu<\/a> an, eine bestimmte Technologie zu verwenden. Lass uns besprechen, warum wir denken, dass du Vue.js lernen solltest.<\/p>\n

F\u00fcr den Anfang ist Vue.js eines der einfachsten Frameworks f\u00fcr die meisten Entwickler, da dieses Framework JavaScript verwendet. Daher kann jeder, der grundlegende JavaScript-Kenntnisse hat, mit Vue.js entwickeln.<\/p>\n

Das Vue CLI Tool in Kombination mit anderen Frontend Development Tools<\/a> macht das Einrichten von Vue.js zum Kinderspiel. Es ist standardm\u00e4\u00dfig mit einigen Funktionen eingerichtet, aber du kannst auch Code mit einer DRY (Don’t Repeat Yourself) Logik und Struktur erstellen.<\/p>\n

Reaktivit\u00e4t ist auch in Vue.js eingebaut. Das bedeutet, dass die Echtzeit-Funktionalit\u00e4t, die auf dem Angular-Framework beliebt war, mit Vue.js ein Kinderspiel ist. Zum Beispiel kannst du ganz einfach eine einfache Direktive wie v-if<\/code> in deiner Vue.js Anwendung anwenden.<\/p>\n

Als n\u00e4chstes wollen wir die prim\u00e4ren Vor- und Nachteile von Vue.js diskutieren.<\/p>\n

Vorteile und Nachteile von Vue.js<\/h2>\n

Vue.js ist das zweitbeliebteste Framework, das heute verwendet wird. Schauen wir uns an, was es bei Webentwicklern beliebt macht und was sie abst\u00f6\u00dft.<\/p>\n

Vue.js Vorteile<\/h3>\n

Wir beginnen damit, die positiven Aspekte von Vue.js zu erkunden.<\/p>\n

Winzige Gr\u00f6\u00dfe<\/h4>\n

Vue.js hat eine winzige Downloadgr\u00f6\u00dfe von ca. 18 KB, was im Vergleich zu anderen Frameworks mit gro\u00dfen Gr\u00f6\u00dfen hervorragend ist. Mit dieser Gr\u00f6\u00dfe wirkt sich Vue.js jedoch positiv auf das SEO und die UX deiner Frontend-Anwendung<\/a> aus.<\/p>\n

Single-File-Komponente und Lesbarkeit<\/h4>\n

Vue.js verwendet eine komponentenbasierte Architektur, wodurch gro\u00dfe Code-Bl\u00f6cke in kleinere Komponenten aufgeteilt werden. Au\u00dferdem ist in Vue.js alles eine Komponente, und jede Komponente wird mit HTML, CSS und JavaScript geschrieben, was die Lesbarkeit und Einfachheit f\u00f6rdert.<\/p>\n

Solides Tooling System<\/h4>\n

Vue.js unterst\u00fctzt viele Tools f\u00fcr die Frontend-Entwicklung direkt aus der Box heraus, mit wenig bis gar keiner Konfiguration von dir. Zum Beispiel unterst\u00fctzt Vue.js Tools wie Babel und Webpack<\/a>. Dar\u00fcber hinaus bietet es Unit-Tests, End-to-End-Testing-Bibliotheken, flexible und einfach zu bedienende Routing-Systeme, State-Manager, Server-Side-Rendering (SSR) und mehr.<\/p>\n

Einfach zu benutzen<\/h4>\n

Wenn du Vue.js bereits benutzt hast, wirst du zustimmen, dass es sehr einfach zu benutzen ist. Es modernisiert den \u00fcblichen Webentwicklungsansatz und macht es f\u00fcr jeden Anf\u00e4nger einfach, direkt einzusteigen und sich mit nur wenigen \u00dcbungen wohl zu f\u00fchlen.<\/p>\n

Vue.js Nachteile<\/h3>\n

Nachdem wir nun die Vorteile behandelt haben, wollen wir uns nun den Nachteilen von Vue.js widmen.<\/p>\n

Reaktivit\u00e4t – Komplexit\u00e4t<\/h4>\n

Die Implementierung von Two-Way-Binding in Vue.js ist ein praktisches Tool, um Vue.js Komponenten zu verwalten. Two-way binding bezieht sich auf das Teilen von Daten zwischen einer Komponentenklasse und ihrem Template, es wurde so entwickelt, dass wenn sich Daten an einer Stelle \u00e4ndern, es automatisch die anderen aktualisiert.<\/p>\n

Es gibt jedoch ein Problem, wie die Reaktivit\u00e4t funktioniert, w\u00e4hrend das Reaktivit\u00e4tssystem nur die Datenst\u00fccke wiedergibt, die ausgel\u00f6st wurden. Manchmal kommt es zu Fehlern beim Lesen der Daten, so dass es erforderlich ist, die Daten zu gl\u00e4tten. Du kannst dir dieses Problem auf der Webseite von Vue.js<\/a> durchlesen und erfahren, wie es behoben wird.<\/p>\n

Sprachbarriere<\/h4>\n

Urspr\u00fcnglich wurde Vue.js haupts\u00e4chlich von Chinesen angenommen, wobei gro\u00dfe Unternehmen wie Xiaomi und Alibaba dabei halfen, das Framework popul\u00e4r zu machen und eine Nachfrage auf dem Arbeitsmarkt zu schaffen. Allerdings waren viele Foren, Diskussionskan\u00e4le und \u00e4hnliches haupts\u00e4chlich auf Chinesisch, was die Akzeptanz f\u00fcr nicht-muttersprachliche Entwickler erschwerte.<\/p>\n

Heute ist dies nicht mehr der Fall, da Vue.js sich weiterentwickelt hat, um Support in vielen Sprachen<\/a> zu bieten, aber es gibt einige Sprachen, die weniger Support haben als andere.<\/p>\n

Risiken der \u00dcber-Flexibilit\u00e4t<\/h4>\n

Wie bereits erw\u00e4hnt, ist Vue.js sehr flexibel und einfach zu benutzen. Daher ist es leicht, \u00fcberall jede Menge Spaghetti-Code zu haben, da jeder in einem Unternehmensteam unterschiedliche Meinungen dar\u00fcber haben kann, wie Dinge zu tun sind.<\/p>\n

Aus den oben genannten Vor- und Nachteilen von Vue.js hast du vielleicht schon einige Features entdeckt, die du liebst und einige, die f\u00fcr dich nicht gut funktionieren werden.<\/p>\n

10 Dinge, die du \u00fcber Vue.js wissen solltest<\/h2>\n

Im Folgenden findest du die zehn Dinge, die du \u00fcber Vue.js wissen solltest und warum es essentiell ist, sie zu kennen.<\/p>\n

Berechnete Eigenschaften<\/h3>\n

Eine berechnete Eigenschaft ist eines der meistgenutzten Features in Vue.js. Eine berechnete Eigenschaft erm\u00f6glicht es dir, Eigenschaften zu erstellen, die modifiziert und manipuliert werden k\u00f6nnen und Daten auf eine effiziente und lesbare Weise anzeigen.<\/p>\n

Es ist praktisch, wenn du viele kleine Methoden f\u00fcr Dinge wie Formatierung, \u00c4nderung von Werten oder einen umfangreichen Prozess, den du in bestimmten Situationen ausl\u00f6sen musst, wiederholen willst.<\/p>\n

Berechnete Eigenschaften helfen dabei, \u00fcberm\u00e4\u00dfig viel Logik in deinem Template zu entfernen. Zu viel dieser Logik kann dazu f\u00fchren, dass dein Code schnell aufgebl\u00e4ht und schwer zu pflegen wird.<\/p>\n

Angenommen, du m\u00f6chtest eine Zeichenkette in Gro\u00dfbuchstaben formatieren, so k\u00f6nntest du es tun:<\/p>\n

<template>\n  <div>\n    <p> I love {{ value.toUpperCase() }} <\/p>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n
Was passiert, wenn du die value<\/code> variable an 50 verschiedenen Stellen \u00e4ndern musst? Aufgeblasen, richtig? Nun, berechnete Eigenschaften<\/a> sind hier um zu helfen:<\/p>\n
<template>\n  <div>\n    <p> I love {{ value }} <\/p>\n  <\/div>\n<\/template>\n<script>\n  export default {\n    computed:{\n      value(){\n        return this.value.toUpperCase()\n      }\n    }\n  }\n<\/script><\/code><\/pre>\n
Du kannst einfach toUpperCase()<\/code> in toLowerCase()<\/code> \u00e4ndern, und es wird alles von einem Punkt aus reflektiert.<\/p>\n
Ereignisbehandlung<\/h3>\n
Vue.js macht die Kommunikation zwischen Child und Parent mit Hilfe von $emit<\/code> und v-on<\/code> zu einem Kinderspiel. Es wird m\u00fchelos und einfach, die Kommunikation zwischen Komponentenhierarchien zu handhaben.<\/p>\n
Die $emit<\/code> Funktion akzeptiert zwei Parameter: einen String f\u00fcr den Namen und einen optionalen Wert, der ausgesendet werden soll.<\/p>\n
Der v-on:event-name<\/code> wird in der untergeordneten Komponente verwendet, um das Ereignis zu empfangen, das von der \u00fcbergeordneten Komponente ausgesendet wurde:<\/p>\n
<template>\n  <section>\n    <button @click=\"onClick\">Add <\/button>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  name: \"AddEvent\",\n  methods: {\n    onClick() { \n      this.$emit('add', this.data);\n    }\n  }\n}\n<\/script><\/code><\/pre>\n
Sobald du den Add<\/code>-Button ausl\u00f6st, l\u00f6st die onClick<\/code>-Methode das $emit<\/code>-Ereignis aus, welches das Add<\/code>-Ereignis an eine Child-Komponente sendet, die auf das Add<\/code>-Ereignis h\u00f6rt.<\/p>\n
Lass uns einen Blick darauf werfen, wie man auf ein Ereignis lauscht:<\/p>\n
<template>\n  <section>\n  <p v-show=\"showSaveMsg\">This component is listening to the ADD event<\/p>\n  <add-event v-on:add=\"onAdd\"><\/add-event>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  data(){\n    return {\n      showSaveMsg: false\n    }\n  },\n  components:{\n    AddEvent: () => import('.\/AddEvent')\n  },\n  methods: {\n    onAdd() { \n        this.showSaveMsg = true;\n    }\n  }\n}\n<\/script><\/code><\/pre>\n
Der obige Code h\u00f6rt auf das add<\/code>-Ereignis und reagiert, indem er den Wert von showSaveMsg<\/code> auf true<\/code> \u00e4ndert, was die Nachricht erneut anzeigt.<\/p>\n
Lazy Loading \/ Async Komponenten<\/h3>\n
Lazy Loading<\/a> ist einer der besten Performance Hacks f\u00fcr Vue.js, bei dem Komponenten asynchron oder on-demand hinzugef\u00fcgt und gerendert werden, was die Dateigr\u00f6\u00dfe, die HTTP Request-Response Zeit und so weiter deutlich reduziert.<\/p>\n
Lazy Loading wird mit dynamischen Webpack-Importen erreicht, die auch Code-Splitting unterst\u00fctzen.<\/p>\n
Vue.js erlaubt Lazy Loading von Komponenten und kann mit den folgenden Skripten global erreicht werden:<\/p>\n
import Vue from \"vue\";\nVue.component(\"new-component\", () => import(\".\/components\/NewComponent.vue\"));\n<\/code><\/pre>\n
Du kannst es lokal mit einer Komponente wie unten erreichen:<\/p>\n
<template>\n  <div>\n    <component><\/component>\n  <\/div>\n<\/template>\n<script>\nexport default {\n  components: {\n    'Component': () => import('.\/Component')\n  }\n}\n<\/script><\/code><\/pre>\n
Globale Komponenten<\/h3>\n
Wir k\u00f6nnen eine signifikante Wiederverwendbarkeit in Vue.js mit globalen Komponenten erreichen, wobei du eine Komponente einmal registrierst und sie dann \u00fcberall innerhalb deiner Vue.js-Instanz verwendest.<\/p>\n
Globale Komponenten sind ein wichtiges Feature und k\u00f6nnen dir viel Zeit ersparen, wenn du Komponenten jedes Mal einzeln registrierst, aber es kann leicht missbraucht werden, wenn du alle Komponenten global registrierst. Wenn du alle Komponenten global registrierst, kann das leicht zu einer gro\u00dfen Build-Gr\u00f6\u00dfe f\u00fchren, was zu schlechtem SEO und langsamerer Seitenladezeit<\/a> f\u00fchrt.<\/p>\n
Achte darauf, dass du immer globale Komponenten registrierst, die viele Anwendungsf\u00e4lle in deinem Projekt haben, wie unten gezeigt:<\/p>\n
import Vue from \"vue\";\nVue.component(\"new-component\", () => import(\".\/componetns\/NewComponent.vue\"));<\/code><\/pre>\n
Einzelne Dateikomponente<\/h3>\n
Eines der m\u00e4chtigsten Features von Vue.js ist Components; es hilft dir, wesentliche HTML-Elemente, CSS und JavaScript zu erweitern, um wiederverwendbaren Code zu kapseln.<\/p>\n
Komponenten k\u00f6nnen dabei helfen, gro\u00dfe Projekte in kleinere, wiederverwendbare Teile zu zerlegen, die wir \u00fcber das gesamte Projekt hinweg erweitern k\u00f6nnen, wodurch das DRY (Don’t Repeat Yourself) Prinzip des Software Engineerings gef\u00f6rdert wird.<\/p>\n
Es kann Organisation und Kapselungen f\u00fcr gro\u00dfe Projekte, wiederverwendbaren Code bieten und kann in .vue<\/code> Dateien getrennt werden.<\/p>\n
<template>\n  <section>\n    <button @click=\"onClick\">Add<\/button>\n  <\/section>\n<\/template>\n\n<script>\nexport default {\n  name: \"CustomButtom\",\n  methods: {\n    onClick() { \n      this.$emit('add', this.data);\n    }\n  }\n}\n<\/script>\n\n<style scoped>\n  button{\n    \/** Button Styles *\/\n  }\n<\/style><\/code><\/pre>\n
Die obigen Skripte erstellen eine benutzerdefinierte Button-Komponente, die wir in unserem Projekt wiederverwenden k\u00f6nnen. Jede Komponente hat ihr HTML, CSS und JavaScript.<\/p>\n
Testen<\/h3>\n
Vue.js bietet eine der robustesten Testbibliotheken, die Unit-Tests mit Jest und Mocha oder End-to-End-Tests<\/a> mit wenig bis gar keiner Konfiguration zu einem Kinderspiel machen.<\/p>\n
Ein kurzer Blick in das Testen mit diesen Tools k\u00f6nnte sich f\u00fcr dich lohnen. Lass uns also die Installation, das Einrichten und das Testen eines Demoprojekts erkunden.<\/p>\n
Wenn du das empfohlene Vue CLI Tool<\/a> verwendest, um dein Projekt einzurichten, f\u00fchre die folgenden Befehle aus:<\/p>\n
vue add unit-jest \/\/to run unit test with jest\n\nnpm install --save-dev @vue\/test-utils\n<\/code><\/pre>\n
Als n\u00e4chstes, nach dem Setup, f\u00fcge den folgenden Code ein, der demonstriert, wie man eine einfache Komponente testet:<\/p>\n
\/\/ Import the `mount()` method from Vue Test Utils\nimport { mount } from '@vue\/test-utils'\n\n\/\/ The component to test\nconst MessageComponent = {\n  template: '<p>{{ message }}<\/p>',\n  props: ['message']\n}\n\ntest('displays a message', () => {\n  \/\/ mount() returns a wrapped Vue component we can interact with\n  const wrapper = mount(MessageComponent, {\n    propsData: {\n      msg: 'Welcome to our testing world'\n    }\n  })\n\n  \/\/ Assert the rendered text of the component\n  expect(wrapper.text()).toContain('Welcome to our testing world')\n})<\/code><\/pre>\n
Die Vue Testing Library hat zwei gro\u00dfartige Optionen um deine Komponenten zu testen: Mount und Shallow.<\/p>\n
Wenn du eine Komponente mit vollst\u00e4ndiger Isolation testen willst, verwende die shallow<\/code> Methode. Andernfalls, wenn du an einer Komponente mit Sub-Komponenten arbeiten musst, die du die Kommunikation sicherstellen willst, funktioniert die mount<\/code>-Option sehr gut<\/p>\n
Das leistungsstarke Vue CLI Tool<\/h3>\n
Vue CLI ist ein exzellentes CLI Tool<\/a> und gibt jedem Vue Entwickler eine gute Portion Power. Mit ihm kannst du schnell jede Komponente isoliert testen. Das Tolle an Vue CLI ist, dass du eine Komponente vollst\u00e4ndig isoliert entwickeln und testen kannst und trotzdem Zugriff auf Hot-Reloading hast, w\u00e4hrend du \u00fcber diese spezielle Komponente iterierst.<\/p>\n
Um das zu demonstrieren, installieren wir Vue CLI global:<\/p>\n
npm install -g @vue\/cli<\/code><\/pre>\n
Als n\u00e4chstes kannst du jede Komponente testen, indem du den folgenden Befehl ausf\u00fchrst:<\/p>\n
vue serve .\/components\/views\/Home.vue<\/code><\/pre>\n
Wenn du eine bestimmte Komponente herausziehen m\u00f6chtest, um sie z.B. mit deinen Kollegen zu teilen, kannst du das mit folgendem Befehl erreichen:<\/p>\n
vue build --target lib --name goldenRule .\/components\/views\/Home<\/code><\/pre>\n
Vue CLI ist sehr m\u00e4chtig und kann eine Menge produktiver Zeit sparen, wenn du die Kunst der Verwendung beherrschst. Wenn du mehr erfahren willst, kannst du einen Blick in die offizielle Dokumentation<\/a> werfen.<\/p>\n
Props Management<\/h3>\n
Die Verwaltung von Props ist f\u00fcr die Vue-Komponente sehr wichtig, da sie auf verschiedene Arten erstellt werden kann. Du kannst Props auch validieren, mehrere Props erstellen und sie nach Bedarf modifizieren.<\/p>\n
Um eine neue Eigenschaft in einer Vue Komponente zu erstellen, kannst du es auf verschiedene Arten tun. Angenommen du hast deine Komponente, dann musst du die isAdmin<\/code> Eigenschaft erstellen.<\/p>\n
Schauen wir uns die verschiedenen M\u00f6glichkeiten an, wie du es machen kannst:<\/p>\n
<template>\n  <section>\n    <component v-if=\"isAdmin\"><\/component>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  name: 'Component',\n\n \/\/ One\n  props: {\n    isAdmin: {\n      type: Boolean,\n      default: false,\n      required: true\n    }\n  },\n \n \/\/ Two\n  props: ['isAdmin'],\n\n \/\/ Three\n  props: {\n    isAdmin: Boolean\n  }\n\n}\n<\/script><\/code><\/pre>\n
Die Validierung deiner St\u00fctze ist sehr wichtig. Zum Gl\u00fcck ist es auch sehr einfach:<\/p>\n
\/\/ ...\n\n \/\/ One\n  props: {\n    isAdmin: {\n      default: false,\n      required: true,\n      validator: function(value) {\n        return typeof === 'boolean';\n      }\n    }\n  },\n\n\/\/ ...<\/code><\/pre>\n
Schlie\u00dflich ist das \u00c4ndern von Requisiten so einfach wie das Neuausrichten ihrer Werte:<\/h3>\n
\/\/...\n\nmethods: {\n  isAdmin() {\n    this.isAdmin = true;\n  }\n}\n\n\/\/..\n<\/code><\/pre>\n
Um der Prop in einer \u00fcbergeordneten Komponente einen Wert zuzuweisen:<\/p>\n
<template>\n  <section>\n    <component :isAdmin=\"true\"><\/component>\n  <\/section>\n<\/template><\/code><\/pre>\n
Server-seitiges Rendering (SSR)<\/h3>\n
Bei all den gro\u00dfartigen Features und Vorteilen, die die Verwendung von Vue.js f\u00fcr die Erstellung von Frontend-Anwendungen mit sich bringt, ist Vue.js selbst immer noch eine clientseitige Bibliothek, die nur DOM-Elemente rendert und manipuliert.<\/p>\n
Das serverseitige Rendering hilft clientseitigen Frameworks wie Vue.js besser zu funktionieren. Suchmaschinen-Crawler sehen beim Crawlen vollst\u00e4ndig gerenderte Seiten deiner Webseite.<\/p>\n
Damit deine Webseite schneller von Google und Bing indexiert wird<\/a>, muss deine Webseite einen schnelleren und h\u00f6heren Time-to-Content Score haben. Das ist es, was Server-side Rendering in Vue.js dir hilft zu erreichen.<\/p>\n
Serverseitiges Rendering (SSR) ist eine beliebte Technik, um eine regul\u00e4re clientseitige Single-Page-App (SPA) auf dem Server zu rendern und dann eine vollst\u00e4ndig gerenderte Seite an den Leser zu senden.<\/p>\n
Wenn die Seite auf der Server-Seite gerendert wird, sendet sie es als Antwort an den Client. Somit ist jede Information bereits gerendert worden, w\u00e4hrend der Browser die Suchmaschinenseite anzeigt.<\/p>\n
SSR in Vue.js<\/a> zu erreichen, ist f\u00fcr Anf\u00e4nger schwierig. Es wird einfacher sein, Nuxt.js<\/a> zu benutzen, welches ein eingebautes SSR und eine sehr niedrige Lernkurve hat.<\/p>\n
Deployment<\/span><\/h3>\n
Vue.js wird w\u00e4hrend der Entwicklung viele Warnungen, Fehler und aufgebl\u00e4hte Dateigr\u00f6\u00dfen pr\u00e4sentieren, aber diese Probleme verschwinden sofort, wenn du die Produktion zum Deployment einschaltest. Vue.js konfiguriert automatisch Webpack Build Tools, Minifizierungen<\/a>, CSS Extraktion und Purging, Caching, Tracking von Laufzeitfehlern und mehr.<\/p>\n
Kinsta-Kunden<\/a> k\u00f6nnen die integrierte Funktion zur Code-Minifizierung<\/a> nutzen, auf die sie direkt im MyKinsta-Dashboard<\/a> zugreifen k\u00f6nnen. So k\u00f6nnen sie die automatische CSS- und JavaScript-Minifizierung mit einem einfachen Klick aktivieren.<\/p>\n
Vue.js macht deinen Deployment-Prozess sehr einfach, indem es die Produktionsumgebung automatisch konfiguriert und einrichtet, ohne dass der Entwickler zus\u00e4tzliche Schritte unternehmen muss.<\/p>\n
Um deine Vue.js Anwendung zu deployen<\/a>, kannst du dir die allgemeinen Anleitungen durchlesen.<\/p>\n\n
Zusammenfassung<\/h2>\n
In diesem Artikel haben wir im Detail erforscht, was Vue.js ist, warum du es verwenden solltest, seine Vor- und Nachteile und die 10 Dinge, die du dar\u00fcber wissen solltest.<\/p>\n
Hoffentlich hast du dein Wissen \u00fcber Vue.js erweitert, um skalierbare und hochperformante Frontend-Anwendungen zu erstellen.<\/p>\n
Coding weiter!<\/p>\n
Wenn du Fragen oder Anregungen hast, freuen wir uns, von dir zu h\u00f6ren. Sprich mit uns im Kommentarbereich unten!<\/p>\n","protected":false},"excerpt":{"rendered":"
Mit dem kontinuierlichen Aufstieg der Frontend-JavaScript-Frameworks, einschlie\u00dflich des neuen Vue.js 3, ist es unerl\u00e4sslich geworden, mit ihnen Schritt zu halten und alles \u00fcber ihre neuen Features …<\/p>\n","protected":false},"author":193,"featured_media":42777,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[445,496],"topic":[951,952,987],"class_list":["post-42772","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript-frameworks","tag-vue-js","topic-javascript-frameworks","topic-javascript-tutorials","topic-vue-js"],"yoast_head":"\n10 Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst<\/title>\n<meta name=\"description\" content=\"Erfahre 10 Gr\u00fcnde, warum du Vue.js als Front-End JS-Library f\u00fcr dein n\u00e4chstes Webentwicklungsprojekt in Betracht ziehen solltest.\" \/>\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\/vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst\" \/>\n<meta property=\"og:description\" content=\"Erfahre 10 Gr\u00fcnde, warum du Vue.js als Front-End JS-Library f\u00fcr dein n\u00e4chstes Webentwicklungsprojekt in Betracht ziehen solltest.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/vue-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=\"2021-08-03T08:11:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T12:49:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg\" \/>\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=\"Erfahre 10 Gr\u00fcnde, warum du Vue.js als Front-End JS-Library f\u00fcr dein n\u00e4chstes Webentwicklungsprojekt in Betracht ziehen solltest.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg\" \/>\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=\"12\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-js\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"10 Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst\",\"datePublished\":\"2021-08-03T08:11:47+00:00\",\"dateModified\":\"2023-07-27T12:49:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-js\/\"},\"wordCount\":2352,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg\",\"keywords\":[\"JavaScript Frameworks\",\"vue.js\"],\"articleSection\":[\"Webentwicklung\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/vue-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-js\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/vue-js\/\",\"name\":\"10 Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg\",\"datePublished\":\"2021-08-03T08:11:47+00:00\",\"dateModified\":\"2023-07-27T12:49:32+00:00\",\"description\":\"Erfahre 10 Gr\u00fcnde, warum du Vue.js als Front-End JS-Library f\u00fcr dein n\u00e4chstes Webentwicklungsprojekt in Betracht ziehen solltest.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-js\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/vue-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-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\":\"10 Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst\"}]},{\"@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":"10 Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst","description":"Erfahre 10 Gr\u00fcnde, warum du Vue.js als Front-End JS-Library f\u00fcr dein n\u00e4chstes Webentwicklungsprojekt in Betracht ziehen solltest.","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\/vue-js\/","og_locale":"de_DE","og_type":"article","og_title":"10 Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst","og_description":"Erfahre 10 Gr\u00fcnde, warum du Vue.js als Front-End JS-Library f\u00fcr dein n\u00e4chstes Webentwicklungsprojekt in Betracht ziehen solltest.","og_url":"https:\/\/kinsta.com\/de\/blog\/vue-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2021-08-03T08:11:47+00:00","article_modified_time":"2023-07-27T12:49:32+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Erfahre 10 Gr\u00fcnde, warum du Vue.js als Front-End JS-Library f\u00fcr dein n\u00e4chstes Webentwicklungsprojekt in Betracht ziehen solltest.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Solomon Eseme","Gesch\u00e4tzte Lesezeit":"12\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/vue-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-js\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"10 Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst","datePublished":"2021-08-03T08:11:47+00:00","dateModified":"2023-07-27T12:49:32+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-js\/"},"wordCount":2352,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg","keywords":["JavaScript Frameworks","vue.js"],"articleSection":["Webentwicklung"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/vue-js\/","url":"https:\/\/kinsta.com\/de\/blog\/vue-js\/","name":"10 Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg","datePublished":"2021-08-03T08:11:47+00:00","dateModified":"2023-07-27T12:49:32+00:00","description":"Erfahre 10 Gr\u00fcnde, warum du Vue.js als Front-End JS-Library f\u00fcr dein n\u00e4chstes Webentwicklungsprojekt in Betracht ziehen solltest.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-js\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/vue-js\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/08\/vue-js.jpeg","width":1460,"height":730,"caption":"Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/vue-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":"10 Dinge, die du \u00fcber das Vue.js Frontend Framework wissen musst"}]},{"@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\/42772","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=42772"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/42772\/revisions"}],"predecessor-version":[{"id":50390,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/42772\/revisions\/50390"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/42772\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/42772\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/42772\/translations\/de"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/42772\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/42772\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/42772\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/42772\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/42772\/translations\/se"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/42772\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/42777"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=42772"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=42772"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=42772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}