Vue Storefront is now Alokai! Learn More
@vue-storefront/next

@vue-storefront/next

6.0.0-rc.0ri:link

Major Changesri:link

Replace legacy packages with a connect package

5.0.0ri:link

Major Changesri:link

  • CHANGED The config parameter available in the callback passed to defineSdkConfig() no longer contains computed middlewareUrl property. It now exposes apiUrl and ssrApiUrl that should be used instead.
  • CHANGED The middleware.ssrApiUrl parameter is now required in the resolveSdkOptions() method.

Migration guideri:link

  1. Update environment variables

In the apps/storefront-unified-nextjs/sdk/options.ts file, verify the NEXT_PUBLIC_ALOKAI_MIDDLEWARE_SSR_API_URL environment variable exists:

const ssrApiUrl = env('NEXT_PUBLIC_ALOKAI_MIDDLEWARE_SSR_API_URL');

+ if (!ssrApiUrl) {
+   throw new Error('NEXT_PUBLIC_ALOKAI_MIDDLEWARE_SSR_API_URL is required to run the app');
+ }

See our guide on initializing the SDK for a complete version of the file.

  1. Update SDK configuration file

Update your SDK configuration file (apps/storefront-unified-nextjs/sdk/config.ts) so that registered modules use apiUrl and ssrApiUrl properties instead of middlewareUrl.

import { defineSdkConfig } from '@vue-storefront/next';

export function getSdkConfig() {
  return defineSdkConfig(({ buildModule, config, getRequestHeaders, middlewareModule }) => ({
    commerce: buildModule(middlewareModule, {
-     apiUrl: `${config.middlewareUrl}/commerce`,
+     apiUrl: `${config.apiUrl}/commerce`,
+     ssrApiUrl: `${config.ssrApiUrl}/commerce`,
    }),
  }));
}

4.3.2ri:link

Patch Changesri:link

  • CHANGED getSdk' getRequestHeaders configuration property now allows you to pass in method returning both headers and cookies of your next application.

4.3.1ri:link

Patch Changesri:link

  • CHANGED Update JSDoc for createAlokaiContext method.

4.3.0ri:link

Minor Changesri:link

ADDED support for the logger utility and createLogger function to initialize the logger on the storefront layer

4.2.0ri:link

Minor Changesri:link

  • CHANGED defaultMethodsRequestConfig, so the getCategory, and getPage methods will use GET request as a default.

4.1.1ri:link

Patch Changesri:link

  • CHANGED the package @vue-storefront/sdk is now a peer dependency instead of dependency

4.1.0ri:link

Minor Changesri:link

  • CHANGE: Added the resolveSdkOptions helper that automatically setup proper SSR & SPA URLs for middleware when multistore option is enabled. To use it, change your SDK configuration:
-import type { CreateSdkOptions } from '@vue-storefront/next';
+import { resolveSdkOptions } from '@vue-storefront/next';

