Axios / Vue 2 101

Axios / Vue.js 2 APIs 101

If you have a WordPress-based website like this one, you might eventually want to try to make use of its APIs.  Using Axios and Vue.js, it is pretty easy to do.  At the time of writing this, Vue.js 3 exists but I am going to use Vue.js 2 anyways.

There are two API endpoints that we care about for the purposes of this demo:  https://blog.jws.app/wp-json/ and https://blog.jws.app/wp-json/wp/v2/posts.  The first one will get us all of the basic information from the blog (such as the title and the description).  The second API endpoint will get us a listing of blog posts.

See the Pen
Axios / Vue.js 2 APIs v1
by Joe Steinbring (@steinbring)
on CodePen.

There are two variables defined within data(): info and posts. Thanks to the way Vue works, you can reference {{info.home}}, {{info.name}}, and {{info.description}} before Axios has even finished getting the values from https://blog.jws.app/wp-json/.

Have a suggestion on how to better this example?  Feel free fork the pen and drop a link, below.

Leave a Reply

Your email address will not be published. Required fields are marked *