<![CDATA[Stories by Filip Rakowski on Medium]]> https://medium.com/@frakowski?source=rss-2f6fdc60db8b------2 https://cdn-images-1.medium.com/fit/c/150/150/1*tr4DtjNFD63Tha03JA9sOw.png Stories by Filip Rakowski on Medium https://medium.com/@frakowski?source=rss-2f6fdc60db8b------2 Medium Sat, 14 Nov 2026 17:18:41 GMT <![CDATA[Vue Storefront — What’s Next?]]> https://medium.com/the-vue-storefront-journal/vue-storefront-whats-next-362362db44da?source=rss-2f6fdc60db8b------2 https://medium.com/p/362362db44da Thu, 19 Dec 2019 10:04:33 GMT 2020-02-15T15:45:43.932Z Vue Storefront — What’s Next?

After almost 3 years of building Vue Storefront together with our community, we learned a lot. It’s safe to say that after such a long time we have very deep and unique knowledge about the needs, weaknesses, and strengths of headless eCommerce. From the very beginning, we were constantly improving Vue Storefront with every iteration by applying our learnings and responding to community feedback. Now we want to take these improvements to a whole new level!

TL;DR: Vue Storefront Next is a common name for our R&D efforts to improve Vue Storefront quality, architecture and developer experience. The goal of these efforts is to make it easy to use, modular, flexible and easy to upgrade by building independent tools. Improvements will be implemented incrementally.

Introducing Vue Storefront Next architecture!

Vue Storefront is currently the most mature eCommerce PWA solution that has proven its value in more than 40 live implementations! After more than 2 years of constant improvements, we know exactly how great it is but we also know very well about all its weaknesses. We always want to push forward, experiment with new ideas and use cutting-edge tech to be the best in our category. After all this time we know exactly how “perfect Vue Storefront “ should look like but we are slowly getting to the point where current architecture is a limitation. Don’t get me wrong — it’s a great piece of software and we are really proud of it. It’s probably the best one in the market and can serve well in almost every use case. But we are ambitious. “Better” is not something that satisfies us. We want it to be as good as possible and to achieve that we need to make bold moves.

For quite some time we are discussing and maturing a concept of new Vue Storefront architecture that will be a solution to all its current weaknesses (especially updates) but also a natural evolution of our concepts that will embrace all the modern best practices and trends in building Progressive Web Apps.

Surprisingly, the biggest challenge we faced was not about the architecture itself — we are discussing it heavily on a daily basis from the beginning of the project existence so we had a lot of time to develop mature ideas for improvement of almost every aspect of Vue Storefront. The hardest part was to make it a natural evolution that everyone can benefit from. No matter if you already have a shop on Vue Storefront or just plan to make it in the future — you should be able to benefit from its new architecture.

I’m really happy to announce that after countless meetings, discussions with our community and arguments in the core team we have a concept that we are really proud of and is mature enough to be shown to a broader audience! Ladies and gentlemen — introducing Vue Storefront Next — our new R&D pipeline!

What is it all about?

Vue Storefront Next is a common name for our R&D efforts to improve Vue Storefront quality, architecture and developer experience. The goal of these efforts is to make it easy to use, modular, flexible and easy to upgrade.

The next pipeline will go along with the standard cycle of updates and improvements for Vue Storefront and won’t slow it down. We have some exciting stuff for next releases like NPM packaging of VSF Core. You can expect a full article about our plans for other improvements soon.

Every project is different. We want to give our users best in class tools to build stunning eCommerce shops but let them decide on scope of their usage. Sometimes the only thing you need from Vue Storefront is an agnostic API layer, sometimes it’s just a UI library. We want to keep this decision up to you.

Modularity is a keyword of the new architecture. Instead of providing Vue Storefront as a single piece of software we decided to divide it into smaller, independent pieces that are not depending on each other— each of them can be used standalone or in combination with other ones.

Modularizing Vue Storefront is a process. We are slowly detaching another layers from the main product, testing them, improving and releasing as a part of a new architecture. It won’t happen all at once. We will provide an easy way of adopting new features one by one.

Currently, there are two ready to use products that are part of Vue Storefront Next architecture:

  • Storefront UI — a highly customizable, well-performing UI library that will help developers deliver the best in class mobile-first eCommerce user experience with minimal effort.
  • Storefront API —which was released just a week ago is a GraphQL based agnostic eCommerce API that is essentially just a natural evolution of vue-storefront-api

We are already developing a theme based on Storefront UI for Vue Storefront and it should be ready in Q1 of 2020. Replacement of vue-storefront-api with Storefront API is also on our roadmap but without a specific deadline as it’s a new product that still needs some tests.

More products in progress

We have products and concepts that are still under development and not suitable for production usage yet. They will most likely be finished and adopted in 2020. It’s not certain if they will be included in Vue Storefront in the described form but we certainly want to explore these ideas as we see them as major improvements over current solutions. We learned that in some situations publishing early is a good decision and in some cases - not. These products are meant to be our new public API and we want to be absolutely sure that they are delivering the best possible experience to both users and developers.

  • Vue Storefront CLI
    This product can be used even today as @vue-storefron/cli package but its capabilities are for now limited to creating new Vue Storefront projects from GitHub repo. In the future, we want to make it a go-to scaffolding tool for new Vue Storefront projects letting users decide which eCommerce platform, CMS and specific features (like URL dispatching) they want to use. Similarly to what Vue CLI offers right now.
  • Integrations based on Composition API from Vue.js 3
    Composition API is one of the greatest features of Vue 3 that truly makes this framework stand out from other ones. It’s a completely new approach to code reuse and something letting library authors like us deliver much simpler and powerful APIs. We see a lot of potential in this approach as a major simplification of core interactions (compared to mixins) and a way of delivering great developer experience.
    We want eCommerce and CMS integrations to be just a sets of Vue 3 composables that are not coupled with any other part of Vue Storefront architecture. It will improve the modularity of the whole ecosystem and make it possible to use Vue Storefront integrations in other Vue.js projects.
    We are currently experimenting with common interfaces that will ensure consistent developer experience across multiple platforms.
  • Nuxt.js themes
    Since the beginning, we were using our own Server Side Rendering which led to many issues related to maintainability or lack of certain features. Using Nuxt will not only improve the quality of our SSR but also the overall developer experience of Vue Storefront development. Apart from purely technical benefits using Nuxt will give Vue Storefront developers access to hundreds of Nuxt modules which will enormously speed up common tasks like setting up authentication or internationalization. After many discussions with Nuxt.js core team, we are sure that it’s is a perfect match for Vue Storefront.

As you have seen we have a lot of exciting plans for the next releases and we can’t wait to hear your feedback about the closest improvements which will be a new theme based on Storefront UI and after that — Storefront API integration.

More details about Vue Storefront Next architecture

You can find a deeper explanation of Vue Storefront Next architecture in this document.

New integrations on Next architecture

We are very excited about Vue Storefront Next but we are also aware that it's our only chance to deliver major improvements for the next few years. We want to spend more time testing and discussing new tools to be sure that on the day of publishing they will be stable enough to not drastically change in the future. We want to give you a tool that, once adopted won’t require major efforts to stay up to date.

At the same time, we want to deliver new exciting features as fast as possible. We were always iterating fast and adopting cutting-edge technologies before others and we want to stay like this.

There is no better way to quickly validate and improve your ideas than making them happen. Because of that, we decided to test new architecture by doing native integrations with two new eCommerce platforms:

Shopware 6 — Vue Storefront is now an exclusive partner of Shopware for their headless storefronts. Together with their team, we are building native integration for recently announced Shopware 6 based on Next architecture. You can expect a longer post about our cooperation and project itself soon.

Commercetools — We are receiving a lot of questions about commercetools integration from our partners and clients. It seems like a natural choice for us to integrate with this platform — they are focused on delivering great API and we are focused on delivering great frontend. This is why we decided to do a native integration with commercetools on Vue Storefront Next architecture.

