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

@vue-storefront/next

4.3.0

Minor Changes

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

4.2.0

Minor Changes

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

4.1.1

Patch Changes

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

4.1.0

Minor Changes

  • 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.0

  • 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 Changes

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

Migration Guide

To upgrade to version 4.0.0, follow these steps:

1. Replace createSdkContext with createAlokaiContext

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 AlokaiProvider

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 file

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 Hook

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 Component

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 Management

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.1

Patch Changes

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

3.0.0

Major Changes

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 Changes

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.0

Minor Changes

  • ADDED Added .config parameter in createSdk callback

Patch Changes

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

2.0.1

Patch Changes

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

2.0.0

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

1.1.1

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

1.1.0

  • 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.2

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

1.0.1

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

1.0.0

  • Initialized the package