Building a PWA vuejs app with wordpress API – Part 1
The aim in this is to make an offline-first PWA with vuejs / axios / bootstrap using wordpress as a backend service.
Secondary considerations are: using cordova to aid us in building an android, iOS and electron app
Beginning Building a PWA vuejs app with wordpress API
install nodejs – https://nodejs.org/en/
install vuecli3
npm install -g @vue/cli
npm install -g @vue/cli-service-global
create a new project (I like to create in github, clone and then initiate vue)
git clone XXXXXX
cd XXXXX
vue create .
You can always add other features later with ‘vue add’, but for now add the following:
vue add router (I'll select not to use history mode)
vue add vuex
vue add bootstrap-vue
vue add @vue/pwa
npm install --save axios
commit all the changes to git
At this point, you’ll have default scaffolding in place for a PWA, including service worker, manifest file, router, etc.
If you look in router.js, you’ll see that About.vue and Home.vue are referenced – these are in the src/views folder.
We’ll start with the home page:
npm run serve
This starts a local server and you’ll be able to see your app running.
In the code, if you open Home.vue you’ll see an include line for components/Helloworld.vue
We will be following this pattern (creating components) to make the build very simple.
Create a file called PostSmall.vue in the components folder – this will contain the small snippet for the post
// PostSmall.vue
<template>
<div>
<h1 v-html="post.title.rendered"></h1>
<div v-html="post.excerpt.rendered"></div>
<img class="img-fluid" :src="post.jetpack_featured_media_url">
</div>
</template>
<script>
export default {
name: 'PostSmall',
props: ['post']
}
</script>
<style scoped="">
h1 {
margin: 40px 0 0;
}
</style>In home.vue replace references to HelloWorld with PostSmall:
// Home.vue
<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">
</postsmall></div>
</template>
<script>
// @ is an alias to /src
import axios from 'axios'
import PostSmall from '@/components/PostSmall.vue'
export default {
name: 'home',
components: {
PostSmall
}
}
</script>
Save the changes (you’ll notice that your browser refreshes and you can see a (very) basic app)
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/posts/
Next, we fetch a basic list of posts (we will change later, but this is a good test):
// Home.vue
<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 PostSmall from '@/components/PostSmall.vue'
export default {
name: 'home',
data(){
return {
posts: []
}
},
components: {
PostSmall
},
mounted(){
axios.get('https://yoursite.com/wp-json/wp/v2/posts')
.then((r) => this.posts = r.json());
}
}
</script>If you get CORS errors in your console, then install the excellent HTTP Headers WordPress plugin and enable Access-control-allow-origin *
We should, at this point be seeing data and posts (title, excerpt and jetpack featured image)
In the next part, we will be adding a view for a single post and a category listing
https://vuex.vuejs.org/
https://cli.vuejs.org/
https://bootstrap-vue.js.org/
https://github.com/vuejs/vue-cli/tree/v3/packages/%40vue/cli-plugin-pwa
https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project-22f7c552fb34
https://itnext.io/im-making-an-offline-first-wordpress-pwa-part-2-b313659bfc9c
