docs
  1. SCAYLE Resource Center
  2. Support and Resources
  3. Changelogs
  4. Storefront Boilerplate

Storefront Boilerplate

Changelogs of Storefront Boilerplate

@scayle/storefront-boilerplate-nuxt -> Changes for Nuxt 3-based Storefront Boilerplate

1.2.0

🔥 Highlights

🛍️ New Product Listing Page

This release not only introduces a fresh look and feel of the Product Listing Page but also brings enhanced functionalities to improve the user experience:

  • Advanced filtering: Improved filters to help users easily find the products they are looking for by dynamically updating filters and displaying only relevant filter options.
  • Intuitive category navigation: Navigate seamlessly between nested and root categories.
  • Enhanced badges: Badges highlight features, novelty, or other product attributes. This includes the "New In" badge for newly added products, custom badges for specific attributes (e.g., sustainability), and the "Already in Basket" badge to help users avoid duplicate selections.

Moreover, the new page is built with a simple and easily customizable codebase, ensuring that it can be tailored to meet your specific needs.

To learn more about the main components, data fetching and filtering logic, and customization opportunities, please refer to our Storefront Guide.

🔀 Multiple paths per shop

We now have the ability to configure multiple URL paths for single shops (per shopId), where before could only handle one URL path per single shop. As example, this allows the same shop to be reachable under multiple different paths like your-shop.com/en-gb/, your-shop.com/en-us/, your-shop.com/en-au/. This reduces the need for excessive configurations, while simultaneously enhancing performance.

The path property in the shop config can now be defined as an array of strings. If this is the case, multiple path prefixes will point to the same shop. For example, with the config { path: ['en', 'en-US'], shopId: 1001 } both example.com/en and example.com/en-US will use shop 1001. Because it is the same shop, /en and /en-US will have the same locale and share user sessions, baskets and wishlists. The first path in the array will be considered the default path and used for API calls.

🔭 Dedicated NPM package for OpenTelemetry integration

A while back we introduced support for OpenTelemetry. OpenTelemetry is an open-source standard for instrumenting your applications, providing valuable insights into performance and behavior. It allows you to collect, process, and export telemetry data like metrics, logs, and traces to various backend platforms, enabling better monitoring and troubleshooting. As part of our commitment to contributing more to the open-source community, we've published the previous integration as a dedicated NPM package, making it widely accessible and improving its capabilities.

🚀 Major Changes

  • Use the newly introduced useRpcCall helper composable (More information can be found in the SCAYLE Resource Center)
  • Replace the internal OpenTelemetry module with the @scayle/nuxt-opentelemetry package
  • Re-enable caching for Vercel deployments
  • Retrieve access token for subscription-overview web component via getAccessToken RPC
  • Disabled imports.autoImports in nuxt.config.ts. All required composables, utils and constants now need to be explicitly imported.
  • Added a hook within nuxt.config.ts to extend the vite client build configuration and allow for improved manual chunking of storyblok, contentful and axios dependencies. This results in smaller client chunks below 500kb.

💅 Minor Changes

  • Migrate configuration key bapi to sapi within nuxt.config.ts
  • Renamed buildtime environment variable DISABLE_PAGE_CACHE to PAGE_CACHE_DISABLED
  • Renamed buildtime environment variable ENABLE_CONFIG_LOG_BUILD to CONFIG_LOG_BUILD_ENABLED
  • Renamed buildtime environment variable ENABLE_CONFIG_LOG_PRETTIER to CONFIG_LOG_PRETTIER_ENABLED
  • Renamed buildtime environment variable ENABLE_CONFIG_LOG_RUNTIME to CONFIG_LOG_RUNTIME_ENABLED
  • Renamed buildtime environment variable ENABLE_NUXT_DEBUGGING to NUXT_DEBUGGING_ENABLED
  • Show IDP login buttons in RegisterForm.vue
  • Support toggling shop selection modes through a single const SHOP_SELECTOR_MODE in the nuxt config
  • Switch to ModuleBaseOptions.shops and ShopConfig.shopCampaignKeyword

🩹 Patch Changes

  • Add example multi-path shop
  • Add missing diverse option to UserPersonalInfoForm.vue
  • Allow PromotionList.vue to scroll to make all promotions accessible on smaller desktop sizes
  • Disable global components in local ui module
  • Fixed "More"-button of mobile search results now leads to search page
  • Fixed disabled sold out sizes when adding wishlist items to the cart
  • Hide UpdatePasswordForm.vue for IDP user within Account Overview page
  • Remove idp from AdditionalShopConfig, as it is available in the base storefront configuration
  • Remove required rule on birthDate field in UserPersonalInfoForm.vue
  • Remove unnecessary await when using composables
  • Use integrated nuxi typecheck instead of custom vue-tsc typecheck script command
  • Use unique composable keys for useOrderDetails and within usePromotionGifts
  • Wait for user input completion before displaying any errors in the login form

🏡 Dependency Updates

🏘️ devDependencies

🏠 dependencies

1.1.0

🔥 Highlights

👓 Live Preview for CMS provider

We have integrated proper Live Preview support for Storyblok and Contentful. This allows to edit the CMS content elements within the respective CMS provider web interface and show the changes immediately in the context of the Storefront application.

🚚 Introduced usage of explicit imports for Vue components

