A standalone PWA storefront for your eCommerce

A standalone PWA storefront for your eCommerce

Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, Pimcore, Prestashop or Shopware) through the API.

Vue Storefront - headless PWA for any eCommerce

build:passed version Branch stable Branch Develop Branch Develop

Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, Pimcore/CoreShop, BigCommerce, Prestashop or Shopware) through the API.

Vue Storefront is and always will be in the open source. Anyone can use and support the project, we want it to be a tool for the improvement of the shopping experience. The project is in the production ready phase.

Important note to developers: From 1.0RC we started using [develop](https://github.com/DivanteLtd/vue- storefront/tree/develop) branch for nightly builds (contains all new features) and master branch for stable. Please make sure you're working on right branch. Please take a look at Contributing guidelines.

If you're new and need some guidance feel free to visit out forum or reach anyone from the core team on our slack:

  • @Filip Rakowski (frontend, architecture and best practices related stuff)
  • @pkarw (integrations and backend related stuff)
  • @ptomczyk (frontend related stuff)
  • @Bartek Igielski(frontend and magento-specific related stuff)

Want to invest some time in building the future of eCommerce? we are looking for core team members willing to help us make VS even more awesome. Interested - contact @Filip Rakowski on slack

We are looking for Contributors and Designer willing to help us in the solution development.

See the ideas behind Vue Storefront here

Read contribution rules before making any pull request. Pull request that doesn't meet these requirements will not be merged

PS: Check StorefrontUI - our UI library for eCommerce.

See it in action

B2C Theme demo Try out our open demo and if you like it first give us some star on Github β˜… and then contact us on Slack or via [email protected].

This demo site is connected to Magento 2.2 with shopping carts and users synchronization so You can make an order (which unfortunatelly won't be shipped ;P).

If You like to see Magento 1 integration demo please do contact us.

Video demo

See how it works!

Technical Webcast #1 - demo and the architecture

Demo and the architecture of Vue Storefront

Is it production ready?

Yes! There are more than 10 implementations happening right now and many live shops (check awesome Vue Storefront list).

Join the community on Slack

If you have any questions or ideas feel free to join our slack: https://vuestorefront.slack.com via invitation link

Roadmap

Here you can find the accepted roadmap for current milestone and what you can expect with next release.

Roadmap planning

Here you can vote for feature requests and see which ones were accepted. The most upvoted ones will be added to the next milestones. You can also join the slack channel #roadmap-planning where we discuss the next milestones.

The process of adding new features to the roadmap looks like this:

  1. You create an issue and label it as feature request.
  2. One of VS Core team verifies the feature request and if the explanation is clear, it is added to the Roadmap project so it's visible in the board.
  3. Now people can vote for this feature to be added into next milestone with thumb up emoji.
  4. Feature requests with the biggest popularity will be added into next milestones.

We are planning 1-2 milestones ahead. Our milestones are based on requirements from community, partners and production implementations.

Please note that bugfixes are treated separately and in most cases added to the milestones immediately.

Check the feature list of 1.0.

If youd like to take part in roadmap planning feel free to join #roadmap-planning channel on our slack

Documentation + table of contents

The documentation is always THE HARDEST PART of each open source project! But we're trying hard.

Please find out what we've already managed to prepare: available on Github Pages. Please note that new docs are still Work In Progress and will be successfully updated. You can find them also under the docs folder.

You can find some tutorials and explanations on our YouTube channel

Installation

Basics

Vue Storefront core and themes

Tutorial series on creating themes for Vue Storefront:

Data in Vue Storefront

Integrations

'Default theme' contribution rules

Awesome projects related to Vue Storefront

Check Vue Storefront Awesome

The business challenges

Vue Storefront was created to solve a set of key business challenges from the world of the shopping experience. Our goal for the application is to provide the solution with:

  • The ultrafast front-end for the store - with the PWA approach we can now render the catalog of products within milliseconds;
  • The endurance for traffic overloads on the store;
  • The off-line shopping capabilities;
  • The smooth shopping experience close to the user experience from the native mobile applications;
  • The all-in-one front-end for desktop and mobile screens with no necessity for maintaining 3 or more applications for different touchpoints (web browser, Android, iOS etc.).
  • Rapid development without architecture limitations.

The technology

Vue Storefront was built as an all-in-one front-end for eCommerce. For providing the best performance we decided to use Vue.js as a front-end library, Node.js + Express (and maybe GraphQL support) as a server-API, Elastic Search as a database of products and full PWA/off-line support. Here you can read more about the proof of concept for Vue Storefront connected with Magento2.

Besides a big improvement for the shopping experience, we also want to create a great code base for every developer who needs to work on a front-end application for the eCommerce.

The architecture

Architecture diagram

The design

The application is prepared to be fully customized in design through the theming system. With the current version we work on raw, basic template of typical eCommerce for a fashion industry. In the project we used Material Icons.

Vue Storefront - Annimations in sidebar menu Vue Storefront - Annimations in featured products box

Here you can read more about the process of designing PWA for eCommerce.

The design is available in open source in the Figma file format under the URL https://www.figma.com/file/VKyqbHFI55TKIKcQlFLiVpVF/Vue-Storefront-Open-Source.

Other platforms

Vue Storefront is platform agnostic which means it can be connected to virtually any CMS. Please take a look at Pimcore bridge to give you an idea of how other platforms can be connected. Any support for integrating Prestashop, Shopify ... - much appreciated.

The license

Vue Storefront source code is completely free and released under the MIT License.

Contributing

If you like the idea behind Vue Storefront and want to become a contributor - do not hesitate and check our list of the active issues or contact us directly via [email protected].

If you have discovered a

Github Repository