Vue Storefront 2 for shopify

# Configuration

Shopify configuration is located in two places:

  • nuxt.config.js is a place where you're configuring properties related only to the frontend part of your application.

  • middleware.config.js is a place where you're configuring the Shopify SDK and extensions. You will put there API keys, integration configurations, custom GraphQL queries and new API endpoints.

# Nuxt Shopify configuration

// nuxt.config.js
['@vue-storefront/shopify/nuxt', {
  i18n: {
    useNuxtI18nConfig: true
  }
}]
  • useNuxtI18nConfig - when enabled, @vue-storefront/shopify/nuxt package will use i18n config object provided in nuxt.config.js. Otherwise, the i18n config should be declared directly inside this package configuration. You can read more about it on Internationalization (opens new window) page

# Middleware shopify configuration

// middleware.config.js
module.exports = {
  integrations: {
    shopify: {
      location: '@vue-storefront/shopify-api/server',
      configuration: {
        api: {
          domain: 'YOUR SHOPIFY STORE DOMAIN',
          storefrontAccessToken: 'SHOPIFY STORE API KEY'
        },
        cms: {
          blogs: '/blogs', 
          articles: '/articles'
        },
        currency: 'USD',
        country: 'US'
      }
    }
  }
};

# api

# cms

  • blogs - prefix url for your blogs content defaults to /blogs
    • Which results to https://yourdomain.com/blogs/:blog-handle
  • articles - prefix url for your articles content defaults to /articles
    • Which results to https://yourdomain.com/articles/:article-handle

# acceptLanguage

An array of possible locales Shopify will use. You can read more about Shopify internationalization configuration here (opens new window)

acceptLanguage: ['en-gb', 'en-us']

# languageMap

If you supply a languageMap during setup this will be used to map a locale to the accepted languages.

languageMap: {
  'en-gb': ['en-gb', 'en-us'],
  'en-us': ['en-us', 'en-gb'],
}

← Authorization →