To align more with the JavaScript and TypeScript developer ecosystem, Storefront Boilerplate is slowly moving away on relying on the Nuxt "auto import" feature for dependencies and source code. With the next v1.2 release we will deepen the commitment and will disable the option imports.autoImport within the nuxt.config.ts.

As a first step we added explicit imports to all Vue components. As defineProps, defineEmits and withDefaults are Vue compiler macros, they do not need to be imported explicitly and will trigger a compiler warning if done so.

🚀 Major Changes

  • Enable live preview for CMS provider storyblok
  • Enable live preview for CMS provider contentful
  • Introduced local module storefront-eslint-auto-explicit-import to extend eslint with explicit import injection
  • Introduced usage of explicit imports for composables, utilities and framework-specific functionalities in Vue components
  • Fixed errors in async composable usage
    • This change enables all rules in @scayle/eslint-plugin-vue-composable and ensures that all composables in the application conform to best practices regarding asynchronous usage. These changes may fix various bugs relating to reactivity issues. As part of this change, some composables are now entirely synchronous.

💅 Minor Changes

  • Introducing eslint-plugin-vuejs-accessibility for basic accessibility linting of Vue components
  • Renamed prop until to timeUntil for SFCountdown and PromotionCountdown components to avoid name collision with until from @vueuse/core
  • Replace radash-nuxt module with radash as dependency and use explicit imports instead
  • Share PDP state with useProductDetailsBasketActions and ProductBasketAndWishlistActions.vue
  • Updated mobile sidebar navigation to support expanding and collapsing top-level categories

🩹 Patch Changes

  • Ensure authGuard.global.ts has user information during SSR
  • Ensure the OSP only does the user refresh on client side
  • Fixed SFLink in Breadcrumbs
  • Fixed missing error alert on failed login
  • Fixed mobile basket layout when there are products with long titles
  • Fixed Regenerate the itemGroup.id each time an itemGroup is added to the basket
  • Fixed selected gender being ignored during registration
  • Prevent old user data from being applied to the state after user.forceRefresh() as happened on the OSP

🏡 Dependency Updates

🏘️ devDependencies

🏠 dependencies

1.0.0

🔥 Highlights

🧱 Introducing storefront-ui local module

We're introducing the first step towards more reusable components, the local storefront-ui module. It contains most common and reused UI component from across the SCAYLE Storefront Boilerplate. The first iteration consists of most components mostly formerly located within the ./components/ui directory.

To foster an increased separation of concerns, the local storefront-ui module also contains composables and utilities that are closely related to the common and reused UI component. Moreover, all components within the the local storefront-ui module are now prefixed with SF (configurable via nuxt.config) when using the components within the SCAYLE Storefront Boilerplate.

📡 Create OpenTelemetry spans for Nitro requests

In addition to initializing the OpenTelemetry SDK, the OpenTelemetry module now instruments incoming requests to the Nitro server. The spans include the matched route name, HTTP method and other request metadata.

Minor Changes

  • Implemented an early return in authGuard.global.ts for API routes to prevent middleware misuse.
  • Switched from passing plain basket-id and campaign-key to passing JWT, containing basket-id and campaign-key as payload, to scayle-checkout

Patch Changes

  • Updated badges to new arguments to use headlineParts as primary source and fallback to basketLabel if headlineParts are not defined.
  • Fixed ProductBadge translation warnings
  • Fixed banner price calculation for promotion aggregation
  • Fixed contentful Image.vue and contentful ImageText.vue. Only show image when an src link is available. Both image components now behave similar to the storyblok implementation.
  • Fixed lost reactivity of lastLoggedInUser from useLastLoggedInUser()
  • Fixed filter reset all button when price is changed
  • Fixed new icon on free product
  • Added promotion price overlay on PDP
  • Improved countdown element style across the basket page and PDP page
  • Fixed badges position on mobile
  • Added ability to show and hide promotions
  • Fixed badge styling in product card
  • Switched from ay-checkout to scayle-checkout web component

🏡 Dependency Updates

🏘️ devDependencies

🏠 dependencies

1.0.0-rc.10

🔥 Highlights

📡 HTTP Request tracing with OpenTelemetry

The Storefront Boilerplate now includes a built-in integration with OpenTelemetry. To enable the feature, set the environment variable OTEL_ENABLED to true. This will inject additional code into your application's entrypoint which will initialize the OpenTelemetry SDK. Automatic instrumentations as well as instrumentations from storefront-nuxt will be captured and exported via the OTLP protocol.

Currently, Vercel and Node are the only supported platforms for the OpenTelemetry integration. Setting OTEL_ENABLED to true when building for other platforms will have no effect.

You should also set the runtime variable OTEL_SERVICE_NAME to configure the service name used in traces. e.g. OTEL_SERVICE_NAME=storefront-boilerplate Note: this variable is used directly by the OpenTelemetry libraries and is not available in the Nuxt runtimeConfiguration.

🛍️ Improved UX / UI for Promotions

We've redesigned the promotion badges displayed on the Product Listing Page, the Wishlist, and the Basket page. The Badge text originates from Storefront APIs customData, with headlineParts in bold and badgeLabel in regular font. We now implement ellipsis for long badgeLabel texts.

Please Note: Due to space constraints, the basket page shows only badgeLabel; if it is missing, it will fallback to headlineParts.