Building two integrations at the same time will help us make sure that our new API is not platform-specific and can handle all the different scenarios. Additionally, we will be able to test how all the new tools are working together. Once we are satisfied with the result of native integrations, based on them we will implement these ideas for our main, “agnostic” integration.

Adoption strategy

Every new tool once ready will be adopted into the main Vue Storefront project.

You will be able to use new features immediately after they are released in both new and existing Vue Storefront shops. Just keep in mind that using them is not obligatory. The decision about which ones to use is up to you.

Many of the upcoming changes focus heavily on letting developers build Vue Storefront shops faster. Because of that for already existing projects, you might decide to omit some of them. I’m very happy to inform you that because all of the upcoming projects are independent tools touching only a certain layer of the application you don’t need to make a decision between using all the new tools or none of them.

If your shop is already working and performing well you can freely use only the tools that make sense for you and keep the rest of the application untouched.

Video version

You can learn about Vue Storefront Next from this video.

Core team hangouts

We want to be even closer to the community and openly discuss all the exciting stuff around Vue Storefront. Because of that from this Friday we are starting regular monthly (or bi-monthly) core team hangouts where we will be presenting updates about the progress on Next architecture.

Everyone can join, ask questions and propose changes. If you don’t want to participate in the discussion it's still a great way to stay up to date with all the development-related news in Vue Storefront ecosystem. For other news, you can also subscribe to our newsletter to be always up to date with new releases, implementations and educational materials from Vue Storefront community.

See you on Friday!

Learn more about Vue Storefront — a PWA solution for eCommerce.

Vue Storefront — What’s Next? was originally published in The Vue Storefront Journal on Medium, where people are continuing the conversation by highlighting and responding to this story.

]]> <![CDATA[Vue Storefront 1.10-rc]]> https://medium.com/the-vue-storefront-journal/vue-storefront-1-10-rc-cf84e036dd40?source=rss-2f6fdc60db8b------2 https://medium.com/p/cf84e036dd40 Wed, 26 Jun 2019 13:56:43 GMT 2019-06-26T14:04:19.946Z Vue Storefront 1.10-RC is here — new CTO, Shopware partnership, native indexer and almost 90 PRs merged!

We are happy to announce that release candidate for Vue Storefront 1.10 is now ready to test! In this release, despite stabilization and bug fixing, we focused on improving Vue Storefront frontend API layer and expanding possibilities of current features. Even more exciting things happened outside of the code world. Let me walk you through them!

All about Vue Storefront 1.10-RC

Below you can find the gigantic list of around 90 PRs merged with improvements, bug fixes and enhancements made by our community for Vue Storefront 1.10-RC release.

You must admit it’s impressive ;)

Added

