Vue Storefront + Vendure = Fullstack Open Source Ecommerce

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Building an online store these days is not an easy task. With so many competitors Time to Market is the key to success. That's why we decided to build an integration between Vue Storefront- Lightning-Fast Frontend Platform for Headless Commerce, and Vendure - modern, headless GraphQL-based e-commerce framework. Both tools are built using modern JavaScript stack (Nuxt.js and Nest.js) and have several out of the box integrations like search engines, CMS's, payments, and so on. Also, both projects have a huge community of Open Source contributors who support the development process. In this presentation, I will show you how fast you can create your store with VSF and Vendure.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Vue Storefront is a lightning-fast frontend platform for headless commerce that separates the UI from the backend, allowing flexibility and scalability in e-commerce operations. It connects to various e-commerce platforms, CMSs, payment gateways, and other third-party services.

Headless commerce refers to the separation of the front-end or user interface part of an e-commerce store from the back-end. This approach allows businesses to enhance flexibility and adapt quickly like a startup, using platforms like Vue Storefront to manage the front-end.

Vue Storefront allows extensive customization through custom queries that override default queries, and through extensions that can modify API methods, application lifecycle hooks, and more, catering to specific business requirements.

Venger is a framework designed for the backend part of headless commerce, complementing Vue Storefront. It supports functionalities like inventory management, checkouts, promotions, and multiple languages, and is built using NestJS, TypeScript, GraphQL, and supports Elasticsearch.

Contributors can participate in the development of Vue Storefront and Venger by engaging in their respective communities on platforms like the Vue Storefront Discord channel and the Venger Slack channel. Both projects are open-source and welcome contributions.

Venger offers a wide range of e-commerce functionalities including inventory, commerce operations like checkouts, promotions, multilingual support, and tax configuration. It is scalable, cloud-ready, and supports extensive customization for tailored e-commerce solutions.

Vue Storefront enhances e-commerce performance by providing a fast, flexible front-end solution that integrates seamlessly with various backends and services. Its headless nature allows businesses to improve site speed, user experience, and adaptability in the market.

Vue Storefront is built using Nuxt.js (a framework for Vue.js), TypeScript, and GraphQL. It is also compatible with REST API, making it versatile for various development needs.

Composables in Vue Storefront are functions used to map specific functionalities or domains of an e-commerce store, such as products or addresses. They include methods for managing data fetch, updates, and error handling, enhancing the modularity and maintainability of the application.

Jakub Andrzejewski
Jakub Andrzejewski
19 min
20 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.

1. Introduction

Short description:

Hi, VJs London. Let's talk about full stack open source e-commerce, shall we? My name is Jakub and I am a technology leader at Vue storefront. I am also a core team member of storefront.UI, which is a UI library for e-commerce.

Hi, VJs London. Let's talk about full stack open source e-commerce, shall we? My name is Jakub and I am a technology leader at Vue storefront. I am also a core team member of storefront.UI, which is a UI library for e-commerce. I'm also a core maintainer of Vue storefront and Venger integration. Apart from work, I'm also a technical diver and currently doing a cave dive course, and I'm also a mountain hiker. In the second picture, there is me on the top of volcano Tabor de Tenerife, which was actually our Vue storefront location in May this year. Yes, we are hiding.

2. Overview of ViewStorefront and Headless Commerce

Short description:

In August this year, I set myself a long-term and ambitious goal. I told myself, next year, I would like to join Filip Rakowski, who is Vue storefront CTO in one of the greatest Vue.js conferences and give a speech. Have you ever wondered what it's like to build an e-commerce store from scratch? What if I told you that there are all the solutions on the market that you can just pick and play in minutes or hours instead of waiting for the developers to develop the solution from scratch? We want to present to you what I'm calling a dream stack for open-source e-commerce, which is ViewStorefront and Vengeo. ViewStorefront is a lightning-fast frontend platform for headless commerce. But in more detail, what is headless commerce? Headless commerce basically means that you are separating your front-end, or the UI part of your e-commerce store, from the back-end. It allows even mature businesses to have the flexibility and maneuverability of a startup. What about the technology stack? So basically, ViewStoreFront is built using three main tools. Nuxt.js, which is a framework for Vue.js. We are using also TypeScript and GraphQL, but ViewStoreFront works with REST API as well. ViewStoreFront uses the concept of composables, which are used to map certain functionality of your e-commerce or map a certain domain of your e-commerce.

