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: https://developer.wordpress.org/rest-api/
The specific endpoint we are interested in is the ‘post’ endpoint: https://developer.wordpress.org/rest-api/reference/categories/

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:

<template>
  <div class="home">
       <Category 
      v-for="category in categories"
      v-bind:key="category.id"
      v-bind:category="category"/>
  </div>
</template>

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

export default {
  name: 'categories',
  data(){
    return {
      categories: []
    }
  },
   components: {
    Category
  },
    mounted(){
    axios.get('https://jonathansblog.co.uk/wp-json/wp/v2/categories?per_page=100&parent=' + this.$route.params.id )
    .then(response => {
      this.categories = response.data
      console.log(response.data)
    })
    
  }
}
</script>

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:

<template>
  <div>
    <h1 v-html="category.name"></h1>
    <router-link class="btn btn-success" v-bind:to="'/category_list/' + category.id">View Sub Categories</router-link>
  </div>
</template>

<script>
export default {
  name: 'Category',
  props: ['category']
}
</script>

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

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