Build a shopping cart with Vue.js and Element UI (no Vuex)

Connor Leech
Employbl
Published in
6 min readOct 8, 2017

--

In this tutorial we build a shopping cart with straight up Vue 2 (no Vuex) and style it using the Element UI vue component toolkit.

Screenshot of the app we’re building. Source code

In the last tutorial we built a shopping cart application using Vuejs, Vuex and Bulma for styling. In this tutorial we’re going to build almost the same shopping cart but without Vuex. We’ll use the Element UI toolkit of Vue for styling instead of Bulma to try out something new.

The Vue.js only code is simpler to reason about and does the same functionality. Vuex has its place but I wrote this tutorial to demonstrate that it’s not always necessary.

tl;dr — 🐙 source code, 🛒 demo

🐊 Alternative approaches

Originally, I saw that the “EventBus” pattern is popular for Vue.js applications not using Vuex. The most clear tutorial I’ve found on describing an Event Bus is from alligator.io: https://alligator.io/vuejs/global-event-bus/

EventBuses use events to broadcast changes and update components. I’m going to use a similar pattern but call it a store cause it sounds more accurate. The store will hold the information about the shopping cart and the list of products/

🦄 Create an app

--

--

Connor Leech
Employbl

Girl Dad x 2. Cofounder @Employbl. Software Engineer @CommentSold.