Now let me tell you a short story. In August this year, I set myself a long-term and ambitious goal. I told myself, next year, I would like to join Filip Rakowski, who is Vue storefront CTO in one of the greatest Vue.js conferences and give a speech. Right now, in two months, I'm here giving a speech instead of next year. Everything is possible, guys. Just make this first step.

Have you ever wondered what it's like to build an e-commerce store from scratch? Handling all these orders, products, categories takes time. Time is the resource that you might not have as someone who wants to be a market leader. What if I told you that there are all the solutions on the market that you can just pick and play in minutes or hours instead of waiting for the developers to develop the solution from scratch? Which basically takes weeks or months. What if I told you that these tools are free, open-source, and backed by the huge community of contributors that are doing their best to make the project as good as possible.

We want to present to you what I'm calling a dream stack for open-source e-commerce, which is ViewStorefront and Vengeo. ViewStorefront is a lightning-fast frontend platform for headless commerce, but what exactly is headless commerce? If you have been playing some computer games in the recent years, you might probably know this character. This is a character from the game Team Fortress 2, and his name is HeadlessHorselessHorseman. Why am I bringing this example as a comparison to headless commerce? HeadlessHorselessHorseman was a very powerful character, and so is headless commerce. But in more detail, what is headless commerce? Headless commerce basically means that you are separating your front-end, or the UI part of your e-commerce store, from the back-end. It allows even mature businesses to have the flexibility and maneuverability of a startup. It basically means that, for example, ViewStoreFront can connect to many different e-commerce platforms, headless CMSs, payment gateways, search engines, and many other third-party services.

What about the technology stack? So basically, ViewStoreFront is built using three main tools. Nuxt.js, which is a framework for Vue.js. We are using also TypeScript and GraphQL, but ViewStoreFront works with REST API as well. Some basic concepts of ViewStoreFront. ViewStoreFront uses the concept of composables, which are used to map certain functionality of your e-commerce or map a certain domain of your e-commerce. So in this case, we will be taking a look at the product domain. Each composable will contain four main functions or four main elements. The first one will be a variable. In this case, products. This products variable will contain a value of your product domain. Next, we'll have a search method or the load method that will be used to fetch the data from your e-commerce platform to Vue Storefront. Composables may have several methods. Like, for example, use product or use address.

3. Composable and Customization

Short description:

It may have add address, remove address, update address, get address. Error object will be mapped to the certain methods that this composable has. Loading property indicates if we are waiting for data. Custom queries can be used to override default queries. Extensions allow for customization of API methods, app, and lifecycle hooks. Vue Storefront is built using modern technology stack and is highly customizable. Venture is a framework for the back-end part of e-commerce. It supports inventory management, commerce, multiple languages, currencies, taxes, sales channels, media management, and team support.

It may have add address, remove address, update address, get address. So it may have more than one method, but it must have at least one method which will be used to fetch the data.

Next we have an error object, which will be used to each property of this error object will be mapped to the certain methods that this composable has. So in this particular case of the use product composable, error object will contain only one property, which will be named search. And it will contain an error that might occur in a situation where you are fetching the data from your e-commerce platform.

Last but not least, we have the loading property, which will be used to indicate whether we are still waiting for the data to be fetched from your e-commerce platform. This was some basic concepts.

