docs
  1. Support And Resources
  2. Changelogs
  3. Storefront Sdks
  4. @scayle/storefront-nuxt

@scayle/storefront-nuxt

8.21.0

Patch Changes

Dependencies

@scayle/storefront-core v8.21.0

  • Minor
    • Expose the following filter types from storefront-api:
    • FilterItemWithValues
    • BooleanFilterItemWithValues
    • RangeFilterItemWithValues
    • IdenfitierFilterItemWithValues
    • AttributesFilterValue

8.20.1

Patch Changes

Dependencies

@scayle/storefront-core v8.20.1

  • Patch
    • Re-exported BasketKey and ApplicablePromotion from @scayle/storefront-api

8.20.0

Minor Changes

  • Add originalIp to the RPCContext which represents the IP address of the request without considering the x-forwarded-for header.

Patch Changes

Dependencies

@scayle/storefront-core v8.20.0

  • Minor
    • Include additional client information to Auth API requests to improve security.
    • Add originalIp to the RPCContext which represents the IP address of the request without considering the x-forwarded-for header.
  • Patch
    • [Basket] Pass campaignKey to SAPI when updating an basket item using the updateBasketItem RPC.

8.19.1

Patch Changes

Dependencies

@scayle/storefront-core v8.19.1

  • Patch
    • Fix getCategoriesByPath RPC to return 404 for non-existing categories.

8.19.0

Minor Changes

  • Add a new output option to the log config. It controls where server-side logs are sent and can be set to stderr, stdout or auto. stderr and stdout will send all logs to the configured steam, while auto will send error logs stderr and other logs to stdout. auto is the default value.
  • Add a new json option to the log config. When this is enabled via the nuxt.config or setting NUXT_PUBLIC_STOREFRONT_LOG_JSON=true in the .env, logs will be output in a JSON format.

Patch Changes

  • Updated dependency @vueuse/core@13.0.0 to @vueuse/core@13.1.0

@scayle/storefront-core v8.19.0

Dependencies

8.18.0

Patch Changes

@scayle/storefront-core v8.18.0

  • Minor
    • Update RPC methods to use explicit typing. This is an internal change to enable Typescript's isolatedDeclarations option. It will not impact regular usage of RPC methods, however if you are importing one of the functions directly, the explicit rather than inferred type will be used.

Dependencies

8.17.1

Patch Changes

  • Updated dependency @scayle/storefront-core@8.16.0 to @scayle/storefront-core@8.17.0
  • Updated dependency @scayle/unstorage-compression-driver@^0.2.4 to @scayle/unstorage-compression-driver@^0.2.5

@scayle/storefront-core v8.17.1

  • Patch
    • Ensure that the getAttribute helper function can handle multi-value attributes.

Dependencies

  • Updated dependency to @scayle/unstorage-compression-driver@0.2.6

8.17.0

Patch Changes

@scayle/storefront-core v8.17.0

  • Minor
    • Fix return type of RpcMethodCall to reflect that it returns a Promise<TResult> instead of TResult. This change emphasizes that callRpc in RpcContext is indeed an asynchronous operation.
  • Patch
    • Ensure that pricePromotionKey set in the right place when calling the deletion wishlist item operation of SAPI.

Dependencies

  • Updated dependency to @scayle/unstorage-compression-driver@0.2.5

8.16.0

Minor Changes

  • Redirects Extend the redirects feature with a new option: redirects.strategy. This property can be set to two values: before-request and on-missing. When set to before-request, the server will check for potential redirects before processing each request. This is the current behavior and will also be used when no value is set. When on-missing is used, the server will check for redirects only if the response for the request is a 404.
    To enable the new strategy, update your nuxt.config.ts.
    export default defineNuxtConfig({
  runtimeConfig: {
    storefront: {
      redirects: {
        enabled: true,
        strategy: 'on-missing',
      },
    },
  },
})

    Also, keep in mind that when this option is enabled, the redirect logic will only be executed when the request would otherwise result in a 404. There are three ways in which a 404 can occur.
    1. No route found

    If there is no matching route for the request's path, the framework will return a 404 response.
    1. Response with 404 status

    If the request handler returns a Response object with a status of 404, a 404 response will be returned to the client.
    return new Response(null, { status: 404 })
    1. Thrown H3Error with 404 status

    If the request handler throws an H3Error with a statusCode 404, a 404 response will be returned to the client.
    import { createError } from 'h3'
