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