Now into customizability. Let's take another look at the use product composable. We have a search method that is used to fetch the certain product by ID. This will result in a object that will contain our product data. However, what if we would like to have a different object or a different structure or different properties? For this particular case, we could use a concept of custom queries. These custom queries will be used to override the default query that we are sending to the commerce platform. And how does it work in more detail? In middleware.config.js, which is basically the main configuration file of Vue Storefront, we could define in a object of custom queries. We could define these custom queries, which are basically, for example, GraphQL queries.

Apart from custom queries, we can also customize Vue Storefront or our shop built using Vue Storefront by using extensions. So instead of just customizing the certain query, we can extend the API methods that are used to fetch the data or modify the data. We can extend the app itself and also the lifecycle hooks of the whole application. So as Adam Jar and Greg Polak used to say, let's review. So Vue Storefront is built using modern technology stack. Vue Storefront can connect to various external services and provides full e-commerce functionality. It's highly customizable, as I explained previously.

Yeah, and going next into Venture. So Venture is also related to headless commerce, but in this case, it is a framework for, let's say, the back-end stuff, back-end part of your e-commerce. If you'd like to get more into what is Venture and how it connects to Vue Storefront, we have recently recorded an interview with Michael Bromley, who is a founder of Venture, and yeah, you can listen more about what is Vue Storefront, what is Venture, how they connect together, and what are the plans for the future releases.

Venture supports many functionalities out of the box. So we have inventory management, we have commerce, like checkouts, promotions. We have multiple languages, currencies, taxes, and sales channels. Venture is also scalable, so cloud ready and autoscalable. We have some media management, so image cropping, cloud storage support, and we have some team support for role-based permissions and admin UI.

4. Venture Technology Stack and Customization

Short description:

Venture is built using NestJS, TypeScript, and GraphQL. It also supports Elasticsearch and customizable fields. The admin API and shop API are used for different operations. Venture allows extending the default structure of entities and customizing the order flow. It supports plugins for additional functionality, including core, enterprise, and community plugins.

So technology stack. Venture is built using NestJS, which is a framework for Node.js and Express. It is also built using TypeScript, and it's built using GraphQL, and it also comes with the Elasticsearch support and the database of your choice.

Some basic concept of Venture. So how Venture really works. So we have two GraphQL APIs. We have the admin API and the shop API. Shop API is used mainly for your shop operations, like fetching the data about products, collections, users and customers, and admin API will be used for more advanced stuff, like managing roles, managing products, and so on, and so on. So if you are requesting the data from GraphQL API, it will go to Venture Server, which will start a queue, and this queue will create a worker which will then access the database and return the data to Venture Server, and this Venture Server will return data to your GraphQL API.

So we have an admin dashboard that is available for you, where you can add products, add collections, modify users and so on, and so on, and we also have the GraphQL API, which allows you to fetch the data to your storefront. In terms of customizability, Venture supports similar pattern as your storefront because in terms of Venture, instead of custom queries, we have custom fields, which allows us to extend the default structure of the domains or the entities in our database, so in this case, we have a product, which we want to extend, so that it will contain a new property, which will be named info-url, and it will be type of string. So next, what we can do is we can create a mutation in our GraphQL, where we will update the product with a new property info-url, so thanks to that, we don't have to create a new entity, we are just extending the default one. We can also customize the order flow, which allows us to not use the default one, but let's say we want to have a step between the adding items and arranging payment. So the default one is adding items, we will move to arranging payment. Adding items means that we are visiting the store and just, for example, adding products to our cart. And the arranging payment, which will mean that we are arranging some payment data and proceeding to checkout. So let's say that before arranging payment, we would like to have a step where we will be validating the customer. How we can do that? First of all, what we will do in the transition, we will create a new process. This process will contain a, it will be an object that will have some properties that in the big picture, what they will do is they will allow us to create a new flow. So we will add the validating customer and we will also modify the existing adding items, which will allow us to move to the step from adding items instead of going to arranging payment. And then in the validating customer, we will say that from this step, we can move backward to adding items or forward to arranging payment. And then we can just register this new process in Venture Config, as simple as that.

