What is Vue Storefront?

You might have seen the presence of Vue Storefront on social media, conferences, and so on. But do you know what Vue Storefront is?

In this article I will take you through a journey of getting to know the basics of what Vue Storefront as a frontend framework does.

What actually is Vue Storefront? 🤷‍♂️

Vue Storefront is an eCommerce frontend framework that connects to

• An eCommerce backend (such as Shopify, Magento, etc.)
• Other third-party services (CMS, payment, authentication, etc.)

Connecting services 🔗

So if you want to create an eCommerce shop, Vue Storefront helps you combine all these services you need in order to create a shop.

Example:

You might have a Shopify eCommerce platform, but want to add copy for a promotion you're having, provide a separate payment option with PayPal, authenticate your user to give them a a personalized experience, include a search in your shop.

With Vue Storefront, you can get this done by adding a CMS for the copy, the PayPal integration for the checkout, the Auth0 integration for authenticating your users, and the Algolia integration for adding search functionality.

What does Vue Storefront do for you? 👀

As you can see in the example above, you can integrate different services to fit your needs, and Vue Storefront does the rest of the heavy lifting 🏋️‍♂️

• Providing a lightning-fast online shop for you to work with
• Facilitate extensivility

Lightning-fast online shop ⚡

Vue Storefront provides a lightning-fast online shop by:

• Keeping the bundle size small (Using modern technologies)
• It only loads what’s needed (Leveraging Code Splitting, Lazy Loading, Lazy Hydration)
• It loads already-visited pages instantly (By caching the page on the first visit, Preloading resources that might be needed in the future)
• Is hosts and executes as much as possible on the server (So the part served to the users is much lighter and faster)

Extensibility 🔌

You can extend Vue Storefront to your liking

• By using some of the integrations maintained by the Vue Storefront team or community
• Or choosing between hundreds of Nuxt modules
• As a developer, you can also create new integrations for a certain platform, and make it available to other users

Tech Stack 🥞

Vue Storefront is essentially a Nuxt application, which is extended by modules and plugins.

☝️ The frontend is largely handled by Nuxt.
💪 Vue Storefront adds eCommerce capabilities through Nuxt modules and plugins.

Storefront UI

Vue Storefront also includes Storefront UI.

A Vue.js design system and UI for headless commerce.

It’s installed by default to all Vue Storefront project, but you can install the UI library you prefer.

Storefront UI is

• 100% customizable
• Open-Source
• Made and optimized for eCommerce and Vue Storefront

Summary 📋

Let's summarize the most important take-aways from this blog post

• Vue Storefront is a frontend app to build online shops
• It does a lot of the heavy lifting for you in terms of performance
• It is a Nuxt application, extended with eCommerce capabilities

More questions? ❓

If you have any more questions about Vue Storefront, then please join our Discord server. Our team is happy to talk to you 😊