throw createError({ statusCode: 404 })

Patch Changes

@scayle/storefront-core v8.16.0

Dependencies

8.15.1

Patch Changes

@scayle/storefront-core v8.15.1

Dependencies

8.15.0

Patch Changes

@scayle/storefront-core v8.15.0

  • Minor
    • Filter out orders from user.orderSummary that are not associated with the current shop ID.

Dependencies

8.14.4

Patch Changes

@scayle/storefront-core v8.14.4

Dependencies

8.12.4

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.14.3

8.12.3

Patch Changes

  • OTEL Ensure the correct tracer is used when creating spans.

8.12.2

Patch Changes

  • OTEL Do not create bootstrap span when bootstrapping is skipped

Dependencies

  • Updated dependency to @scayle/storefront-core@8.14.2

8.12.1

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.14.1

8.12.0

Minor Changes

  • OrderItem and Order now accept generics: Both OrderItem and Order interfaces now accept generic type parameters for Product and Variant. Previously, these were implicitly typed as Record<string, unknown>. This change allows to strongly type the product and variant data within orders and order items, leading to better type checking and potentially fewer runtime errors. This allows for compile-time checks and autocompletion when working with product and variant properties of OrderItem and items property of Order.

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.14.0

8.11.11

Patch Changes

  • Updated dependency @vueuse/core@12.8.2 to @vueuse/core@13.0.0
  • Added @scayle/storefront-api@>=18.1.0 to peerDependencies.

Dependencies

  • Updated dependency to @scayle/storefront-core@8.13.0

8.11.10

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.12.3

8.11.9

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.12.2

8.11.8

Patch Changes

  • Updated dependency @vueuse/core@12.7.0 to @vueuse/core@12.8.2

8.11.7

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.12.1

8.11.6

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.12.0

8.11.5

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.11.3

8.11.4

Patch Changes

  • Updated dependency jose@^5.2.0 to jose@^6.0.8
  • Updated dependency schema-dts@1.1.2 to schema-dts@1.1.5

Dependencies

  • Updated dependency to @scayle/storefront-core@8.11.2

8.11.3

Patch Changes

  • Support @scayle/unstorage-scayle-kv-driver for caching.

Dependencies

  • Updated dependency to @scayle/storefront-core@8.11.1

8.11.2

Patch Changes

  • Updated dependency @scayle/storefront-core@8.9.0 to @scayle/storefront-core@8.10.0

Dependencies

  • Updated dependency to @scayle/storefront-core@8.11.0

8.11.1

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.10.0

8.11.0

Minor Changes

  • Include rpcCall when building the context. This utility function can be used within RPC methods to invoke another RPC method.

Patch Changes

Dependencies

  • Updated dependency to @scayle/unstorage-compression-driver@0.2.4
  • Updated dependency to @scayle/storefront-core@8.9.0

8.10.4

Patch Changes

  • Updated dependency @vercel/nft@0.29.1 to @vercel/nft@0.29.2

8.10.3

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.8.0

8.10.2

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.7.1

8.10.1

Patch Changes

  • Added dependency @vercel/nft@0.29.1
  • Add necessary runtime dependencies to nitro's external.inline config

8.10.0

Minor Changes

  • Remove explicit inline external for runtime helpers

Patch Changes

  • Updated dependency @vueuse/core@12.6.1 to @vueuse/core@12.7.0

8.9.2

Patch Changes

  • Deprecate key, packages, shippingDates, isEmpty, countWithoutSoldOutItems, removeItem, contains, findItem, products, generateBasketKey and mergeBaskets from useBasket.
    Required updates:
    • key:
      const { key } = useBasket()

// will become

const { data } = useBasket()
const key = computed(() => data.value.key)
    • packages:
      const { packages } = useBasket()

