It's common practice for a shop to show a link to the cart in the site's header—along with the number of items in the cart next to it. To achieve this, we'll use a Vuex getter to calculate and return the number of items in the basket.
Open the index.html file and add a <header> element to the app HTML and insert a placeholder, span—we'll convert this to a link once we've set up the routes. Within the span, output a cartQuantity variable:
<div id="app">
<header>
<span>Cart {{ cartQuantity }}</span>
</header>
<main>
<router-view></router-view>
</main>
<aside>
<router-view name="sidebar"></router-view>
</aside>
</div>
Navigate to your Vue instance and create a computed...