We have also improved the user experience on the Product Detail page with free gift options. When the condition of a product, that has a free gift option configured, are met, a free gift option will be displayed on the page with a grayed-out overlay. Once conditions are met, a free gift option will be enabled and the user can add a free gift product to the cart.

🔍 Improved linting setup with ESLint v9

The Storefront Boilerplate now includes an improved linting setup. Relying on the new ESLint 9 and @nuxt/eslint module to provide more project-aware linting. To make configuration more easier the ESLint config has been updated to the new flat config format, allowing for simpler customization and overriding of rules. Additionally the default Storefront ESLint config @scayle/eslint-config-storefront v4 is now using a subset of opinionated rules of @antfu/eslint-config.

Minor Changes

  • Added subscription cancellation page to the subscription module
  • New Price adoptions for basket page for promotions
  • Increased eslint no-composable-after-await rule error level and fix the issues
  • Fix caching for domain-based setups where we now consider the host for the SSR cache key.
    Additionally, we now set an integrity value that invalidates the SSR cache automatically when a new build is deployed. You can control the value through the VERSION environment variable, which should be set to your current Git short commit sha.
    Either you can set this normally during your build process
    VERSION=147f33d yarn build

    or when using the docker image
    docker build --build-arg VERSION=${GIT_SHORT_COMMIT_SHA} -f docker/node/Dockerfile .

Patch Changes

  • Removed an unnecessary CSS property which caused a visual bug on basket page
  • Resolved a bug that affected the fetching of combineWith products
  • Resolved the issue where the welcome login tab was displayed instead of the registration tab upon clicking the register link.
  • Implemented a new utility function to format addresses dynamically. The function adjusts the address format according to the countryCode

🏡 Dependency Updates

🏘️ devDependencies

🏠 dependencies

  • Added @opentelemetry/api": "1.8.0
  • Added @opentelemetry/auto-instrumentations-node": "0.45.0
  • Added @opentelemetry/exporter-trace-otlp-proto": "0.51.0
  • Added @opentelemetry/instrumentation": "0.51.0
  • Added @opentelemetry/resources": "1.24.0
  • Added @opentelemetry/sdk-node": "0.51.0
  • Added @opentelemetry/semantic-conventions": "1.24.0
  • Added @vercel/otel": "1.8.2
  • Added knitwork": "1.1.0
  • Updated to @scayle/omnichannel-nuxt": "3.0.0 to be compatible with latest Omnichannel API
  • Updated to @scayle/storefront-nuxt": "7.66.4
  • Updated to @storyblok/nuxt": "6.0.10
  • Updated to @storyblok/vue": "8.0.8
  • Updated to @tailwindcss/typography": "0.5.13
  • Updated to cf-content-types-generator": "2.15.1
  • Updated to contentful": "10.9.0
  • Updated to storyblok-js-client": "6.7.3

v1.0.0-rc.9

🔥 Highlights

📖 Introducing Contentful as the new CMS Provider for StorefrontCMS

We've added a Contentful integration as an alternative to using Storyblok as a CMS provider. This allows you to fetch data from Contentful and use it in your SFB. To use this feature, you need to provide your Contentful space ID and access token in the .env file. You can find these values in your Contentful account settings.

NUXT_PUBLIC_CMS_ACCESS_TOKEN=your-access-token
NUXT_PUBLIC_CMS_SPACE=your-space-id

Once you have added these values, you can use Contentful by selecting the contentful option in the cms.provider field of the nuxt.config.ts file.

export default defineNuxtConfig({
  // ...
  cms: {
    provider: 'contentful',
  },
  // ...
})

Now you have access to useCMS composables and fetch data from Contentful in your SFB. useCMS accepts a string as an argument that will be used for caching purposes and returns a fetchBySlug function that you can use to fetch data by slug. fetchBySlug is a wrapper around Nuxt's useAsyncData and accepts a generic type that you can use to define the shape of the data you are fetching. Here is an example of how you can use this feature:

import type { TypeListingPageSkeleton } from '~/modules/cms/providers/contentful/types/contentful-defs'

const props = defineProps<{
  selectedCategory: number | undefined
}>()

const route = useRoute()

if (!props.selectedCategory) {
  console.log('No category selected')
}
const { fetchBySlug } = useCMS(`ListingPage-${route.path}`)

const { data } = await fetchBySlug<TypeListingPageSkeleton>(
  `categories/${props.selectedCategory}`,
)

🔎 Introducing Search Engine v2

We've implemented and replaced the whole search flow based on the new Storefront API's Search Engine v2. This includes:

  • Overall UI and UX adaptations (header search input, suggestions dropdown, applicable filter indicator, search within the mobile sidebar, etc.)
  • Category suggestions that can have filters applied
  • Product suggestions that are resolved only by entering the exact ID
  • Refined flow when resolving the search term
  • Search page usage only as a fallback

Added Subscription Add-on

We've implemented the Subscription Add-ons as a local module. The subscription feature enables customers to subscribe to a specific variant of a product, which is then delivered at regular intervals on a chosen day. This convenience allows customers to make regular purchases effortlessly.

