Custom Installation

Installation

Next.js SDK module is based on the Alokai SDK Core. In order to use the Next.js SDK module, first you need to install the SDK Core.

# Using yarn
yarn add @vue-storefront/sdk

# Using npm
npm install @vue-storefront/sdk

# Using pnpm
pnpm install @vue-storefront/sdk

Once SDK Core is installed, you can proceed to install Next.js SDK module. Enter the command below in the root of your project to install Next.js SDK module:

# Using yarn
yarn add --dev @vue-storefront/next

# Using pnpm
pnpm add -D @vue-storefront/next

# Using npm
npm install --save-dev @vue-storefront/next

Initializing the SDK

To use the SDK in our application, we need to initialize it first. To do so, follow these steps:

1. Create SDK Config file - sdk.config.ts in root directory of your project.

2. Create the SDK configuration by importing the createSdk function from the Next.js SDK and the modules you want to use.

import { CreateSdkOptions, createSdk } from "@vue-storefront/next";
import { SapccEndpoints } from "../server/types";

const options: CreateSdkOptions = {
  middleware: {
    apiUrl: "http://localhost:8181",
  },
};

export const { getSdk, createSdkContext } = createSdk(
  options,
  ({ buildModule, middlewareUrl, middlewareModule, getRequestHeaders }) => ({
    sapcc: buildModule(middlewareModule<SapccEndpoints>, {
      apiUrl: middlewareUrl + "/sapcc",
      defaultRequestConfig: {
        headers: getRequestHeaders(),
      },
    }),
  })
);

Let's break down the code above:

• The createSdk function expects

  • base SDK options including the middleware and (optionally) the multistore configuration as a first argument,
  • and a factory function for the SDK configuration as a second argument. Those factory function receives a context, useful for creating the SDK configuration.

• The buildModule function is used to build the module. It expects the module and the module configuration as arguments.

• The middlewareUrl is the URL of the middleware instance.

• The getRequestHeaders function is used to retrieve the Cookie header with cookie values.

• The createSdk function returns

  • the getSdk function, which is used to create the new SDK instance,
  • and the createSdkContext function, which is used to create the SDK context, to share the same SDK instance on the Client side.

Registering the SDK

Once you have initialized the SDK, you can register it in your application.

Alokai SDK can be used in two ways:

• getSdk - returns the SDK instance, which can be used to call the SDK methods directly. This is useful for server-side rendering, as it allows you to call the SDK methods directly in your application.

• createSdkContext - returns the SDK context, which can be used to share the same SDK instance on the Client side. This is useful for client-side rendering, as it allows you to share the same SDK instance across your application.

getSdk

getSdk is used to create the new SDK instance. This is especially useful for server-side fetching, as it returns a new SDK instance that can be used to call the SDK methods directly in your application.

Below is an example of how you can use getSdk in your application:

import { getSdk } from "../sdk.config";

const sdk = getSdk();

createSdkContext

For client-side rendering, you can use createSdkContext. In order to use it, you'll need to create a new file in your application, for example hooks/sdk.ts:

import { createSdkContext } from "@vue-storefront/next/client";
import { getSdk } from "../sdk.config";

export const [SdkProvider, useSdk] = createSdkContext(getSdk());

Once you have created the SDK context, you can register it in your application. For example, if you're using the Pages Router, you can register it in pages/_app.tsx:

import type { AppProps } from "next/app";
import { SdkProvider } from "../hooks";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SdkProvider>
      <Component {...pageProps} />
    </SdkProvider>
  );
}

If you're using the App Router, you can register it in app/layout.tsx:

import { ReactNode } from "react";
import { Providers } from "./providers";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

"use client";

import { ReactNode } from "react";
import { SdkProvider } from "../hooks";

export function Providers({ children }: { children: ReactNode }) {
  return <SdkProvider>{children}</SdkProvider>;
}

Usage

Once you have registered the SDK in your application, you can start using it. Here's an example of how you can use the SAP Commerce Cloud SDK module in your application:

import { getSdk } from "../sdk.config";

export function getServersideProps() {
  const sdk = getSdk();
  const { products } = await sdk.sapcc.searchProduct();

  return {
    props: {
      products,
    },
  };
}

import { getSdk } from "../sdk.config";

const sdk = getSdk();

const { products } = await sdk.sapcc.searchProduct();

import { useEffect, useState } from "react";
import { useSdk } from "../hooks";