// will become

const { data } = useBasket()
const packages = computed(() => data.value.packages)
    • shippingDates:
      const { shippingDates } = useBasket()

// will become
import { getShippingDates } from '@scayle/storefront-nuxt'
const { data } = useBasket()
const shippingDates = computed(() => shippingDates(data.value.packages))
    • isEmpty:
      const { isEmpty } = useBasket()

// will become

const { count } = useBasket()
const isEmpty = computed(() => count.value === 0)
    • countWithoutSoldOutItems:
      const { countWithoutSoldOutItems } = useBasket()

// will become

import { countAvailableBasketItems } from '#storefront-basket'
const { items } = useBasket()
const isEmpty = computed(() => countAvailableBasketItems(items.value ?? []))
    • products:
      const { products } = useBasket()

// will become

import { findItem } from '#storefront-basket'
const { items } = useBasket()
const products = computed(() => items.value?.map((item) => item.product))
    • removeItem:
      const { removeItem, items } = useBasket()
removeItem({ variantId: items.value[0].variant.id })

// will become

const { removeItemByKey, items } = useBasket()
removeItemByKey(items.value[0].key)
    • contains:
      const { contains } = useBasket()
const isInBasket = contains({ variantId: 1 })

// will become

import { contains } from '#storefront-basket'
const { items } = useBasket()
const isInBasket = contains({ variantId: 1 }, items.value ?? [])
    • findItem:
      const { findItem } = useBasket()
const basketItem = findItem({ variantId: 1 })

// will become

import { findItem } from '#storefront-basket'
const { items } = useBasket()
const basketItem = findItem({ variantId: 1 }, items.value ?? [])
    • generateBasketKey:
      const { generateBasketKey } = useBasket()

// will become

import { generateBasketKey } from '@scayle/storefront-core/dist/utils/keys'
    • generateBasketKey:
      const { mergeBaskets } = useBasket()
mergeBaskets('oldKey', 'newKey')
// will become

const mergeBasket = useRpcCall('mergeBaskets')
mergeBaskets('oldKey', 'newKey')
  • Improve bootstrap performance by avoiding object merge and reflection

Dependencies

  • Updated dependency to @scayle/storefront-core@8.7.0

8.9.1

Patch Changes

  • Updated dependency @vueuse/core@12.5.0 to @vueuse/core@12.6.1

Dependencies

  • Updated dependency to @scayle/storefront-core@8.6.1

8.9.0

Minor Changes

  • Update ExistingItemHandling names due to update to newest @scayle/storefront-core version.

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.6.0

8.8.2

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.5.0

8.8.1

Patch Changes

  • Deprecate useSearchData in favor of useSearch within the @scayle/storefront-search package.

8.8.0

Minor Changes

  • Rpc Add check for the existence of the rpc directory, in order to prevent errors when trying import custom Rpc's.

8.7.2

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.4.0

8.7.1

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.3.2

8.7.0

Minor Changes

  • Introduce a flexible interface for registering custom RPC methods from other modules
    Currently, applications can configure rpcDir and rpcMethodNames in the module configuration to register custom RPC methods, however this does not extend to modules. This release adds a new module hook storefront:custom-rpc:extend which can be used to register custom RPC methods. By registering a callback to this hook, other modules can add custom RPC methods to the application.
    The hook functions similarly to rpcDir and rpcMethodNames. Hook registrants receive an array of custom RPC imports and can add their own. The import definition should include a source which defines the file to import the RPC methods from and a names array which controls the exports of this file which should be registered as RPC methods.
    rpc-methods.ts
    import type { RpcContext, RpcHandler } from '@scayle/storefront-nuxt'

export const foo: RpcHandler<string, number> = function testing(
  param: string,
  _: RpcContext,
) {
  return param.length
}

    module.ts
    function setup() {
  const resolver = createResolver(import.meta.url)

  nuxt.hook('storefront:custom-rpc:extend', (customRpcImports) => {
    customRpcImports.push({
      source: resolver.resolve('./rpc-methods.ts'),
      names: ['foo'],
    })
  })
}

    As part of this change, the RPCMethod types are automatically extended with all custom RPC methods. It is no longer necessary to extend RpcMethodsStorefront. This applies both for the rpcDir + rpcMethodNames strategy as well as the new hook-based implementation.

