Preview content from Sanity, to be placed at the root of the pages directory

preview.vue

<template>

  <component :is="currentComponent"
             v-if="draft"
             :person="draft"
             :page="draft" />

  <p v-else>{{ msg }}</p>

</template>

<script>
import PageDetails from '@/components/PageDetails'
import PersonDetails from '@/components/PersonDetails'
import preview from '@/sanity/sanityPreview'
import { previews } from '@/sanity/queries'

export default {
  name: 'Preview',
  head() {
    return {
      meta: [{ hid: 'robots', name: 'robots', content: 'noindex, nofollow' }],
    }
  },
  components: {
    PageDetails,
    PersonDetails,
  },
  data() {
    return {
      draft: {},
      currentComponent: '',
      query: '',
      msg: 'Preview is loading...',
    }
  },
  async mounted() {
    if (this.$route.query.preview_id && this.$route.query.component) {
      this.currentComponent = this.$route.query.component + 'Details'
      this.query = previews['preview' + this.$route.query.component]

      const params = {
        id: this.$route.query.preview_id,
      }

      this.draft = await preview.fetch(this.query, params).catch(e => {
        console.error(e)
        this.msg =
          'An error occured. No preview possible. Please try again to open the preview from the CMS.'
      })
    } else {
      console.info('"preview_id" and/or "component" parameters are missing')
      this.msg = 'There's no preview for this page.'
    }
  },
}
</script>