Nuxt > Include draft contents

While you're working on a Nuxt website, it may be useful to include draft contents from DatoCMS: this way, you can preview how the site will look in the end before actually publishing any record.

To do that, you need to tell our GraphQL API to include draft records when executing the queries. The X-Include-Drafts is one of many headers you can use to shape up the behavior of the Content Delivery API. Check out the other available headers in the Content Delivery API.

If you want a preview of the contents while working on the site in development mode, we can do as follow.

First, change the nuxt.config.ts file to expose the current environment:

// In the nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      env: process.env.NODE_ENV
    }
  }
})

Then, in the pages you can check the environment to decide to include draft records or not:

<script setup>
const QUERY = `
  {
    blog { title }
  }
`;
const config = useRuntimeConfig()
const { data, error } = await useQuery(QUERY, {
  includeDrafts: config.env !== 'production'
});
</script>