<p>
  </a>
</p>

<p>
  Try out our open demo and if you like it <strong> first give us some star on Github ★</strong> and then contact us on <a rel="nofollow noopener" target="_blank" href="https://discord.vuestorefront.io">Vue Storefront Official Discord</a> or via contributors@vuestorefront.io. This demo site is connected to Magento2.
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-be-up-to-date-with-the-news" class="anchor" aria-hidden="true" href="#be-up-to-date-with-the-news"></a>Be up to date with the news
</h2>

<p>
  We&#8217;re trying to be very open regarding our development plans, news, roadmap and in general: sharing a lot. Please do bookmark our <a rel="nofollow noopener" target="_blank" href="https://blog.vuestorefront.io/">Official blog</a> to be always up to date!
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-foundations--vue-storefront-1x" class="anchor" aria-hidden="true" href="#foundations--vue-storefront-1x"></a>Foundations | Vue Storefront 1.x
</h2>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://www.youtube.com/watch?v=o10oinxCYfY&list=PLIDwzUVxSXjN9pK1NzBTcirV3-K0OCay0"></a>
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-how-to-install-vue-storefront-on-windows" class="anchor" aria-hidden="true" href="#how-to-install-vue-storefront-on-windows"></a>How to install Vue Storefront on Windows?
</h2>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://www.youtube.com/watch?v=zL_T3WzVLG0&list=PLIDwzUVxSXjN9pK1NzBTcirV3-K0OCay0&index=2"></a>
</p>

<ul dir="auto">
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/installation/magento.html#using-native-magento-2-module">Read on how to integrate it with Magento2</a>, <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/core-themes/themes.html">Read how to create Vue Storefront theme</a>,
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="http://blog.vuestorefront.io/vsf-on-production-interview-with-gogetgold-com/">Read the interviews with authors of first production deployments</a>
  </li>
</ul>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-is-it-production-ready" class="anchor" aria-hidden="true" href="#is-it-production-ready"></a>Is it production ready?
</h2>

<p>
  Yes! There are more than <strong>140 implementations</strong> happening right now and many live shops (check awesome live projects on Vue Storefront).
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-browser-compatibility" class="anchor" aria-hidden="true" href="#browser-compatibility"></a>Browser Compatibility
</h2>

<ul dir="auto">
  <li>
    last 2 Chrome versions
  </li>
  <li>
    last 2 Firefox versions
  </li>
  <li>
    last 2 Edge versions
  </li>
  <li>
    modern browsers
  </li>
</ul>

<p>
  For an up-to-date list of supported browsers please see &#8220;browserslist&#8221; in package.json
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-join-the-community-on-discord" class="anchor" aria-hidden="true" href="#join-the-community-on-discord"></a>Join the community on Discord
</h2>

<p>
  If you have any questions or ideas feel free to join our discord via invitation link: <a rel="nofollow noopener" target="_blank" href="https://discord.vuestorefront.io/">https://discord.vuestorefront.io/</a>
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-roadmap" class="anchor" aria-hidden="true" href="#roadmap"></a>Roadmap
</h2>

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

<h4 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-roadmap-planning" class="anchor" aria-hidden="true" href="#roadmap-planning"></a>Roadmap planning
</h4>

<p>
  Here you can vote for feature requests and see which ones were accepted. The most upvoted ones will be added to the next milestones.<br /> The process of adding new features to the roadmap looks like this:
</p>

<ol dir="auto">
  <li>
    You create an issue and label it as <code>feature request</code>.
  </li>
  <li>
    One of VS Core team verifies the feature request and if the explanation is clear, it is added to the <code>Roadmap</code> project so it&#8217;s visible in the board.
  </li>
  <li>
    Now people can vote for this feature to be added into next milestone with <code>thumb up</code> emoji.
  </li>
  <li>
    Feature requests with the biggest popularity will be added into next milestones.
  </li>
</ol>

<p>
  We are planning 1-2 milestones ahead. Our milestones are based on requirements from community, partners and production implementations.<br /> Please note that bugfixes are treated separately and in most cases added to the milestones immediately.<br /> <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/basics/feature-list.html">Check the feature list of 1.0</a>.<br /> If youd like to take part in roadmap planning feel free to join #roadmap-planning channel on our discord
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-documentation--table-of-contents" class="anchor" aria-hidden="true" href="#documentation--table-of-contents"></a>Documentation + table of contents
</h2>

<p>
  The documentation is always THE HARDEST PART of each open source project! But we&#8217;re trying hard.<br /> <strong>Please find out what we&#8217;ve already managed to prepare:</strong> <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/">available on Github Pages</a>. Please note that new docs are still Work In Progress and will be successfully updated. You can find them also under the <code>docs</code> folder.<br /> You can find some tutorials and explanations on our <a rel="nofollow noopener" target="_blank" href="https://www.youtube.com/vuestorefront">YouTube channel</a>