🚀 Major Changes

  • Fixed an issue where an empty IDP component was shown when no IDPs were enabled. The useIDP composable now returns an empty object when the IDP integration is not enabled. Ensure that the user is redirected to CO when entering the sign-in page with a redirectUrl parameter. This is now possible with the @scayle/storefront-nuxt@{version}. We refactored the IDP callback to have its page to ensure we only call the IDP login RPC once.
  • Improved Storyblok integration through the SCAYLE Panel Add-on and plugin
  • Disabled caching for Vercel Deployments Vercel's CDN Caching works slightly differently from the default Nuxt Page caching, which is currently incompatible with our Session handling. To disable all caching for Vercel Deployments, remove any routeRules you have configured in your nuxt.config.ts.
  • Added ability to scroll to anchor links on the same page. The Paragraph component now supports an anchor prop that will be used to create an anchor target for that paragraph. If you have a Table of Contents and want to link to a specific paragraph, you can use the create links function on any text in your Content to create a link to it. When the user clicks on the link, he will scroll to the paragraph on the page. We also introduced a new component, NestedParagraph, that allows adding nested paragraphs, for example, for ordered lists.

💅 Minor Changes

  • Tweaked account index page to be visually consistent with other account page layouts
  • Introduced a new feature for logging both build and runtime configurations Configuration logging can now be toggled on or off using the ENABLE_CONFIG_LOG_BUILD and ENABLE_CONFIG_LOG_RUNTIME environment variables.
  • Added @scayle/eslint-plugin-vue-composable This plugin includes three rules @scayle/vue-composable/no-composable-after-await, @scayle/vue-composable/no-lifecycle-after-await, @scayle/vue-composable/no-watch-after-await which catches common errors in composables. You can read more about the plugin here.
  • The improved user experience of the time box element within the Promotion Banner. Adds a clear understanding of the time left for the promotion to end by providing indicators of the time unit in the time box element for countdowns. The format of the time box element is changed to be more user-friendly with (D : H : M) format, or (H : M : S) format if the promotion lasts less than 24H.

Patch Changes

  • Modified paddings of PromotionHurryToSaveBanners to have visual consistency with PromotionItemContent
  • Fixed a German translation issue for "save_your_free_gift"
  • Fixed promotion automatic discount price on PDP
  • Removed full capitalization of PromotionHurryToSaveBanner label
  • Handle possible undefined results from useRpc calls
  • Add store address, phone, and open status to the map marker card
  • Fixed StoreLocator map covering navigation flyout
  • Fixed a z-index issue with the ToastContainer so that notifications are not partially displayed underneath the Promotion Banner
  • Adds missing Promotion Banner Link to Promotion Category on mobile view
  • Removed dummy non-functional shipment detail link from OrderStatusBar
  • An error has been fixed where an attempt was made to access the "document" object during server-side rendering, resulting in an inaccessible Order Success Page (OSP).
  • Added translatable string 'pdp.no_product_information_provided' for ProductDescription and ProductCompositionAndCare components instead of static string

🏡 Dependency Updates

🏘️ devDependencies

🏠 dependencies

1.0.0-rc.08

This release focuses on stabilization and modularization, to improve the technical foundation and developer experience.

🔥 Highlights

✨ Update to Nuxt 3.10.3 and Vue 3.4.21

Storefront Boilerplate now runs on both the latest Nuxt v3.10.3 and Vue v3.4.21 and benefits from a multitude of improvements. To get more details about all the changes see the Official Nuxt 3.10 Announcement Blog and the Official Vue 3.4.21 Changelogs.

📍 SCAYLE Omnichannel Add-on for Storefront

Storefront now supports the SCAYLE Omnichannel Add-on, which includes the StoreLocator page and StoreAvailability within the Product Detail Page.

🔭 Additional Tracking Improvements

The included tracking implementation has been refactored and received various improvements to increase the tracking data quality, as well as tracking data reliability.

🚀 Major Changes

  • BREAKING: Refactored default sameSite cookie settings from none to lax in config/storefront.ts
  • Added StoreLocator page based on Google Maps and SCAYLE Omnichannel
  • Added StoreAvailability to Product Detail Page using SCAYLE Omnichannel
  • Added patch-packages for managing patches to third-party packages. See README.md or the patches/ directory for an up-to-date listing of currently applied patches.
    • Patched unstorage so the VercelKV driver is not logged as undefined
  • Removed auth config in composables/useAuthentication.ts and useRuntimeConfig().public.storefront.auth field in config/storefront.ts
  • Changed public runtimeConfig type to ModulePublicRuntimeConfig