export function ClientComponentUsingSDK() {
  const sdk = useSdk();
  const [cart, setCart] = useState([]);

  useEffect(() => {
    const fetchCart = async () => {
      const newCart = await sdk.sapcc.getCart({
        cartId: "<cart_id>",
        fields: "code,guid,user(FULL)",
      });
      setCart(newCart);
    };

    fetchCart();
  }, []);
}

For more information about the available methods, please refer to the respective Integration's documentation.

That's it! You can now use Alokai SDK Module in your Next.js app ✨

Installation

Nuxt SDK module is based on the Alokai SDK Core. In order to use the Nuxt SDK module, first you need to install the SDK Core.

# Using yarn
yarn add @vue-storefront/sdk

# Using npm
npm install @vue-storefront/sdk

# Using pnpm
pnpm install @vue-storefront/sdk

Once SDK Core is installed, you can proceed to install Nuxt SDK module. Enter the command below in the root of your project to install Nuxt SDK module:

1. Add @vue-storefront/nuxt dependency to your project

# Using yarn
yarn add --dev @vue-storefront/nuxt

# Using pnpm
pnpm add -D @vue-storefront/nuxt

# Using npm
npm install --save-dev @vue-storefront/nuxt

2. Add @vue-storefront/nuxt to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@vue-storefront/nuxt"],
});

3. Configure the module

To configure the module, use vsf key in the Nuxt configuration object and provide necessary information such as the Middleware instance address:

export default defineNuxtConfig({
  modules: ["@vue-storefront/nuxt"],
  vsf: {
    middleware: {
      apiUrl: "http://localhost:8181",
    },
  },
});

Initializing the SDK

To use SDK in our application, we need to initialize it first. To do so, follow these steps:

Create SDK Config file - sdk.config.ts in root directory of your project.

You should import all other SDK configuration components. See the example below illustrating the SDK configuration with SAP Commerce Cloud module.

import { SapccEndpoints } from "../server/types";

export default defineSdkConfig(
  ({ buildModule, middlewareUrl, middlewareModule, getRequestHeaders }) => ({
    sapcc: buildModule(middlewareModule<SapccEndpoints>, {
      apiUrl: middlewareUrl + "/sapcc",
      defaultRequestConfig: {
        headers: getRequestHeaders(),
      },
    }),
  })
);

Let's break down the code above:

The defineSdkConfig function is used for intializing the SDK. The parameter for calling this function should be an anonymous function that receives an injected context from the module, containing:

• the buildModule function,
• the middleware URL (middlewareUrl),
• a function for retrieving the Cookie header with cookie values (getCookieHeader).

Usage

Once you have initialized the SDK, you can start using it. Here's an example of how you can use the SAP Commerce Cloud SDK module in your application:

<template>/* ... */</template>

<script setup>
const sdk = useSdk();

const { data: products } = await useAsyncData("products", () =>
  sdk.sapcc.searchProduct()
);
</script>

For more information about the available methods, please refer to the respective Integration's documentation.

That's it! You can now use Alokai SDK Module in your Nuxt app ✨

Installation

To install the SDK Core, run the following command:

npm install @vue-storefront/sdk

yarn add @vue-storefront/sdk

pnpm install @vue-storefront/sdk

Initializing the SDK

Next, you have to initialize the SDK, along with any integrations' SDK modules in your frontend project. To do so, follow these steps:

1. Create SDK Config file - sdk.config.ts in root directory of your project.

2. Create the SDK configuration by importing the initSDK function from the SDK Core and the modules you want to use.

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

import { initSDK, buildModule, middlewareModule } from "@vue-storefront/sdk";
import { SapccEndpoints } from "../server/types";

const { commerce } = initSDK({
  sapcc: buildModule(middlewareModule<SapccEndpoints>, {
    apiUrl: "http://localhost:8181/sapcc",
  }),
});

export { commerce };

Single Instance

import { initSDK, buildModule, middlewareModule } from "@vue-storefront/sdk";
import { SapccEndpoints } from "../server/types";

const sdkConfig = {
  sapcc: buildModule(middlewareModule<SapccEndpoints>, {
    apiUrl: "http://localhost:8181/sapcc",
  }),
};

export const sdk = initSDK(sdkConfig);

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.

Usage

Once you have initialized the SDK, you can start using it. Here's an example of how you can use the SAP Commerce Cloud SDK module in your application:

import { commerce } from "../sdk.config";

const { products } = await commerce.searchProduct();

import { sdk } from "../sdk.config";

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

For more information about the available methods, please refer to the respective Integration's documentation.

That's it! You can now use Alokai SDK Module in any JavaScript app ✨