Setup

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

Setup

Add nuxt-shopify as a dependency to your project:

yarn add nuxt-shopify

npm install nuxt-shopify

Storefront access Token

A Storefront API token is required for this module, follow the shopify guide to get you started: https://shopify.dev/docs/storefront-api/getting-started

nuxt.config.js

module.exports = {
  modules: ['nuxt-shopify'],

  shopify: {
    /**
     * Your shopify domain
     */
    domain: 'your-shop-name.myshopify.com',

    /**
     * Your shopify storefront access token
     */
    storefrontAccessToken: 'your-storefront-access-token',

    /**
     * This will be larger than the optimized version, as it will contain all fields that are available in the
     * Storefront API. (https://help.shopify.com/en/api/custom-storefronts/storefront-api/reference)
     * This should only be used when you need to add custom queries to supplement the JS Buy SDK queries.
     */
    unoptimized: false,

    /**
     * Set language to return translated content (optional)
     */
    language: 'ja-JP',
  },
};

TypeScript

nuxt-shopify offers type definitions. Just add an entry in tsconfig.json.

tsconfig.json{
  "compilerOptions": {
    "types": ["@nuxt/types", "nuxt-shopify"]
  }
}

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