Configuration

In order to connect your Vue Storefront application to your SAP Commerce Cloud instance, you need to take care of two configuration files:

  • middleware.config.js
  • nuxt.config.js

Good to know

These configuration files are not SAP integration-specific and are used in every Vue Storefront project. Since this guide only explains the bits realted to SAP, we also recommend you read more about these files in our core documentation (opens new window).

Prerequisites

Before following this guide, make sure you have an already configured SAP Commerce Cloud project. It includes creating and configuring:

  • at least one Website in WCMS > Websites tab,
  • at least one Base Store connected to your Website in Base Commerce > Base Store tab,
  • an OAuth Client in System > OAuth > OAuth Clients tab,
  • a Catalog in the Catalog > Catalogs tab,
  • a Catalog version in the Catalog > Catalog Versions tab.

Middleware configuration

First, we are going to focus on the middleware.config.js file. It is required by Vue Storefront's API Middleware (opens new window) to communicate with the SAP's Authorization Server and OCC API.

Don't hardcode your credentials!

We recommend keeping all sensitive credentials in a separate .env file created at the root of your project. You can then reference them by using process.env in your middleware.config.js file.

module.exports = {
  integrations: {
    sapcc: {
      location: '@vsf-enterprise/sapcc-api/server',
      configuration: {
        OAuth: {
          uri,
          clientId,
          clientSecret,
          tokenEndpoint,
          tokenRevokeEndpoint,
          cookieOptions: {
            'vsf-sap-token': {
              httpOnly: true,
              secure: true,
              sameSite: 'strict',
              path: '/'
            }
          }
        },
        api: {
          uri,
          stores: [
            {
              baseSiteId,
              baseStoreId,
              catalogId,
              catalogVersion,
              defaultLanguage,
              defaultCurrency
            }
          ]
        }
      }
    }
  }
};

OAuth

Configuration required by Vue Storefront to retrieve application and customer tokens from the SAP authorization server.

  • clientId: client id of your OAuth Client.
  • clientSecret: client secret of your OAuth Client.
  • uri: full OAuth server uri (e.g. https://<your-sap-api>/authorizationserver/).
  • tokenEndpoint: endpoint for retrieving and refreshing customer/application tokens (e.g. /oauth/token).
  • tokenRevokeEndpoint: endpoint for revoking customer tokens (e.g. /oauth/revoke).
  • cookieOptions: object that can be used to overwrite options of the vsf-sap-token cookie. It is merged with the default configuration. Available options are listed in the cookie module documentation (opens new window)

api

Configuration required by Vue Storefront to exchange commerce data (products, categories etc.) with the SAP OCC API.

  • uri: full OCC API uri (e.g. https://<your-sap-api>/occ/v2).
  • stores: an array of Base Store configuration objects. Put one object here for a single-store setup and as many objects as you want for a multistore setup.

Each Base Store configuration object can have the following properties:

  • baseSiteId: first and decisive parameter of every request (e.g. electronics).
  • baseStoreUid: unique identifier of the Base Store. Can be skipped if the uid of your Base Store and the uid of your Base Site are the same.
  • catalogId: main catalog id (e.g. electronicsProductCatalog).
  • catalogVersion: main catalog version (e.g. Online).
  • defaultCurrency: isocode of the default currency for the current Base Store (e.g. USD). Will be sent to OCC API if no vsf-currency cookie comes from the frontend (e.g. during the first page load).
  • defaultLanguage: isocode of the default language for the current Base Store (e.g. EN). Will be sent to OCC API if no vsf-locale cookie comes from the frontend (e.g. during the first page load).
  • urlPatterns: array of URL patterns, allowing Vue Storefront to pick the right store configuration based on the domain. Required only in a multistore setup.

Good to know

In the middleware.config.js file, you can also register your extensions (opens new window) to enhance or overwrite the default features of the integration.

Nuxt configuration

Second, we are going to focus on nuxt.config.js - a standard configuration file which can be found in every Nuxt (opens new window) project. Vue Storefront already ships with a default configuration which you can adjust according to your needs.

Integration module

Your Vue Storefront project comes with a pre-installed @vsf-enterprise/sapcc/nuxt module. It configures the integration on the frontend by:

  • ensuring composables (opens new window) imported from @vsf-enterprise/sapcc can work properly,
  • injecting various plugins responsible for actions such as token refreshing or pre-loading Base Store configuration,
  • injecting the $sapcc object into the application context (opens new window), giving us easy access to all of the integration's API methods

The module is required so make sure it is always present in your buildModules array. You can enable or disable some of its features with the following configuration options:

export default {
  buildModules: [
    ['@vsf-enterprise/sapcc/nuxt', {
      loadStorePlugin: true
    }]
  ]
};
  • loadStorePlugin: enables or disables the loadStore plugin

Internationalization

By default, every Vue Storefront project uses the i18n module (opens new window). We've also enhanced its basic features by providing our plugin responsible for performing redirects and setting relevant cookies (such as vsf-locale and vsf-currency). Therefore, the i18n configuration object contains both the default i18n module options (opens new window) and Vue Storefront-specific (opens new window) options.

Some of these options should be adjusted according to your Base Store configuration in SAP.

export default {
  i18n: {
    defaultLocale: 'en',
    locales: [
      { code: 'en', label: 'English', file: 'en.js', iso: 'en' },
      { code: 'ja', label: '日本語', file: 'ja.js', iso: 'ja' }
    ],
    currency: 'USD',
    currencies: [
      { name: 'USD', label: 'Dollar' },
      { name: 'JPY', label: 'Japanese Yen' }
    ]
  }
};
  • defaultLocale: if your Base Store in SAP has a default language, this property should be equal to the isocode of that language. It is especially important when using the i18n's prefix_except_default (opens new window) strategy where the routes for default locale are generated without the prefix.
  • locales: an array of locales supported by your application. In a single-store setup, it should contain all languages supported by your Base Store. In a multistore setup, it should contain all languages supported by all your Base Stores. This way we make sure the i18n module can generate prefixed routes for all locales.
  • currency (optional): if your Base Store in SAP has a default currency, this property should be equal to the isocode of that currency.
  • currencies (optional): an array of currencies supported by your Base Store.

Good to know

Setting currency and currencies is required only when disabling the LoadStore plugin.

There are also some options required for the LoadStore plugin to work properly. You should not change them unless you know what you are doing.

export default {
  i18n: {
    autoRedirectByLocale: false,
    detectBrowserLanguage: false,
    autoChangeCookie: {
      currency: false
    }
  }
};

Working with images

There are certain options required by your Vue Storefront app to display images properly. You can read more about them in our guide on working with images.

export default {
  image: {
    provider,
    cloudinary: {
      baseURL,
      uploadDir
    }
  },
  publicRuntimeConfig: {
    mediaHost
  }
};

Handling middleware separation

All Vue Storefront applications integrated with SAP Commerce Cloud follow the separated API Middleware (opens new window) approach. Therefore, we need to set the middlewareUrl property to tell our Nuxt frontend where it should send requests to.

By default, this option should be set to http://<your-app-url>/api in production and http://localhost:8181/ for development (unless you have changed the port in your middleware.js file).

const middlewareUrl = process.env.NODE_ENV === 'production'
  ? 'https://demo-sapcc.vuestorefront.io/api',
  : 'http://localhost:8181/';

export default {
  publicRuntimeConfig: {
    middlewareUrl
  }
};
← Scope of integration
Demos →