๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

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

40 replies
Last updated: Aug 21, 2020
Hi๐Ÿ‘‹, I'm on a project with Sanity + Nuxt. I configured it with
import sanityClient from '@sanity/client'
in
sanity.js
and it works.Now I see this doc
https://nuxt-sanity.netlify.app/#what-is-sanity and I'm wondering if it's the same or I rather

npm install nuxt-sanity
And in that case: will it overwrite, live with it, or create a conflict with the previous config? I may just try... however if someone already has experience with it ...
๐Ÿ™‚Thank you for any tip!
Aug 21, 2020, 7:05 AM
I've been working on a new Nuxt module and would love feedback ๐Ÿ˜Š
Aug 21, 2020, 7:40 AM
Aug 21, 2020, 7:40 AM
I'm very happy to provide help if the docs aren't clear!
Aug 21, 2020, 7:41 AM
user T
it looks very interesting!
Aug 21, 2020, 7:55 AM
Hi! Iโ€™ve deprecated the
nuxt-sanity
package,
user T
has done a great job at creating a new and improved one ๐Ÿ‘
Aug 21, 2020, 7:56 AM
And the answer to your question is that it won't conflict with either module, but you'd probably be better off using the client the module creates for ease....
Aug 21, 2020, 8:00 AM
Victoria Bergquist
and
user T
thank you! this sounds cool!
Aug 21, 2020, 8:01 AM
I'll go for it ๐ŸŒˆ
Aug 21, 2020, 8:07 AM
user T
done! and so far all good โœจ ! I will keep you posted with any relevant feedback. thank you!
Aug 21, 2020, 8:20 AM
Hello
Victoria Bergquist
and
user T
, for usage I'm afraid I need some help. Following https://sanity.nuxtjs.org/usage#fetch my code looks like this:
<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: '' }),
}
and getting error

Property or method "snippets" is not defined on the instance but referenced during render.
I'm clearly missing something. Any hint is very appreciated!
โ˜บ๏ธ Thank you!
Aug 21, 2020, 9:54 AM
I'm getting as well
Error in fetch(): TypeError: Cannot read property 'fetch' of undefined
Aug 21, 2020, 9:56 AM
Do you need to define snippets in your data?
Aug 21, 2020, 10:10 AM
this way actually makes more sense to me:
asyncData({ $sanity }) {
    const query = '{ "snippets": *[_type == "snippet"] }'
    return $sanity.fetch(query)
  },
but I still get
Cannot read property 'fetch' of undefined
Aug 21, 2020, 10:10 AM
Have you added the module in your nuxt config?
Aug 21, 2020, 10:10 AM
Yes I did ๐Ÿ™‚
Aug 21, 2020, 10:11 AM
in buildModules: ['@nuxtjs/sanity'],
Aug 21, 2020, 10:11 AM
Well, the main thing is first to define snippets on your component.
Aug 21, 2020, 10:12 AM
user T
thank you! is there an example project I could look at?
Aug 21, 2020, 10:15 AM
Aug 21, 2020, 10:17 AM
Ignore the build aliases in the Nuxt config - that's just because it's used as a fixture in the test suite
Aug 21, 2020, 10:18 AM
user T
thank you! this seem very useful. I'll give it a closer look and most likely get around my issue with it ๐ŸŒฑโœจ
Aug 21, 2020, 10:18 AM
user T
that was of great help! I integrated my code, as far as possible, following your example:
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: [] }),
}
I do render the page now!
no snippets though and in console I still get:

Error in fetch(): TypeError: Cannot read property 'fetch' of undefined
Any further suggestions are very welcome.
๐ŸŒปThank you very much!
Aug 21, 2020, 11:31 AM
How very odd. What are your configuration settings?
Aug 21, 2020, 11:38 AM
user T
interesting... but I'm not sure which configurations you are referring. the once in the sanity studio?
Aug 21, 2020, 11:42 AM
I mean the module configuration
Aug 21, 2020, 11:42 AM
You'll either need to copy your sanity config into your nuxt folder or pass in your project id. If you haven't done that, it should complain in the terminal when you start Nuxt
Aug 21, 2020, 11:43 AM
https://github.com/purplegreen/re-walk/tree/master/web I did copy the sanity.jason in the web folder
Aug 21, 2020, 11:45 AM
Looking
Aug 21, 2020, 11:46 AM
thanks โ˜บ๏ธ
Aug 21, 2020, 11:47 AM
Thanks - looks like there was a problem with reading in the json. If you specify the projectId in your nuxt config it will work now, or you can wait five minutes for me to push a fix
Aug 21, 2020, 11:52 AM
I can try to do it! thank you!
Aug 21, 2020, 11:52 AM
this one right?
{
  sanity: {
    projectId: 'myProject',
    token: process.env.SANITY_TOKEN
  }
}

Aug 21, 2020, 11:54 AM
Perfect
Aug 21, 2020, 11:54 AM
Fantastic! it works ๐ŸŽ‰ Thank you so much ๐ŸŒˆ
Aug 21, 2020, 11:57 AM
You're welcome ๐Ÿ˜Š
Aug 21, 2020, 11:58 AM
โœจ
Aug 21, 2020, 11:58 AM
Version with fix now published as 0.3.2
Aug 21, 2020, 12:00 PM
cool โšก
Aug 21, 2020, 12:02 PM
wonderful I'll refer to it eventually. thank you very much for your help
Aug 21, 2020, 12:16 PM

Sanityโ€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?