Building a PWA vuejs app with wordpress API – Part 5
at this point pour app looks pretty poor, this part of the turorial we will fix some of the issues we have:
1) add a link for the categories
2) use some bootstrap code to make things look nicer
3)make our navbar look decent
4) replace the logo
first, open app.vue
we need to wrap the items with bootstrap code, so replace the code with the following:
<template>
<div id="app">
<div id="nav" class="navbar navbar-light bg-light">
<router-link class="navbar-brand" to="/">Home</router-link>
<router-link class="navbar-brand" to="/category_list/0">Categories</router-link>
</div>
<router-view />
</div>
</div>
</template>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
h1 {
text-align:center
}
</style>We then need to edit Home.vue, Post.vue, Category.vue and CategoryID.vue
PoastSmall.vue:
<template>
<div class="mb-4">
<img class="img-fluid" :src="post.jetpack_featured_media_url">
<div class="container">
<div class="row">
<div class="col-12">
<h1 v-html="post.title.rendered"></h1>
<div v-html="post.excerpt.rendered"></div>
<router-link class="btn btn-success btn-block" v-bind:to="'/post/' + post.id">View more</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'PostSmall',
props: ['post']
}
</script>
<style scoped>
h1 {
margin: 40px 0 0;
}
</style>
Post.vue:
<template>
<div class="home">
<img class="img-fluid mb-4" :src="post.jetpack_featured_media_url">
<div class="container">
<div class="row">
<div class="col-12">
<h1 v-html="post.title.rendered"></h1>
<div v-html="post.content.rendered"></div>
</div>
</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import axios from 'axios'
export default {
name: 'post',
data(){
return {
post: []
}
},
mounted(){
axios.get('https://jonathansblog.co.uk/wp-json/wp/v2/posts/' + this.$route.params.id)
.then(response => {
this.post = response.data
console.log(response.data)
})
}
}
</script>
category.vue:
<template>
<div>
<div class="container">
<div class="row">
<div class="col-12">
<h1 v-html="category.name"></h1>
<router-link class="btn btn-success btn-block" v-bind:to="'/category/' + category.id">View Posts</router-link>
<router-link class="btn btn-success btn-block" v-bind:to="'/category_list/' + category.id">View Sub Categories</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Category',
props: ['category']
}
</script>
<style scoped>
h1 {
margin: 40px 0 0;
}
</style>
This gives us a navbar style header (we will expand on this later) and some better aligned text
