We will just jump straight in, we just want to launch our blog!

Hosting

Firstly you need an endpoint for your blog, we’ll step straight in and offer this for you, so setup your headless WordPress hosting with TreacleWP. No it’s not a laborious process, start to finish will be within the 5 minutes total!

Once done, and created an install, it’ll be setup in a few minutes but you’ll have your endpoint instantly, so we can jump into the code while the install is provisioning.

Code

We’ll work with NuxtJS for this example, but we are not precious on your framework of choice.

$ npx create-nuxt-app <PROJECT_NAME>

Go through the options, and open up your favourite editor. Remember to tick axios while installing.

Create a folder in /pages of your blog base, we’ll use /blog.

$ cd <PROJECT_NAME>/pages
$ mkdir blog && cd blog
$ touch _slug.vue index.vue

Now create 2 pages, within this, 1 for your single page and one for your index page. So your structure should look like the below:

/pages
    /blog
        /_slug.vue
        /index.vue

Within index, we’ll add a simple fetch and then loop.

// Page: index.vue
<template>
    <div>
        <h1>Blog</h1>
        <article v-for="post in posts">
            <h2>{{ post.title.rendered }}</h2>
            <div v-html="post.excerpt.rendered"></div>
            <nuxt-link :to="`/blog/${post.slug}`">Read More</nuxt-link>
        </article>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    asyncData ({ params }) {
        return axios.get(`http://<INSTALL_NAME>.treaclewp.com/wp-json/wp/v2/posts`)
        .then((res) => {
            return { posts: res.data }
        })
    }
}
</script>

Great, we are now looping through and have an index page with posts, title, excerpt and link to read more.

Now it’s time to create your single page.

// Page: _slug.vue
<template>
    <article>
        <h1>
            {{post.title.rendered}}
        </h1>
        <div v-html="post.content.rendered"></div>
    </article>
</template>

<script>
import axios from 'axios'
export default {
    asyncData ({ params }) {
        return axios.get(`https://<INSTALL_NAME>.treaclewp.com/wp-json/wp/v2/posts?slug=${params.slug}`)
        .then((res) => {
            return { post: res.data[0] }
        })
    }
}
</script>

And you’re done, you have a working blog, albeit basic, now to get it live.

Deploy

Depending which setup you used with NuxtJS, the default being SSR (Server Side Rendered), you will need to generate your production code.

But before you do this, you may have to tell NuxtJS what blog routes to output into production code. We can do this by opening nuxt.config.js in the root and adding:

import axios from 'axios'

To the top before export default {}

Then within the export default object add in the following:

generate: {
    routes ( callback ) {
        axios.all([
            axios.get( `http://<INSTALL_NAME>.treaclewp.com/wp-json/wp/v2/posts` )
        ])
        .then( axios.spread( posts => {

            const postsRoute = posts.data.map( post => {
                return `/blog/${post.slug}`
            });

            callback( null, postsRoute );

        }), error => {
            return next( error );
        });

    }
},

Your now good to run your production code.

$ npm run generate
// OR
$ yarn generate

You can use any service you wish to deploy, but we love Netlify, so setup an account, and simply drag and drop your newly generated dist folder into Netlify.

Navigate to https://<YOUR_SITE>.netlify.app/blog/ to see your new blog

We use GitHub to push to it, but drag and drop will be within the 5 minute target. For more information on deploying a Vue website, read this article

Now, this is a basic introduction, but it just goes to show how quickly you can get up and running with TreacleWP and headless WordPress.

In further blog posts we will go into bulking out the blog and adding pagination as well as getting that 100% lighthouse score!

Any issues, send us an email or send us a tweet.