💅 Minor Changes

  • Fixed caching behaviour for account area via routeRules in nuxt.config.ts
  • Fixed wishlist toggle if wishlist data is being toggled and fetched in components/product/WishlistToggle.vue
  • Refactored error message handling during local development mode to show actual error with stack trace
  • Fixed product detail page and product listing page (category page) behaviour if basket data is undefined
  • Fixed Storyblok CMS data handling in pages/s/[slug].vue
  • Fixed Storyblok CMS components handling in pages/c/[slug].vue
  • Renamed categoryNotFound to foundCategoryByPath in pages/[...category].vue
  • Fixed error handling for non-existing category slug by throwing a 404 error and removed error handling from layouts/defaults.vue
  • Fixed redirection from the error page to the homepage
  • Converted routeChangeTrackingObserver to the route middleware and added delayed execution
  • Fixed redirection behaviour on login from checkout, as it will now redirect after login back to checkout
  • Used onNuxtReady instead of tryOnMounted for composables/tracking/watchers/useCustomerDataChangeWatcher.ts and removed user force refresh
  • Fixed links on Storyblok grid tile, clickable image and banner link
    • modules/cms/providers/storyblok/components/BannerLink.vue
    • modules/cms/providers/storyblok/components/ClickableImage.vue
    • modules/cms/providers/storyblok/components/GridTile.vue
    • modules/cms/providers/storyblok/components/StoryblokLink.vue
  • Fixed category behaviour by using new composable useCategoryByPath to source category data in pages/[...category].vue
  • Fixed category behaviour by using stripShopLocaleFromPath and remove the computed value in pages/[...category].vue
  • Refactored root categories logic and implemented app navigation trees
    • Added composables/useCategory.ts
    • Added composables/useNavigationTreeItems.ts
    • Added composables/useRootCategories.ts
    • Refactored components/layout/footer/AppFooter.vue
    • Refactored components/layout/headers/AppHeader.vue
    • Refactored components/layout/headers/HeaderSubNavigation.vue
    • Refactored components/layout/navigation/MobileSidebar.vue
    • Refactored composables/useProductList.ts
    • Refactored pages/[...category].vue
  • Improved tracking behaviour
    • Refactored composables/tracking/events/useUserActionEvents.ts
    • Refactored composables/tracking/watchers/useCustomerDataChangeWatcher.ts
    • Refactored composables/useWishlistPage.ts
    • Refactored nuxt.config.ts
  • Fixed promotion handling and hides gifts if minimum order value (mov) is not satisfied
    • Refactored composables/useBasketItemPromotion.ts
    • Refactored composables/useProductPromotions.ts
    • Refactored composables/usePromotionProgress.ts
    • Refactored utils/promotion.ts
  • Adjusted promotion basket gift conditional banner labels
    • Refactored components/basket/promotion/BasketGiftConditionBanner.vue
    • Refactored composables/useBasketItemPromotion.ts
    • Refactored langs/de-DE.json
    • Refactored langs/en-GB.json
    • Refactored langs/en_origin.json
  • Adjusted promotion conditional banner on the product detail page
    • components/basket/promotion/BasketGiftConditionBanner.vue
    • components/product/promotion/ProductPromotionGiftConditionBanner.vue
    • composables/useProductPromotions.ts
    • pages/p/[slug].vue
  • Reduced duplicate promotion quantity and cost logic
    • Added composables/usePromotionConditionBanner.ts
    • Refactored components/basket/promotion/BasketGiftConditionBanner.vue
    • Refactored components/product/promotion/ProductPromotionGiftConditionBanner.vue
    • Refactored langs/de-DE.json
    • Refactored langs/en-GB.json
    • Refactored langs/en_origin.json
  • Extracted promotion condition banner to unified component and reuse it
    • Added components/promotion/PromotionGiftConditionBanner.vue
    • Refactored components/basket/promotion/BasketGiftConditionBanner.vue
    • Refactored components/product/promotion/ProductPromotionGiftConditionBanner.vue
  • Replaced used promotion mov abbreviation with full keyword minOrderValue to reduce complexity
    • Refactored components/basket/promotion/BasketGiftConditionBanner.vue
    • Refactored components/product/promotion/ProductPromotionGiftConditionBanner.vue
    • Refactored composables/useBasketItemPromotion.ts
    • Refactored composables/useProductPromotions.ts
    • Refactored composables/usePromotionConditionBanner.ts
    • Refactored langs/de-DE.json
    • Refactored langs/en-GB.json
    • Refactored langs/en_origin.json
  • Extended End-to-End testing behaviour with promotion features
    • Refactored components/product/promotion/ProductPromotionSelectionModal.vue
    • Refactored components/promotion/PromotionHurryToSaveBanners.vue
    • Refactored composables/useBasketPromotions.ts
    • Refactored composables/useProductPromotions.ts
    • Refactored composables/usePromotionGifts.ts
    • Refactored pages/p/[slug].vue
  • Fixed and refactored Identity Provider support
    • Added components/auth/IDPCallback.vue
    • Refactored components/auth/IDPForm.vue
    • Refactored components/auth/SignInForm.vue
    • Refactored components/auth/LoginForm.vue
    • Refactored composables/useAuthentication.ts
    • Refactored config/storefront.ts

🩹 Patch Changes

  • Aligned check icon within colour chip
  • Fixed missing flyout close for sub-navigation in components/layout/headers/AppHeader.vue
  • Replaced default Nuxt favicon with SCAYLE favicon in public/favicon.ico
  • Added immediate: true to watcher and refactored composables/tracking/watchers/useCustomerDataChangeWatcher.ts to avoid delayed execution and wrongly reported tracking data
  • Fixed application crash during server-side rendering while trying to access window.localStorage in composables/useLastLoggedInUser.ts
  • Fixed rendering issues with product price by using optional chaining basketData.value?.items in components/product/ProductPrice.vue
  • Set the default TTL of the cache storage provider with Redis to 10 minutes to avoid unlimited cache keys
  • Replaced translation Sicht with Ansehen for notification CTA
  • Fixed the wrong config type for gtm.debug in nuxt.config.ts
  • Fixed incorrect triggering of content_view tracking event during server rendering in middleware/routeChangeTrackingObserver.global.ts
  • Hide the scrollbar on the homepage collection content

