Quick start

Access text, images, and other media with Nuxt and the Sanity headless CMS.

Setup

  1. Install Sanity integration
    yarn add @nuxtjs/sanity
    
    npm install @nuxtjs/sanity --save
    
  2. Enable the module in your Nuxt configuration
    nuxt.config.js
    {
      buildModules: ['@nuxtjs/sanity/module']
    }
    
    nuxt.config.js
    {
      modules: ['@nuxtjs/sanity/module']
    }
    
  3. Add Sanity configuration
    @nuxtjs/sanity will look for a sanity.json file in your project root directory. Just copy over the sanity.json from your CMS - and you're fully configured!
    Alternatively, you can pass in an object in your Nuxt config with key details.
    nuxt.config.js
    {
      sanity: {
        projectId: 'myProject'
      }
    }
    
    You can find more about configuring @nuxtjs/sanityhere.
  4. You're good to go!
    Check out how to use Sanity.

TypeScript

@nuxtjs/sanity offers type definitions. Just add an entry in tsconfig.json.

tsconfig.json
{
  "compilerOptions": {
    "types": ["@nuxt/types", "@nuxtjs/sanity"]
  }
}
tsconfig.json
{
  "compilerOptions": {
    "types": ["@nuxt/vue-app", "@nuxtjs/sanity"]
  }
}