Updating the Vue Application

We can now turn our attention to our Vue application, which will have similar changes made to it to send and receive messages via the Event Bus. We will also need to integrate with our API. A list of changes to our Vue application are as follows:

• Listen for the 'user-logged-in' event and store the username
• Fetch the shopping cart from the API via the /carts/{username} endpoint
• Listen for the 'add-user-cart-item' event, and add the item to the current shopping cart
• Add a new button called 'Update Cart' that will call the API to store the shopping cart
• Send a 'checking-out' event to the Event Bus
• Send a 'continue-shopping' event to the Event Bus
• Send a 'place-order' event to the Event Bus

Vue domain events

Let’s start our updates to the Vue application by firstly copying the micro-eventbus/dist/MicroEventBus.js file into the shopping-cart/public directory and then updating the shopping-cart/public/index.html file for testing: