{"id":40379,"date":"2021-10-28T13:59:16","date_gmt":"2021-10-28T11:59:16","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=40379&preview=true&preview_id=40379"},"modified":"2023-06-09T10:38:01","modified_gmt":"2023-06-09T08:38:01","slug":"headless-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/","title":{"rendered":"Leer hoe je een headless WordPress website kan maken met Vue.js"},"content":{"rendered":"

WordPress is het favoriete Content Management System<\/a> (CMS) voor zowel developers als niet-developer voor het snel bouwen van prachtige websites.<\/p>\n

Door een architectuur met microservices te gebruiken, waarbij de backend waarin je content beheert, losstaat van de frontend, kunnen beide kanten perfect beheerd worden.\u00a0 De beste toepassing voor een systeem met aparte bewerking zijn headless Content Management Systems, zoals headless WordPress.<\/p>\n

Met een headless methode hebben bedrijven meer gedetailleerd beheer over de backend in hun contentmanagement. Ook kunnen ze een frontend naar keuze gebruiken, zoals React, Vue, Angular<\/a>, noem het maar op.<\/p>\n

Deze uitleg kijkt naar wat headless WordPress precies is, en waar en wanneer je dit het beste zou kunnen gebruiken. Als laatste gaan we kijken naar het maken van een headless WordPress omgeving, het bouwen van een frontend met Vue.js<\/a>, en het implementeren van headless WordPress via Kinsta.<\/p>\n

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

Wat is headless WordPress?<\/h2>\n

WordPress is een monolithische toepassing waarbij de backend en frontend nauw verbonden zijn. De backend is waar je het beheer doet, en waar je content kan maken, bewerken, toevoegen en verwijderen, en de weergave kan veranderen. De frontend is verantwoordelijk voor het weergeven van de content aan de gebruiker.<\/p>\n

Headless WordPress is de term die gebruikt wordt voor ontkoppelde versies van WordPress. Het backend deel (het beheer) staat dan los van de frontend van de WordPress CMS<\/a>. Je kan de frontend dan als zelfstandige toepassing ontwikkelen en beheren, met een frontend framework naar keuze.<\/p>\n\n

Voordelen en nadelen van headless WordPress<\/h2>\n

Nu we weten wat headless WordPress is, is het de hoogste tijd om de voor- en nadelen van headless WordPress te ontdekken, zodat we het concept nog beter kunnen begrijpen.<\/p>\n

De voordelen<\/h3>\n

We beginnen eerst met de voordelen.<\/p>\n

Supersnelle prestaties<\/h4>\n

In de huidige tijd van supersnelle toepassingen, moet je website in maximaal enkele seconden laden<\/a>, anders raak je bezoekers kwijt. Aangezien de frontend nu gescheiden is van WordPress en ontwikkeld kan worden met een focus op hoge prestaties en maximale flexibiliteit, door middel van moderne frontend tools, kan je met een headless WordPress aanpak een veel betere user experience (UX) voor je website bieden.<\/p>\n

Gedetailleerd beheer<\/h4>\n

Door voor een headless architectuur te gaan krijg je meer controle over je ontwerp, de presentatie van je content, en hoe gebruikers de frontend van je toepassing kunnen gebruiken. Ook kan je ervoor zorgen dat de backend beter beveiligd wordt en alleen vanaf een centrale locatie toegankelijk is.<\/p>\n

Verbeterde schaalbaarheid<\/h4>\n

Soms kan het opschalen of afschalen van WordPress ingewikkeld worden, omdat je geen volledig beheer hebt over alle onderdelen en alle code die WordPress gebruikt, zeker als je geen developer bent. Maar doordat je WordPress loskoppelt, wordt het makkelijker om elk onderdeel apart op te schalen, en kan je ook eenvoudig zien op welke onderdeel je meer capaciteit nodig hebt.<\/p>\n

Betere beveiliging<\/h4>\n

We kunnen de veiligheidsvoordelen van headless WordPress niet genoeg benadrukken, aangezien ontkoppelde WordPress je veel meer bescherming biedt tegen hackers en DDoS aanvallen<\/a>. De headless WordPress aanpak maakt het moeilijker voor hackers om bij je gevoelige data in de backend te komen, omdat dit helemaal gescheiden is van de frontend, oftewel het deel waar gebruikers bij kunnen.<\/p>\n

Lichtgewicht ontwerp<\/h4>\n

Je hebt meer controle over de structuur en layout van je frontend ontwerp. Daardoor heb je ook meer vrijheid en kan je het ontwerp verder naar smaak aanpassen. En door middel van REST API calls kan je ook moderne webtools gebruiken en inzetten voor je frontend.<\/p>\n

Content publiceren op verschillende kanalen<\/h4>\n

Aangezien headless WordPress gebruikt maakt van een API-gebaseerd systeem<\/a> om je content naar de frontend te communiceren, kan je je content overal en op elk platform weergeven, waaronder desktop, website, mobiele apps, en een touchscreen kiosk. Je kan zelfs volledig gebruiken maken van Augmented Reality, Virtual Reality, en apparaten binnen het Internet of Things om je content te tonen en te presenteren vanaf het API-gebaseerde systeem.<\/p>\n

De nadelen<\/h3>\n

We zullen verderop in detail kijken naar de nadelen, maar in het kort komt het hierop neer:<\/p>\n

    \n
  1. Door de frontend en backend te scheiden heb je meer werk wanneer je verschillende instances van een website moet beheren.<\/li>\n
  2. Het kan duurder zijn om te implementeren, aangezien je extra menskracht en capaciteit nodig hebt voor het uitvoeren en beheren van verschillende instances.<\/li>\n
  3. Je content beschikbaar maken op verschillende platforms kan een inconsistente ervaring opleveren voor je gebruikers, wanneer de presentatie van de content daardoor ook inconsistent wordt.<\/li>\n<\/ol>\n

    Wanneer headless WordPress niet de beste optie is<\/h2>\n

    Alhoewel headless WordPress een geweldige innovatie is met allemaal mooie voordelen, zijn er een aantal zaken die je goed moet meewegen bij je beslissing om het al dan niet te gaan gebruiken.<\/p>\n

      \n
    1. Headless WordPress is erg duur in het onderhoud. Je zal twee verschillende instances van elke website moeten onderhouden, dus je hebt meer infrastructuur<\/a> en meer developers nodig.<\/li>\n
    2. Headless WordPress ondersteunt nog niet alle features van gewoon WordPress. Zo zijn mooie WordPress features zoals de WYSIWYG editor en de live preview niet bruikbaar als je een ontkoppelde frontend gebruikt.<\/li>\n
    3. Het is ook duurder om headless WordPress op te zetten. Daarom moet je altijd rekening houden met deze hogere kosten.<\/li>\n<\/ol>\n

      Wie kan headless WordPress gebruiken?<\/h2>\n

      Hieronder een aantal gevallen waarin het gebruik van headless WordPress een goed idee is:<\/p>\n

        \n
      1. Je kan headless WordPress gebruiken wanneer de beveiliging van je website<\/a> erg belangrijk voor jou en je bedrijf is.<\/li>\n
      2. Verder, als je website niet heel vaak upgrades en onderhoud nodig heeft, is dat een uitstekende situatie om headless WordPress te gebruiken.<\/li>\n
      3. Als je een speciaal, persoonlijk ontwerp wil, dat moeilijk te regelen is via een WordPress thema, dan kan je de frontend van je website veel mooier maken met een uniek ontwerp. Headless WordPress is dan een ideale optie.<\/li>\n
      4. Als laatste, wanneer je een website bouwt met een korte levensduur, of een demo website voor presentaties of tutorials, dan is een headless aanpak wellicht een goede mogelijkheid.<\/li>\n<\/ol>\n

        Wie kan headless WordPress beter vermijden?<\/h2>\n

        Er zijn ook verschillende gevallen waarbij headless WordPress juist geen goede optie is:<\/p>\n

          \n
        1. Wanneer je website erg afhankelijk is van bepaalde plugins en functies voor de frontend van je toepassing, dan kan je beter bij een gewone WordPress website blijven, tenzij de plugins ook via een API te gebruiken zijn.<\/li>\n
        2. Stel dat je niet ge\u00efnteresseerd bent in het programmeren van je website, of je website heeft veel dagelijks onderhoud nodig en je kan of wil geen extra personeel inhuren voor dergelijke onderhoud. Ook dan is een normale WordPress variant een betere keuze.<\/li>\n
        3. Als je geen ervaren developer<\/a> bent en je wel je eigen website wil maken en onderhouden, kan je beter kiezen voor WordPress.<\/li>\n<\/ol>\n

          Zo maak je WordPress headless (bouw een app)<\/h2>\n

          Dit deel van het artikel laat je zien hoe je een nieuwsblog kan bouwen en ontwikkelen met headless WordPress voor de backend en Vue 3 als de frontend voor bezoekers.<\/p>\n

          Opzetten van headless WordPress met DevKinsta<\/h3>\n

          We ontwikkelen in dit voorbeeld headless WordPress met DevKinsta<\/a>, een populaire lokale developmentomgeving voor WordPress, waarin je WordPress websites kan ontwerpen, ontwikkelen en implementeren, allemaal vanaf je eigen lokale computer.<\/p>\n

          DevKinsta is altijd gratis en biedt je geweldige voordelen en gebruiksgemak in het bouwen en ontwikkelen van WordPress.<\/p>\n

          Je kan DevKinsta downloaden en installeren via de offici\u00eble website<\/a> en de instructies volgen om er meteen mee aan de slag te kunnen.<\/p>\n

          Aangezien wij DevKinsta al ge\u00efnstalleerd hebben, hoeven we het alleen maar te openen en kunnen we de onderstaande stappen langslopen om een eerste headless WordPress op te zetten.<\/p>\n

          In het DevKinsta dashboard maken we een nieuwe WordPress website aan met\u00a0Nginx<\/a>,\u00a0MySQL<\/a>, en een beschikbare WordPress versie. Daarnaast kan je ook een bestaande WordPress instance importeren of een eigen custom WordPress instance maken vanaf het dashboard.<\/p>\n

          Vervolgens geef je een naam aan deze nieuwe WordPress instance, en wijs je een admin gebruikersnaam en wachtwoord toe, klik op Create<\/strong>, en kopieer de gegevens terwijl DevKinsta een nieuwe WordPress instantie op je computer zet.<\/p>\n

          Nu kan je op Open Site<\/strong> klikken om de nieuwe WordPress instance in je standaardbrowser te openen.<\/p>\n

          Nu kan je inloggen op het admin dashboard, in ons geval via de link\u00a0http:\/\/headless-wordpress-news-blog.local\/wp-admin<\/code> en de admin-gegevens in te typen die je bij het aanmaken hebt gebruikt.<\/p>\n

          Let op dat wij onze headless WordPress lokaal hebben ingesteld op de URL\u00a0http:\/\/headless-wordpress-news-blog.local<\/code>\u00a0waarbij de frontend lokaal wordt gehost op\u00a0http:\/\/news-blog.local<\/code>. Deze lokale links zullen we in deze tutorial gebruiken.<\/p>\n

          Configureren van onze headless WordPress<\/h3>\n

          Nadat je ingelogd bent op je WordPress dashboard kan je eventuele plugins installeren<\/a> en je gewenste configuratie opzetten.<\/p>\n

          Voor deze tutorial zetten we het thema helemaal uit en openen we de content alleen via het WordPress REST API eindpunt, door de Simple Website Redirect plugin te installeren en activeren.<\/p>\n

          Ga hiervoor naar\u00a0Plugins > Add new<\/strong>\u00a0en zoek op\u00a0Simple Website Redirect<\/a>, waarna je deze kan installeren en activeren.<\/p>\n

          \"WordPress
          WordPress plugin installatie.<\/figcaption><\/figure>\n

          Nu klik je op de plugin\u00a0Settings<\/strong>\u00a0en voor je de URL voor je frontend in (bijv.\u00a0http:\/\/news-blog.local<\/code>), klik op\u00a0Advanced setting options<\/strong>\u00a0en voor de volgende bestandspaden \u2014\u00a0\/wp-admin<\/code>,\u00a0\/wp-login.php<\/code>, en \/wp-json<\/code>\u00a0\u2014 in bij het onderdeel Exclude Paths.<\/p>\n

          Je kan nu de plugin inschakelen door te klikken op\u00a0Enabled<\/strong>\u00a0in het menu Redirect Status<\/strong>:<\/p>\n

          \"Simple
          Simple Website Redirect plugin instellingen.<\/figcaption><\/figure>\n

          … en dan ben je alweer klaar!<\/p>\n

          Mocht je JSON API niet standaard ingeschakeld staan wanneer je naar http:\/\/headless-wordpress-news-blog.local\/wp-json<\/code> gaat, dan kan je dit inschakelen via\u00a0Permalinks<\/strong>\u00a0onder\u00a0WordPress Settings<\/strong>\u00a0en de gewenste\u00a0Post Name<\/strong>\u00a0te kiezen, met uitzondering van\u00a0Plain<\/strong>:<\/p>\n

          \"WordPress
          WordPress Permalink instellingen.<\/figcaption><\/figure>\n

          Wanneer je nu naar\u00a0http:\/\/headless-wordpress-news-blog.local\/wp-json<\/code> gaat, zou je daar deze JSON data moeten kunnen zien:<\/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
          Opzetten van Vue.js (frontend)<\/h3>\n
          We gebruiken de Vite webdevelopmenttool om een Vue 3 toepassing te maken die we aan headless WordPress kunnen koppelen. Je kan hier meer lezen over Vue 3<\/a> en Vite developmenttools<\/a>.<\/p>\n
          In dit voorbeeld maken we een nieuwsblog<\/a>. Alle backend contentmanagement van het project wordt ontwikkeld en gehost via DevKinsta.<\/p>\n
          Typ de volgende opdrachten in:<\/p>\n
          npm init @vitejs\/app news-blog\ncd news-blog\nnpm install\nnpm run dev<\/code><\/pre>\n
          Als je problemen krijgt door spaties in je gebruikersnaam, kan je dit gebruiken:<\/p>\n
          npx create-vite-app news-blog<\/code><\/pre>\n
          Let op dat wij onze Vue 3 toepassing hebben ingesteld om te luisteren naar http:\/\/news-blog.local<\/code>, maar je kan het ook houden bij de standaard\u00a0http:\/\/localhost:3000<\/code>.<\/p>\n
          Vervolgens open je de Vue 3 codebase met je gewenste code editor. Wij gebruiken VSCode<\/a> om aan de slag te gaan.<\/p>\n
          Consumeren van de WordPress API<\/p>\n
          We hebben alvast de rest van de Vue toepassing gebouwd, zodat je minder lang hoeft te lezen, en je kan eenvoudigweg de repository klonen<\/a> via GitHub.<\/p>\n
          Toon artikelen<\/h4>\n
          Het stukje code hieronder laat zien hoe we de WordPress REST API implementeren in onze Vue instance om alle artikelen in headless WordPress te tonen:<\/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
          Tonen van \u00e9\u00e9n artikel<\/h4>\n
          Onderstaande stukje code laat zien hoe we \u00e9\u00e9n artikel kunnen ophalen met de WordPress REST API via headless WordPress en het in onze Vue instance kunnen weergeven:<\/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
          En hieronder de opslag die API calls maakt naar de headless WordPress API voor de inhoud van de backend:<\/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
          Headless WordPress implementeren met Kinsta<\/h3>\n
          Als laatste is het deployen van je headless WordPress erg eenvoudig via DevKinsta, als je gehost wordt bij Kinsta.<\/p>\n
          Om je headless WordPress te deployen naar Kinsta, klik je gewoon op de knop Push to Staging<\/strong> in je DevKinsta dashboard en log je in bij Kinsta. Je kan een nieuw Kinsta account maken om inloggegevens te krijgen.<\/p>\n
          Je kan ook lezen hoe je wijzigingen naar de staging omgeving kan pushen<\/a> om je headless WordPress naar Kinsta te sturen met \u00e9\u00e9n enkele klik.<\/p>\n
          En als laatste kan je de Vue.js instance implementeren via een cloud-hostingprovider naar keuze. Zorg ervoor dat je de headless WordPress endpoint bijwerkt met je gemaakte keuzes, zodat je de toepassing kan testen in een live productie-omgeving.<\/p>\n\n
          Samenvatting<\/h2>\n
          Headless WordPress en de vele voordelen ervan zijn geen tijdelijke hype. De populariteit zal aanzienlijk groeien naarmate meer developers en websitebeheerders de vele voordelen van een headless implementatie gaan zien.<\/p>\n
          In dit artikel hebben we je laten zien wat de voordelen, nadelen en mogelijkheden van headless WordPress zijn, en we hebben laten zien hoe je je eerste headless WordPress kan bouwen en implementeren met DevKinsta. Je bent nu al een goed eind op weg naar je eigen implementatie van headless WordPress.<\/p>\n
          Wat zijn jouw eigen tips voor het implementeren van een headless WordPress website? Deel ze in de reacties hieronder!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
          WordPress is het favoriete Content Management System (CMS) voor zowel developers als niet-developer voor het snel bouwen van prachtige websites. Door een architectuur met microservices te …<\/p>\n","protected":false},"author":193,"featured_media":40382,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[243,406],"topic":[842,880],"class_list":["post-40379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-headless","tag-web-development","topic-headless-cms","topic-vue-js"],"yoast_head":"\nLeer hoe je een headless WordPress website kan maken met Vue.js<\/title>\n<meta name=\"description\" content=\"Ook benieuwd waarom iedereen praat over headless WordPress? Leer wat het is en hoe je het gebruikt om een app te maken.\" \/>\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\/nl\/blog\/headless-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Leer hoe je een headless WordPress website kan maken met Vue.js\" \/>\n<meta property=\"og:description\" content=\"Ook benieuwd waarom iedereen praat over headless WordPress? Leer wat het is en hoe je het gebruikt om een app te maken.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-28T11:59:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-09T08:38:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/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=\"Ook benieuwd waarom iedereen praat over headless WordPress? Leer wat het is en hoe je het gebruikt om een app te maken.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/10\/headless-wordpress.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"Leer hoe je een headless WordPress website kan maken met Vue.js\",\"datePublished\":\"2021-10-28T11:59:16+00:00\",\"dateModified\":\"2023-06-09T08:38:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/\"},\"wordCount\":2108,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/10\/headless-wordpress.jpeg\",\"keywords\":[\"headless\",\"web development\"],\"articleSection\":[\"WordPress handleidingen\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/\",\"name\":\"Leer hoe je een headless WordPress website kan maken met Vue.js\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/10\/headless-wordpress.jpeg\",\"datePublished\":\"2021-10-28T11:59:16+00:00\",\"dateModified\":\"2023-06-09T08:38:01+00:00\",\"description\":\"Ook benieuwd waarom iedereen praat over headless WordPress? Leer wat het is en hoe je het gebruikt om een app te maken.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/10\/headless-wordpress.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/10\/headless-wordpress.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Leer hoe je een headless WordPress website kan maken met Vue.js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless CMS\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Leer hoe je een headless WordPress website kan maken met Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Leer hoe je een headless WordPress website kan maken met Vue.js","description":"Ook benieuwd waarom iedereen praat over headless WordPress? Leer wat het is en hoe je het gebruikt om een app te maken.","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\/nl\/blog\/headless-wordpress\/","og_locale":"nl_NL","og_type":"article","og_title":"Leer hoe je een headless WordPress website kan maken met Vue.js","og_description":"Ook benieuwd waarom iedereen praat over headless WordPress? Leer wat het is en hoe je het gebruikt om een app te maken.","og_url":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2021-10-28T11:59:16+00:00","article_modified_time":"2023-06-09T08:38:01+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/10\/headless-wordpress.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Ook benieuwd waarom iedereen praat over headless WordPress? Leer wat het is en hoe je het gebruikt om een app te maken.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/10\/headless-wordpress.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Solomon Eseme","Geschatte leestijd":"12 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"Leer hoe je een headless WordPress website kan maken met Vue.js","datePublished":"2021-10-28T11:59:16+00:00","dateModified":"2023-06-09T08:38:01+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/"},"wordCount":2108,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/10\/headless-wordpress.jpeg","keywords":["headless","web development"],"articleSection":["WordPress handleidingen"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/","url":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/","name":"Leer hoe je een headless WordPress website kan maken met Vue.js","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/10\/headless-wordpress.jpeg","datePublished":"2021-10-28T11:59:16+00:00","dateModified":"2023-06-09T08:38:01+00:00","description":"Ook benieuwd waarom iedereen praat over headless WordPress? Leer wat het is en hoe je het gebruikt om een app te maken.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/10\/headless-wordpress.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/10\/headless-wordpress.jpeg","width":1460,"height":730,"caption":"Leer hoe je een headless WordPress website kan maken met Vue.js"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/headless-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Headless CMS","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"Leer hoe je een headless WordPress website kan maken met Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/40379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=40379"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/40379\/revisions"}],"predecessor-version":[{"id":40381,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/40379\/revisions\/40381"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40379\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40379\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40379\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40379\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40379\/translations\/es"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40379\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40379\/translations\/nl"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40379\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/40382"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=40379"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=40379"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=40379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}