Vue Storefront Next

# Theme

If you use our CLI to set up your project you will end up with a fully functional eCommerce theme connected to your eCommerce backend and a bunch of other services based on Nuxt.js (opens new window)

# High-level overview

Your theme out of the box will have following features:

Pages

  • Home Page
  • Product Listing Page
  • Product Details Page
  • Mini Cart
  • Mini Wishlist Enterprise
  • User Authentication
  • User Profile Enterprise
  • Checkout
  • Custom 404 page

Integrations

  • eCommerce full scope Enterprise / eCommerce basic scope
  • CMS integration Enterprise
    • Home Page
    • Custom CMS Page
    • Header
    • Footer
  • Payment integration Enterprise

Other

  • Progressive Web App features
  • internationalization

A full list of features (for Enterprise version) can be found here.

# Directory structure

If you're familiar with Nuxt you will quickly notice that the directory structure is almost identical as the standard Nuxt.js project. Since you can read about the Nuxt project folder structure in Nuxt docs (opens new window) we will cover mostly the directories specific to Vue Storefront.

.
├─ components/
├─ composables/ // place for custom composition API functions
│  └─ useUiHelpers/ // theme-specific composition API functions
├─ helpers/ // utility functions
│  ├─ category/ // getting category search params to/from url 
│  └─ filters/ // getting filters to/from url 
├─ lang/ // i18n translation keys
├─ layouts/
├─ middleware/
│  └─ checkout.js // prevents users from entering checkout steps if certain information is missing
├─ pages/
├─ static/
└─ nuxt.config.js

# Storefront UI

Want to use another UI library? No problem!

If you don't want to use Storefront UI feel free to remove it from your project - it's just a UI layer and the project can work with any other UI library or a custom code.

Our default theme is based on Storefront UI (opens new window) - a design system and library of Vue.js components dedicated to eCommerce maintained by Vue Storefront core team. The library is fully customizable on multiple levels to make sure that it can be used in different contexts and with different designs.

With Storefront UI you're getting both Vue.js components and Figma designs that match them so it's straightforward for your design team to customize them. The library works great for multi-tenancy model as a shared UI library that can be customized differently for each tenant.

To learn more about Storefront UI please check:

# Preinstalled modules and libraries

Below you can find a list of the most important Nuxt Modules and libraries that are preinstalled with the default theme:

# Nuxt Modules

  • @nuxtjs/pwa
  • nuxt-i18n
  • @vue-storefront/nuxt
    • @nuxtjs/composition-api
    • @nuxt/typescript-build
    • @nuxtjs/style-resources
    • nuxt-purgecss
  • @vue-storefront/nuxt-theme

# Libraries

← Configuration →