Patch Changes

  • RPC Improve warning about missing RPC method overrides
  • Improve error handling when bootstrapping fails due to a missing shop.

8.6.1

Patch Changes

  • Consider baseURL configuration when bootstrapping error pages. This ensures error pages have the correct currentShop.

8.6.0

Minor Changes

  • Basket Add support to update existing basket items to useBasket

8.5.4

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.3.1

8.5.3

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.3.0

8.5.2

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.2.2

8.5.1

Patch Changes

  • Updated dependency @vueuse/core@12.4.0 to @vueuse/core@12.5.0

Dependencies

  • Updated dependency to @scayle/storefront-core@8.2.1

8.5.0

Minor Changes

  • Performance Remove the 'autobinding' of the methods on the Cached instance. Instead the execute method only is bound when constructing the RpcContext. This simplifies the code and improves the performance of the bootstrap function. This change is internal to storefront-core and the API of RpcContext is unchanged.

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.2.0
  • Updated dependency to @scayle/h3-session@0.6.0

8.4.0

Minor Changes

  • Do not save empty sessions by default. This should significantly reduce the usage of the session database, especially in scenarios with many unique anonymous visitors.

Patch Changes

  • Use consola for config validation output to align with overall usage across Storefront and Nuxt.

8.3.4

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.1.5

8.3.3

Patch Changes

  • Updated dependency @vueuse/core@12.3.0 to @vueuse/core@12.4.0

8.3.2

Patch Changes

  • Removed dependency @nuxt/kit@^3.12.2
  • Fixed misspelling of interface BaskteItemDisplayDataItem to BasketItemDisplayDataItem

Dependencies

  • Updated dependency to @scayle/storefront-core@8.1.4

8.3.1

Patch Changes

Dependencies

  • Updated dependency to @scayle/h3-session@0.5.1

8.3.0

Minor Changes

  • Complete removal of shop-prefixed API endpoints. In version 8.0.0, support for shop-prefixed API endpoints was dropped. However, not all the code was removed until now.

8.2.1

Patch Changes

  • Updated dependency @vueuse/core@12.0.0 to @vueuse/core@12.3.0

Dependencies

  • Updated dependency to @scayle/unstorage-compression-driver@0.2.3
  • Updated dependency to @scayle/storefront-core@8.1.3

8.2.0

Minor Changes

  • storefront-nuxt now includes experimental support for OpenTelemetry spans covering the bootstrapping and redirects middlewares. This aims to provide better insights into their performance impact. Please note that this is an experimental feature and its implementation and API might change in future releases.

Patch Changes

  • Updated dependency @scayle/h3-session@^0.5.0 to @scayle/h3-session@0.5.0

8.1.6

Patch Changes

Dependencies

  • Updated dependency to @scayle/h3-session@0.5.0
  • Updated dependency to @scayle/unstorage-compression-driver@0.2.2

8.1.5

Patch Changes

  • Updated dependency @scayle/h3-session@^0.4.1 to @scayle/h3-session@^0.4.2
  • Updated to @scayle/h3-session@0.4.2

8.1.4

Patch Changes

  • We've updated to nuxt@3.14

8.1.3

Patch Changes

Dependencies

  • Updated dependency to @scayle/unstorage-compression-driver@0.2.0

8.1.2

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.1.2

8.1.1

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.1.1

8.1.0

Minor Changes

  • Breaking: useBasket no longer accepts orderCustomData in its parameters. This functionality was unintentionally added and was never officially supported. Now it has been removed.

8.0.1

Patch Changes

Dependencies

  • Updated dependency to @scayle/storefront-core@8.1.0

8.0.0

