Discussion about configuring Sanity and Nuxt, using the nuxt-sanity module, and resolving issues with fetching data.

import sanityClient from '@sanity/client'

<div class="snippets">
      <ul>
        <li
          v-for="snippet in snippets"
          ref="snippet"
          :key="snippet._id"
          class=""
        >
          <h3>{{ snippet.title }}</h3>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { groq } from '@nuxtjs/sanity'
const query = groq`*[_type == "snippet"][0...29].title`

export default {
  name: 'Snippets',
  components: {},
  async fetch() {
    const result = await this.$sanity.fetch(query)
    this.title = result
  },
  data: () => ({ title: '' }),
}

Property or method "snippets" is not defined on the instance but referenced during render.

Error in fetch(): TypeError: Cannot read property 'fetch' of undefined

asyncData({ $sanity }) {
    const query = '{ "snippets": *[_type == "snippet"] }'
    return $sanity.fetch(query)
  },

Cannot read property 'fetch' of undefined

const query = groq`*[_type == "snippet"]{
  _id,
  title,
  mainImage,
  imageUrl,
  createdAt,
  releaseDate,
  body
}[0...29]`

export default {
  name: 'Snippets',
  async fetch() {
    this.snippets = await this.$sanity.fetch(query)
  },
  data: () => ({ snippets: [] }),
}

Error in fetch(): TypeError: Cannot read property 'fetch' of undefined

{
  sanity: {
    projectId: 'myProject',
    token: process.env.SANITY_TOKEN
  }
}