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.

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)
  },
}

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.

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):

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:

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