docs
  1. Changelogs
  2. Storefront Application
  3. Storefront Application (rc)

Storefront Application (RC)

1.0.0-rc.10

🔥 Highlights

📡 HTTP Request tracing with OpenTelemetry

The Storefront Application 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 Application 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

    or when using the docker image

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.

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.

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:

🔎 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 Application 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 Application 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 Application to comply with used Tailwind version
  • Tweaked Promotion Engine implementation and UI experience across the Storefront Application
  • 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 Application 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 Application currently supports the two types Automatic discount and Buy X get Y by default as promotions.

  • SCAYLE Resource Center - Storefront Application / Promotion Engine

👥 Identity Provider support for Token-based Authentication

The Storefront Application 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 Application 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 Application / Page Caching

🛫 Introducing support for Vercel Edge deployment

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

  • SCAYLE Resource Center - Storefront Application / 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
Next up
Storefront SDKs