Major Changes

  • [💥 BREAKING] Removed deprecated transformLegacyConfig function in favor of the new unified storefront.storage configuration system. Legacy configuration options provider and redis configuration are no longer supported and have been deprecated since Storefront Boilerplate v1.0.0-rc.05.
    You'll need to migrate your existing storage settings to the new storefront.storage format. Check the SCAYLE Resource Center for more details.
    • No Longer Supported: Legacy Storage Setup in (nuxt.config.ts):
      export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    // ...
    storefront: {
      // ...
      redis: {
        host: 'localhost',
        port: 6379,
        prefix: '',
        user: '',
        password: '',
        sslTransit: false,
      },
      // ...
      session: {
        // ...
        provider: 'redis',
      },
    },
    // ...
  },
  // ...
})
    • Current Unified Storage Approach (nuxt.config.ts):
      export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    // ...
    storefront: {
      // ...
      storage: {
        cache: {
          driver: 'redis',
          host: 'localhost',
          port: 6379,
        },
        session: {
          driver: 'redis',
          host: 'localhost',
          port: 6379,
        },
        // ...
      },
      // ...
    },
    // ...
  },
  // ...
})
  • [💥 BREAKING] The composable useSearch has been replaced by useStorefrontSearch, consolidating and transitioning to SCAYLE Search v2.
    • Previous Usage of useSearch:
      const { search, data } = useSearch({ params: { with: ...}, key: 'search' })

search({term: 'searchTerm', slug: 'slug', productLimit: 10})
    • Current Usage of useStorefrontSearch:
      const searchTerm = ref()

const { data, resolveSearch } = useStorefrontSearch(searchTerm, { categoryId: ..., with: { ... } }, 'search')
//data contains search suggestions

resolveSearch()
//data contains search results
  • [💥 BREAKING] The previous use of the useFacet composable for category-related product listings was overly complex and difficult to customize. To simplify things, dedicated composables are being introduced:
    • useProductsByCategory: Replaces useFacet for fetching products within a specific category.
    • useFilters or useProductListFilters: Provide focused filter management capabilities.
    • Previous Usage of useFacet:
      const {products, category, filters, ...} = useFacet()
    • Current Usage of dedicated Category-Specific Composables:
      const { data: category } = useCategoryById({
  params: {
    id,
    children: 0,
    properties: { withName: ['sale'] },
  },
}, 'current-category-id')

const {
  products,
  pagination,
  fetching,
  totalProductsCount,
  paginationOffset,
} = useProductsByCategory(currentCategoryId, route)

const { availableFilters } = useFilters({
  ...
});
  • [💥 BREAKING] We've renamed the useNavigationTree composable to useNavigationTreeById for better clarity. Its functionality, parameters and return values stay identical.
  • [💥 BREAKING] The composable useQueryFilterState has been superseded by the useFilter and useAppliedFilters (part of @scayle/storefront-product-listing) composables.
    • Previous Usage of useQueryFilterState:
      const { activeFilters, applyFilters, resetFilterUrl, productConditions } =
  useQueryFilterState()

applyFilters({ brand: 23, sale: true, maxPrice: 100, minPrice: 0 })
    • Current Usage of useFilter and useAppliedFilters:
      const {
  applyPriceFilter,
  applyBooleanFilter,
  applyAttributeFilter,
  resetFilters,
  resetPriceFilter,
  resetFilter,
} = useFilter()

applyPriceFilter([0, 100])
applyBooleanFilter('sale', true)
applyAttributeFilter('brand', 23)

const route = useRoute()
const {
  appliedFilter,
  appliedFiltersCount,
  appliedAttributeValues,
  appliedBooleanValues,
  areFiltersApplied,
} = useAppliedFilters(route)
  • [💥 BREAKING] The getBadgeLabel helper function has been removed, giving you more control over badge label display.
    • Note: This change doesn't affect projects using SCAYLE Storefront Boilerplate v1.0 or later.
    • For applications based on older versions or using getBadgeLabel, you can refer to the previous implementation below:
      const BadgeLabel = {
  NEW: 'new',
  SOLD_OUT: 'sold_out',
  ONLINE_EXCLUSIVE: 'online_exclusive',
  SUSTAINABLE: 'sustainable',
  PREMIUM: 'premium',
  DEFAULT: '',
} as const