</p>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-installation" class="anchor" aria-hidden="true" href="#installation"></a>Installation
</h3>

<ul dir="auto">
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/cookbook/setup.html">Starter pack for install</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/installation/linux-mac.html">Installing on Linux/MacOS</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/installation/windows.html">Installing on Windows</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/installation/magento.html">How to install and integrate with Magento2</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/installation/production-setup.html">Production setup</a>
  </li>
</ul>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-cookbooks" class="anchor" aria-hidden="true" href="#cookbooks"></a>Cookbooks
</h3>

<ul dir="auto">
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/cookbook/data-import.html">Ch1. Data Imports</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/cookbook/elastic.html">Ch2. Elasticsearch in the VSF context</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/cookbook/setup.html">Ch3. Starter pack for new comers (Install)</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/cookbook/module.html">Ch5. Building a Module from scratch</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/cookbook/theme.html">Ch6. Theming in depth</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/cookbook/checklist.html">Chef&#8217;s secret note: Hardcore training for serious business</a>
  </li>
</ul>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-awesome-projects-on-vue-storefront" class="anchor" aria-hidden="true" href="#awesome-projects-on-vue-storefront"></a>Awesome projects on Vue Storefront
</h2>

<p>
  Check <strong>Vue Storefront Live Projects</strong><br /> <a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/2e7cfc3ed8c5b25b6138657a7da9869132893da2dccf2fc59ba5ece1baa497f7/68747470733a2f2f75706c6f6164732d73736c2e776562666c6f772e636f6d2f3565376366363631633233616339646631353664396333642f3565666634653531343933333461313062623637323739305f4769744875625f4c69766525323050726f6a656374732e706e67"></a>
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-the-business-challenges" class="anchor" aria-hidden="true" href="#the-business-challenges"></a>The business challenges
</h2>

<p>
  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:
</p>

<ul dir="auto">
  <li>
    The ultrafast front-end for the store &#8211; with the PWA approach we can now render the catalog of products within milliseconds;
  </li>
  <li>
    The endurance for traffic overloads on the store;
  </li>
  <li>
    The off-line shopping capabilities;
  </li>
  <li>
    The smooth shopping experience close to the user experience from the native mobile applications;
  </li>
  <li>
    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.).
  </li>
  <li>
    Rapid development without architecture limitations.
  </li>
</ul>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-the-technology" class="anchor" aria-hidden="true" href="#the-technology"></a>The technology
</h2>

<p>
  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.<br /> Here you can read more about the proof of concept for <a rel="nofollow noopener" target="_blank" href="https://www.linkedin.com/pulse/magento2-nosql-database-pwa-support-piotr-karwatka">Vue Storefront connected with Magento2</a>.<br /> 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.
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-the-headless-architecture" class="anchor" aria-hidden="true" href="#the-headless-architecture"></a>The headless architecture
</h2>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/b139eec53f51c268fb29c125875d8ffe30b3cc3e1d9876c7d1a9af9147c04ca0/68747470733a2f2f75706c6f6164732d73736c2e776562666c6f772e636f6d2f3565376366363631633233616339646631353664396333642f3565666634613234393761313534366361303537646363615f6769746875625f686561646c6573735f6172636869746563747572652e706e67"></a>
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-design" class="anchor" aria-hidden="true" href="#design"></a>Design
</h2>

<p>
  Vue Storefront supports by default <strong>two different themes:</strong>
</p>

<ol dir="auto">
  <li>
    <strong>Capybara Theme based on Storefront UI</strong>
  </li>
</ol>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/43fa276f2e23a65fdceae2ba13dbdf95fc2fe670f566c2bf15f4027e556d8211/68747470733a2f2f75706c6f6164732d73736c2e776562666c6f772e636f6d2f3565376366363631633233616339646631353664396333642f3565666634393533346462613138396161666132316535355f4769746875625f43617079626172615f5468656d652e6a7067"></a>
</p>

<ol start="2" dir="auto">
  <li>
    <strong>Classic/Default </strong>
  </li>
</ol>