-const options: CreateSdkOptions = {
+const options = resolveSdkOptions({
  middleware: {
    apiUrl,
    cdnCacheBustingId,
    ssrApiUrl,
  },
  multistore: {
    enabled: isMultiStoreEnabled,
  },
});

4.0.0ri:link

  • ADDED Global State Management with Zustand to improve state organization and sharing across your application.
    • Hooks Available:
      • useSfCartState: Access and update cart state.
      • useSfCustomerState: Manage customer information.
      • useSfCurrencyState and useSfCurrenciesState: Handle currency data.
      • useSfLocaleState and useSfLocalesState: Manage locale settings.
    • State Ready to be Shared with Storefront Modules: Share state seamlessly between Storefront applications and Storefront Modules.

    Example Usage:
    import { useSfCartState, useSfCustomerState } from "@/sdk/alokai-context";

export default function MyComponent() {
  const [cart] = useSfCartState();
  const [customer] = useSfCustomerState();

  return (
    <div>
      <p>Cart: {JSON.stringify(cart)}</p>
      <p>Customer: {JSON.stringify(customer)}</p>
    </div>
  );
}
  • CHANGED createSdkContext to createAlokaiContext. It now returns an object with multiple properties instead of an array. The new structure supports both SDK context and the global state management context.
    Before:
    import { createSdkContext } from "@vue-storefront/next/client";

const [SdkProvider, useSdk] = createSdkContext();

    After:
    import { createAlokaiContext } from "@vue-storefront/next/client";

const { AlokaiProvider, useSdk } = createAlokaiContext();
  • REMOVED SdkProvider component. State management and SDK context are now handled by the AlokaiProvider component. Replace SdkProvider with AlokaiProvider as shown in the Migration Guide.

Patch Changesri:link

  • Updated dependencies:
    • @vue-storefront/sdk@3.2.0

Migration Guideri:link

To upgrade to version 4.0.0, follow these steps:

1. Replace createSdkContext with createAlokaiContextri:link

Update your imports and change how the context is created.

Before:

import { createSdkContext } from "@vue-storefront/next/client";

const [SdkProvider, useSdk] = createSdkContext();

After:

import { createAlokaiContext } from "@vue-storefront/next/client";

const { AlokaiProvider, useSdk } = createAlokaiContext();

2. Replace SdkProvider with AlokaiProviderri:link

Wrap your application with the AlokaiProvider component.

Before:

<SdkProvider sdk={getSdk()}>{children}</SdkProvider>

After:

<AlokaiProvider
  initialData={{
    currencies: initialCurrency.currencies,
    currency: initialCurrency.currentCurrency,
    locale: locale as SfLocale,
    locales: locales as SfLocale[],
  }}
  sdk={getSdk()}
>
  {children}
</AlokaiProvider>
);

For the App Router you can use the root layout to wrap the application with the AlokaiProvider component and for the Pages Router you can use the Custom App file. You can remove the SdkProvider component. Tip: You can get the initialCurrency by calling sdk.unified.getCurrencies().

3. Remove the sdk-context.tsx fileri:link

Replace your custom SDK context file with a new context file using createAlokaiContext.

New alokai-context.tsx:

"use client";

import { createAlokaiContext } from "@vue-storefront/next/client";
import type { Sdk } from "./sdk.server";
import type { SfContract } from "storefront-middleware/types";

export const {
  AlokaiProvider,
  useSdk,
  useSfCartState,
  useSfCustomerState,
  useSfCurrencyState,
  useSfLocaleState,
  useSfLocalesState,
} = createAlokaiContext<Sdk, SfContract>();

4. Replace useSdk Hookri:link

Update your imports to use the useSdk hook from alokai-context.

Before:

import { useSdk } from "@/sdk/sdk-context";

After:

import { useSdk } from "@/sdk/alokai-context";

5. Add StateObserver Componentri:link

Synchronize query client state with the global state management. Example:

Example:

import { QueryObserver, useQueryClient } from "@tanstack/react-query";
import type { GetCart, GetCustomer } from "@vsf-enterprise/unified-api-sapcc";
import { type PropsWithChildren, useEffect } from "react";

import { useCustomerKey } from "@/hooks";
import {
  useSdk,
  useSfCartState,
  useSfCustomerState,
  useSfCurrencyState,
} from "@/sdk/alokai-context";