🏡 Dependency Updates

🏘️ devDependencies

🏠 dependencies

1.0.0-rc.07

This release focuses on stabilization and modularization, to improve the technical foundation and developer experience.

🔥 Highlights

✨ Update to Nuxt 3.10.1 and Vue 3.4.19

Storefront Boilerplate now runs on both the latest Nuxt v3.10.1 and Vue v3.4.19 and benefits from a multitude of improvements. To get more details about all the changes see the Official Nuxt 3.10 Announcement Blog and the Official Vue 3.4.19 Changelogs.

🧪 Modularization: Extracting Cypress into a dedicated sub-package

The Cypress testing solution has been extracted into a dedicated child package located at cypress/. This decouples the dependencies from the main Storefront application. To install all relevant Cypress dependencies, execute yarn install within the cypress/ directory. By default, the current Cypress integration does not rely anymore on the commercial Cypress Dashboard integration. Please check the dedicated Readme file located at cypress/README.md for more details.

The following dependencies have moved from package.json to cypress/package.json:

  • cypress
  • cypress-real-events
  • eslint-plugin-cypress

🧱 Modularization: Extracting Storyblok Integration into the local module

The Storyblok integration has been extracted into a dedicated local Nuxt module storefront-cms. This allows to combine all CMS provider relevant functionalities within a central Nuxt module and allows for simple future inclusion of additional CMS providers.

The new local Nuxt module can be found under modules/cms/ and its path has been added to nuxt.config.ts to the modules list.

🧲 Tracking Refactoring and Improvements

The included tracking implementation has been refactored and received various improvements to increase the tracking data quality, as well as tracking data reliability.

🚀 Major Changes

  • BREAKING: Added support for runtimeConfig with @nuxt/image
    • Added patch files for automatic dependency patching with patch-package. The tool will run in postinstall and apply any patches present in the patches/ directory to the respective dependency.
    • Extended README.md with a section regarding Patches to explain the details and currently applied patches
  • Added full support for an easy way of running the application through docker compose

💅 Minor Changes

  • Refactored Wishlist
    • Added WishlistCardSlideIn, WishlistCardImage and WishlistCardDescription components
    • Added useWishlistPage, useWishlistItem and useWishlistItemActions composables
  • Fixed an issue with Guest User being able to access the Account page, even though it did not have any content
  • Fixed an issue with the Order pages not properly displaying content due to page caching issues while using path-based routing
  • Fixed various UX/UI issues for the new Promotion Engine feature
  • Fixed hydration issues related to viewport-dependent font-size classes on PDP in pages/p/[slug].vue
  • Fixed hydration issues related to viewport-dependent font-size classes on PLP in components/product/card/ProductCard.vue
  • Refactored various components to use new Vue v3 defineEmits syntax for events
    • components/layout/headers/search/MobileSearchInput.vue
    • components/search/CategorySuggestions.vue
    • components/search/ProductSuggestions.vue
    • components/search/SearchResultItem.vue
    • components/search/SearchResults.vue
    • components/search/SearchResultsContainer.vue
  • Fixed DefaultLink behaviour with path-based routing in components/ui/links/DefaultLink.vue
  • Fixed client-side validation behaviour for login and registration forms
    • components/auth/GuestLoginForm.vue
    • components/auth/LoginForm.vue
    • components/auth/RegisterForm.vue
    • components/auth/SalutationSelect.vue
  • Fixed the "Register" link to open the "Registration" tab within the SignInForm in components/auth/SignInForm.vue

🩹 Patch Changes

  • Added hasOneSizeProductVariantOnly helper within sizes util
  • Fixed UX / UI issues for the Order details page in pages/account/orders.vue
  • Fixed UX / UI issues with login and registration forms
  • Fixed window scrolling on PLP pagination in components/ui/pagination/PaginationButton.vue

🏡 Dependency Updates

🏘️ devDependencies

🏠 dependencies

1.0.0-rc.06

This release focuses on stabilization and refactoring, to improve the technical foundation and developer experience.

🚀 Major Changes

  • BREAKING: Nest public Storefront-specific runtimeConfig properties under the storefront key
    • useRuntimeConfig().public.log and useRuntimeConfig().public.auth should be replaced by useRuntimeConfig().public.storefront.log and useRuntimeConfig().public.storefront.log
    • (...storefrontRuntimeConfigPublic as any), to storefront: storefrontRuntimeConfigPublic as any, in nuxt.config.ts

