Vue Storefront is now Alokai! Learn More
Getting Started

Getting Started

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

In the examples below, we assume that you have an Alokai app with the Unified Data Model. However, the approach for non-unified Alokai applications is similar.

There are various ways to configure the SDK, depending on your chosen framework. For Next.js and Nuxt, you can use the @vue-storefront/next and @vue-storefront/nuxt packages respectively. If you're looking for framework agnostic experience, you can use the @vue-storefront/sdk package.


To get started with the SDK within Next.js, first you have to install the @vue-storefront/next package. In the root of your Storefront project run:

# 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 SDK in our application, we need to initialize it first. To do so, follow these steps:

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

It is not necessary to name the file sdk.config.ts specifically or to keep it in the sdk directory, but it is recommended to keep it consistent with the rest of the Alokai project.

  1. Create the SDK configuration by importing the createSdk function from the Next.js SDK and using the middlewareModule it provides. You should also import other modules you want to use.
import { contentfulModule } from "@vsf-enterprise/contentful-sdk";
import { CreateSdkOptions, createSdk } from "@vue-storefront/next";
import { UnifiedEndpoints } from "storefront-middleware/types";

const options: CreateSdkOptions = {
  middleware: {
    apiUrl: "http://localhost:4000",

export const { getSdk } = createSdk(
  ({ buildModule, middlewareUrl, middlewareModule, getRequestHeaders }) => ({
    commerce: buildModule(middlewareModule<UnifiedEndpoints>, {
      apiUrl: middlewareUrl + "/commerce",
      defaultRequestConfig: {
        headers: getRequestHeaders(),
    cms: buildModule(contentfulModule, {
      apiUrl: middlewareUrl + "/cms",

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 middlewareModule is an SDK module that ensures communication with the Server Middleware. It takes the UnifiedEndpoints type as a generic parameter. The UnifiedEndpoints type is a type that represents the endpoints of the Server Middleware.
  • The getRequestHeaders function is used to provide the incoming headers within your requests. You can use getRequestHeaders to access and proxy the initial cookie headers to SDK requests during SSR. Initial headers could be provided by the getSdk method. Check out examples there:

In the browser, getRequestHeaders will return an empty object.

  • The createSdk function returns the getSdk function, which is used to retreive the new SDK instance.

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 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/sdk.config";

const sdk = getSdk();


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

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

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

To achieve easier importing, you can also create an index.ts file in the sdk directory:

export * from "./SdkProvider";
export * from "./sdk.config";

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 "@/sdk";

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

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">
"use client";

import { ReactNode } from "react";
import { SdkProvider } from "@/sdk";

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

Don't be alarmed if you see a use client directive in the app/providers.tsx file. This will not turn your application into a client-side rendered application. All children inside the provider will be still rendered on the server-side by default. You can read more about use client directive in React Documentation.


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:

Pages Router
import { getSdk } from "@/sdk";

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

  return {
    props: {

Code above is just an example of how you can use the SDK in your application. For more information about the avaialble methods, please refer to the respective Integration's documentation.

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

Next Steps