export default function StateObserver({ children }: PropsWithChildren) {
  const sdk = useSdk();
  const [, setCustomer] = useSfCustomerState();
  const [, setCart] = useSfCartState();
  const [, setCurrency] = useSfCurrencyState();
  const queryClient = useQueryClient();
  const cartObserver = new QueryObserver<Awaited<ReturnType<GetCart>>>(
    queryClient,
    {
      queryFn: () => sdk.unified.getCart(),
      queryKey: ["cart", "main"],
    }
  );
  const customerObserver = new QueryObserver<Awaited<ReturnType<GetCustomer>>>(
    queryClient,
    {
      queryFn: () => sdk.unified.getCustomer(),
      queryKey: useCustomerKey,
    }
  );
  const currencyObserver = new QueryObserver<
    Awaited<ReturnType<GetCurrencies>>
  >(queryClient, {
    queryFn: () => sdk.unified.getCurrencies(),
    queryKey: ["settings", "currencies"],
  });

  useEffect(() => {
    const unsubscribeCart = cartObserver.subscribe(({ data }) => {
      setCart(data);
    });
    const unsubscribeCustomer = customerObserver.subscribe(({ data }) => {
      setCustomer(data?.customer);
    });
    const unsubscribeCurrency = currencyObserver.subscribe(({ data }) => {
      setCurrency(data);
    });

    return () => {
      unsubscribeCart();
      unsubscribeCustomer();
      unsubscribeCurrency();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return children;
}

Place the StateObserver below the AlokaiProvider.

6. Update Locale Managementri:link

Whenever the locale changes, update it in the global state using the useSfLocaleState hook.

Example:

import { useSfLocaleState } from "@/sdk/alokai-context";

function updateLocale(newLocale) {
  const [, setLocale] = useSfLocaleState();
  setLocale(newLocale);
}

3.0.1ri:link

Patch Changesri:link

FIXED: Added getCurrencies unified endpoint to be fetch by HTTP GET. This change enable caching this endpoint on CDN.

3.0.0ri:link

Major Changesri:link

BREAKING CHANGE: Now the SDK is separately initialized on the server and client. We recommend splitting configuration files for SDK Options and Configuration to re-use them between instances. Introduce the defineSdkConfig helper function. Changed the SdkProvider interface, taking only type and no arguments. The SDK instance is passed to the Provider in the place where it's used.

Minor Changesri:link

ADDED Value of Busting ID for CDN Cache. You can access it via config.cdnCacheBustingId. CHANGED Deprecated middlewareUrl in defineSdkConfig context. Use config.middlewareUrl instead. CHANGED Deprecated defaults in defineSdkConfig context. Use config.defaultMethodsRequestConfig instead.

2.1.0ri:link

Minor Changesri:link

  • ADDED Added .config parameter in createSdk callback

Patch Changesri:link

  • Updated dependencies:
    • @vue-storefront/sdk@3.1.0

2.0.1ri:link

Patch Changesri:link

  • Updated dependencies:
    • @vue-storefront/sdk@3.0.0

2.0.0ri:link

  • CHANGED Updated the @vue-storefront/sdk dependency to version 2.0.0.
  • ADDED defaults property to the injected context

1.1.1ri:link

  • FIXED "The inferred type of 'SdkProvider' cannot be named without a reference to (...)" error when calling createSdkContext.

1.1.0ri:link

  • ADDED middlewareModule to createSdk params.
sdk.config.ts
- import { UnifiedApiExtension } from "storefront-middleware/types"
+ import { UnifiedEndpoints } from "storefront-middleware/types"

export const { getSdk } = createSdk(
  options,
-  ({ buildModule, middlewareUrl, getRequestHeaders }) => ({
-    commerce: buildModule(unifiedModule<UnifiedApiExtension>, {
-      apiUrl: `${middlewareUrl}/commerce`,
-      requestOptions: {
-        headers: getRequestHeaders,
+  ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
+    commerce: buildModule(middlewareModule<UnifiedEndpoints>, {
+      apiUrl: `${middlewareUrl}/commerce`,
+      defaultRequestConfig: {
+        headers: getRequestHeaders(),
      },
    }),
  })
);

1.0.2ri:link

  • FIXED Multi-store URL calculation, now working correctly in the browser.

1.0.1ri:link

  • CHANGED Set @vue-storefront/sdk as a dependency instead of a peer dependency

1.0.0ri:link

  • Initialized the package