Get help on Discord

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!
AI Update

Great question! You're actually looking at two different approaches to integrating Sanity with Nuxt, and understanding the difference will help you decide which path is best for your project.

What you have now (@sanity/client): You're using the core Sanity JavaScript client directly. This works perfectly fine and gives you full control over how you set up and use the client.

What nuxt-sanity offers: The nuxt-sanity module is a Nuxt-specific wrapper that provides:

  • Auto-configuration through nuxt.config.ts
  • Nuxt composables like useSanityQuery() for fetching data
  • Better integration with Nuxt's SSR/SSG features
  • Image URL helper integration
  • Simpler setup for visual editing features

Will they conflict? They won't necessarily conflict, but you'd be running two separate clients which is redundant. Here's what I'd recommend:

If your current setup with @sanity/client is working and you're comfortable with it, there's no urgent need to switch. However, if you want the benefits of Nuxt-native composables and cleaner integration, switching to nuxt-sanity would be worthwhile.

Migration approach: Instead of having both, I'd suggest replacing your current setup:

  1. Install: npx nuxi@latest module add sanity
  2. Configure in nuxt.config.ts:
export default defineNuxtConfig({
  modules: ["@nuxtjs/sanity"],
  sanity: {
    projectId: 'your-project-id',
    dataset: 'production',
  },
})
  1. Replace your manual sanityClient imports with the useSanityQuery() composable in your components
  2. Remove your old sanity.js file and @sanity/client dependency once everything's migrated

The nuxt-sanity module is essentially a convenience layer over the same @sanity/client you're already using, so you're not losing any functionality—just gaining some Nuxt-specific ergonomics. The Nuxt.js quickstart guide has detailed examples of using the module if you decide to make the switch!

I've been working on a new Nuxt module and would love feedback 😊
I'm very happy to provide help if the docs aren't clear!
user T
it looks very interesting!
Hi! I’ve deprecated the 
nuxt-sanity
package,
user T
has done a great job at creating a new and improved one 👍
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....
Victoria Bergquist
and
user T
thank you! this sounds cool!
I'll go for it 🌈
user T
done! and so far all good ✨ ! I will keep you posted with any relevant feedback. thank you!
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!
I'm getting as well 
Error in fetch(): TypeError: Cannot read property 'fetch' of undefined
Do you need to define snippets in your data?
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
Have you added the module in your nuxt config?
Yes I did 🙂
in buildModules: ['@nuxtjs/sanity'],
Well, the main thing is first to define snippets on your component.
user T
thank you! is there an example project I could look at?
Ignore the build aliases in the Nuxt config - that's just because it's used as a fixture in the test suite
user T
thank you! this seem very useful. I'll give it a closer look and most likely get around my issue with it 🌱✨
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!
How very odd. What are your configuration settings?
user T
interesting... but I'm not sure which configurations you are referring. the once in the sanity studio?
I mean the module configuration
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
https://github.com/purplegreen/re-walk/tree/master/web I did copy the sanity.jason in the web folder
Looking
thanks ☺️
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
I can try to do it! thank you!
this one right?
{
  sanity: {
    projectId: 'myProject',
    token: process.env.SANITY_TOKEN
  }
}

Perfect
Fantastic! it works 🎉 Thank you so much 🌈
You're welcome 😊
✨
Version with fix now published as 0.3.2
cool ⚡
wonderful I'll refer to it eventually. thank you very much for your help

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?