# Configuring Vue Storefront

WARNING

Before configuring your Vue Storefront app, it's necessary to configure BigCommerce first. If you haven't done this yet, see the Configuring BigCommerce guide.

# Set up environment variables

Vue Storefront application is using following environment variables to create a connection with BigCommerce API:

Environment variable Description
BIGCOMMERCE_API_CLIENT_ID Client ID obtained during creating an API account
BIGCOMMERCE_API_CLIENT_SECRET Client secret obtained during creating an API account
BIGCOMMERCE_API_URL API path obtained during creating an API account
BIGCOMMERCE_API_ACCESS_TOKEN Access token obtained during creating an API account
BIGCOMMERCE_STORE_ID store_hash included in API path between /stores/ and /v3/
BIGCOMMERCE_STORE_GUEST_TOKEN Preview code from Review & test your store block
DEFAULT_CHANNEL_ID channel_id of the default storefront
API_BASE_URL Url to the API (See Separate middleware) guide

# Storefronts configuration

If you're using only one storefront, everything will work just by setting up DEFAULT_CHANNEL_ID environment variable.

In case of using multiple storefronts, you need to configure them in storefronts.config.ts file. Single config entry contains:

  • name - User-friendly name of the storefront. It's being used to create a navigation to other storefronts.
  • channel_id - Id of storefront's channel.
  • protocol - Optional parameter which is set to https by default. It might be useful during development process and testing the navigation.

Key of this entry is a storefront's domain. Vue Storefront app will know which storefront should be used based on this information.

// example storefronts.config.ts

const DEFAULT_BIGCOMMERCE_CHANNEL = 1;

const storefrontsConfig: MultiStorefrontConfig = {
  default: {
    name: 'Default storefront',
    channelId:
      Number(process.env.DEFAULT_CHANNEL_ID) || DEFAULT_BIGCOMMERCE_CHANNEL
  },
  'my-first-storefront.io': {
    name: 'First storefront',
    channelId: YOUR_FIRST_CHANNEL_ID
  },
  'my-second-storefront.io': {
    name: 'Second storefront',
    channelId: YOUR_SECOND_CHANNEL_ID
  }
};

TIP

See Multi-storefront overview for more information about using multiple storefronts.