Removed

  • The getter cart/totals has been replaced with cart/getTotals - @pkarw (#2522)
  • The getter cart/coupon has been replaced with cart/getCoupon - @pkarw (#2522)
  • The getter cart/totalQuantity has been replaced with cart/getItemsTotalQuantity - @pkarw(#2522)
  • The event cart-before-save has been removed - @pkarw (#2522)
  • The action cart/save has been removed - @pkarw - (#2522)
  • Some deprecated config options: useShortCatalogUrls and setupVariantByAttributeCode have been removed - @pkarw (#2915)
  • Button for filters acceptance added with new styles for clear filters button — @965750 (#2811)
  • Added “Clear wishlist” button — @aniamusial (#2806)
  • Make all links with the primary color — @Hackbard (#2932)

Fixed

  • The back button on the Error page has been fixed — @pkarw (#3077)
  • Special price got zeroed — @pkarw (#2940)
  • Microcart tax + discount totals fix — @pkarw (#2892)
  • Microcart offline prices now forced down to original prices — @pkarw (#3012)
  • Login/Register error message added in case of FetchError (no network connectivity) — @pkarw
  • Products removed from the cart are no longer add back on the connectivity return — @pkarw (#2898)
  • Sidebar menu wasn’t possible to scroll — @PanMisza (#2627)
  • Confirmation popup ‘Product has been added to cart’ is displayed only once — @JKrupinski (#2610)
  • Moved My Account options from Categories — @bartdominiak (#2612)
  • Fix displaying (and adding) reviews for configurable products — @afirlejczyk (#2660)
  • Image switching fix — @pkarw (#2709)
  • Respect store code on order/PROCESS_QUEUE for shop store — @Zulcom (#2727)
  • Unexpected window.localStorage use in user module actions - @Zulcom (#2735)
  • Fix handling state of same address checkbox in the checkout — @lukeromanowicz (#2730)
  • Fix for everythingNew collection on the home page - @vishal-7037 (#2761)
  • Fixed display of chevron arrows when there is only one product image — RGijsberts — (#2911)
  • Fixed Clear cart option as it previously was not syncing the changes with the server - therefore when the user was logged in and cleared the cart all the products were restored - @pkarw (#2587)
  • Fixed the cart sync for a rare case that current cart token was empty — @pkarw (#2592)
  • Use event bus to emit ‘application-after-init’ event (#2852)
  • Validation of fields ‘company name’ and ‘tax’ in checkout doesn’t work correctly — @dimasch (#2741)
  • Fixed wrong price, displayed in instant checkout module — @vishal-7037 (#2884)
  • Incorrect working of checkboxes in checkout — @dimasch (#2730)
  • Fixed ios input zoom on category page — @VictorKadup (#2815)
  • Fixed Load more in Search Results not working when typed too fast — @Flyingmana (#2659, #2946)
  • Subscribe button responsive — @exlo89, @webdiver, @przemyslawspaczek (#2886)
  • Multiple instances for search adapter invocations — @bratok (#2960)
  • Fixed issue with login popup state not resetting on mobile devices — @aniamusial (#2699)
  • Fix sortBy for the category page — @Jensderond (#2868)
  • Fixed incorrect prices in Instant Checkout (PR API) — @qiqqq (#2874)
  • Fixed placeholders in the gallery in offline mode — @przspa (#2863)
  • Incorrect user_id set on the order object - @pkarw (#2966)
  • Problem with SSR render on the product page with logged in user — @patzick (#2888)
  • NaN displayed as shipping method — button disabled — @aniamusial (#2881)
  • Logo on the Error page has been fixed — @przspa (#3077)
  • No placeholders / no photos for the Get Inspire section in offline — @przspa (#3072)
  • The back icon on product page causing inconsistent behavior — @patzick (#3056)

Changed / Improved

  • The cart/sync, cart/addItems, cart/removeItem and cart/updateQuantity now returns the diffLog object with all the notifications, server statuses, and items changed during the shopping cart sync
  • The cart/addItem is no longer displaying the error messages - please use the diffLog.clientNorifications to update the UI instead (take a look at the AddToCart.ts for a reference)
  • The action cart/userAfterLoggedin got renamed to cart/authorize - @pkarw (#2522)
  • The action cart/refreshTotals got renamed to cart/syncTotals - @pkarw (#2522)
  • The action cart/serverPull got renamed to cart/sync - @pkarw - (#2522)
  • The way we’re getting the user and cart tokens got refactored — @pkarw (#2513)
  • Changed the way to access the configuration. Currently the rootStore.state.config is deprecated. Please do use import config from 'config' > config instead - @pkarw (#2649)
  • Changed the order number (from entity_id to increment_id) on MyOrders and MyOrder pages - @pkarw (#2743)
  • Disabled the server cart sync in case a user is in the checkout — @pkarw (#2749)
  • Improved ProductGalleryCarousel component to handle non-numeric options id’s — @danieldomurad(#2586)
  • Number of displayed products is now visible on PLP on desktop — @awierzbiak (#2504)
  • Improved visibility of product SKU in wishlist — @PanMisza (#2606)
  • Instant focus to search input field after clicking on the search icon in navbar — @ca1zr (#2608)
  • Login flow from authorized pages after session expired, show the modal with the new error message and redirect after login — @gdomiciano, @natalledm (#2674)
  • Added support for the newest node version — @gdomiciano (#2669)
  • Default store ID from 0 to 1 for multistore and CMS data logic - @janmyszkier (#2590)
  • Used $bus plugin instead of EventBus import - @szafran89 (#2630)
  • BaseCheckbox now uses v-model. @click is not needed anymore — @haukebri (#2630)
  • Image selection supporting multiple configurable options — @mdesmet (#2599)
  • Product video — retrieve video id from ‘video_id’ field (if set) instead of ‘id’ — @afirlejczyk
  • Webpack config improvement — @yogeshsuhagiya (#2689)
  • BaseSelect input event — @ResuBaka (#2683)
  • Fixed static file handler to immediately return 404 status for missing files — @grimason (#2685)
  • Fixed maxAge Response Header for static files and Content-Type for Service Worker — @grimason (#2686)
  • Default log verbosity is changed to show only errors — @lromanowicz (#2717)
  • Remembering last search query — @webdiver, @patzick (#2787)
  • Extracted ProductImage component to support faster images loading — @przemyslawspaczek (#2925)
  • Improve performance with preventing render ‘404 page’ on the server side if some of the static content is missed, simple 404 response uses instead — PHOENIX MEDIA — Yuri Boyko @yuriboyko, Anton Lobodenko @sniffy1988 (#3002)
  • Logger refactor + now it takes showErrorOnProduction into account - @lromanowicz - (#2717)
  • Jest updated from 24.1 to 24.7 along with typings — @lromanowicz — (#2717)
  • Jest globals added to .eslint — @lromanowicz (#2717)
  • The default store ID was removed from the configurations — @nuovecode (#2718)
  • ‘Multitab cart’ sync — @BartoszLiburski (#2547)
  • Back to login button now shows the Login modal window instead of closing it — @RGijsberts (#2882)
  • Status filter in Related Products query (#2805)
  • The ‘Apply’ button size has been reduced — @idodidodi (#2807)
  • Added return to shopping button on ‘Thank You’ page — @ZeevGerstner (#2818)
  • Added optional attributes to catalog/product.ts — @ZeevGerstner (#2792)
  • Formatted dates in CHANGELOG.md to match ISO standard — @phoenixdev-kl (#2839)
  • Moved Filter Price Ranges (used for ES aggregations and UI Filter) to the config — @jpetar (#2873)
  • Extra space if not found products in everything new section home page — @cnviradiya (#2846)
  • Load custom fonts without webfont.js — @jahvi (#2944)
  • Added some structured data to the product page — @cewald (#2910)
  • Improved the Size Guide feature, so it opens in a modal popup instead of a new page — @RGijsberts — (#2913)
  • Refactored Travis config @Tjitse-E (#3035)

Native Magento 2 Indexer

Our standard data importers were designed to solely use the platform APIs to push the data into Elastic Search. This is precisely how the mage2vuestorefront works.

As flexible, this solution is, it comes with some severe limitations. One of the most critical limitations it has is the performance. Executing API requests for each product might have a sense for 1–2K SKUs but doesn’t work with the databases counting a hundred thousand items.

This was our motivation to create the native indexers for Magento. Currently, you can find two native indexers on our Github:

Read more about native Magento indexers here.

Magento MSI support

Thanks to our fantastic partner, BitBull, Vue Storefront is now supporting Magento Multi Stock Inventory. Special thanks to Alessandro Ronchi who made it possible and ensured high code quality!

What else?

Vue Storefront has new CTO!

Following to rapid growth of Vue Storefront, we have decided to expand the Vue Storefront team with a new tech leader. Everyone — please meet Mr. Sander Mangel, Magento community legend and our new CTO!

Sander is working with us for only one month, and we already see exceptional results of this cooperation!

You can read more about Sander joining our team here along with the short interview.

Vue Storefront as Shopware exclusive PWA solution!

It turns out that May was an excellent month for Vue Storefront! We not only started working with sander but also announced Vue Storefront and Shopware partnership! Now we will work on delivering the best possible PWA experience for Shopware 6 together!

You can read more about Shopware and Vue Storefront cooperation here.

Shopware 6 integration

Followed by our partnership with Shopware we released Vue Storefront integration with newest Shopware 6!

Here you can find the code and installation guide.

Our QA team will now help you on VS forum!

As we take our support to the next level, we would like you to meet Core QA Team! Gabi, Alina, and Artur help you find or get the answers for your Vue Storefront related questions and issues on our official forum.

Vendic launched Vue Storefront for Meubelplaats

What are the challenges of enriching Magento-based stores with PWA solutions? To find out, we met up with Tjitse and Eugene, developers from Vendic agency, who recently launched a PWA in the Meubelplaats furniture store.

You can read the full interview here.

Vue Storefront hackathon in Deventer by Vendic & Yireo

When speaking about Vendic, it’s hard not to mention amazing hackathon they’ve organized together with Yireo recently in Deventer! Despite the regular focus on coding many efforts has been put into knowledge sharing.

We header about PWAs from Sander mangel, Magento PWA solutions comparison from Jisse Reitsma and running Vue Storefront on production from Tjitse Efde

You can find stunning presentation made by Tjitse from Vendic about running Vue Storefront on production here!

Coding, knowledge sharing, exclusive T-shirts, and beer. What else would anyone need?

Upcoming Vue Storefront hackathons

If you missed hackathon in the Netherlands, there is no reason to panic! We have plenty of them coming where you can meet Sander, core team members, our partners, and other Vue Storefront community members!

Sign up for the Vue Storefront hackathon in Romania here.
Sign up for the Vue Storefront hackathon in Germany here.

Keep an eye on our event list to stay updated and don’t miss Vue Storefront hackathon near your town!

Vue Storefront 1.10-rc was originally published in The Vue Storefront Journal on Medium, where people are continuing the conversation by highlighting and responding to this story.

]]> <![CDATA[Vue Storefront 1.9 — custom URLs, Marketplace challenge, new live websites]]> https://medium.com/the-vue-storefront-journal/vue-storefront-1-9-custom-urls-marketplace-challenge-new-live-websites-27139d1e7ae2?source=rss-2f6fdc60db8b------2 https://medium.com/p/27139d1e7ae2 Mon, 06 May 2019 14:22:49 GMT 2019-05-08T14:01:55.160Z Vue Storefront 1.9 — custom URLs, Marketplace challenge, new live websites

Version 1.9 is the first stable release in the new release cycle and the effects are stunning! Not only it’s the most stable version of all time but we managed to ship great features. There are also 5 new modules from our community and 5 new live VS shops! It’s amazing to post such great news each month.

New features

  • SEO-friendly URLs came out of beta and are now ready to use.
  • Payment Request API is now integrated with VS checkout. You can integrate it with a payment provider of your choice and use to drastically simplify the checkout process.

Of course, that’s not all :) You can find a full list of new features, improvements and bug fixes at the end of this article.

New modules

There would be no Vue Storefront without its amazing community. This month our partners released 6 new modules!

You can check other modules made by our community at the Vue Storefront Forum.

Marketplace challenge winners

While speaking about modules it’s hard not to mention marketplace challenge. With this challenge, we wanted to encourage freelance developers and partnering companies to share top quality integrations and popularize their solutions within the open-source community.

The competition was strong but in the end, we selected 3 excellent modules and integrations for Vue Storefront. The winners are:

  • Get_Noticed
  • Develo Design
  • Kodbruket

Here you can read more about the challenge and its winners.

New Vue Storefront-based websites are live

It’s hard to describe how great we feel when we see new production website running Vue Storefront. In last month we felt it 5 times!

https://www.kentaur.com/
https://www.meubelplaats.nl/
https://www.klebefieber.de/
https://kubotastore.pl/
https://sklep.damian.pl/

More quality and less bugs!

We hired 3 amazing QA engineers (full-time!) that are testing Vue Storefront in and out. Thanks to their hard work and bug reports we are able to shipp more stable versions than ever before.

Vue Storefront hackathons

Last month Vue Storefront meetups visited Birmingham and Tel Aviv! As always it was a great occasion to meet local Vue Storefront communities and do training for newcomers!

Patryk Tomczyk on Twitter

We're at UK #VueStorefront Royal Hackathon 👑💂‍♂️🇬🇧 hosted by @Develodesign. #pwa is in the air!

Piotr Karwatka on Twitter

Shalom! Our brave @VueStorefront team is in Tel Aviv for the next 2 days - joins us on https://t.co/BHzegKrjQL and do some @vuejs #pwa @VueStorefront

If you’d like to participate in Vue Storefront hackathon and training check our events website. Everyone is welcome! ;)

Storefront UI on Vue.js Roadtrip

I’m happy to announce that this month Storefront UI will be shown publicly for the first time during Vue.js Roadtrip in Barcelona and Paris. If you live there to come and give a hi5!

What else?

Added

  • validation for UTF8 alpha and alphanumeric characters in most checkout fields — @lromanowicz (#2653)
  • helper to process config urls with default endpoint host config.api.host - @patzick (#2858)

Fixed

  • ESlint throwing errors about undefined jest globals in tests — @lukeromanowicz (#2702)
  • Fixed changing the country when entering the shipping address in checkout not updating shipping costs — @revlis-x (#2691)
  • Instant Checkout fix — @qiqqq (#2750)
  • Infinite loop on the multistore page after reload — @patzick (#2713)
  • Refreshing MyAccount page on multistore — @patzick (#2780)
  • “Toggle password visible” button in password fields works the right way — @lromanowicz (#2772)
  • Range queries to elasticsearch — @oskar1233 (#2746)
  • BaseInput has minimum height now to avoid jumping on forms — @patzick (#2771)
  • Orders with invalid address don’t stack anymore in the queue and have proper notification popup — @AndreiBelokopytov, @lukeromanowicz (#2663)
  • Offline orders with out of stock products don’t stack anymore and get canceled after going back to online — @lukeromanowicz (#2740)
  • Build ServiceWorker on Docker — @patzick (#2793)
  • Product image load after coming back to online — @patzick (#2573)
  • Insufficient validation for city field in checkout address — @lromanowicz (#2653)
  • Incorrect hover activity on the ‘filter by categories’ in the search view on mobile — @idodidodi (#2783)
  • Unit tests written in JavaScript now support async/await functions and dynamic import — @michaelKurowski, @lukeromanowicz (#2851)

… and everything from RC version:

Added

  • Payment Request API integration — @qiqqq (#2306)
  • The Url Dispatcher feature added for friendly URLs. When config.seo.useUrlDispatcher set to true the product.url_path and category.url_path fields are used as absolute URL addresses (no /cand /p prefixes anymore). Check the latest mage2vuestorefront snapshot and reimport Your products to properly set url_path fields - #2010 - @pkarw
  • Unit tests of cart module written in jest — @lukeromanowicz (#2305)
  • New reactive helper to check online state. Usage: import { onlineHelper } from '@vue-storefront/core/helpers' and then onlineHelper.isOnline - @patzick (#2510)
  • Cart count config, allows you to display the item count instead of a sum of the item quantities — @pauluse (#2483)
  • Video support in Product Gallery component. — @rain2o (#2433)

Fixed

  • Gallery low-quality image in offline mode when high quality already cached — @patzick (#2557)
  • Problem with placing a second order (unbinding payment methods after first order) — @patzick (#2195, #2503)
  • Remaking order on user orders page — @patzick (#2480)
  • Images blinking on category page — @pkarw (#2523)
  • state.ts not bound in the module-template — @pkarw (#2496)
  • Validation in the Myprofile section for postcode field — @pkarw (#1317)
  • Non-integer qty of product added to the cart — @pkarw (#2517)

Changed / Improved

  • The core/helpers parsing URL methods exchanged to query-stringpackage - @pkarw (#2446)
  • Unit tests in Karma are now removed in favor of jest — @lukeromanowicz(#2305)
  • Material Icons are loaded asynchronously — @JKrupinski, @filrak(#2060)
  • Update to babel 7 — @lukeromanowicz (#2554)
  • Fixed an issue where the correct image for a product configuration wasn’t set on the product page image carousel. Also added the fix on the productcarousel in the zoom component — @DaanKouters(#2419)
  • The way of creating VS Modules was changed to use the factory method instead of explicit object creation. — @filrak (#2434)
  • Added clear filters button on the desktop also and only show if filters are applied — @DaanKouters (#2342)
  • Improved docs at contributing.md and configuration.md (spelling etc.) — @ruthgeridema (#2421, #2422, #2423, #2425, #2426)
  • Fixed design issue of Country label on Edge 17 & Firefox — @ananth-iyer(#2390, #2399)
  • Wishlist and compare items are loaded from local cache only once, instead of every time when the module component is rendered — @patzick (#2431)
  • Country field is filled by the first country from the list in cart in payment section — @RakowskiPrzemyslaw(#2428)
  • Improved product quantity change component in product and cart — @patzick (#2398, #2437)
  • Updated to Vue 2.6.6 — @filrak (#2456)
  • Null sidebar menu data on static page fixed — @filrak (#2449, #2441)
  • The fix cannot edit previous steps in checkout — @filrak, @patzick (#2438)
  • Fixed route guard SSR problem — @vue-kacper (#2364)
  • Fix links in the footer to static pages bug — @filrak (#2452)
  • Fix links at docs, Basics/Configuration file explained — @daksamit(#2490)
  • Improve images loading on the category page, corrected alt view and blinking problem — @patzick (#2465)
  • Improve tsconfig for better IDE paths support — @patzick, @filrak(#2474)
  • fix breadcrumbs changing too early — @filrak, @pkarw (#2469, #2529)
  • improved product gallery load view, shows correct image on reload — @patzick (#2481, #2482, #2488, #2501)
  • Fix an issue where the index.html template within a theme is ignored — @EnthrallRecords (#2489)
  • Added async sidebar component with async off-screen components error handling and fetch retrying after coming back online — @filrak (#2408, #2451)
  • Inconsistent filters behavior — clear filters on page load — @patzick(#2435)
  • fix price is never below 0 and user can’t add 0 or below 0 products to cart — @RakowskiPrzemyslaw(#2437)
  • Check for placing single order in case of an error in any payment module — @patzick (#2409)
  • Display prices in products added in offline mode. — @patzick (#2450)
  • Updated cypress dependency for e2e tests — @lukeromanowicz (#2518)
  • Improved styles on recommendation filters, product title and numeric input — @patzick (#2458)

Deprecated / Removed

  • @vue-storefront/store package deprecated - @filrak

Learn more at vuestorefront.io

Vue Storefront 1.9 — custom URLs, Marketplace challenge, new live websites was originally published in The Vue Storefront Journal on Medium, where people are continuing the conversation by highlighting and responding to this story.

]]> <![CDATA[Vue Storefront 2.0 and Theme 2.0]]> https://medium.com/@frakowski/vue-storefront-2-0-and-theme-2-0-92a4d013f5bf?source=rss-2f6fdc60db8b------2 https://medium.com/p/92a4d013f5bf Wed, 17 Apr 2019 12:16:00 GMT 2019-04-17T12:16:00.783Z The default theme has served us well for a long time, but we have learned a lot in the last two years and now we want to turn all those lessons learned into code. This is why we are working on Theme 2.0 (I’m sure in the meantime we will come up with a better name).

What is Theme 2.0 and Vue Storefront 2.0?

Theme 2.0 is a completely new Vue Storefront default theme, written from scratch and aligned with our plans for future Vue Storefront architecture.

Vue Storefront 2.0 is just the evolution of the current core with a focus on seamless upgrades, easier setup, and better learning curve. The main difference introduced in Vue Storefront 2.0 is moving the whole core<>theme communication to Vuex stores and better encapsulation of modules. By having one layer of communication, core logic can be completely separated from theme logic which will make its customization and upgrade much easier.

We also plan to make some upgrades for the modules registration API to make them lazily loadable. This change won’t affect internals of any currently existing Vue Storefront module though, and they should be able to use the new APIs without any internal changes.

How will Theme 2.0 look?

More about designing a new Vue Storefront theme in the interview with Sveta Havaka.

Theme 2.0 will be based on Storefront UI — a customization-first library of Vue components dedicated to eCommerce and crafted by the Vue Storefront team and contributors.

Theme 2.0 is meant to provide the best out-of-the-box experience with a mobile-first design. It is based on the Google UX Retail Playbook to ensure the best possible User experience. We want to give developers the ability to customize the design in any way they want while keeping it upgradable, in contrast to the current theme.

Here is the list of key goals we want to achieve in Theme 2.0:

  • Best out-of-the-box experience
  • Mobile-first components
  • Ability to customize any aspect of the UI without losing upgradability
  • Great performance
  • Simplified theme structure
  • No need for breaking changes in the future
  • Great documentation
  • Lower learning curve
  • Highly requested theme fallback system

What about backward compatibility?

Even though we are moving the communication layer to Vuex and resigning from core pages, they will still be maintained and adjusted to changes so everyone using the old Vue Storefront theme can still receive updates. If you’re already using Vue Storefront in your shop, those changes are not gonna affect you more than regular updates. It’s important to mention that we want to introduce new APIs step by step with each new release so Vue Storefront 2.0 is not gonna be completely new software but just a final step inall the incremental improvements.

Also, the Vuex state data formats will remain untouched. We will only provide additional actions and getters.

When will it be released?

We plan to release the Theme 2.0 MVP along with part of VS 2.0 Vuex improvements later this year. Exactly when mostly depends on the number of contributions from our community. The core team is working hard on improving Vue Storefront, preparing it for version 2.0, building Storefront UI and Theme 2.0. If you’d like to help with any of those, we’d be more than happy to guide you. Let’s build a better Vue Storefront together ;)

Expect more details soon!

]]> <![CDATA[Vue Storefront 1.9-rc— new release cycle, Hybris and Prismic integrations]]> https://medium.com/the-vue-storefront-journal/vue-storefront-1-9-rc-new-release-cycle-hybris-and-prismic-integrations-2a15f4bf498b?source=rss-2f6fdc60db8b------2 https://medium.com/p/2a15f4bf498b Thu, 07 Mar 2019 14:12:56 GMT 2019-03-07T14:18:46.021Z

Version 1.9 is a huge milestone in Vue Storefront history. It’s not only a new release. It’s our promise to the community that Vue Storefront is mature enough to be a trustworthy enterprise solution that can keep its position as a leader in eCommerce Storefronts.

New release cycle

Since the product is mature enough to fulfill most of the needs we want to focus on polishing it by eliminating bugs, enriching APIs, making the product more stable and future-proof, providing better tooling with cli and dedicated snippets/dev tools.

From version 1.9 each Vue Storefront release will be divided into two steps (approx. 1 month each):

  1. The release candidate (1.x-rc)— is a rough version with the newest features. It’s not production-ready but developers are able to test and play with newest additions to the core. During this milestone, we are mostly focusing on widening our APIs and adding new features.
  2. Stable version (1.x) — Once all features and API additions are in the core we are working next month on polishing these new APIs, improving performance/stability and writing tests. After this milestone, we are publishing the production-ready and well-tested version of Vue Storefront.

You can read more about the new release cycle here.

Important note: The most recent stable version is 1.8.3. If you wish to upgrade to the latest codebase or make a new shop this is the right one to grab. We made tons of improvements in terms of stability during this release.

Product roadmap

Even though Vue Storefront is fully mature and ready to use the product we want to make it even better and our plans for its future are really exciting! We plan to incorporate many DX improvements with dedicated tooling and lower the entry level with each version. We also have four main long-term business goals;

  • Goal #1: to keep the Magento PWA leader status, support all ongoing and future implementations, maintain stability and backward compatibility at the highest level. We set the “implementations” work stream for that.
  • Goal #2: to improve our developer’s framework, improve the test coverage and code quality. We set the “improvements” work stream for this purpose.
  • Goal #3: to extend the number of supported backends in the ”integrations” workstream
  • Goal #4: to add new business features — in the “features” workstream.

Here you can read the details in Piotr Karwatka’s post.

SAP Hybris integration

Recently Rauf and Timofey from epam wrote a post on Hybrismart about Vue Storefront integration with SAP Hybris. They even recorded a demo!

Magento 1 integration open sourced!

Recently thanks to Piotr’s efforts we published full Magento 1 integration. It’s a perfect choice for Magento 1 -> Magento 2 migration.
Of course, it’s open source and MIT licensed!

Below you can find the bridge and data indexer:

Magento 2 native indexer open sourced!

Mage2vuestorefront indexer is soon to be replaced by native Magento 2 module! It will speed up the indexing process and makes it easier to jump in by Magento 2 developers thanks to the same technology stack.

The native indexer is available on GitHub to test and after we’re sure that it’s efficient and stable it’s gonna replace the current one.

Here you can find the repo.

Prismic integration by Agency Dn’D

Agency Dn’D just released a Prismic connector for Vue Storefront.
Prismic is a headless CMS that you can now use to manage content in your Vue Storefront store.

Agence Dn'D on Twitter

#NEWS ] 📢 Dn'D Agency is proud to present its new #connector between @VueStorefront and @prismicio ! Discover all the connector features : 👉 https://t.co/j3GyuVivyi

Vue Storefront Hackathon #6 in Amsterdam

Last month just before Vue.js Amsterdam our core partner Get_Noticed organized 6th Vue Storefront hackathon. As always it started with free training from the core team member and for the first time, it was Patryk Tomczyk!

Here you can read the recap of this awesome event!

Vue Storefront Hackathon #7 in Stockholm

30th of March Vue Storefront hackathon is taking place in Stockholm! The event will be hosted by joined forces of AW Academy, Dahl and Digitalent. Everyone around (or remotely) — feel invited :)

As always it’s a great chance to attend free training and learn Vue Storefront from core team members.

Here you can sign up for the hackathon.

SEO-friendly URL’s beta

We published a beta version of highly requested feature — SEO friendly URLs created by Piotr Karwatka. Now you can customize every URL exactly in a way you want!

You can read the details and a long discussion about this feature here.

Payment Request API alpha

Another big feature in this release is support for Payment Request API as an alternative to traditional checkout.

It’s a game-changer in terms of mobile checkout conversion and something we wanted in Vue Storefront for a very long time. Currently, it’s lacking only payment providers integration but our friends from Develo Design (authors of PayPal and Stripe modules) are already on it. You can expect a fully working version in the next release.

What else?

Added

  • Payment Request API integration — @qiqqq (#2306)
  • The Url Dispatcher feature added for friendly URLs. When config.seo.useUrlDispatcher set to true the product.url_path and category.url_path fields are used as absolute URL addresses (no /cand /p prefixes anymore). Check the latest mage2vuestorefront snapshot and reimport Your products to properly set url_path fields - #2010 - @pkarw
  • Unit tests of cart module written in jest — @lukeromanowicz (#2305)
  • New reactive helper to check online state. Usage: import { onlineHelper } from '@vue-storefront/core/helpers' and then onlineHelper.isOnline - @patzick (#2510)
  • Cart count config, allows you to display the item count instead of a sum of the item quantities — @pauluse (#2483)
  • Video support in Product Gallery component. — @rain2o (#2433)

Fixed

  • Gallery low-quality image in offline mode when high quality already cached — @patzick (#2557)
  • Problem with placing a second order (unbinding payment methods after first order) — @patzick (#2195, #2503)
  • Remaking order on user orders page — @patzick (#2480)
  • Images blinking on category page — @pkarw (#2523)
  • state.ts not bound in the module-template — @pkarw (#2496)
  • Validation in the Myprofile section for postcode field — @pkarw (#1317)
  • Non-integer qty of product added to the cart — @pkarw (#2517)

Changed / Improved

  • The core/helpers parsing URL methods exchanged to query-string package - @pkarw (#2446)
  • Unit tests in Karma are now removed in favor of jest — @lukeromanowicz (#2305)
  • Material Icons are loaded asynchronously — @JKrupinski, @filrak (#2060)
  • Update to babel 7 — @lukeromanowicz (#2554)
  • Fixed an issue where the correct image for a product configuration wasn’t set on the product page image carousel. Also added the fix on the productcarousel in the zoom component — @DaanKouters(#2419)
  • The way of creating VS Modules was changed to use the factory method instead of explicit object creation. — @filrak (#2434)
  • Added clear filters button on the desktop also and only show if filters are applied — @DaanKouters (#2342)
  • Improved docs at contributing.md and configuration.md (spelling etc.) — @ruthgeridema (#2421, #2422, #2423, #2425, #2426)
  • Fixed design issue of Country label on Edge 17 & Firefox — @ananth-iyer (#2390, #2399)
  • Wishlist and compare items are loaded from local cache only once, instead of every time when module component is rendered — @patzick (#2431)
  • Country field is filled by first country from the list in cart in payment section — @RakowskiPrzemyslaw(#2428)
  • Improved product quantity change component in product and cart — @patzick (#2398, #2437)
  • Updated to Vue 2.6.6 — @filrak (#2456)
  • Null sidebar menu data on static page fixed — @filrak (#2449, #2441)
  • Fix cannot edit previous steps in checkout — @filrak, @patzick (#2438)
  • Fixed route guard ssr problem — @vue-kacper (#2364)
  • Fix links in the footer to static pages bug — @filrak (#2452)
  • Fix links at docs, Basics/Configuration file explained — @daksamit (#2490)
  • Improve images loading on the category page, corrected alt view and blinking problem — @patzick (#2465)
  • Improve tsconfig for better IDE paths support — @patzick, @filrak (#2474)
  • fix breadcrumbs changing too early — @filrak, @pkarw (#2469, #2529)
  • improved product gallery load view, shows correct image on reload — @patzick (#2481, #2482, #2488, #2501)
  • Fix an issue where the index.html template within a theme is ignored — @EnthrallRecords (#2489)
  • Added async sidebar component with async off-screen components error handling and fetch retrying after coming back online — @filrak (#2408, #2451)
  • Inconsistent filters behavior — clear filters on page load — @patzick (#2435)
  • fix price is never below 0 and user can’t add 0 or below 0 products to cart — @RakowskiPrzemyslaw(#2437)
  • Check for placing single order in case of error in any payment module — @patzick (#2409)
  • Display prices in products added in offline mode. — @patzick (#2450)
  • Updated cypress dependency for e2e tests — @lukeromanowicz (#2518)
  • Improved styles on recommendation filters, product tile and numeric input — @patzick (#2458)

Deprecated / Removed

  • @vue-storefront/store package deprecated - @filrak

Vue Storefront 1.9-rc— new release cycle, Hybris and Prismic integrations was originally published in The Vue Storefront Journal on Medium, where people are continuing the conversation by highlighting and responding to this story.

]]> <![CDATA[Vue.js App Performance Optimization: part 3— Lazy loading Vuex modules]]> https://itnext.io/vue-js-app-performance-optimization-part-3-lazy-loading-vuex-modules-ed67cf555976?source=rss-2f6fdc60db8b------2 https://medium.com/p/ed67cf555976 Fri, 22 Feb 2019 08:24:06 GMT 2019-07-11T09:49:46.929Z

In the previous part we learned pattern that is powerful enough to drastically improve performance of your application — splitting code per routes. While splitting code per route can be very helpful there is still a lot of code inside them that is not needed right after user visits our site. In this part of the series we will focus on code splitting our state management — Vuex modules.

This series is based on learnings from Vue Storefront performance optimization process. By using below techniques we were able to cut off size of our initial bundle by 70% and made it load in a blink of an eye.

Part 1 — Introduction to performance optimization and lazy loading.

Part 2 — Lazy loading routes and vendor bundle anti-pattern.

Part 3 — Lazy loading Vuex modules

Part 4 — Delivering good waiting experience and lazy loading individual components — soon

Part 5 — Lazy loading libs and finding smaller equivalents — soon

Part 6 — Performance-friendly usage of UI libraries

Part 7 — Making use of Service Worker cache — soon

Part 8 — Prefetching

Two types of Vuex modules

There is one important thing you need to be aware of before we will go further and see how to load Vuex modules lazily. You need to understand what are the possible ways to register a Vuex module and what are their pros and cons.

Static Vuex modules are declared during the Store initialization. Here is an example of explicitly created static module:

// store.js
import { userAccountModule } from './modules/userAccount'
const store = new Vuex.Store({
  modules: {
    user: userAccountModule
  }
})

Above code will create a a new Vuex Store with static module userAccountModule. Static modules can’t be unregistered (also their registration can’t be delayed) and their structure (not state!) can’t be changed after the Store initialization.

While this limitations won’t be a problem for most of the modules and declaring all of them in one place is really helpful for keeping all data-related stuff in one place there are some downsides of this approach.

Let’s say we have Admin Dashboard in our application with a dedicated Vuex module.

// store.js
import { userAccountModule } from './modules/userAccount'
import { adminModule } from './modules/admin'
const store = new Vuex.Store({
  modules: {
    user: userAccountModule, 
    admin: adminModule
  }
})

You can imagine that such module can be pretty huge. Even though dashboard will be used only by a small part of users and in a restricted area of application (let’s say under a special /admin route) due to centralized registration of static Vuex modules all of it’s code will end up in the main bundle.

All of our modules are bundled into one file

This is certainly not a situation that we want to end up in. We need a way to load this module only in /admin route. As you may have guessed static modules can’t fulfill our need. All static modules needs to be register at the moment of Vuex Store creation therefore they can’t be registered later.

This is where dynamic modules can help us!

Dynamic modules in opposite to the static ones can be registered after Vuex Store creation. This neat capability implies that we don’t need to download dynamic module on app initialization and can bundle it in different chunk of code or load lazily when it’s needed.

First let’s see how the previous code will look like with dynamically registered admin module.

// store.js
import { userAccountModule } from './modules/userAccount'
import { adminModule } from './modules/admin'
const store = new Vuex.Store({
  modules: {
    user: userAccountModule, 
  }
})
store.registerModule('admin', adminModule)

Instead of passing adminModule object directly into modules property of our store we registered it after Store creation with registerModule method.

Dynamic registration doesn’t require any changes inside the module itself so any Vuex module can be registered either statically or dynamically.

Of course in current form this dynamically registered module is not giving us any advantage.

Properly code-splitted Vuex modules

Let’s go back to our problem. Now that we know how to register admin module dynamically we can certainly try to put it’s code into /admin route bundle.

Let’s stop for the moment to briefly understand the application we are working with.

// router.js
import VueRouter from 'vue-router'
const Home = () => import('./Home.vue')
const Admin = () => import('./Admin.vue')
const routes = [
  { path: '/', component: Home },
  { path: '/admin', component: Admin }
]
export const router = new VueRouter({ routes })

In router.js we have two code-splitted routes that are loaded lazily. With the code that we have seen above our admin Vuex module is still in main app.js bundle because of it’s static import in the store.js.

Let’s fix this and deliver this module only to the users entering /admin route so other’s will not download the redundant code.

To do so we will load the admin module in /admin route component instead of importing and registering it instore.js.

// store.js
import { userAccountModule } from './modules/userAccount'
export const store = new Vuex.Store({
  modules: {
    user: userAccountModule, 
  }
})
// Admin.vue
import adminModule from './admin.js'
export default { 
  // other component logic
  mounted () { 
    this.$store.registerModule('admin', adminModule)
  },
  beforeDestroy () {
   this.$store.unregisterModule('admin')
  }
}

Let’s take a look at what happened!

We are importing and registering admin Store inside Admin.vue (/admin route) right after it’s mounted. Later in the code we are unregistering the module once the user exits admin panel to prevent multiple registrations of the same module.

Now because admin module is imported inside Admin.vue instead of store.js it will be bundled together with code-splitted Admnin.vue!

Important note: If you’re using SSR mode make sure that you’re registering the module in mounted hook. Otherwise it can led to memory leaks since beforeDestroy hook is not evaluated on the server side.

Now we know how to use dynamic Vuex module registration to distribute our route-specific modules into proper bundles. Let’s take a look at slightly more complicated use case.

Lazy loading Vuex modules

Let’s say we have testimonials section on our Home.vue where we want to display positive opinions about our services. There’s a lot of them so we don’t want to show them right after user enters our website. It’s much better to display them only if user want it. We can add “Show Testimonials” button that will load and display the testimonials below it after clicked.

To store testimonials data we need one more Vuex module. Let’s call it testimonials. The module will be responsible for showing previously added testimonials and adding new one. We don’t need to know about implementation details.

We want testimonials module to be downloaded ONLY if user clicks the button since it’s not needed before. Let’s see how we can make use of dynamic module registration and dynamic imports to achieve this functionality. Testimonials.vue is a component inside Home.vue.

Let’s quickly review the code.

When user clicks Show Testimonials button getTestimonials() method is invoked. It is responsible for invoking getTestimonialsModule() which is fetching testimonials.js. Once promise is resolved (which means module is loaded) we are dynamically registering it and dispatching action responsible for fetching testimonials.

Thanks to dynamic imports testimonials.js content is bundled into a separate file that is downloaded only when getTestimonialsModule method is invoked.

When we need to exit admin panel we’re just unregistering previously registered module in beforeDestroy lifecycle hook so it’s not gonna be duplicated if we enter this route again.

Wrap up

Even though static Vuex modules registration is sufficient for most use cases there are some certain situations when we might want to make use of dynamic registration.

  • If module is needed only on specific route, then we can register it dynamically in proper route components so it‘s not ending up in main bundle.
  • If module is needed only after some interaction , then we need to combine dynamic module registration with dynamic import and load module lazily in a proper method.

Ability to code split Vuex modules is a powerful tool. The more data-related operations you’re dealing with in your application the more savings you’ll get in terms of bundle size.

In the next part of the series we will learn how to lazily load individual components and, what is more important, which components should be loaded lazily.

Vue.js App Performance Optimization: part 3— Lazy loading Vuex modules was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.

]]> <![CDATA[Vue.js App Performance Optimization: part 2- Lazy loading routes and vendor bundle anti-pattern]]> https://itnext.io/vue-js-app-performance-optimization-part-2-lazy-loading-routes-and-vendor-bundle-anti-pattern-4a62236e09f9?source=rss-2f6fdc60db8b------2 https://medium.com/p/4a62236e09f9 Sat, 09 Feb 2019 16:51:49 GMT 2019-09-11T09:41:09.118Z Vue.js App Performance Optimization: part 2— Lazy loading routes and vendor bundle anti-pattern.

In the previous article we learned what code splitting is, how it works with Webpack and how to make use of it with lazy loading in Vue app. Now we will dig a little bit deeper into the code and learn most useful pattern for code splitting Vue.js apps.

This series is based on learnings from Vue Storefront performance optimization process. By using below techniques we were able to cut off size of our initial bundle by 70% and made it load in a blink of an eye.

Part 1 — Introduction to performance optimization and lazy loading.

Part 2 — Lazy loading routes and vendor bundle anti-pattern.

Part 3 — Lazy loading Vuex modules

Part 4 — Delivering good waiting experience and lazy loading individual components — soon

Part 5 — Lazy loading libs and finding smaller equivalents — soon

Part 6 — Performance-friendly usage of UI libraries

Part 7— Making use of Service Worker cache — soon

Part 8— Prefetching

Article moved

Hey this article has been updated with much more insights and moved to VueSchool blog here!

Vue.js App Performance Optimization: part 2- Lazy loading routes and vendor bundle anti-pattern was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.

]]> <![CDATA[Vue Storefront 1.8 — the power of VS community!]]> https://medium.com/the-vue-storefront-journal/vue-storefront-1-8-power-of-vs-community-6809711824e3?source=rss-2f6fdc60db8b------2 https://medium.com/p/6809711824e3 Fri, 08 Feb 2019 10:12:29 GMT 2019-02-19T19:12:29.091Z Vue Storefront 1.8 — the power of the VS community!

The 1.8 milestone is truly showing the power and scale of the Vue Storefront community. Even though the core team is focused mostly on delivering the new default theme, our community members are extremely active: organizing hackathons, creating new modules, themes and contributing to the core! Looks like VS can be safely considered a truly community-driven project!

The Demo Theme Challenge — winners

A few months ago, we announced The Demo Theme Challenge and we are happy to announce the winner! Our partner Absolute Web Services not only made a stunning design but also implemented it as a live VS shop! Congrats!

Vue Storefront on Twitter

Vuetique created by @AbsoluteWebINC represents user-friendly approach by giving the layout a totally fresh, tidy look ✅ No wonder it won our Demo Theme Contest 🤷 https://t.co/Troa9KtgSv

Here you can find the full results of The Demo Theme Challenge and here is the Vuetique demo.

The Marketplace Challenge

The Vue Storefront community is getting bigger and bigger. We’ve decided that now is the perfect time to introduce Vue Storefront marketplace where community members can share their work and make money on it.

To launch our official Marketplace, we need to build the critical mass of the modules, themes, and integrations first, that is why we are inviting freelancers and companies to build:

  • Integrations — like WooCommerce, IBM Websphere, Hybris, Demandware, and Prestashop. Other third-party platforms are welcome;
  • Custom Vue Storefront Modules — especially for Payment providers — like our Braintree, Paypal integrations;
  • Custom Vue Storefront Themes.

Send us your work before 1st of March. The best authors will be promoted and officially showcased. Moreover, we have prepared some cool rewards. You can read about the contest and rewards here.

Improved External Checkout by Vendic

Our Core Partner Vendic.nl has taken care of the External Checkout Module, porting it to the new VS architecture and extending the configuration capabilities. Check the official repository.

Vue Storefront hackathon #5 in Milan by BitBull

Last week our core partner BitBull organized the first Vue Storefront hackathon in Italy, and it’s safe to say that it was a huge success!

The grand opening by Andrea Chiarottino — CTO of Eataly. They provided us with an amazing venue and food.

Here you can read the event’s summary by Gennaro Vietri — CTO of BitBull.

Vue Storefront hackathon #6 in Amsterdam by Get_Noticed

Just two weeks after the hackathon in Milan, we are moving to Amsterdam.
Two days before one of the biggest (or just the biggest?) Vue.js conferences in the world our core partner Get_Noticed is hosting another Vue Storefront hackathon. This time it’s the first one ever in the Netherlands!

If you want to participate in person or remotely please sign up here.

Before the hackathon, there will be free training that’ll cover the Vue Storefront basics.

Tom Karwatka on #MM19IN

Last week, Divante CEO Tom Karwatka was speaking about Progressive Web Apps in eCommerce and Vue Storefront during Meet Magento India 2019. The amount of positive feedback at the conference and on social media was stunning, and it looks like we had no idea as to the extent of VS’s popularity in India!

The outcome is the first official Vue Storefront partner in India — Aureate Labs. Welcome to the community!

What else?

  • Upcoming Magento MSI integration

Filip Rakowski on Twitter

@magento MSI support for @VueStorefront is coming https://t.co/7Zt8ofccUt. Amazing job @aleron75! I really like this in-depth analysis you made ;)

  • Payment Request API integration PoC

Feature 2184: Payment Request API Integration by qiqqq · Pull Request #2306 · DivanteLtd/vue-storefront

  • Adyen payment’s support by Melvin Hamilton Digital

melvin-hamilton-digital/vsf-payment-adyen

  • The first usages of PWA/AMP combination in Vue Storefront

Filip Rakowski on Twitter

Did you know that you can use @Google #AMP in combination with #PWA in @VueStorefront ? It's an amazing combo for SEO and is serving our users very well! https://t.co/znCIJpdBNq #javascript

What’s new?

Added

Changed / Improved

Learn more about Vue Storefront community and partners at vuestorefront.io

Vue Storefront 1.8 — the power of VS community! was originally published in The Vue Storefront Journal on Medium, where people are continuing the conversation by highlighting and responding to this story.

]]> <![CDATA[Introduction to Vue Storefront — a quick ‘getting started’ guide.]]> https://medium.com/the-vue-storefront-journal/introduction-to-vue-storefront-a-quick-getting-started-guide-d119023ed67d?source=rss-2f6fdc60db8b------2 https://medium.com/p/d119023ed67d Mon, 04 Feb 2019 11:36:00 GMT 2019-02-09T17:12:33.406Z Introduction to Vue Storefront — a quick ‘getting started’ guide

Vue Storefront is rather a complex solution with a lot of possibilities. Learning all of them can take some time. In this article, I’ll try to explain all its crucial concepts in a few minutes to prove that it’s all you need to start playing with Vue Storefront.

What is Vue Storefront?

Vue Storefront is a headless and backend-agnostic eCommerce Progressive Web App written in Vue.js. The fact that it uses headless architecture allows Vue Storefront to be connected with any eCommerce platform, so it can be a frontend PWA for Magento, Shopify, BigCommerce, WooCommerce, etc.

It’s a very popular Open Source project with a strong and growing community.

Key features of Vue Storefront are:

  • being platform-agnostic
  • focus on performance
  • mobile-first approach
  • cutting-edge tech
  • no limitations in theming and customization
  • being Open Source with MIT license
  • great developer experience
  • out of the box Server-Side Rendering (for SEO)
  • offline mode

Here you can find Vue Storefront landing page and here is a GitHub repository.

How does it connect with backend platforms?

Vue Storefront manages to be platform agnostic thanks to the vue-storefront-api and dedicated API connectors for eCommerce backend platforms. The data format in vue-storefront-api is always the same for any platform, which means no matter which eCommerce backend you use, your frontend remains the same — without any changes.

It’s a great strategy for migrations since you can easily migrate from one platform to another (or from one version to another, e.g. Magento 1 -> 2) without touching your frontend.

The API connector works in two phases:

  • data pump (on the image mage2nosql) pulls static data (catalog, orders etc) from your eCommerce platform to Vue Storefront ElasticSearch and changes its format to the one consumed by vue-storefront-api. After pulling the data, you can display your product catalog in Vue Storefront. After pumping the data into ElasticSearch, it will stay in sync with changes on the backend platform side and update its content.
  • worker pool is synchronization of so-called dynamic calls (user sessions, cart rules etc) that can’t be stored in the database and need to be called by vue-storefront-api directly from the backend platform.

While managing these two phases of integration, Vue Storefront can work with your backend platform.

Some of the most popular backend platforms already have their integrations (Magento 2, Magento 1, CoreShop, BigCommerce, WooCommerce) but you can easily make your own with the integration boilerplate.

The blue parts on the diagram are responsible for offline cache and will be explained later in the article.

How does it work?

There are 3 concepts you need to be familiar with while working with Vue Storefront.

  • Vue Storefront Core (core folder) is the glue for all its features that allow Vue Storefront to work. It contains all the entry points, SSR behavior, builds process, in-app libs and helpers. You shouldn’t touch this folder directly when building your own implementations in order to continue to receive updates.
  • Vue Storefront Modules (core/modules and src/modules) is the eCommerce features. Each module is one encapsulated feature (like cart, wishlist, catalog, some third-party integration). You can add/remove/edit these modules as you will and compose your Vue Storefront shop with only the features that you need. They are also used for 3rd party extensions
  • Vue Storefront Themes (src/themes) are the actual shop implementations. In themes, you can use and extend all the logic from registered modules/core and add your HTML markup and styles. Vue Storefront provides a fully customizable default theme.

To summarize: your shop is basically a Vue storefront theme that uses features provided by modules. Vue Storefront core glues it all together.

Knowing these three concepts allows you to confidentially work with Vue Storefront and make your own shops.

Useful materials: Vue Storefront project structure.

Installing Vue Storefront

When you want to play with Vue Storefront there are three options:

This is everything you need to have VS working with our demo backend.
  • You can set up the frontend connected to our demo backend platform (best to try out the Vue Storefront).
  • You can set up the frontend with your own vue-storefront-api and database dumped from demo.
  • You can set up the frontend with vue-storefront-api connected to your eCommerce backend.

To do any of this, simply type "yarn installer" in the root directory of the project and answer the questions in the console. Once the installation is done, type "yarn dev" to run your project (by default on port 3000). No matter what option you choose, you can change the settings in config file later.

Vue Storefront config file

Most of the Vue Storefront configuration (like the active theme, backend API addresses, multi store setup, etc.) is done through its config file which can be found under the "config" folder. The default.json file contains all the default setup.

For your own implementation, you should create a local.json file and include the fields from default.json that you want to override. These two files will be merged in favour of local.json during the build process. If you use the installer to set up your Vue Storefront instance, it’ll generate the proper config files.

Building themes in Vue Storefront

While making themes in Vue Storefront in most cases, all you need to take care of is creating your own HTML and CSS markup. All the required business logic is exposed by the core with its core modules and can be easily injected into any of the theme components.

The business logic from the core component can be easily injected into any theme component as a Vue.js mixin.

The mechanism of injecting core business logic into themes is very simple. We use Vue.js mixins to keep upgradable business logic in the core. So assuming we have a core Microcart component with business logic like this (left side), we can easily inject it into any of our theme components (right side) just by importing it and adding as a mixin mixins: [Microcart]. This is all you need to make use of core business logic inside your theme. With this approach, we can easily ship updates to all core components without breaking your shop.

The easiest way to create your own theme is to create a copy of the default one, change its name in its package.json file, change the active theme in config/local.json and run yarnto make Lerna linking (which we use for monorepos).

Offline mode and cache

Vue Storefront still works even while the user is offline. We managed to do this by making heavy use of the browser cache.

  • For the static assets (only prod) we use the sw-precache plugin (config can be found in core/build/webpack.prod.sw.config.js ). They are cached in Service Worker and can be inspected under theApplication tab of your dev tools.
Here you can find cached static assets. Please notice that Service Worker works only in production mode.
  • For the catalog and store data cache we use IndexedDB and Local Storage. We also prefetch products from visited categories so once you enter one, all of its products are available offline. The mechanism of offline storage is located under core/lin./storage.

We use some of the cached data even while the user is online, to display the content instantly. This is why Vue Storefront is so fast.

What else

You may not believe me but this is all you need to know to start working with Vue Storefront! After learning the basics just visit our docs and community slack to dig deeper into the project.

Useful links

Video with training

You can also watch a video recording from 4th Vue Storefront hackathon with free introduction training

Introduction to Vue Storefront — a quick ‘getting started’ guide. was originally published in The Vue Storefront Journal on Medium, where people are continuing the conversation by highlighting and responding to this story.

]]> <![CDATA[Vue.js App Performance Optimization: part 1 — Introduction to performance optimization and lazy…]]> https://itnext.io/vue-js-app-performance-optimization-part-1-introduction-to-performance-optimization-and-lazy-29e4ff101019?source=rss-2f6fdc60db8b------2 https://medium.com/p/29e4ff101019 Tue, 29 Jan 2019 10:25:34 GMT 2019-07-11T09:49:26.371Z

Vue.js App Performance Optimization: part 1 — Introduction to performance optimization and lazy loading.

While mobile-first approach becomes a standard and uncertain network conditions are something we should always take into consideration it’s harder and harder to keep your application loading fast. In this series I’ll dig deep into Vue performance optimization techniques that we are using in Vue Storefront and that you can use in your Vue.js applications to make them loading instantly and perform smooth. My goal is to make this series a full and complete guide on Vue apps performance.

Part 1 — Introduction to performance optimization and lazy loading.

Part 2 — Lazy loading routes and vendor bundle anti-pattern.

Part 3 — Lazy loading Vuex modules

Part 4 — Delivering good waiting experience and lazy loading individual components — soon

Part 5 — Lazy loading libs and finding smaller equivalents — soon

Part 6 — Performance-friendly usage of UI libraries

Part 7 — Making use of Service Worker cache — soon

Part 8 — Prefetching

Article moved and refreshed!

Hey! This article was moved to Vue School blog here. I refreshed it with better examples and few more tricks :) Stay tuned for the next parts also on Vue School blog!

Vue.js App Performance Optimization: part 1 — Introduction to performance optimization and lazy… was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.

]]>