Vue Storefront 1.12 has just landed! The leading topics for the latest major release of VSF1.x were: performance, an additional Storefront UI based theme, and a new CLI interface.
During the 9 months from the last stable release, we’ve included more than 50 new improvements and a lot of optimizations and stabilization fixes.
The major focus for this release was put on the performance. We changed the way attributes are now loaded. They’ve been embedded within product feeds so no additional request is required. Moreover, the way attributes now works makes generating dynamic filters and performance of filtering the products much better.
The `vue-storefront-api` and `storefront-api` can also compact and compress the outputting JSON objects to lower the network loads.
Additionally, we’ve put a lot of energy into lowering the bundle size. Some features, have been moved to separate modules and to the theme level). We’ve also refactored the Vuex modules for the product catalog and shopping cart. They’re mostly backward compatible with VSF1.11; however, the internals and how the actions work have changed. At times the change is quite radical as we’ve moved parts of the business logic into `vue-storefront-api` instead.
Moreover, the Fastly, Varnish, and nginx cache modules—including dynamic, tag-based invalidation—have been added.
New Capybara Theme
Vue Storefront works at its fastest on the Capybara Theme, which is based on the Storefront UI design system. The important fact anyone working with Vue Storefront will notice is that the theme itself is no longer a part of the core. We’ve moved the default theme into the vsf-default repository and Capybara into vsf-capybara in order to streamline the software updates and development process management. Both themes are fully supported by VSF 1.12. Moreover, the Capybara theme is a great starting point for new contributors. We’ve created a curated list of Good First Issues that will let you easily start contributing to the project!
Because we wanted the themes to be now separated, we tweaked the CLI and now the CLI is the default way for creating a new project.
Vue Storefront 1.11.x will be supported under the LTS for at least the coming year. If you’re in the middle of a project, you can safely run it; if you’re starting a new one, consider using VSF 1.12. The upgrade process should be pretty straightforward as long as you haven’t modified the internals of standard Vue Storefront Vuex actions (which got refactored with this release).
Vue Storefront 1.13
The next version is planned for the Q1/Q2 2021. We’re committed to upgrading the `vue-storefront-api` to `storefront-api` as a default backend system. Of course, there will be quite a lot of fixes and improvements as well. We don’t plan to extend the core by the new features; however, you may expect a lot of them to be added as custom or third-party modules. Our strategy is to continue the steady stream of optimizations into the core but rather not develop it horizontally.
You may also expect a lot of new features and integrations in the Next and Shopware PWA streams.
Other news from the core team
During the preparations of VSF 1.12, Vue Storefront Next got out of the R&D stream and we’ve released a Shopware PWA Beta. It’s now being developed under the `next` branch in the main Vue Storefront repository. We’re pretty excited about the new integrations that are coming to VSF Next including About You, commerce tools, Shopify and Salesforce Commerce Cloud.
Vue Storefront 1.x is still the best PWA for Magento and that is not going to change. If you’re running a new project against a different backend, consider choosing Vue Storefront Next. It will probably make the integration much easier, especially as there is no middleware and native data formats.
Along with this new VSF release, we’ve refreshed our main website: https://vuestorefront.io. You can now find much more information about our partners and their profiles there. We also added a few dozen new live projects and case studies. The information about the product lines, roadmap, and integrations is also much more visible.
The Headless Security Initiative
With more than 150+ live PWA sites running Vue Storefront on production, we are committed to constantly improving and maintaining the already tight security standards, along with all the implementations our partners are making and the VSF Core itself.
We’ve just started an open-source eBook to which everyone is invited to contribute. Please visit the http://headless-security.org/ to check the best Vue Storefront Security practices, and then feel free to contribute on https://github.com/DivanteLtd/headless-security.org.
We’ve been working since October 2019 on this release and the list of improvements and new features is pretty long! Huge thanks to Tomek Kostuch (@gibkigonzo) and Patryk Andrzejewski (@andrzejewsky) who were leading this release. Great job!
- Add vsf-capybara support as a dependency and extend CLI to support customization - @psmyrek (#4209)
- Support theme configuration via CLI - @psmyrek (#4395)
- Allow parent_ids field on product as an alternative to urlpath based breadcrumb navigation (#4219)
- Pass the original item_id when updating/deleting a cart entry @carlokok (#4218)
- Separating endpoints for CSR/SSR - @Fifciu (#2861)
- Added short hands for version and help flags - @jamesgeorge007 (#3946)
- Add or operator for Elasticsearch filters in quickSearchByQuery and use exists if value is null - @cewald (#3960)
- Add unified fetch in mappingFallback for all searched entities - @gibkigonzo (#3942)
- add npm-run-all for parallel build - @gibkigonzo (#3819)
- Add OutputCaching support for x-vs-store-code - @benjick (#3979)
- The new search adapter api-search-query has been added. When you switch to it, by setting the config.server.api = "api-search-query" the ElasticSearch query is being built in the vue-storefront-api which saves around 400kB in the bundle size as bodybuilder is no longer needed in the frontend - @pkarw - #2167
- This new api-search-query adapter supports the response_format query parameter which now is sent to the /api/catalog endpoint. Currently there is just one additional format supported: response_format=compact. When used, the response format got optimized by: a) remapping the results, removing the _source from the hits.hits; b) compressing the JSON fields names according to the config.products.fieldsToCompact; c) removing the JSON fields from the product.configurable_children when their values === parent product values; overall response size reduced over -70% - @pkarw
- The amp-renderer module has been disabled by default to save the bundle size; If you'd like to enable it uncomment the module from the src/modules and uncomment the product-amp and category-amp links that are added to the <head> section in the src/themes/default/Product.vue and src/themes/default/Category.vue
- Reset Password confirmation page - @Fifciu (#2576)
- Add Intl.NumberFormat()/toLocaleString() via polyfill support in NodeJs - @cewald (#3836, #4040)
- Added saveBandwidthOverCache parameter for skipping caching for products data - @andrzejewsky (#3706)
- New zoom effect for product gallery images - @Michal-Dziedzinski (#2755)
- Add custom currency separators and amount of fraction digits - @EndPositive (#3553)
- Product Page Schema implementation as JSON-LD - @Michal-Dziedzinski (#3704)
- Add /cache-version.json route to get current cache version
- Built-in module for detecting device type based on UserAgent with SSR support - @Fifciu
- Update to storefront-query-builder version 1.0.0 - @cewald (#4234)
- Move generating files from webpack config to script @gibkigonzo (#4236)
- Add correct type matching to getConfigurationMatchLevel - @cewald (#4241)
- Support useSpecificImagePaths with useExactUrlsNoProxy - @cewald (#4243)
- Adds module which handles cache invalidation for Fastly. - @gibkigonzo (#4096)
- Add vsf-cache-nginx and vsf-cache-varnish modules - @gibkigonzo (#4096)
- Added meta info for CMS pages from Magento @mdanilowicz (#4392)
- Add useful core events to server & logger - @cewald (#4419)
- Fixed resultPorcessor typo - @psmyrek
- Negative price has doubled minus sign - @psmyrek (#4353)
- Fixed Search product fails for category filter when categoryId is string - @adityasharma7 (#3929)
- Revert init filters in Vue app - @gibkigonzo (#3929)
- All categories disappearing if you add the child category name to includeFields - @1070rik (#4015)
- Fix overlapping text in PersonalDetails component - @jakubmakielkowski (#4024)
- Redirect from checkout to home with a proper store code - @Fifciu
- Added back error notification when user selects invalid configuration - @1070rik (#4033)
- findConfigurableChildAsync - return best match for configurable variant - @gibkigonzo, @cewald (#4042, #4216)
- use storeCode for mappingFallback url - @gibkigonzo (#4050)
- getVariantWithLowestPrice uses inexistent final_price property - @cewald (#4091)
- Fixed NOT_ALLOWED_SSR_EXTENSIONS_REGEX to only match with file extensions having a dot - @haelbichalex (#4100)
- Fixed problem with not showing error message when placing an order fails - @qiqqq
- Invoking afterCacheInvalidated server hook in a proper moment - @Fifciu (#4176)
- Fixed cart/isVirtualCart to return false when cart is empty - @haelbichalex(#4182)
- Use setProductGallery in product/setCurrent to use logic of the action - @cewald (#4153)
- Use same data format in getConfigurationMatchLevel - @gibkigonzo (#4208)
- removed possible memory leak in ssr - @resubaka (#4247)
- Bugfix for reactivity of current_configuration in populateProductConfigurationAsync - @cewald (#4258)
- Bugfix for build exception in Node v13.13+ - @cewald (#4249)
- Convert option ids to string while comparing them in getProductConfiguration - @gibkigonzo (#4484)
- change value to number in price filter - @gibkigonzo (#4478)
Changed / Improved
- Optimized translation.processor to process only enabled locale CSV files - @pkarw (#3950)
- Remove commit register mapping - @gibkigonzo (#3875)
- Improved method findConfigurableChildAsync - find variant with lowest price - @gibkigonzo (#3939)
- Removed product/loadConfigurableAttributes calls - @andrzejewsky (#3336)
- Removed unused locales in disabled multistore - @gibkigonzo (#4072)
- Optimized attributes loading - @andrzejewsky (#3948)
- Cart optimization can now be used regardless if entity optimization is enabled - @juho-jaakkola (#4198)
- Improve typescript support for test utils - @resubaka (#4067)
- Removed product/loadConfigurableAttributes calls - @andrzejewsky, @gibkigonzo (#3336)
- Disable mapFallback url by default - @gibkigonzo (#4092)
- Include token in pricing sync - @carlokok (#4156)
- Move 'graphql' search adapter from core to src (deprecated) - @gibkigonzo (#4214)
- Homepage, new products query, uses now new attribute - @mdanilwoicz
- Refactor product module, more info in upgrade notes- @gibkigonzo (#3952, #4459)
- Move default theme to separate repository https://github.com/DivanteLtd/vsf-default - @gibkigonzo (#4255)
- Add two numbers after dot to price by default, calculate default price for bundle or grouped main product, update typing, add fallback to attribute options - @gibkigonzo (#4476)
- Udpate yarn and filter shipping methods for instant checkout - @gibkigonzo (#4480)
- Add attribute metadata search query, add parentId - @gibkigonzo (#4491)