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: 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/:id',
    name: 'category_id',
    component: () =>
        import ( /* webpackChunkName: "post" */ './views/CategoryID.vue')
}

Showing posts from an individual category

Create a new file (CategoryID.vue) and add the following content:

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <PostSmall 
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"/>
  </div>
</template>

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


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

This is almost exactly the same as the Home file, except that we aren’t getting the latest posts, we are getting the latest posts in a specific category

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