Getting Started

If you're setting your Vue Storefront application from scratch, you'll need to configure the SDK Core to create a type-safe SDK that communicates with your Server Middleware.

Installation

To install the SDK Core, run the following command:

npm install @vue-storefront/sdk

Initializing the SDK

Next, you have to initialize the SDK, along with any integrations' SDK modules in your frontend project.

The SDK Core exposes two methods to help with this, buildModules, which takes in SDK modules and uses them to extend the SDK Core, and initSDK, which takes multiple modules and converts them into a type-safe interface.

import { initSDK, buildModule } from '@vsf-enterprise/sdk';

const { example } = initSDK({
  example: buildModule(/* imported sdk module*/, {
    /* module options */
  }),
  // additional modules
})

export example

When it comes to managing multiple SDK modules, there are two options for this:

1. Individual exports (recommended) - initialize each integration as a separate SDK instance, allowing for better code-splitting
2. Single Instance - combine multiple modules in one SDK instance

Individual Exports (Recommended)

To initialize the SDK, follow these steps:

1. Create a new .ts file - in most Vue Storefront projects, we use sdk/index.ts, but you can create this anywhere in your storefront
2. Import the initSDK and buildModule from the SDK Core, along with any imports needed to add additional modules.
3. Initialize the SDK by selectively importing and building the required modules
4. Export the initialized modules for usage in your application:

import { initSDK, buildModule } from '@vsf-enterprise/sdk';
import { ctModule } from '@vsf-enterprise/commercetools-sdk';
import { stripeCtModule } from '@vsf-enterprise/stripe-commercetools-sdk';
const { ct } = initSDK({ 
  ct: buildModule(ctModule, { 
    apiUrl: 'http://localhost:8181/ct' 
  }) 
});
const { stripeCt } = initSDK({ 
  stripeCt: buildModule(stripeCtModule, { 
    apiUrl: 'http://localhost:8181/stripe'
  })
});

export { ct, stripeCt };

Usage

Once you have initialized the SDK, you can start importing the individual modules in your application. For example, if we wanted to

// Use the Commercetools module on the Product Page
import { ct } from "./sdk";

const { products } = await sdk.commerce.getProduct();

// Use the Stripe for Commercetools module on the Checkout Page
import { ct, stripeCt } from "./sdk";

const cart = await ct.getCart();
const { paymentElement, elements } = await stripeCt.mountPaymentElement({ cart: cart! });

Combining Modules

Alternatively, you can also combine multiple modules into a single SDK instance. This approach is useful if you want to use multiple modules in your application and don't want to initialize them separately.

To combine multiple modules, follow these steps:

1. Create a new .ts file - in most Vue Storefront projects, we use sdk/index.ts, but you can create this anywhere in your storefront
2. Import the initSDK and buildModule from the SDK Core, along with any imports needed to add additional modules.
3. Initialize the SDK by selectively importing and building the required modules:
4. Export the initialized SDK for usage in your application:

import { ctModule } from '@vsf-enterprise/commercetools-sdk';
import { stripeCtModule } from '@vsf-enterprise/stripe-commercetools-sdk';
import { initSDK, buildModule } from '@vsf-enterprise/sdk';
const sdkConfig = {
  ct: buildModule(ctModule, { apiUrl: 'http://localhost:8181/ct' }),
  stripeCt: buildModule(stripeCtModule, { apiUrl: 'http://localhost:8181/stripe' })
};

const sdk = initSDK(sdkConfig);
export { sdk };

Usage

Once you have initialized the SDK, you can start utilizing the imported modules in your application. Here's an example of how you can use the commercetools and Stripe for commercetools modules as a single SDK instance:

import { sdk } from "./sdk";


const { products } = await sdk.commerce.getProduct();
// do something with products...
const cart = await sdk.ct.getCart();
const { paymentElement, elements } = await sdk.stripeCt.mountPaymentElement({ cart: cart! });

This makes it easier to use multiple modules in your application without having to initialize them separately, however, it can lead to performance issues if you're using several large modules.

Experiment with combining the modules that best fit your application's requirements and enjoy the enhanced capabilities of our SDK.

Next Steps