💅 Minor Changes

  • Extracted sorting and grouping basket helpers to utils
  • Properly resolve basketGroup RPC with params
  • Removed wishlist utils and moved them to the useWishlistActions composable
  • Replaced validation plugin with useValidationRules composable
  • Replaced toast plugin with useNotification composable
  • Replaces tracking plugin with useTracking composable
  • Renamed divideWithHundred price utility to divideByHundred
  • Renamed localeFormattedDate date utility to formatLocaleDate
  • Enforced using tracking sub-composables through the useTrackingEvents by turning off auto-import for sub-composables
  • Simplified Countdown component logic by using useIntervalFn from vueuse
  • Changed radash utils prefix to be underscore (_) instead of use, to avoid confusion between radash utilities and Vue composables. Resulting in e.g. useSleep to become _sleep.
  • Used radash _sort (useSort) instead of native sort to avoid side effects
  • Export composables as named functions
  • Refactored components to use withDefaults and type generics to define component properties
  • Refactored product and navigation components to reduce complexity
  • Refactored account area component to reduce complexity and improve UI experience
    • components/account/AccountHeader.vue
    • components/account/AccountWrapper.vue
    • components/addOns/AddOnsSelector.vue
    • components/order/OrderHeader.vue
    • components/order/OrderItemCard.vue
    • components/order/OrderOverviewHeader.vue
    • components/order/OrderStatusBar.vue
    • pages/account/orders.vue
    • pages/account/user.vue
    • pages/account/orders/[id].vue
  • Refactored account area orders components to reduce complexity and improve UI experience
    • components/account/AccountWrapper.vue
    • components/order/OrderHistoryItem.vue
    • components/order/OrderItems.vue
    • composables/useOrders.ts
  • Refactored used Tailwind classes across the Storefront Boilerplate to comply with used Tailwind version
  • Tweaked Promotion Engine implementation and UI experience across the Storefront Boilerplate
  • Tweaked Order Success Page (OSP) complexity and UI experience

🩹 Patch Changes

  • Refactored slicedOrders to be a computed property in components/account/AccountWrapper.vue
  • Refactored _sizes to be a computed property in components/product/ProductSizePicker.vue
  • Refactored components/addOns/AddOnsSelector.vue to use computed properties instead of ref and dedicated update functions
  • Refactored basketItems to have an empty array as fallback in components/basket/popover/BasketPopoverItems.vue
  • Added missing state key for footerNavigationTrees in components/layout/footer/AppFooter.vue
  • Simplified watcher for searchQuery in components/layout/headers/search/HederSearch.vue
  • Refactored Nuxt-specific imports to import from #app instead of nuxt/app
  • Added collapsed component property to components/product/detail/ProductDetailAccordionEntry.vue
  • Use object for lookup of headline sizes instead of computed property in components/ui/headlines/Headline.vue
  • Fixed desktop sidebar overlapping navigation in pages/[...category].vue
  • Added time constants in constants/time.ts and used it in components/ui/Countdown.vue
  • Refactored PromotionBanner to be displayed on onNuxtReady instead of onServerPrefetch to avoid missing interactivity during page load and hydration
  • Removed runtimeConfig.public.storyblok.webhookSecret from nuxt.config.ts, as it is not supported by the storyblok-nuxt module
  • Use yn to typecast potential build value of runtimeConfig.public.gtm.debug via yn(process.env.NUXT_PUBLIC_GTM_DEBUG) in nuxt.config.ts

🏡 Dependency Updates

🏘️ devDependencies

🏠 dependencies

1.0.0-rc.05

🔥 Highlights

✨ Update to Nuxt 3.9 and Vue 3.4

Storefront Boilerplate now runs on both the latest Nuxt v3.9 and Vue v3.4 and benefits from a multitude of improvements. To get more details about all the changes see the Official Nuxt 3.9 Announcement Blog and the Official Vue 3.4 Announcement Blog.

🛫 Introducing Promotion Engine

The Promotion Engine presents the user with various promotions that have specific conditions for receiving the discount. The Storefront Boilerplate currently supports the two types Automatic discount and Buy X get Y by default as promotions.

  • SCAYLE Resource Center - Storefront Boilerplate / Promotion Engine

👥 Identity Provider support for Token-based Authentication

The Storefront Boilerplate now provides support for Single-Sign-On (SSO) via multiple Identity Providers (IDP) like Okta, KeyCloak, or Google. The IDP login / SSO flow integrates with the existing Token-based Authentication and can be used in parallel with the existing SCAYLE IDP.

  • SCAYLE Resource Center - Storefront Core / Authentication

🔋 Introducing Page Caching with unified cache handling

The distributed default configuration of the Storefront Boilerplate comes with page caching enabled and relies on the global storefront-cache storage mountpoint available via Storefront Core - Caching and configured via Storefront Core - Storage via Module Configuration.

  • SCAYLE Resource Center - Storefront Boilerplate / Page Caching

🛫 Introducing support for Vercel Edge deployment

Storefront Boilerplate does now support deployment to Vercel Edge, besides Docker-based deployments.

  • SCAYLE Resource Center - Storefront Boilerplate / Vercel Edge

🚀 Major Changes

  • Updated Cypress E2E test suite
  • Introduced new utility formatCurrency() in useFormatHelpers and refactored the usage of getCurrency() & toCurrency()
  • Removed nuxt-viewport and refactored the application to use useDefaultBreakpoints composable based on VueUse/useBreakpoints (​For details see VueUse Documentation)
  • Reduced the usage of viewport detection logic and refactored UI to rely on responsive layouts instead
  • Extract and refactor Product Filter handling on the Category and Search page
  • Refactored i18n integration and usage across applications due to the update of @nuxt/i18n to v1.0.0 stable release

