What is a Storefront?

Our storefronts come with prebuilt features that not only help you get started quickly, but set you up with a solid foundation following best practices.

While each storefront/boilerplate may have different features, the following are some of the features you can expect to find in our storefronts:

SDK and Middleware

Your project comes with a pre-configured Vue Storefront SDK and middleware that can be quickly extended to fit your needs.

Our integration-specific storefronts come with all of the setup needed to connect to your integration of choice, and the boilerplates come with a basic setup that you can customize to match any integration.

UI Components

Our storefronts come with ready-to-customize layouts, pages, and components built with Storefront UI.

These cover common e-commerce use cases like:

ProductDetails
Checkout
Category
ProductSlider
and dozens more...

E-Commerce Logic

Our storefronts come with type-safe hooks/composables that can be used to handle common e-commerce logic like:

fetching carts
fetching products
fetching product reviews
and more...

These methods are used by the UI components that come with the storefronts, but can also be used to build your own custom UI.

Internationalization

When building for a global audience, you need to be able to support multiple languages and currencies. By default, our storefronts come with support for either Nuxt.js i18n or Next.js i18n.

PWA Support

The web application in your storefront comes with PWA support with Vite PWA for Nuxt or next-PWA.

Testing

Testing is an important part of any project, ensuring that your code is working as expected and that you don't introduce any regressions.

All of the storefronts come with a pre-configured testing setup that includes unit tests for all of the starter code that comes with them.

Developer Experience

A good Developer Experience (DX) allows you to ship faster, with more confidence, and with less bugs. Our storefronts come with a number of features that help improve your DX.

Monorepo

Since Vue Storefront applications are made up of two applications, the server middleware and the web application, we use a monorepo to keep them together. This allows you to version control different parts of your application together, and makes it easier to deploy your application.

Monorepo support is provided by Turborepo.

TypeScript support

All of our storefronts come with TypeScript support that helps you catch bugs before they happen, and makes it easier to refactor your code.

Our integrations are written in TypeScript so you'll have types on both the frontend and backend of your application. This is especially useful when dealing with your third-party services, because the data you receive from them will be fully-typed.

Code Linting + Formatting

Another way we help you catch bugs before they happen is by providing a default code linting and formatting setup using ESLint and Prettier. These can make it easier to work with a team, by enforcing a consistent code style.

Storefronts come with default configuration, that can be customized directly in .eslintrc and .prettierrc files.

Git Hooks

Git Hooks allow you to run scripts before you commit or push your code. This can be useful for running tests, linting, or formatting your code.

The default Git Hooks in our storefronts run...

pre-commit - Runs linting and formatting on staged files
commit-msg - Ensures that your commit messages follow the Conventional Commits specification

GitHub Actions

Our storefronts come with GitHub Actions that can be used to automate your CI pipeline. This can be used to run tests, linting, and formatting on every commit, and to deploy your application to a staging or production environment.

Some examples of GitHub Actions that come with our storefronts are:

Running tests on pull requests
Running LightHouse CI tests on pull requests to validate performance
Ensuring pull request titles follow Conventional Commits.