Now what you often see is when you get these kinds of emails, there's often a link to your account where you can find additional information about your order, it'll show your order history, your order status. So let's add a button to our email that a User can click so they end up on our webshop. So we can use a button component for this, so we'll say Component, Mail, and let's call it Button. And make sure that we close it using the end component directive, and we need to make sure that we use double colons here, and this is going to expect a URL, and we'll leave it empty for now, and we'll say Vue.Order. So now we switch back, we get a nice button here, Vue.Order.

empty for now, and we'll say Vue.Order. So now we switch back, we get a nice button here, Vue.Order. If you want, you can also change the style, and there are a few options. You can use color to set these, so you could do success, for example, as well. And it turns the button green. There's also Primary, which is default, or use Error. In this case, let's leave it like this. Let's register a route in the component so that we can wire this up whenever someone clicks it, and they get redirected to the actual page where they can see the entire order.

clicks it, and they get redirected to the actual page where they can see the entire order. So let's open up our terminal, and then php artisan make:livewire and let's create a component called Vue.Order. Let's register a route. We'll use a route called Order, and we'll pass the order ID. Next, let's make sure that we reference the correct component, and let's update the route. And now we can head back to our email, and update the route to Vue.Order, and of course include the order ID. So now you can see in the bottom left corner that it is linking to order/1.

include the order ID. So now you can see in the bottom left corner that it is linking to order/1. Now if we click it, we'll get an empty page at this stage. So let's head back, and let's open up our VueOrder component. Let's create a mount method. This is going to pass the order ID. Let's register the public property. Next, we're going to create a computed order property. So we'll say public function getOrderProperty, and we're going to scope it from the current logged in user.

So we'll say public function getOrderProperty, and we're going to scope it from the current login user. So this will prevent someone to enter the ID inside the URL, which they don't have access to, and this is important. So we'll say orders, binary_fill, and we'll pass the order ID. So if we press page, this should still work. And if we go to our blade file, we should be able to echo out the order ID, and that works. Now while we're here, let's move these two routes inside a route group that has the correct middleware supply.

Now while we're here, let's move these two routes inside a route group that has the correct middleware supply. We want to ensure that these routes are only accessible whenever a User is logged in. So we are going to take these two routes, and this is what we've defined earlier, which we pulled it out, lots of uncommon keys. And inside this group, we'll put the routes that we created earlier. So this should still work. There we go. But now this is protected, so it requires you to be logged in. If we would open this in a new browser window and visit, you can see that we are redirected.

But now this is protected, so it requires you to be logged in. If we would open this in a new browser window and visit, you can see that we are redirected to the login page. Okay, let's create a simple Order page where we can see the products that have been ordered, the billing and shipping information as well.