Usage

This module globally injects a $sanity helper, meaning that you can access it anywhere using this.$sanity. For plugins, asyncData, fetch, nuxtServerInit and middleware, you can access it from context.$sanity.

Reference

fetch

This enables you to perform a GROQ query against your Sanity dataset. By default it returns a Promise<unknown> although you can customise the type of the return.

Example with asyncData

import { groq } from '@nuxtjs/sanity'

const query = groq`{ "articles": *[_type == "article"] }`

export default {
  asyncData({ $sanity }) {
    return $sanity.fetch(query)
  },
}
import { groq } from '@nuxtjs/sanity'

const query = groq`{ "articles": *[_type == "article"] }`

export default {
  asyncData({ $sanity }) {
    // By default it returns a `Promise<unknown>`,
    // but you can customise the type of the return.
    return $sanity.fetch<{ articles: Article[] }>(query)
  },
}
By wrapping the GROQ query into an object, you can return the promise directly. The data will be available in your component under the key used in the query.

Example with fetch

import { groq } from '@nuxtjs/sanity'

const query = groq`*[_type == "article"][0].title`

export default {
  async fetch() {
    this.title = await this.$sanity.fetch(query)
  },
  data: () => ({ title: '' }),
}
import { groq } from '@nuxtjs/sanity'

const query = groq`*[_type == "article"][0].title`

export default {
  async fetch() {
    // By default it returns a `Promise<unknown>`,
    // but you can customise the type of the return.
    this.title = await this.$sanity.fetch<string>(query)
  },
  data: () => ({ title: '' }),
}

client

You can access the underlying client with this property. This is most useful if not using the minimal client.

const query = groq`*[_type == "article"][0].title`

export default {
  mounted() {
    this.observable = this.$sanity.client.listen(query)
    this.observable.subscribe(event => {
      // Do something
    })
  },
  data: () => ({ observable: null }),
}

setToken

You can securely set the token for your Sanity client in a Nuxt plugin.

plugins/sanity.js
export default async ({ req, $sanity }) => {
  const token = getTokenFromReq(req)
  $sanity.setToken(token)
}

config

You can access the Sanity config you have passed into the module if you need to do so (for example, with @sanity/image-url):

plugins/sanity.js
import imageUrlBuilder from '@sanity/image-url'
export default ({ $sanity }, inject) => {
  const builder = imageUrlBuilder($sanity.config)

  function urlFor(source) {
    return builder.image(source)
  }

  inject('urlFor', urlFor)
}

Additional clients

If you have configured additional clients you can access them directly off $sanity, with all the same properties and methods as specified above. So, for example:

plugins/fetch.js
export default async ({ $sanity }) => {
  $sanity.another.fetch('*[type == "article"][0]')
}