type BadgeLabelParamsKeys =
  | 'isNew'
  | 'isSoldOut'
  | 'isOnlineOnly'
  | 'isSustainable'
  | 'isPremium'
type BadgeLabelParams = Partial<Record<BadgeLabelParamsKeys, boolean>>

const getBadgeLabel = (params: BadgeLabelParams = {}): string => {
  if (!params) {
    return BadgeLabel.DEFAULT
  }
  const { isNew, isSoldOut, isOnlineOnly, isSustainable, isPremium } =
    params

  if (isNew) {
    return BadgeLabel.NEW
  } else if (isSoldOut) {
    return BadgeLabel.SOLD_OUT
  } else if (isOnlineOnly) {
    return BadgeLabel.ONLINE_EXCLUSIVE
  } else if (isSustainable) {
    return BadgeLabel.SUSTAINABLE
  } else if (isPremium) {
    return BadgeLabel.PREMIUM
  } else {
    return BadgeLabel.DEFAULT
  }
}
  • [💥 BREAKING] The store option in the module configuration has been removed. œscayle/storefront-nuxt@7.84.0 introduced the shops option as a replacement, but maintained backward compatibility with the store option. Going forward, configuring shops must be done using the shops keyword.
    • For more information, please refer to the documentation.
    • NOTE: These changes might impact your environment variables used for deployments. Please check your infrastructure and deployment setup and adapt accordingly!
    • Previous Store Configuration in nuxt.config.ts:
      export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    // ...
    storefront: {
      // ...
      store: {
        // ...
      },
      // ...
    },
    // ...
  },
  // ...
})
    • Previous Environment Variables for Store Configuration:
      NUXT_STOREFRONT_STORE_{UNIQUE_IDENTIFIER}_CHECKOUT_USER=''
NUXT_STOREFRONT_STORE_{UNIQUE_IDENTIFIER}_CHECKOUT_TOKEN=''
NUXT_STOREFRONT_STORE_{UNIQUE_IDENTIFIER}_CHECKOUT_SECRET=''
NUXT_STOREFRONT_STORE_{UNIQUE_IDENTIFIER}_CHECKOUT_HOST=''
    • Current Shops Configuration in nuxt.config.ts:
      export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    // ...
    storefront: {
      // ...
      shops: {
        // ...
      },
      // ...
    },
    // ...
  },
  // ...
})
    • Current Environment Variables for Shops Configuration:
      NUXT_STOREFRONT_SHOPS_{UNIQUE_IDENTIFIER}_CHECKOUT_USER=''
NUXT_STOREFRONT_SHOPS_{UNIQUE_IDENTIFIER}_CHECKOUT_TOKEN=''
NUXT_STOREFRONT_SHOPS_{UNIQUE_IDENTIFIER}_CHECKOUT_SECRET=''
NUXT_STOREFRONT_SHOPS_{UNIQUE_IDENTIFIER}_CHECKOUT_HOST=''
  • [💥 BREAKING] To better align with the current Nuxt 3 architecture make key handling more explicit, we've simplified how you interact with the key parameter in RPC composables from version 8 onwards. Instead of placing the key within the composable's options object, you'll now provide it as the second argument when calling the composable.
    • Previous key as options parameter:
      useProduct({
  // ...
  key: 'productKey',
})
    • Current key as dedicated composables argument:
      useProduct(
  {
    // ...
  },
  'productKey',
)
  • [💥 BREAKING] Introducing a new feature flag storefront.legacy.enableSessionMigration to control the automatic migration of legacy session data, set to false by default. Starting with @scayle/storefront-nuxt@7.68.0 Storefront uses unique session cookie names for each shop, simplifying implementation and enhancing stability. Instead of relying on the Path attribute, each shop receives a distinct cookie name. This change is internal and should not require code modifications.
    • Cookie format before @scayle/storefront-nuxt@7.68.0:
      • Set-Cookie: $session=s:fa3746f9-88c8-4065-a6c9-0c7bee473dd8.pSoaN6Q7iFHHyWKE7s9gQAqdDzGb9fS8a478P7PHLxw; Path=/de
    • Cookie format after @scayle/storefront-nuxt@7.68.0:
      • Set-Cookie: $session-1001=s:fa3746f9-88c8-4065-a6c9-0c7bee473dd8.pSoaN6Q7iFHHyWKE7s9gQAqdDzGb9fS8a478P7PHLxw; Path=/
    • NOTE: Upgrading directly to this version from a version prior to @scayle/storefront-nuxt@7.68.0 without enabling the storefront.legacy.enableSessionMigration feature flag will lead to loss of user sessions. Ensure version @scayle/storefront-nuxt@7.68.0 or higher has been deployed in production for a period exceeding the configured session TTL before upgrading to this version. This ensures all legacy sessions have been migrated. Consult the updated documentation for details on the cookie format changes and migration procedures.
  • [💥 BREAKING] We've optimized the way Identity Provider (IDP) logins are handled. Instead of using the handleIDPLoginCallback RPC method, which has been removed, from the useIDP composable, you'll now use the loginIDP function, which has been moved to the useAuthentication composable. This change consolidates IDP login functionality within useAuthentication for a more unified approach.
    • Previous Usage of handleIDPLoginCallback:
      const { handleIDPLoginCallback } = await useIDP()

