How to Create a Headless WordPress Site with Vue.js

Introduction

There’s just one quote I can think about when it comes to WordPress and that is “Veni, Vidi, Vici” which means “saw, came, and conquered” WordPress just saw the potential of the market, and therefore it came with a vision and conquered half of the market. There are currently 1.3 billion websites and around 455 million websites are using WordPress. Yes, I am not lying, it’s 455 with six zeros behind it.

And now with the help of headless WordPress, you can keep both the frontend and backend different, and due to this the developers and the editors both are satisfied because you can use Angular or React or Vue or any other framework in the frontend while you can use WordPress in the backend. So that the content managers can change the content as per their convenience in WordPress because of the ease of use while the developers can play with the codes in the frontend.

Here we are going to talk about how to build a headless WordPress website with Vue.Js? and why Vue.Js you ask? Because big enterprises like Facebook, Netflix, Trivago, Grammarly, Gitlab, Behance, BMW, Upwork, Apple, and 9Gag use Vue.Js as their front-end development technology. Now, do I need to give you more reasons why VueJs?

So let’s start the article.

What is Headless WordPress?

If you have been in the market of CMS for a long time you would know that WordPress is known as a ‘monolithic’ CMS. That means you would have a robust backend where you can go and do content creation as well as organize the content, and it is still designed to focus on the front-end experience. With the help of WordPress, you can also embed display functionality using themes and plugins and therefore the front and back ends are intertwined with each other.

Although WordPress can be used as a great content management system, you can use the excellent functionality WordPress has to offer and effectively execute it, which leaves a fast, lightweight headless content management system. You can utilize the REST API provided by WordPress to extend your content management beyond your theme.

When you use Headless WordPress you will be able to use the WordPress platform’s back-end functionality, but it will turn into a reactive system, which means the content will be automatically resized to the screen size the website is being viewed on, and it is clearly different from the current WordPress which is more proactive it pushes or delivers content to mostly browser-based sites.

Now, this is the easy way to know what a Headless WordPress is, let’s dive into it in some technical ways.

With the help of Rest API which allows the developers to interact with cross-technology interfaces as long as both of them are speaking the JSON language. The data that comes out with the help of Rest API is in JSON format, and JSON is the most loved format known by almost every web technology. JSON is a text-based representation of JavaScript objects which contains data in key-value pairs.

“names”: [ { “id”: 0, “name”: “John Doe” }, { “id”: 1, “name”: “Richard Lindley” }, { “id”: 2, “name”: “Jack Moore” } ],

view rawexample.json hosted with ❤ by GitHub

Today, I will demonstrate the power of WordPress Rest API by using it with Vue.js and WordPress as a headless CMS for my basic web application.

The Benefits of Using Headless WordPress CMS

The fact that WordPress is an open-source platform takes away half of your concerns since it gives you great flexibility to design any type of website. And now due to Headless, you are able to create the front end of your web application with any web technology which you desire to use and manage the content of your website using the most loved CMS.

When your website starts to grow you might feel an urgency to create a blog feature because you want people to learn about your product or the service you provide but your web app is built with Vue.js or React. You have to do coding to build it, but that’s where you can take the help of WordPress Rest API and manage the content. How to Set Up a WordPress Site with Vue.js

Firstly what we have to do is create a WordPress site, because it will be our main source as it will act as a data source for whatever front-end technologies we are going to use. Rest API will be turned on by default, and if you desire to restrict the Rest API access then what you gotta do is you can use Basic-Auth or Oauth2 authentication method.

Go to Settings → Permalinks and select either Post name or Custom Structure.

And now that we are working with API calls, you need to download the chrome extension for Postman. And now that you have downloaded the Postman extension, open it and enter the URL in the format given below.

https://example.com/wp-json/wp/v2/posts

The above URL will fetch the posts data inside your WordPress site.

Want to get started with Vue.js? Here you go, https://wpwebinfotech.com/blog/headless-wordpress-vue/