Releases: vuestorefront/vue-storefront
@vue-storefront/[email protected]
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,
},
});
@vue-storefront/[email protected]
Patch Changes
- [CHANGED] response type of HTTPClient to
Promise<any>
. Previously it wasPromise<true> | SdkHttpError
, which was making it impossible the use of anaxios
with themiddlewareModule
. Now, it more flexible and can be used with any HTTP client.
@vue-storefront/[email protected]
Patch Changes
[FIXED] Content-Length
header will no longer be appended to requests if its value is "0" - such situation caused Next.js server to crash
@vue-storefront/[email protected]
Patch Changes
- Updated dependencies:
- @vue-storefront/[email protected]
@vue-storefront/[email protected]
Minor Changes
- [ADDED] New GET /readyz endpoint for middleware for using with Kubernetes readiness probes.
@vue-storefront/[email protected]
Minor Changes
- [ADDED]
logger
option to themiddlewareModule
config. This option allows you to turn on/off the logging of the SDK requests and responses or to provide a custom logger function.
import { initSDK, buildModule, middlewareModule } from "@vue-storefront/sdk";
import { Endpoints } from "@vsf-enterprise/sapcc-api";
const sdk = initSDK({
commerce: buildModule(middlewareModule<Endpoints>, {
apiUrl: "http://localhost:8181/commerce",
+ logger: true,
}),
});
Logger can be also turned on by setting the ALOKAI_SDK_DEBUG
environment variable to true
.
@vue-storefront/[email protected]
Major Changes
- [ADDED] global state management with Pinia. This will allow you to keep your global state in a more organized way.
It shares the data about: - cart
- customer
- currency
- locale
This change will require you to refactor your composables to make use of the introduced state manager.
As this is only a state management, you will still need to use the composables to fetch the data and put it into the state.
Every part of global state can now be used as refs so reading and writing to them is more straightforward.
Example of usage:
<template>
<div>
<p>Cart total: {{ cart.total }}</p>
<p>Customer name: {{ customer.firstName }} {{ customer.lastName }}</p>
<p>Currency: {{ currency }}</p>
<p>Locale: {{ locale }}</p>
</div>
</template>
<script setup>
const { cart, customer, currency, currencies, locale, locales } = storeToRefs(
useSfState()
);
// updating the currency state
currency.value = "USD";
// updating the cart state
onMounted(async () => {
cart.value = await useSdk().unified.getCart();
});
</script>
- [BREAKING] [CHANGED] module configKey is changed from
vsf
toalokai
. Also, the support for thevsf
key in Runtime Envs has been changed toalokai
.
meta: {
name: "@vue-storefront/nuxt",
- configKey: "vsf",
+ configKey: "alokai",
compatibility: {
nuxt: "^3.0.0",
},
nuxt.options.runtimeConfig.public.alokai = defu(
- nuxt.options.runtimeConfig.public?.vsf as any,
+ nuxt.options.runtimeConfig.public?.alokai as any,
options
);
Patch Changes
- Updated dependencies:
- @vue-storefront/[email protected]
@vue-storefront/[email protected]
Major Changes
- [ADDED] global state management with Zustand. This will allow you to keep your global state in a more organized way.
It shares the data about: - cart
- customer
- currency
- locale
This change will require you to refactor your hooks to make use of the introduced state manager.
As this is only a state management, you will still need to use the hooks to fetch the data and put it into the state.
To make use of the new state solution you will need to change the file sdk/sdk-context.ts
.
// before
"use client";
import { createSdkContext } from "@vue-storefront/next/client";
import type { Sdk } from "./sdk.server";
export const [SdkProvider, useSdk] = createSdkContext<Sdk>();
// after
"use client";
import { createAlokaiContext } from "@vue-storefront/next/client";
import type { SfContract } from "storefront-middleware/types";
import type { Sdk } from "./sdk.server";
export const {
AlokaiProvider,
useSdk,
useSfCartState,
useSfCurrenciesState,
useSfCurrencyState,
useSfCustomerState,
useSfLocaleState,
useSfLocalesState,
} = createAlokaiContext<Sdk, SfContract>();
The type SfContract
is a type that represents the contract between the middleware and the state manager.
It is delivered out of the box.
Example of usage:
import { useQuery } from "@tanstack/react-query";
import {
useSdk,
useSfCartState,
useSfCustomerState,
useSfCurrencyState,
useSfLocaleState,
} from "@/sdk/alokai-context";
function Component() {
const sdk = useSdk();
const [cart, setCart] = useSfCartState();
const [customer] = useSfCustomerState();
const [currency] = useSfCurrencyState();
const [locale] = useSfLocaleState();
const result = useQuery({
queryFn: () => sdk.unified.getCart(),
queryKey: ["cart", "main"],
});
// updating the cart state
useEffect(() => {
setCart(result.data);
}, [result.data]);
return (
<div>
<p>Cart total: {cart.total}</p>
<p>
Customer name: {customer.firstName} {customer.lastName}
</p>
<p>Currency: {currency}</p>
<p>Locale: {locale}</p>
</div>
);
}
- [BREAKING] [CHANGED] the function
createSdkContext
exported from theclient
is changed tocreateAlokaiContext
.
Also, it no longer returns an array with two elements, but an object with multiple properties.
This change is related to the fact that now it not only provide SDK context but also global state management context and hooks for handling it.
- import { createSdkContext } from '@vue-storefront/next/client';
+ import { createAlokaiContext } from '@vue-storefront/next/client';
Patch Changes
- Updated dependencies:
- @vue-storefront/[email protected]
@vue-storefront/[email protected]
Major Changes
- [ADDED] global state management with Pinia. This will allow you to keep your global state in a more organized way.
It shares the data about: - cart
- customer
- currency
- locale
This change will require you to refactor your composables to make use of the introduced state manager.
As this is only a state management, you will still need to use the composables to fetch the data and put it into the state.
Every part of global state can now be used as refs so reading and writing to them is more straightforward.
Example of usage:
<template>
<div>
<p>Cart total: {{ cart.total }}</p>
<p>Customer name: {{ customer.firstName }} {{ customer.lastName }}</p>
<p>Currency: {{ currency }}</p>
<p>Locale: {{ locale }}</p>
</div>
</template>
<script setup>
const { cart, customer, currency, currencies, locale, locales } = storeToRefs(
useSfState()
);
// updating the currency state
currency.value = "USD";
// updating the cart state
onMounted(async () => {
cart.value = await useSdk().unified.getCart();
});
</script>
- [BREAKING] [CHANGED] module configKey is changed from
vsf
toalokai
. Also, the support for thevsf
key in Runtime Envs has been changed toalokai
.
meta: {
name: "@vue-storefront/nuxt",
- configKey: "vsf",
+ configKey: "alokai",
compatibility: {
nuxt: "^3.0.0",
},
nuxt.options.runtimeConfig.public.alokai = defu(
- nuxt.options.runtimeConfig.public?.vsf as any,
+ nuxt.options.runtimeConfig.public?.alokai as any,
options
);
@vue-storefront/[email protected]
Major Changes
- [ADDED] global state management with Zustand. This will allow you to keep your global state in a more organized way.
It shares the data about: - cart
- customer
- currency
- locale
This change will require you to refactor your hooks to make use of the introduced state manager.
As this is only a state management, you will still need to use the hooks to fetch the data and put it into the state.
To make use of the new state solution you will need to change the file sdk/sdk-context.ts
.
// before
"use client";
import { createSdkContext } from "@vue-storefront/next/client";
import type { Sdk } from "./sdk.server";
export const [SdkProvider, useSdk] = createSdkContext<Sdk>();
// after
"use client";
import { createAlokaiContext } from "@vue-storefront/next/client";
import type { SfContract } from "storefront-middleware/types";
import type { Sdk } from "./sdk.server";
export const {
AlokaiProvider,
useSdk,
useSfCartState,
useSfCurrenciesState,
useSfCurrencyState,
useSfCustomerState,
useSfLocaleState,
useSfLocalesState,
} = createAlokaiContext<Sdk, SfContract>();
The type SfContract
is a type that represents the contract between the middleware and the state manager.
It is delivered out of the box.
Example of usage:
import { useQuery } from "@tanstack/react-query";
import {
useSdk,
useSfCartState,
useSfCustomerState,
useSfCurrencyState,
useSfLocaleState,
} from "@/sdk/alokai-context";
function Component() {
const sdk = useSdk();
const [cart, setCart] = useSfCartState();
const [customer] = useSfCustomerState();
const [currency] = useSfCurrencyState();
const [locale] = useSfLocaleState();
const result = useQuery({
queryFn: () => sdk.unified.getCart(),
queryKey: ["cart", "main"],
});
// updating the cart state
useEffect(() => {
setCart(result.data);
}, [result.data]);
return (
<div>
<p>Cart total: {cart.total}</p>
<p>
Customer name: {customer.firstName} {customer.lastName}
</p>
<p>Currency: {currency}</p>
<p>Locale: {locale}</p>
</div>
);
}
- [BREAKING] [CHANGED] the function
createSdkContext
exported from theclient
is changed tocreateAlokaiContext
.
Also, it no longer returns an array with two elements, but an object with multiple properties.
This change is related to the fact that now it not only provide SDK context but also global state management context and hooks for handling it.
- import { createSdkContext } from '@vue-storefront/next/client';
+ import { createAlokaiContext } from '@vue-storefront/next/client';