💅 Minor Changes

  • Removed stylelint, related dependencies, and package script commands
  • Replaced nuxt-vitest with @nuxt/[email protected] as the projects have been officially merged together (For detailed changes see Changelog of @nuxt/test-utils)
  • Remove unsupported imageBaseUrl option key from storefrontRuntimeConfigPublic in config/storefront.ts
  • Removed usage of process.env from nuxt.config and config/storefront.ts, relying on using runtime environment variables instead (_For details see Nuxt Documentation - runtimeConfig / Environment Variables)
  • Allowing to use HTTP during local development mode
  • Extend .env.example with updated environment variables for locale development purposes
  • Added documentation reference links into nuxt.config.ts
  • Added comments with environment variable names to override runtimeConfig keys into nuxt.config.ts and config/storefront.ts
  • Removed unused nuxt/utils/cms.ts
  • Introduce useOrders composable to unify orders handling
  • Changed usage of forgotPassword(data: SendResetPasswordEmailRequest) to forgotPassword(email: string) in useAuthentication composable, refactored occurrences accordingly
  • Introduce @vercel/kv and @upstash/redis for VercelKV support
  • Extend routeRules in nuxt.config.ts to handle Vercel page caching
  • Extend routeRules in nuxt.config.ts to support multiple cache configurations
  • Extend routeRules in nuxt.config.ts to allow disabling SSR Page Caching via environment variables during build time with DISABLE_SSR_CACHE
  • Extend cache-test.mjs
  • Set differentDomains based on the environment variable DOMAIN_PER_LOCALE during build time in nuxt.config.ts
  • Enable debug: true in nuxt.config.ts to be able to pinpoint potential hydration mismatches or enumerating key issues
  • Various types tweaks and refinements

🩹 Patch Changes

  • Fixed Storyblok integration with the handling of invalid product_ids in storyblok/components/ProductSlider
  • Fixed Storyblok integration on Category pages without defined Storyblok CMS category slug resulting in error pages in pages/[...category].vue
  • Fixed issue with unavailable product colors on the Product Detail Page in pages/p/[slug].vue]
  • Removed version: getStoryblokContentVersion(), from composables/useCms.ts
  • Fixed caching behaviour and incorrect product list layout in components/productList/ProductList.vue & pages/[...category].vue]
  • Fixed Order types in components/order/OrderHeader.vue, components/order/OrderItems.vue, components/order/summary/PaymentSummary.vue, pages/account/orders/[id].vue
  • Fixed computed property orderItems in pages/account/orders/[id].vue
  • Fixed ProductBadge position in components/product/ProductBadge.vue and components/productList/ProductList.vue
  • Fixed user information disappearing after reloading by disabling autoFetch and fetching user data explicitly onMounted in components/layout/headers/user/UserPopover.vue
  • Fixed re-fetching for product list in pages/[...category].vue]
  • Fixed mobile sidebar overlapping issue in components/layout/navigation/MobileSidebar.vue
  • Fixed-size picker overlapping issue in components/wishlist/card/WishlistCard.vue
  • Fixed SlideIn overlapping issue in components/layout/SlideIn.vue and composables/useSlideIn.ts
  • Fixed the Wishlist and Basket page being incorrectly cached
  • Fixed incorrect routing behaviour in the following files
    • components/layout/headers/search/HeaderSearch.vue
    • components/ui/links/DefaultLink.vue
    • composables/useRouteHelpers.ts
    • middleware/authGuard.global.ts
    • utils/route.ts
  • Various other smaller fixes and improvements

🏡 Dependency Updates

🏘️ devDependencies

🏠 dependencies

1.0.0-rc.04

🚀 Major Changes

  • Use public npmjs.org package registry for @scayle packages and remove the need for a local .npmrc file
  • Use public storyblok-generate-ts package instead of a private fork

💅 Minor Changes

  • Updated to latest @scayle/storefront-nuxt package using v7.37.2
  • Improved Dockerfiles for build and deployments

🩹 Patch Changes

  • Updated various dependencies to the latest versions

1.0.0-rc.03

🚀 Major Changes

  • Introduced vitest for unit testing and created dummy test files for most components
  • Introduced page caching using Route Rules
  • Replacing AuthGuard component with router middleware
  • Use defineOptions for vue component naming

💅 Minor Changes

  • Introduce localizedNavigateTo for the programmatic routing approach
  • Upgrade to Vue 3.3.7
  • Replaced useUiState with smaller composables which are: useFlyouts, useMobileSearch, useModal & useSideNavigation.
  • Enable auto-import for the constants folder
  • Various dependency minor dependency

🩹 Patch Changes

  • Fixed session max-age
  • Handle AddToWishlist errors
  • Added missing Storyblok components
  • Resolved Storyblok link
  • Fixed broken links when path-based shops are enabled
  • Various bug fixes

1.0.0-rc.02

💅 Minor Changes

  • Upgrade to Nuxt 3.7.4

🩹 Patch Changes

  • Reduction of hydration errors
  • Improved error handling for invalid products on PDP, as well as category and service pages
  • Improved handling of displaying account related UI elements for guest user
  • Improved order refresh behaviour on Order Success Page
  • Various smaller bug fixes

1.0.0-rc.01

🚀 Major Changes

  • Introduce Nuxt 3
  • Tracking of all relevant shop interactions with GTM
  • Implemented Search Engine optimizations
  • Provide more CMS content integrations (Storyblok) into all relevant pages

💅 Minor Changes

  • Improved error handling and displaying of error pages
  • Improvements to redirect handling
  • Improved SVG icon handling
  • Improvements to mobile styling and behaviour

🩹 Patch Changes

  • Various bug fixes
Previous
Changelogs
Next up
Storefront Core