watch(
  () => route.query,
  async (query) => {
    if (query.code && isString(query.code)) {
      await handleIDPLoginCallback(query.code)
    }
  },
  { immediate: true },
)
    • Current Usage of loginIDP:
      const { loginIDP } = useAuthentication('login')

onMounted(async () => {
  await loginIDP(props.code)
})
  • [🧹 NON-BREAKING] Addressed various type resolution errors that were present when using the @scayle/storefront-nuxt package with different Node.js versions and module systems. These errors manifested as internal resolution errors or ESM dynamic import only warnings. With this fix, the package now more consistently resolves types correctly across Node.js 16 (CJS and ESM), and bundlers, ensuring a smoother developer experience.
  • [💥 BREAKING] The useBasket composable now gracefully handles cases where adding items to the basket results in a smaller quantity being added than originally requested by checking against AddToBasketFailureKind.
  • [💥 BREAKING] The deprecated autoFetch option of useRpc has been removed in favor of the immediate option. This also applies to all data fetching composables provided by @scayle/storefront-nuxt.
    • Previous useRpc with autoFetch:
      useRpc('rpcMethod', key, params, { autoFetch: true })

useUser({ autoFetch: true })
    • Current useRpc with immediate:
      useRpc('rpcMethod', key, params, { immediate: true })

useUser({ immediate: true })
  • [💥 BREAKING] The attribute isCmsPreview has been removed from RpcContext.
  • [💥 BREAKING] The attribute storeCampaignKeyword has been removed from RpcContext.
    • The campaignKey is now automatically determined by fetching campaign data through the Storefront API client by retrieving a list of all campaigns from the API. It then narrows down the list by filtering for campaigns that are still active, ensuring any returned campaign is currently running. These active campaigns are then sorted by their start date, ensuring chronological order. Finally, it iterates through the sorted campaigns to find the first one that is currently active, returning its key as an identifier. If no active campaign is found or an error occurs, it returns nothing.
    • The storeCampaignKeyword is also no longer used to determine the active campaign key. The functionality to run only certain campaigns for specific countries is now supported through the SCAYLE Panel out of the box.
  • [💥 BREAKING] The composable useStorefrontSearch is now consistent with useRpc return values. The fetching boolean is replaced by status with states idle, pending, error or success.
    • Previous useStorefrontSearch returning fetching:
      const {
  data,
  resolveSearch,
  getSearchSuggestions,
  fetching,
  ...searchData
} = useStorefrontSearch(searchQuery, { key })

fetching.value // true or false
    • Current useStorefrontSearch returning status:
      const { data, resolveSearch, getSearchSuggestions, status, ...searchData } =
  useStorefrontSearch(searchQuery, {}, key)

