Search⌘ K
Home
Courses
Mastering TypeScript

Updating the Vue Application

Explore how to update a Vue application to listen and respond to domain events using the Event Bus. Learn to fetch and manage shopping cart data via API calls, handle user login events, raise domain events like checkout and order placement, and package the Vue app for production. This lesson enables you to build scalable micro front-end Vue applications with dynamic event-driven features.

We'll cover the following...

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:

TypeScript 4.9.5
// Existing HTML
<script type="text/javascript" src="MicroEventBus.js">
</script>
</head>
<body>
    // Existing HTML
    <script>
        testBroadcast();
        function testBroadcast() {
            window.microEventBus.on('continue-shopping')
                .subscribe(function (event) 
            {
                console.log('IDX : continue-shopping : ' + event)
            });
            window.microEventBus.on('place-order')
                .subscribe(function (event) 
            {
                console.log('IDX : place-order : ' + event)
            });
        }
        function sendUserLogin() {
            window.microEventBus
                .broadcast('user-logged-in', 'test_user_1');
        }
        function sendAddToCart() {
            window.microEventBus
                .broadcast('add-user-cart-item',
                    {
                        username: "test_user_1",
                        productId: 3,
                        amount: 303
                    });
        }
    </script>
    <button onclick="sendUserLogin()">
        Send 'user-login'</button>
    <button onclick="sendAddToCart()">
        Send 'add-user-cart-item'</button>
</body>

Here, we have made three changes to the file in a very similar manner to the changes we made to our React product-list/public/index.html file for testing:

  • Firstly, we have included the MicroEventBus.js file as a resource.

  • Secondly, we are subscribing to the 'continue-shopping' and 'place-order' events, which are raised by our Vue application.

  • Thirdly, we have hooked up a test button to send the 'user-logged-in' event, and another button to send the 'add-user-cart-item' event.

Fetching data in Vue

Let’s now look at the updates that we need within our Vue ...