Okay, let's take another step up in terms of our structure. So here's what we did in the last lesson. We set up our canvas tag and then imported our script. And if we take a look at that, yeah, right now we mostly just pasted what we had from JSbin. So we have our data object that lists our labels, still hard-coding all of that stuff, and then we have another data set. Finally, we track down our graph, our canvas, and then we build up a new chart and specify that we want a line graph using the given data. So why don't we, yeah, maybe we can isolate this behind a custom component using Vue, since we've covered that quite a bit at Laracasts. So npm install Vue. And while that's installing, if you're not familiar with Vue, it's okay, you can still come along for the ride. But yeah, I'd highly recommend taking a look at it. And in fact, an easy one to remember. Go to vuecast.com, and that'll link you to this series on the site. So very small incremental steps will

We have a new components directory and then graph.js. Okay, so here we can export default. And now let's go back. Let's go back to our welcome view. We want to reference this now as graph or something like that. So I can take our canvas tag and put that in the shadows, so to speak. And we'll just inline it here for now. Okay, so let's leave it like that for now. What we have here is a Graph Vue component that we import at the top. And then finally, down here, we create our Vue instance and we nest our Graph component. So before we try this out, why don't we grab this bit right here. And let's put that into our Graph component as well. And maybe that can go in the ready method for the time being. Okay, cool. So now we can see if we're only referencing this Chart class from our component, that means we can get it out of main.js like so. Come back and put it at the top. Next, what about the data? Well, exact same thing.

if we're only referencing this Chart class from our component, that means we can get it out of main.js like so. Come back and put it at the top. Next, what about the data? Well, exact same thing. So I'm going to come back and we'll select all of this stuff right here and move it over. And then once again, yeah, right now we're just going to put it right here. And then slowly we can refactor. All right, so I will let you take a look at this. Our new component is called Graph. And our HTML will reference it like this. And then presumably we'll pass through the keys and the values as well. But we'll get to that. So if we take a look at the component, this is what's underneath the hood. So yeah, when you do Graph, well, behind the scenes right now, it's just creating a simple canvas tag. Next, when the component is loaded and ready to go, we build up some data here that we're still hard coding. And then once again, we find the Graph

it's just creating a simple canvas tag. Next, when the component is loaded and ready to go, we build up some data here that we're still hard coding. And then once again, we find the graph and we build up a new chart. And we can create a new chart because now we're importing it within this module. So that means back to main.js, much cleaner here. This looks good. All right, so I will do two things now. Compile gulp. Good. Next, I'm going to switch back to our welcome view. And yeah, I've already replaced that with our custom tag here. So I think we should try this out. I'm going to switch over to Chrome, give this a refresh, and we still get the exact same thing. But now we've introduced Vue and all of the luxuries that that provides us. And we've also created a custom component called graph. So now let's imagine that the graph accepts some properties like our labels. Okay, well, that will be once again, January, February, March,

also created a custom component called Graph. So now let's imagine that the Graph accepts some properties like our labels. Okay, well, that will be once again, January, February, March, we're still hard coding it, but we're taking it outside of the module. And we're instead just passing it in here. So labels, and then maybe something like our values. And we'll just do 10, 42, and 4. Okay, let's update our component now. So we switch back, we now have some properties we'll accept. And this is the labels or the keys, as well as our values. So now we can come down here and reference our labels. And if we scroll down, yeah, let's just have one data set for the time being to keep it simple. And then here, I'll accept the values like so. Alright, once again, we're not doing gold watch. So I have to manually compile that down. And if we switch back to Chrome and give that a refresh, there you go, we get another Graph. But this time, we're passing in.

multiple graphs. Okay, well, yeah, now it's easy because we've isolated this behind a custom component. So maybe this one will be, I don't know, April, May, June. And the values will be 10, or how about 100, 420, and 99. And we'll set the color to red. And in fact, you know what, it just occurred to me, we might need to tweak a couple things to make this work. Let's try it out. Let's run gulp, and I'm thinking we'll only see one right now. Refresh. Yeah, notice we only see one. So why is that? Well, if you're working along, it's because of this. We set an ID in our template. And then at the bottom, we'll notice that we reference that exact ID. So in both cases, even though we have two instances, we're still tracking down the exact same ID. So here's what we're going to do. I can get rid of the ID entirely. And then down here, I don't have to track it down. I can just use view. I can say,