<p>
  The application is prepared to be fully customized in design through the theming system.<br /> With the current version we work on raw, basic template of typical eCommerce for a fashion industry. In the project we used Material Icons.<br /> <a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/18116406/33559404-ed674bcc-d90c-11e7-864a-91e42d1c92cd.gif"></a><br /> Here you can read more about the process of <a rel="nofollow noopener" target="_blank" href="https://www.linkedin.com/pulse/designing-pwa-ecommerce-karl-bzik/">designing PWA for eCommerce</a>.<br /> The design is available in open source in the Figma file format under the URL <a rel="nofollow noopener" target="_blank" href="https://www.figma.com/file/VKyqbHFI55TKIKcQlFLiVpVF/Vue-Storefront-Open-Source">https://www.figma.com/file/VKyqbHFI55TKIKcQlFLiVpVF/Vue-Storefront-Open-Source</a>.
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-concerns-when-hosting" class="anchor" aria-hidden="true" href="#concerns-when-hosting"></a>Concerns when hosting
</h2>

<p>
  When hosting NodeJS applications there are some differences compared to, for example, hosting PHP or Java applications.<br /> Server Side Rendering via NodeJS can have memory leaks because of suboptimal code. Although core code is optimized, project specific features or misaligned hosting configuration can introduce this. More on how to avoid these for VueJS can be ready in <a rel="nofollow noopener" target="_blank" href="https://vuejs.org/v2/cookbook/avoiding-memory-leaks.html">this article</a>. We also recommend reading about <a rel="nofollow noopener" target="_blank" href="https://blog.usejournal.com/vue-js-best-practices-c5da8d7af48d">VueJS best practices</a>.<br /> On the server we advice to run <a rel="nofollow noopener" target="_blank" href="http://pm2.keymetrics.io/">PM2</a> which offers features to keep your NodeJS application stable. When hosting on Kubernetes the checks and memory limits can be leveraged to kill unhealthy containers.<br /> More on hosting can be found in <a rel="nofollow noopener" target="_blank" href="https://docs.vuestorefront.io/guide/installation/production-setup.html#production-setup-bare-vps">the documentation</a>.
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-other-platforms" class="anchor" aria-hidden="true" href="#other-platforms"></a>Other platforms
</h2>

<p>
  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 &#8230; &#8211; much appreciated.
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-contributing" class="anchor" aria-hidden="true" href="#contributing"></a>Contributing
</h2>

<p>
  If you like the idea behind Vue Storefront and want to become a contributor &#8211; do not hesitate and check our list of the active issues or contact us directly via contributors@vuestorefront.io.<br /> If you have discovered a 🐜 or have a feature suggestion, feel free to create an issue on Github.
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-workshops" class="anchor" aria-hidden="true" href="#workshops"></a>Workshops
</h2>

<p>
  If you like our project and would like to learn more on how to create Progressive Web Apps you can ask us for a dedicated workshop at your office! Conducted by Vue Storefront core contributors! All the profits are used for supporting Vue Storefront development. Learn more
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-support-us" class="anchor" aria-hidden="true" href="#support-us"></a>Support us!
</h2>

<p>
  <strong>Vue Storefront is and always will be Open Source, released under MIT Licence.</strong><br /> Most of the core team members, VS contributors and contributors in the ecosystem do this open source work in their free time. If you use Vue Storefront for a serious task, and you&#8217;d like us to invest more time on it, you can donate the project! You can support us in various ways:
</p>

<ul dir="auto">
  <li>
    <strong>Contribute</strong> &#8211; this is how the Core Team is supporting the project!
  </li>
  <li>
    <strong>Evangelize</strong> &#8211; tweet about us, take some speaking slot at tech conference etc.
  </li>
  <li>
    <strong>Sponsor</strong> &#8211; if you&#8217;re doing serious business on VS maybe You would like to donate the project and put your logo in here?
  </li>
</ul>

<p>
  This is how we will use the donations:
</p>

<ul dir="auto">
  <li>
    Allow the core team to work on VS
  </li>
  <li>
    Thank contributors if they invested a large amount of time in contributing
  </li>
  <li>
    Support projects in the ecosystem that are of great value for users
  </li>
  <li>
    Infrastructure cost
  </li>
  <li>
    Fees for money handling
  </li>
</ul>

<p>
  <strong>If you would like to support us please just let us know: contributors@vuestorefront.io</strong>
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-partners" class="anchor" aria-hidden="true" href="#partners"></a>Partners
</h2>

<p>
  Vue Storefront is a Community effort brought to You by our great Core Team and supported by the following companies.<br /> <strong>See Vue Storefront partners directory</strong><br /> <a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/9d84de881ca897238c98a03c0ababd0b67d197574be29d8fc499f8ed5f6a7287/68747470733a2f2f75706c6f6164732d73736c2e776562666c6f772e636f6d2f3565376366363631633233616339646631353664396333642f3565666634653536323632616636363330316339353065345f6769746875625f706172746e65725f6167656e636965732e706e67"></a><br /> Partners are encouraged to support the project in various ways &#8211; mostly by contributing the source code, marketing activities, evangelizing and of course &#8211; implementing the&#8230;
</p>