Creating a shopping cart page

Now that we have the ability to add products to a shopping cart, we need a page for viewing what we've added before deciding whether to proceed to the checkout or not. Create an empty component called Cart.vue in the ClientApp/pages directory, then open the ClientApp/boot.js file and import it along with the other page components:

import Cart from "./pages/Cart.vue";

In the same file, we'll also need to add a route definition to the routes array:

{ path: "/cart", component: Cart }

And finally, we'll need a link to this new page from our navbar that's defined in the ClientApp/components/App.vue file. Find the existing b-navbar-nav element and add the following additional right-aligned b-navbar-nav element directly preceding it:

<b-navbar-navclass="ml-auto mr-4">
  <b-nav-itemto="/cart">Cart</b-nav-item>
</b-navbar-nav>

Before we build the ClientApp/pages/Cart.vue page itself, we're going to build a ClientApp/components/cart/CartItem.vue component...