status.value // 'idle', 'pending', 'error' or 'success'
  • [💥 BREAKING] We've simplified composable caching and clarified the control you have over shared state behavior. The configuration option disableDefaultGetCachedDataOverride has been replaced with legacy.enableDefaultGetCachedDataOverride, and its logic has been reversed. Now, when legacy.enableDefaultGetCachedDataOverride is not set or set to false, the default behavior maintains the shared state functionality of useRpc, where multiple calls with the same key use the same cached data. Setting the option to true bypasses this shared caching, providing data isolation between calls. To maintain your existing caching behavior, simply change the value of disableDefaultGetCachedDataOverride to its opposite in your nuxt.config.ts file.
    Old config
    • Previous disableDefaultGetCachedDataOverride in nuxt.config.ts:
      export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    // ...
    public: {
      // ...
      storefront: {
        // ...
        disableDefaultGetCachedDataOverride: false,
      },
      // ...
    },
    // ...
  },
  // ...
})
    • Current enableDefaultGetCachedDataOverridein nuxt.config.ts:
      export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    // ...
    public: {
      // ...
      storefront: {
        // ...
        legacy: {
          // ...
          enableDefaultGetCachedDataOverride: true,
        },
        // ...
      },
      // ...
    },
    // ...
  },
  // ...
})
  • [💥 BREAKING] The useRpc composable has been updated to provide a more modern and robust data fetching experience, aligning its interface with the current and underlying Nuxt 3 useAsyncData.. The separate fetch function has been replaced with a single, intuitive refresh function that can be used to refresh the data returned by the handler function. Additionally, the boolean pending flag has been superseded by a more informative status return value, offering greater insight into the fetching lifecycle with possible states: idle, pending, success, and error. These changes enhance the developer experience and provide greater clarity and control over data fetching operations within components.
    • NOTE: This update not only impacts the useRpc composable directly, but also extends to other RPC composables relying on it, such as useProducts and useCategories!
  • [💥 BREAKING] Removed special handling for BAPIError and BaseError thrown in RPC methods. These custom Error classes were previously used in RPC methods to allow customizing the status code and message of errors. However, they have been deprecated since January 2024 when the preferred approach was changed to return the native Response object. This provides performance benefits by limiting the transformations necessary in the response pipeline, and aligns @scayle/storefront-nuxt with web standards. It also simplifies the implementation and means @scayle/storefront-nuxt no longer needs to be aware of third-party libraries used and their possible errors. In this release, the legacy special handling for BAPIError and BaseError has been removed. Now they will be treated like any other Error. If they are thrown uncaught during the execution of an RPC method, a 500 status code will be used in the response. They have also been removed from @scayle/storefront-nuxt. For most users, this change will have no impact as the core RPC methods have been updated for some time. However, if you have custom RPC methods you should review their implementation. In order to have an RPC method use a specific status code, it should return a Response object.
    • Previous Usage with BaseError:
      function myCustomRpc() {
  // ...

  throw new BaseError(404)
}
    • Current Usage with Response object and status code:
      function myCustomRpc() {
  // ...

  return new Response(null, { status: 404 })
}
  • [💥 BREAKING] We've updated how API routes are structured in multi-shop environments using path-based selection (path or path_except_default). Instead of being nested under each shop's specific path, all API routes will now be mounted globally under a single path, which defaults to /api. This means the option to customize the apiBasePath on a per-shop basis has been removed. This change promotes consistency and makes API route management more straightforward.
  • [💥 BREAKING] The methods getBasket, removeItemFromBasket, addItemsToBasket, and addItemToBasket have been updated. Instead of returning the basket object directly, the basket will now be accessible as a property within the response body. Furthermore, errors occurring duringaddItemToBasket and addItemsToBasket will from now on return HTTP 400. The error kind can be identified by checking the error property of the response.

Patch Changes

  • Updated dependency @vueuse/core@11.3.0 to @vueuse/core@12.0.0Dependencies
  • Updated dependency to @scayle/storefront-core@8.0.0
Previous
@scayle/storefront-core (v7)
Next up
@scayle/storefront-nuxt (v7)
Provide Feedback