What is Vue Storefront?
Tags: vuestorefront, vue, ecommerce, frontend
Published: 2022-05-11 08:35:46

![GIF showing a man saying "My big question: What is it?"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2bxrw1rdah8z4p7ott7.gif)

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.

![An image showing how Vue Storefront connects to eCommerce, CMS, payment, authentication, search services](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svdzhpdj68ib4n9asgew.png)
 
 
## 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](https://nuxtjs.org/) application, which is extended by modules and plugins.

![Nuxt + Modules + Plugins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2nwbpoz10llbr7ywxia.png)
 
☝️ 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](https://www.vuestorefront.io/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](https://discord.vuestorefront.io). Our team is happy to talk to you 😊