Craft 3.2 Headless Preview

README.md

0. This assumes you’ve got Craft 3.2 running and the CraftQL plugin installed 🙌🏻

1. Create a Section named Home and then attach a field named Copy to your field layout.

2. Add a Preview Taget (in the Home section settings) with the label Local pointing to the URL http://localhost:3000

3. Go into the Home entry and click Preview button, then switch to Local target.

index.vue

<template>
  <div>
    <h1>Craft 3.2 Client</h1>
    <h3>Hello, from Nuxt.</h3>
    <p>{{ entry.copy }}</p>
  </div>
</template>

<script>
import axios from 'axios'

const token = 'YOUR_CRAFTQL_TOKEN'

const headers = {
  Authorization: `Bearer ${token}`
}

const query = `
{
  entry(section:[home]) {
    ...on Home {
      copy
    }
  }
}
`

const api = axios.create({
  baseURL: 'http://craft-32.test/api',
  headers
})

export default {
  async asyncData({ route }) {
    const token = route.query.token || ''
    const { data } = await api.post(`/?token=${token}`, { query })
    return {
      entry: data.data.entry
    }
  }
}
</script>