Setup

Check the Nuxt.js documentation for more information on installing and using modules in Nuxt.js.

Installation

Add @nuxtjs/snipcart dependency to your project:

yarn add @nuxtjs/snipcart
npm install @nuxtjs/snipcart

Then, add @nuxtjs/snipcart to the modules section of nuxt.config.js:

nuxt.config.js
{
  buildModules: [
    '@nuxtjs/snipcart'
  ],
  snipcart: {
    // Options available
    version: /* not required default value is v3.0.23 */,
    key: /* required https://app.snipcart.com/dashboard/account/credentials */,
    attributes: /* not required default [] */,
    locales: {} /* not required */
  }
}

Options

Check our example folder to see a default implementation of all features available.

version

We are currently using snipcart version v3.0.23 by default but you can override at any moment. But we suggest you to stay in the default version.

key

The snipcart token that you can retrieve.

attributes

It can happen you may want to add more data-item to snipcart initialization. By passing them into attributes they should work properly.

nuxt.config.js
module.exports = {
  snipart: {
    ...,
    
    attributes: [
      // ['data-config-modal-style', 'side']
      // ['data-config-add-product-behavior', 'none']
    ]
  }
}

locales

Snipcart offering you the possibility to override all his locales keys. You can also add more translations

Check our doc for more informations

Customization

Snipcart let you "override" their default components.

Check our doc for more informations

We will watch this folder to reload nuxt on change.

Edit this page on GitHub Updated at Mon, Oct 18, 2021