Venture also supports plugins, which allows you to extend the default functionality. So we have core plugins, which is the admin UI that you have seen previously, the Elasticsearch support, the email support, and also the asset server, which are provided by default. Next, we have the enterprise plugins that will be coming soon. And this is Advanced Search, Gift Card, Wish List, and so on and so on. And we also have the community plugins, which allows for Stripe, Braintree. So payment gateways, reviews, social auth with Auth0, for example. So let's review once again. Venture is built using modern technology stack.

5. Creating an Online Store with Venge

Short description:

It can connect to various external services using plugins, provides full e-commerce functionality, and it's highly customizable. Both tools are built using modern frameworks like Next.js and Nest.js. They are customizable by default using custom queries and custom fields. This Fused 2.0 Fun Adventure sounds and looks like a full-stack open-source e-commerce dream. Creating an online store from scratch with Venge involves setting up a project, defining databases and language, creating a store with Fused Storefront, and installing dependencies. In less than one and a half minutes, you have an online store set up and ready to accept orders. Give a star to ViewStoreFront and Venger projects if you like what you see and consider contributing via Slack or Discord. Contact me on GitHub or Twitter. Thank you and goodbye.

It can connect to various external services using plugins, provides full e-commerce functionality, and it's highly customizable. So you might be thinking, there is some similar pattern here, and you are completely right. So both tools are built using modern frameworks like Next.js and Nest.js. They are customizable by default using custom queries and custom fields. It provides, they provide full e-commerce functionality, and it is they are configured to integrate with external tools and services, so payment gateways, headless CMSs, and so on. And they are open source and backed with huge community of contributors.

So I would say that this Fused 2.0 Fun Adventure actually sounds and looks like full-stack open source e-commerce dream. And let me show to you how it works. So basically, what we are doing here is we are creating an online store from scratch with Venge. So we are setting up a project, defining some database, language, mailing provider, in this case, the local one, and we are also creating a store with Fused Storefront and setting a template to Venger. Next, what we are doing is installing dependencies, as always, and setting some environment variables in order for the store to work as expected. So here, GraphQL API and the method for authentication, and we also have to add this method to the Venger config, so two simple steps that allows us to run our store. So let's wait a second for that. Okay, we have a Venger store running, and we have a ViewStoreFront also running, so we can scroll down to listing, add some products, define some configuration, modify the quantity of the products, add some customer data to our checkout, set up some shipping data, as well as shipping method. Some billing, in this case, is the same, payment and make an order, and that's it. So in less than one and a half minute, you have a online store set up and ready to accept some orders and to play around. So if you like what you see, make sure to give a star to both ViewStoreFront and Venger project because they are open source and this is how they, let's say, live, thanks to these stars. So make sure to give them. And also if you'd like to contribute, make sure to visit Slack channel of Venger or Discord channel of ViewStoreFront. And that will be it. Thank you very much for your attention and make sure to contact me on GitHub using the Paroshen handle or on Twitter using the d.andrewski handle. See you. Thank you. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye.

6. Conclusion

Short description:

Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye.

Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye.

Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye.

Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
Watch video: Vue: Feature Updates
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.

Workshops on related topic

Free webinar: Building Full Stack Apps With Cursor
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
71 min
Free webinar: Building Full Stack Apps With Cursor
Top Content
WorkshopFree
Mike Mikula
Mike Mikula
In this webinar I’ll cover a repeatable process on how to spin up full stack apps in Cursor.  Expect to understand techniques such as using GPT to create product requirements, database schemas, roadmaps and using those in notes to generate checklists to guide app development.  We will dive further in on how to fix hallucinations/ errors that occur, useful prompts to make your app look and feel modern, approaches to get every layer wired up and more!  By the end expect to be able to run your own ai generated full stack app on your machine!
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
Workshop
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.