Building a PWA vuejs app with wordpress API – Part 3

In part 3 we will be looking at categories (or archives in wordpress terminology)

At this point, its good to look into the wordpress API – fortunately there is excellent documentation available here:
The specific endpoint we are interested in is the ‘post’ endpoint:

The first edit we are going to make, is to add a route:

    path: '/category_list/:id',
    name: 'categoery_list',
    component: () =>
        import ( /* webpackChunkName: "post" */ './views/CategoryList.vue')

The route one will show a list of all categories (we will make a drill-down so that you can see the categories contained within categories)

** Making the category list

Create a new file (CategoryList.vue) and add the following code:

  <div class="home">
      v-for="category in categories"

// @ is an alias to /src
import Category from '@/components/Category.vue'
import axios from 'axios'

export default {
  name: 'categories',
    return {
      categories: []
   components: {
    axios.get('' + this.$ )
    .then(response => {
      this.categories =

This will fetch the data from the endpoint (we are initially searching for all categories whos parent is the ID nubmer passed in) and loop through each entry (v-for) and render using the (not yet existing) component

Next, create a new component (Category.vue in components) and add the following code:

    <h1 v-html=""></h1>
    <router-link class="btn btn-success" v-bind:to="'/category_list/' +">View Sub Categories</router-link>

export default {
  name: 'Category',
  props: ['category']

<style scoped>
h1 {
  margin: 40px 0 0;

This will take the input data and render its title, and a link to the individual category route (to display sub categories)

The app is very basic at this point, we will be updating all of the features as we go – for example, the categories should automatically show as a hierarchy, but for now we are only setting up each individual page type

Part 1 Part 2 Part 3 Part 4 Part 5 Part 6 Part 7 Adding Cordova to an existing Vue App

Leave a Reply