{"id":43865,"date":"2021-10-14T11:47:48","date_gmt":"2021-10-14T09:47:48","guid":{"rendered":"https:\/\/kinsta.com\/?p=104261"},"modified":"2023-07-27T10:33:49","modified_gmt":"2023-07-27T09:33:49","slug":"headless-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/","title":{"rendered":"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst"},"content":{"rendered":"

WordPress ist das bevorzugte Content Management System<\/a> f\u00fcr Entwickler und Nicht-Entwickler, um schnell beeindruckende Webseiten zu erstellen und zu pflegen.<\/p>\n

Die Verwendung einer Microservice-Architektur, bei der das Backend des Content Management Systems vom Frontend getrennt ist, erm\u00f6glicht die maximale Kontrolle \u00fcber beide „Enden“.\u00a0 Dieses Trennungsproblem versuchen Headless-Content-Management-Systeme, einschlie\u00dflich Headless-WordPress-L\u00f6sungen, zu l\u00f6sen.<\/p>\n

Mit einem Headless-Ansatz haben Unternehmen eine genauere Kontrolle \u00fcber das Content Management Backend. Au\u00dferdem k\u00f6nnen sie jedes Frontend ihrer Wahl verwenden, z. B. React, Vue, Angular<\/a> usw.<\/p>\n

In diesem Leitfaden werden wir uns ausf\u00fchrlich mit dem Thema Headless WordPress besch\u00e4ftigen, was es damit auf sich hat und wann und warum du es nutzen solltest. Schlie\u00dflich werden wir uns mit der Erstellung einer Headless-WordPress-Umgebung, dem Aufbau des Frontends mit Vue.js<\/a> und dem Deployment des Headless-WordPress mit Kinsta besch\u00e4ftigen.<\/p>\n

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

Was ist Headless WordPress?<\/h2>\n

WordPress ist eine monolithische Anwendung, bei der das Backend und das Frontend eng miteinander verwoben sind. Das Backend ist der Ort, an dem die Verwaltung stattfindet. Hier kannst du Inhalte erstellen, bearbeiten, hinzuf\u00fcgen und l\u00f6schen und auch das Erscheinungsbild \u00e4ndern. Im Gegensatz dazu ist das Frontend f\u00fcr die Anzeige der Inhalte f\u00fcr die Nutzer\/innen zust\u00e4ndig.<\/p>\n

Headless WordPress ist der Begriff, der verwendet wird, um das entkoppelte WordPress zu beschreiben. Der Backend-Teil (Verwaltung) ist vom Frontend-Teil des WordPress CMS<\/a> getrennt. Du kannst das Frontend als eigenst\u00e4ndige Anwendung mit einem beliebigen Frontend-Framework deiner Wahl entwickeln und verwalten.<\/p>\n\n

Vor- und Nachteile von Headless WordPress<\/h2>\n

Im Folgenden gehen wir auf die Vor- und Nachteile von Headless WordPress ein, damit du das Konzept besser verstehst.<\/p>\n

Die Vorteile<\/h3>\n

Beginnen wir mit den Vorteilen.<\/p>\n

Superschnelle Leistung<\/h4>\n

Im Zeitalter superschneller Anwendungen sollte deine Webseite nicht l\u00e4nger als ein paar Sekunden zum Laden brauchen<\/a>, um keine Besucher zu verlieren. Da das Frontend von WordPress getrennt ist und mit modernen Frontend-Tools mit Blick auf Hochleistung und Skalierbarkeit entwickelt werden kann, ist der Einsatz eines Headless-WordPress-Konzepts von gro\u00dfem Vorteil f\u00fcr das gesamte Nutzererlebnis deiner Webseite.<\/p>\n

Granulare Kontrolle<\/h4>\n

Wenn du dich f\u00fcr eine Headless-Architektur entscheidest, hast du mehr Kontrolle \u00fcber das Design, die Darstellung der Inhalte und die Art und Weise, wie die Nutzer mit dem Frontend deiner Anwendung interagieren. Au\u00dferdem kannst du so deine Backend-Inhalte sichern und von einer zentralen Stelle aus darauf zugreifen.<\/p>\n

Erh\u00f6hte Skalierbarkeit<\/h4>\n

Die Skalierung von WordPress kann manchmal kompliziert sein, weil du nicht die vollst\u00e4ndige Kontrolle \u00fcber alle Komponenten und Codes hast, die WordPress antreiben, vor allem wenn du kein Entwickler bist. Mit der Entkopplung von WordPress ist es jedoch m\u00fchelos m\u00f6glich, jeden Teil f\u00fcr sich zu skalieren, und du kannst leicht erkennen, welcher Teil skaliert werden muss.<\/p>\n

H\u00f6here Sicherheit<\/h4>\n

Wir k\u00f6nnen die Sicherheitsvorteile von Headless WordPress gar nicht genug betonen, denn entkoppeltes WordPress bietet hohe Sicherheitsvorteile gegen Hacker und DDoS-Angriffe<\/a>. Der Headless-WordPress-Ansatz macht es Hackern schwer, auf deine sensiblen Backend-Daten zuzugreifen, da es von deinem Frontend, also der benutzerorientierten Webseite, getrennt ist.<\/p>\n

Leichtes Design<\/h4>\n

Du hast mehr Kontrolle \u00fcber die Struktur und das Layout deines Frontend-Designs. Au\u00dferdem kannst du das Frontend freier und individueller gestalten; dank der REST-API-Aufrufe kannst du die Vorteile moderner Web Tools nutzen und sie im Frontend einsetzen.<\/p>\n

Ver\u00f6ffentlichung von Inhalten \u00fcber mehrere Kan\u00e4le<\/h4>\n

Da Headless WordPress ein API-basiertes System<\/a> verwendet, um deine Inhalte an das Frontend zu \u00fcbermitteln, kannst du deine Inhalte \u00fcberall und auf jeder Plattform anzeigen, z. B. auf dem Desktop, auf der Webseite, in mobilen Apps und auf Touchscreen-Kiosken. Es ist auch m\u00f6glich, Augmented Reality, Virtual Reality und das Internet der Dinge zu nutzen, um deine Inhalte aus dem API-basierten System anzuzeigen und zu pr\u00e4sentieren.<\/p>\n

Die Nachteile<\/h3>\n

Auf die Nachteile von Headless werden wir sp\u00e4ter noch genauer eingehen, aber die wichtigsten Nachteile sind:<\/p>\n

    \n
  1. Die Trennung von Backend und Frontend bedeutet eine zus\u00e4tzliche Belastung bei der Verwaltung verschiedener Webseiten-Instanzen.<\/li>\n
  2. Es kann kostspielig sein, da du zus\u00e4tzliche Mitglieder in deinem Team und zus\u00e4tzliches Kapital f\u00fcr den Betrieb verschiedener Instanzen ben\u00f6tigst.<\/li>\n
  3. Wenn du deine Inhalte auf verschiedenen Plattformen zur Verf\u00fcgung stellst, kann das zu einem inkonsistenten Erlebnis f\u00fcr deine Nutzer f\u00fchren, wenn die Inhalte nicht auf allen Plattformen einheitlich dargestellt werden.<\/li>\n<\/ol>\n

    Wenn Headless WordPress nicht die beste Option ist<\/h2>\n

    Da Headless WordPress eine unglaubliche Innovation mit gro\u00dfen Vorteilen ist, gibt es einige Dinge, die du bei der Entscheidung, ob du es einsetzen solltest, beachten solltest.<\/p>\n

      \n
    1. Headless WordPress ist sehr teuer in der Wartung. Du wirst zwei verschiedene Instanzen einer Webseite unterhalten, von der Infrastruktur<\/a> bis zu mehreren Entwicklern.<\/li>\n
    2. Headless WordPress unterst\u00fctzt nicht alle Funktionen von WordPress. Zum Beispiel funktionieren gro\u00dfartige WordPress-Funktionen wie der WYSIWYG-Editor und die Live-Vorschau nicht, wenn du ein separates Frontend verwendest.<\/li>\n
    3. Es ist teurer, ein Headless WordPress einzurichten. Daher solltest du die h\u00f6heren Kosten immer im Hinterkopf behalten.<\/li>\n<\/ol>\n

      Wer sollte Headless WordPress verwenden?<\/h2>\n

      Im Folgenden findest du die am besten geeigneten F\u00e4lle, in denen du Headless WordPress ben\u00f6tigen k\u00f6nntest:<\/p>\n

        \n
      1. Du solltest ein Headless WordPress verwenden, wenn die Sicherheit deiner Webseite<\/a> f\u00fcr dich und dein Unternehmen an erster Stelle steht.<\/li>\n
      2. Wenn deine Webseite nicht regelm\u00e4\u00dfig aktualisiert werden muss, ist das ein gutes Zeichen daf\u00fcr, dass du ein Headless-Setup verwenden solltest.<\/li>\n
      3. Wenn du dir ein individuelles Design w\u00fcnschst, das mit einem WordPress Theme nicht ohne weiteres m\u00f6glich ist, m\u00f6chtest du das Frontend deiner Webseite mit einem einzigartigen Design aufpeppen. Dann ist das Headless WordPress deine n\u00e4chste Option.<\/li>\n
      4. Wenn du eine kurzlebige Webseite oder eine Demoseite f\u00fcr Pr\u00e4sentationen und Anleitungen erstellst, kannst du den Headless-Ansatz ausprobieren.<\/li>\n<\/ol>\n

        Wer sollte die Verwendung von Headless WordPress vermeiden?<\/h2>\n

        Hier sind einige F\u00e4lle, in denen die Verwendung von Headless WordPress keine gute Option ist:<\/p>\n

          \n
        1. Wenn deine Webseite ausschlie\u00dflich von bestimmten Plugins und Funktionen abh\u00e4ngt, die das Frontend deiner Anwendung steuern und am besten mit ihr zusammenarbeiten, solltest du bei WordPress bleiben, es sei denn, die Plugins bieten API-basierte Optionen zum Abrufen der Daten.<\/li>\n
        2. Angenommen, du hast kein Interesse daran, deine Webseite zu programmieren, oder deine Webseite muss t\u00e4glich gewartet werden, und du stellst aufgrund deines geringen Budgets keinen Profi f\u00fcr die regelm\u00e4\u00dfige Wartung ein. In diesem Fall ist WordPress die richtige Wahl f\u00fcr dich.<\/li>\n
        3. Wenn du kein erfahrener Entwickler<\/a> bist und deine Webseite allein erstellen und verwalten willst, solltest du WordPress verwenden.<\/li>\n<\/ol>\n

          Wie man WordPress Headless macht (eine App bauen)<\/h2>\n

          In diesem Abschnitt geht es um den Aufbau und die Entwicklung eines News-Blogs mit Headless WordPress als Backend und Vue 3 als Frontend f\u00fcr den Benutzer.<\/p>\n

          Einrichten von Headless WordPress mit Devkinsta<\/h3>\n

          Wir werden das Headless WordPress mit DevKinsta<\/a> entwickeln, einer beliebten lokalen WordPress-Entwicklungsumgebung, mit der du deine Webseiten bequem von deinem lokalen Rechner aus gestalten, entwickeln und bereitstellen kannst.<\/p>\n

          DevKinsta ist f\u00fcr immer kostenlos und bietet dir gro\u00dfe Vorteile und Komfort bei der Entwicklung und Erstellung von WordPress mit diesem Tool.<\/p>\n

          Du kannst DevKinsta von der offiziellen Webseite<\/a> herunterladen und installieren und den Anweisungen in der Dokumentation folgen, um loszulegen.<\/p>\n

          Da wir DevKinsta bereits installiert haben, \u00f6ffnen wir es und folgen den unten stehenden Schritten, um unser erstes Headless WordPress einzurichten.<\/p>\n

          Erstelle auf dem Dashboard von DevKinsta eine neue WordPress Seite mit Nginx<\/a>, MySQL<\/a> und einer beliebigen WordPress Version. Du kannst auch eine bestehende WordPress-Instanz importieren oder eine eigene WordPress-Instanz \u00fcber das Dashboard erstellen.<\/p>\n

          Als N\u00e4chstes gibst du deiner neu erstellten WordPress-Instanz einen Namen, einen Administrator-Benutzernamen und ein Passwort, klickst dann auf Erstellen<\/strong> und kopierst die Details, w\u00e4hrend DevKinsta eine neue WordPress-Instanz auf deinem lokalen Rechner erstellt.<\/p>\n

          Klicke dann auf Seite \u00f6ffnen<\/strong>, um deine neu erstellte WordPress-Instanz in deinem Standardbrowser zu \u00f6ffnen.<\/p>\n

          Schlie\u00dflich kannst du dich im Admin-Dashboard anmelden, indem du auf den Link http:\/\/headless-wordpress-news-blog.local\/wp-admin<\/code> eingibst, die du bei der Erstellung der neuen Instanz eingegeben hast.<\/p>\n

          Beachte, dass wir unser Headless WordPress lokal mit der URL http:\/\/headless-wordpress-news-blog.local<\/code> eingerichtet haben. Das Frontend wird lokal auf http:\/\/news-blog.local<\/code> gehostet und wir werden es w\u00e4hrend des gesamten Lehrgangs verwenden.<\/p>\n

          Unser Headless WordPress konfigurieren<\/h3>\n

          Nachdem du dich erfolgreich in dein WordPress Dashboard eingeloggt hast, kannst du alle Plugins<\/a> und Konfigurationen deiner Wahl installieren.<\/p>\n

          F\u00fcr diesen Lehrgang werden wir das Theme komplett deaktivieren und nur \u00fcber den REST-API-basierten Endpunkt von WordPress auf die Inhalte zugreifen, indem wir das Plugin Simple Website Redirect installieren und einrichten.<\/p>\n

          Gehe zu Plugins > Neu hinzuf\u00fcgen<\/strong> und suche nach dem Simple Website Redirect<\/a>, installiere und aktiviere es:<\/p>\n

          \"WordPress
          WordPress Plugin-Installation.<\/figcaption><\/figure>\n

          Klicke als N\u00e4chstes auf die Plugin-Einstellungen<\/strong> und gib deine Frontend-URL ein (z.B. http:\/\/news-blog.local<\/code>), klicke auf die erweiterten Einstellungsoptionen<\/strong> und f\u00fcge die folgenden Pfade – \/wp-admin<\/code>, \/wp-login.php<\/code> und \/wp-json<\/code> – zum Abschnitt Exclude Paths hinzu.<\/p>\n

          Aktiviere das Plugin, indem du in der Dropdown-Liste Umleitungsstatus<\/strong> die Option Aktiviert<\/strong> w\u00e4hlst:<\/p>\n

          \"Einstellungen
          Einstellungen f\u00fcr das Plugin „Simple Website Redirect“.<\/figcaption><\/figure>\n

          …und das war’s!<\/p>\n

          Wenn deine JSON-API nicht standardm\u00e4\u00dfig aktiviert ist, wenn du http:\/\/headless-wordpress-news-blog.local\/wp-json<\/code> aufrufst, kannst du sie aktivieren, indem du deine Permalinks<\/strong> unter WordPress-Einstellungen<\/strong> \u00f6ffnest und Post Name<\/strong> oder eine andere Option deiner Wahl au\u00dfer Plain<\/strong> ausw\u00e4hlst:<\/p>\n

          \"WordPress
          WordPress Permalink-Einstellungen.<\/figcaption><\/figure>\n

          Wenn du jetzt deine http:\/\/headless-wordpress-news-blog.local\/wp-json<\/code> aufrufst, sollte sie dir JSON-Daten wie unten dargestellt pr\u00e4sentieren:<\/p>\n

          {\n  \"name\": \"Headless WordPress News Blog\",\n  \"description\": \"Just another WordPress site\",\n  \"url\": \"http:\/\/headless-wordpress-news-blog.local\",\n  \"home\": \"http:\/\/headless-wordpress-news-blog.local\",\n  \"gmt_offset\": \"0\",\n  \"timezone_string\": \"\",\n  \"namespaces\": [\n    \"oembed\/1.0\",\n    \"wp\/v2\",\n    \"wp-site-health\/v1\"\n  ],\n  \"authentication\": [\n    \n  ],\n  \"routes\": {\n    \"\/\": {\n      \"namespace\": \"\",\n      \"methods\": [\n        \"GET\"\n      ],\n      \"endpoints\": [\n        {\n          \"methods\": [\n            \"GET\"\n          ],\n          \"args\": {\n            \"context\": {\n              \"default\": \"view\",\n              \"required\": false\n            }\n          }\n        }\n      ],\n...<\/code><\/pre>\n
          Einrichten von Vue.js (Frontend)<\/h3>\n
          Wir werden das Vite Web Development Tool verwenden, um unsere Vue 3-Anwendung zu erstellen, die sich mit dem Headless WordPress verbindet. Du kannst mehr \u00fcber Vue 3<\/a> und die Vite Entwickler-Tools<\/a> lesen.<\/p>\n
          In diesem Artikel werden wir einen News-Blog<\/a> erstellen. Das gesamte Backend-Inhaltsmanagement des Projekts wird mit unserem Headless WordPress entwickelt und mit Devkinsta gehostet.<\/p>\n
          Gib diese einfachen Befehle ein:<\/p>\n
          npm init @vitejs\/app news-blog\ncd news-blog\nnpm install\nnpm run dev<\/code><\/pre>\n
          Wenn du Probleme mit Leerzeichen in deinem Benutzernamen hast, versuche es mit:<\/p>\n
          npx create-vite-app news-blog<\/code><\/pre>\n
          Beachte, dass wir unsere Vue 3-Anwendung so konfiguriert haben, dass sie auf http:\/\/news-blog.local<\/code> h\u00f6rt, aber du kannst auch die Standardeinstellung http:\/\/localhost:3000<\/code> verwenden.<\/p>\n
          \u00d6ffne deine Vue 3-Codebasis mit einem Code-Editor deiner Wahl. Wir entscheiden uns f\u00fcr VSCode<\/a> und fangen an, uns die H\u00e4nde mit Code schmutzig zu machen.<\/p>\n
          Nutzung der WordPress-API<\/h3>\n
          Wir haben den restlichen Teil der Vue-Anwendung entwickelt, damit du nicht so viel Zeit zum Lesen brauchst, aber du kannst das Repository auf GitHub klonen<\/a>.<\/p>\n
          App Post-Komponente anzeigen<\/h4>\n
          Das folgende Codeschnipsel zeigt, wie wir die WordPress REST API mit unserer Vue-Instanz implementieren, um alle Beitr\u00e4ge aus dem Headless WordPress anzuzeigen:<\/p>\n
          <template>\n  <section>\n    <div class=\"padding-top\">\n      <div class=\"container inner-padding-top\">\n        <div class=\"row\">\n          <div class=\"col-md-12 col-sm-12-col-xs-12 text-center\">\n            <h2 class=\"lead-title text-uppercase\">\n              Latest Backend Dev. Articles\n            <\/h2>\n            <h3 class=\"article-subtitle\">\n              Latest Backend Dev. Articles curated daily by the community.\n            <\/h3>\n          <\/div>\n        <\/div>\n        <div class=\"row mb-1 mt-5\">\n          <post v-for=\"(post, i) in posts\" :key=\"i\" :post=\"post\" \/>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"col-md-12 col-sm-12-col-xs-12 text-center mb-5\">\n      <Button link=\"\/posts\" class=\"col p-3\">More Articles<\/Button>\n    <\/div>\n  <\/section>\n<\/template>\n\n<script>\nimport { mapState } from 'vuex'\nexport default {\n  computed: {\n    ...mapState({\n      posts: (state) => {\n        return [...state.post.posts].slice(0, 22)\n      },\n    }),\n  },\n}\n<\/script><\/code><\/pre>\n
          Einzelne Beitragskomponente anzeigen<\/h4>\n
          Das Codeschnipsel zeigt, wie wir einen einzelnen Beitrag \u00fcber die WordPress REST API mit dem Headless WordPress abrufen und ihn in unserer Vue-Instanz anzeigen:<\/p>\n
          <template>\n  <div class=\"card single\">\n    <div class=\"card-head pl-3 pr-3 pt-3\">\n      <h1 class=\"title\">{{ post.title || '' }}<\/h1>\n      <div class=\"d-flex\">\n        <div class=\"author d-flex pr-3 pb-4\">\n          <div class=\"profile mr-2\"><\/div>\n          <a :href=\"'\/authors\/' + post.author.slug\" class=\"subtitle is-6\">\n            {{ post.author.name }}\n          <\/a>\n        <\/div>\n\n        <div class=\"date_created\">\n          <small class=\"text-muted\">\n            <li class=\"fa fa-calendar\"><\/li>\n            <time\n              :datetime=\"$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')\"\n              >{{ $moment(post.date).format('MMMM Do YYYY') }}<\/time\n            >\n          <\/small>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"block-image pl-3 pr-3 pt-2 mb-3\">\n      <img\n        v-lazy-load\n        :data-src=\"image\"\n        class=\"card-img-top img-fluid\"\n        :alt=\"post.title\"\n      \/>\n    <\/div>\n\n    <div class=\"tags absolute\">\n      <a\n        v-for=\"category in post.categories\"\n        :key=\"category.id\"\n        :href=\"'\/categories\/' + category.slug\"\n        class=\"btn-tag\"\n      >\n        {{ category.title }}\n      <\/a>\n    <\/div>\n  <\/div>\n<\/template>\n\n<script>\nimport Vue from 'vue'\n\nexport default {\n  name: 'SinglePost',\n  props: {\n    post: {\n      type: [Object, Array],\n      default: () => {},\n    },\n  },\n}\n<\/script><\/code><\/pre>\n
          Unten ist der Store, der die API-Aufrufe an die Headless WordPress API f\u00fcr die Backend-Inhalte macht:<\/p>\n
          export const actions = {\n  async getPosts({ commit }, { page, count = 22 }) {\n    try {\n      const response = await fetch(\n        `http:\/\/headless-wordpress-news-blog.local\/wp-json\/wp\/v2\/posts`\n      )\n      const data = await response.json()\n      if (data) {\n        commit('setPosts', data)\n      }\n      return data\n    }\n  },\n  \n async getPost({ commit }, id) {\n    try {\n      const response = await fetch(\n        `http:\/\/headless-wordpress-news-blog.local\/wp-json\/wp\/v2\/posts\/${id}`\n      )\n      const data = await response.json()\n      if (data) {\n        commit('setPost', data)\n      }\n      return data\n    }\n  },\n }<\/code><\/pre>\n
          Bereitstellung von Headless WordPress mit Kinsta<\/h3>\n
          Schlie\u00dflich ist die Bereitstellung deines Headless WordPress mit DevKinsta und dem Kinsta-Hosting-Service sehr einfach.<\/p>\n
          Um dein Headless WordPress auf Kinsta bereitzustellen, klickst du auf deinem DevKinsta Dashboard auf die Schaltfl\u00e4che Push to Staging<\/strong> und meldest dich mit deinen Anmeldedaten bei Kinsta an.<\/p>\n
          Hier erf\u00e4hrst du, wie du \u00c4nderungen in die Staging-Umgebung \u00fcbertr\u00e4gst<\/a>, um dein Headless WordPress mit einem einzigen Klick auf den Kinsta-Hosting-Service zu \u00fcbertragen.<\/p>\n
          Und schlie\u00dflich kannst du deine Vue.js-Instanz bei einem Cloud-Hosting-Anbieter deiner Wahl bereitstellen. Achte darauf, dass du deinen Headless WordPress Endpunkt entsprechend aktualisierst, um deine Anwendung in einer Produktionsumgebung zu testen.<\/p>\n\n
          Zusammenfassung<\/h2>\n
          Headless WordPress und die Vorteile, die es mit sich bringt, werden sich noch eine Weile halten. Seine Beliebtheit wird weiter zunehmen, da immer mehr Entwickler und Betreiber von Webseiten die Vorteile der Headless-Option erkennen.<\/p>\n
          In diesem Leitfaden haben wir dir die Vorteile, Vor- und Nachteile von Headless WordPress vorgestellt und dir gezeigt, wie du dein erstes Headless WordPress mit DevKinsta erstellen und einrichten kannst. Jetzt bist du auf dem besten Weg, dein Headless WordPress zu implementieren.<\/p>\n
          Welche Tipps hast du f\u00fcr die Einrichtung deiner WordPress Seite ohne Kopfh\u00f6rer? Teile sie bitte in den Kommentaren mit!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
          WordPress ist das bevorzugte Content Management System f\u00fcr Entwickler und Nicht-Entwickler, um schnell beeindruckende Webseiten zu erstellen und zu pflegen. Die Verwendung einer Microservice-Architektur, bei der …<\/p>\n","protected":false},"author":193,"featured_media":43866,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[262,276],"topic":[945,987],"class_list":["post-43865","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-headless","tag-web-development","topic-headless-cms","topic-vue-js"],"yoast_head":"\nErfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst<\/title>\n<meta name=\"description\" content=\"Hast du dich schon gefragt, was es mit dem ganzen Gerede \u00fcber Headless WordPress auf sich hat? Hier erf\u00e4hrst du, was es ist und wie du es f\u00fcr die Entwicklung einer App nutzen kannst.\" \/>\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\/headless-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst\" \/>\n<meta property=\"og:description\" content=\"Hast du dich schon gefragt, was es mit dem ganzen Gerede \u00fcber Headless WordPress auf sich hat? Hier erf\u00e4hrst du, was es ist und wie du es f\u00fcr die Entwicklung einer App nutzen kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/\" \/>\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-10-14T09:47:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T09:33:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.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=\"Hast du dich schon gefragt, was es mit dem ganzen Gerede \u00fcber Headless WordPress auf sich hat? Hier erf\u00e4hrst du, was es ist und wie du es f\u00fcr die Entwicklung einer App nutzen kannst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.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=\"11\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst\",\"datePublished\":\"2021-10-14T09:47:48+00:00\",\"dateModified\":\"2023-07-27T09:33:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/\"},\"wordCount\":2038,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.jpeg\",\"keywords\":[\"headless\",\"web development\"],\"articleSection\":[\"Die besten WordPress Tutorials\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/\",\"name\":\"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.jpeg\",\"datePublished\":\"2021-10-14T09:47:48+00:00\",\"dateModified\":\"2023-07-27T09:33:49+00:00\",\"description\":\"Hast du dich schon gefragt, was es mit dem ganzen Gerede \u00fcber Headless WordPress auf sich hat? Hier erf\u00e4hrst du, was es ist und wie du es f\u00fcr die Entwicklung einer App nutzen kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless CMS\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst\"}]},{\"@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":"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst","description":"Hast du dich schon gefragt, was es mit dem ganzen Gerede \u00fcber Headless WordPress auf sich hat? Hier erf\u00e4hrst du, was es ist und wie du es f\u00fcr die Entwicklung einer App nutzen kannst.","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\/headless-wordpress\/","og_locale":"de_DE","og_type":"article","og_title":"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst","og_description":"Hast du dich schon gefragt, was es mit dem ganzen Gerede \u00fcber Headless WordPress auf sich hat? Hier erf\u00e4hrst du, was es ist und wie du es f\u00fcr die Entwicklung einer App nutzen kannst.","og_url":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2021-10-14T09:47:48+00:00","article_modified_time":"2023-07-27T09:33:49+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Hast du dich schon gefragt, was es mit dem ganzen Gerede \u00fcber Headless WordPress auf sich hat? Hier erf\u00e4hrst du, was es ist und wie du es f\u00fcr die Entwicklung einer App nutzen kannst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Solomon Eseme","Gesch\u00e4tzte Lesezeit":"11\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst","datePublished":"2021-10-14T09:47:48+00:00","dateModified":"2023-07-27T09:33:49+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/"},"wordCount":2038,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.jpeg","keywords":["headless","web development"],"articleSection":["Die besten WordPress Tutorials"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/","url":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/","name":"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.jpeg","datePublished":"2021-10-14T09:47:48+00:00","dateModified":"2023-07-27T09:33:49+00:00","description":"Hast du dich schon gefragt, was es mit dem ganzen Gerede \u00fcber Headless WordPress auf sich hat? Hier erf\u00e4hrst du, was es ist und wie du es f\u00fcr die Entwicklung einer App nutzen kannst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/10\/headless-wordpress.jpeg","width":1460,"height":730,"caption":"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Headless CMS","item":"https:\/\/kinsta.com\/de\/thema\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst"}]},{"@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\/43865","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=43865"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/43865\/revisions"}],"predecessor-version":[{"id":59295,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/43865\/revisions\/59295"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43865\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43865\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43865\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43865\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43865\/translations\/es"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43865\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43865\/translations\/nl"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43865\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/43866"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=43865"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=43865"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=43865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}