Introducing Custom Nova Cards 0:00The next available customization option for Laravel Nova is to create a custom card. And a card, you've already used it before when we defined the metrics. So this is essentially that. It's a card to display a metric. And we can create custom cards that we can then either put, just like the metrics, on the index pages of our resources, or we can put them on our application dashboard. So for this example, I just want to create a custom card that will display the current time. So I just want to build a clock card that I can then put maybe on the dashboard. I think that would be nice. Generating a Card Package 0:41So I just want to build a clock card that I can then put maybe on the dashboard. I think that would be nice. So to create the cards, we have to use the Artisan CLI tool that ships with Nova. So we can say php artisan nova-card, and just like the nova-tool command, this expects a package name. So we first need the vendor, in my case it would be beyondcode, and then the package name nova-clock. And then just like the tool, it asks us if we want to install the npm dependencies, if we want to compile the card assets, and to register the component in our Composer.json file.we want to compile the card assets, and to register the component in our Composer.json file. And we want to do all of that. So now let's take a look at what Nova generated for us. If we go back to Sublime, into our nova-components directory, we now have the nova-clock directory for our custom card. And just like the tool, it basically consists of the same files. We can define custom routes, we have our card's resources, we have a service provider, we have a custom card class that we can use. It's pretty much the same as with a custom tool. Adding Card to Dashboard 2:02have a custom card class that we can use. It's pretty much the same as with a custom tool. So let's use what we get right out of the box to see what it looks like. So since I want to display the card that contains the clock in the end on my dashboard, let's add it to the dashboard. So go to app, providers, nova-service-provider, and add it to the cards method. So here I'm going to say new nova-clock, and import the class, and if I now go back to my dashboard, this is the card that generated Nova when we just used the CLI tool. Now let's modify the Vue file and add our actual clock to it. So just like we need to do this with the custom tool, we need to run the watch command inside Installing Clock Vue Dependency 2:52Now let's modify the Vue file and add our actual clock to it. So just like we need to do this with the custom tool, we need to run the watch command inside of our component directory. So go to nova-components, nova-clock, and then I'm going to run npm run watch. Okay. So I thought about adding an existing third-party clock package that I just found by googling for it. It's a nice, just like a digital clock that I can use, and I just wanted to add that to my card. So we have to install this as a dependency.my card. So we have to install this as a dependency. So let me stop the watcher and install this. Okay. And now let's run the watcher again, and then we can edit our Vue files. So we need to import this. So we go into our nova-components, nova-clock, resources, js, components, cart.vue. In here, I'm going to import the clock, then we're going to register it as a component. That's the indentation, okay. And then add this component.That's the indentation, okay. And then add this component. Let's just add it inside of the cart, maybe like this. Okay. Now if we go back to our dashboard and refresh, there it is. This is the custom clock component that we used. So that was pretty easy, and this is now basically our custom cart, and whenever we want to use a clock, we can just use this nova-cart class anywhere. Now I want to show you something else. You can also pass some additional information from PHP to your carts and then use these Passing Meta from PHP 5:01Now I want to show you something else. You can also pass some additional information from PHP to your carts and then use these informations inside of your components. So let's say this clock component has a display seconds option, and the blink option as well. Maybe we want to control whether you want to use this or not. So to do this, we can go into our custom nova-clock cart. In here we could change the width, and this defines the Vue component that is being used for this specific cart. And then I'm just going to add a new method that I call blink. It returns a boolean, which is true by default, and this is going to call thisWithMeta, blink,And then I'm just going to add a new method that I call blink. It returns a boolean, which is true by default, and this is going to call thisWithMeta, blink, and then the value of it, and we're going to return it. So this is going to return this. And then we want another method that we call withSeconds, also going to be true by default, just like this. Now what we can do inside of our service provider, we can use these methods by doing something like new nova-clock withSeconds. So this is going to create a new instance of the clock, and in this instance we're going to set some meta information, and we're going to say that withSeconds will be true.So this is going to create a new instance of the clock, and in this instance we're going to set some meta information, and we're going to say that withSeconds will be true. Now we still need to evaluate this withSeconds inside of our component, or the same for the blink. So inside of our component, we have access to this cart property. And this cart property has all the meta information as additional properties attached to it. So in here we could do something like withSeconds is going to equal cart.withSeconds. And the same for blink, so blink will be cart.blink. So whenever cart.blink will be true, the clock will be blinking, and when cart.withSeconds will be true, we will also display the seconds.So whenever cart.blink will be true, the clock will be blinking, and when cart.withSeconds will be true, we will also display the seconds. So with this setup, we should see a clock that does not blink, but has the seconds available. So let's take a look at it. Refresh. So now we see that we should see some seconds. Maybe this is an issue with the component. Let's take a look and inspect the component real quick. So in here we have our dashboard. The dashboard has carts.So in here we have our dashboard. The dashboard has carts. Has a cart wrapper. And there is our NovaClock component. And if we take a look at it, we see that we have the cart. And the cart has the following properties. withSeconds, which is true. And blink, well, it's not defined. So this is probably undefined, but it's not being used here anyway, because it's not blinking. Okay, so the issue is that we used withSeconds, but it should be displaySeconds.So this is probably undefined, but it's not being used here anyway, because it's not blinking. Okay, so the issue is that we used withSeconds, but it should be displaySeconds. So go to our component again. And now we call this displaySeconds. And let's just rename this as well, so it is the same. displaySeconds, displaySeconds, displaySeconds. And here as well. All right, now let's try it again. Perfect. So now, if I say displaySeconds and blink as well, and go back to my dashboard. Using Card on Resources 9:17Perfect. So now, if I say displaySeconds and blink as well, and go back to my dashboard. We now have the blinking icons, and now we can control the behavior of our Vue.js component by using some nice PHP API, so that we can pass additional information to our custom Vue components. And now, well, this is just a basic cart. We can also display it on our resource index page. So if we want to display the clock on our posts as well, all we have to do is go to our app, Nova, post resource. And in here, where we have the cards, we also want to add the new Nova clock, import it. And in here, maybe we don't want to display the seconds, but it should blink.And in here, where we have the cards, we also want to add the new Nova clock, import it. And in here, maybe we don't want to display the seconds, but it should blink. So we can do something like this. And now if I go to my posts, we see that we have our clock with the blinking colon. Cool. So this is how you can create a custom cart, which is especially useful if you don't need a custom menu bar and really a custom web page all on your own. But if you only want to display certain information in a cart, then, well, this is perfect for you. And with the ability to control it from PHP and pass in additional information to your component, this gets really, really flexible.And with the ability to control it from PHP and pass in additional information to your component, this gets really, really flexible.
