Okay, next up we're going to talk about the Laravel 5.3 and Vue connection and what that actually means. A lot of people get a little confused. They think Vue is now a dependency of Laravel. No, that's not it at all. Okay, let's take a look. So, in Laravel 5.2, if we go to our assets directory, there's nothing related to JavaScript whatsoever, okay? However, if we go into Laravel 5.3 in the resources/assets, well, we do have a new JS directory. So, the only goal of this is just to get you up and running as quickly as possible. So, let's see what we have here. If we go to gulpfile, well, now, before you just had a call to mix.sass, right? But now, we have one to webpack, and this is new in Laravel Elixir 6.0. So, Elixir has support for three module bundlers. Just the big three, really. Browserify, Webpack, and Rollup. And you are free to use any of those. The only thing to be aware of is that, well, out of the box, Taylor includes

Bootstrap.sas. But now, excuse me, we'll go back to Laravel 5.3. It looks a bit more complicated, but remember, you can modify any of this. The only goal of this is to give you a nice setup to get started with some common utilities and components. For anything, if you don't want jQuery, get rid of it. If you don't want to use Lodash or Vue, get rid of them. It's that easy. There's nothing to worry about here. Okay, but anyways, let's go ahead and do an npm install. And that's basically the JavaScript equivalent of composer install. So, that'll take just a moment. Okay, and that's pulled in. Anyways, if we go back to our gulpfile, we're back to that issue of mix.browserify. So, if you run gulp, there we go. So, we're trying to use browserify, but it's letting you know, hey, that's kind of an official extension. So, run this command one time, rerun gulp, and you're good to go. That's all you have to do. And by the way, the exact same

but it's letting you know, hey, that's kind of an official extension. So, run this command one time, rerun gulp, and you're good to go. That's all you have to do. And by the way, the exact same thing will be true for mix.rollup, if you are familiar with that. And in fact, I'm a huge fan of rollup. So, unless you're using .vue files and things like that, rollup is probably the cleanest output you can get. But anyways, if we do that one, it's going to give you essentially the exact same response. Paste this into the terminal, run it, and you're good to go. Okay, but anyways, we'll stick with webpack. That's fine. Now, we can see that the entry point is app.js, and Laravel now includes one for you. So, this is the reason down here why some people maybe get a little sensitive and they think Laravel is forcing you to use Vue or the Laravel framework requires it. It doesn't. It's a suggestion. You know what happens if you don't want to use Vue?

get a little sensitive and they think Laravel is forcing you to use Vue or the Laravel framework requires it. It doesn't. It's a suggestion. You know what happens if you don't want to use Vue? You're done. I mean, that's it. Get rid of the file. You can remove anything you don't want from your package.json file. We're literally talking five seconds worth of work. But as it turns out, Vue is very popular in the Laravel community, particularly. So, this is a good setup for you. Let's go over it. So, we begin by pulling in the bootstrap file, and this is just going to get you set up with some common globals you might want, like a cookies library. If you want to pull in jQuery, you can do that. If you want to pull in bootstrap's JavaScript plugins, you could do that. And then down here at the bottom, we pull in Vue. We pull in the VueResource plugin. So, this plugin gives you the ability to perform AJAX requests on your Vue models. So, for example,

And then down here at the bottom, we pull in Vue. We pull in the VueResource plugin. So, this plugin gives you the ability to perform AJAX requests on your Vue models. So, for example, if you're familiar with Vue, you can do things like this.http.post to the given URL with this.data. Now, alternatively, if you don't want to use that, well, you are pulling in jQuery, which means you could use jQuery.ajax in its place. Or, yeah, maybe for your project you don't need jQuery. If you're not using these bootstrap plugins, it's very possible that you don't need jQuery at all. It just depends. Modify this however makes sense for your project. And then down here at the bottom is just a quick little interceptor. And all that this does is it intercepts any AJAX requests you make, and then it ensures that this header is attached. And that way, the CSRF middleware isn't going to squawk at you, and you might have run into that in the past.

intercepts any AJAX requests you make, and then it ensures that this header is attached. And that way, the CSRF middleware isn't going to squawk at you, and you might have run into that in the past. Okay. So, that looks good. Just some basic setup. Next, you can see that we have an example component for you. And if we go into the components directory, here it is. And you'll see this is using not a .js extension, but a .vue extension. This is kind of a cool way to build up your Vue components. So, within here, you could define a template tag. Actually, let me just delete all of this to make it a little clearer. So, you can set your template, your script, and that would be the Vue model itself. And then if you wanted to, you could even add a style section in the process to style your components. So, you know what? People kind of disagree on this one. I think this is pretty cool, but I do see some situations where it gets a little tricky.

series at LayerCast. Here's what you do. Go to vuecast.com, and that'll take you directly to the most current series at LayerCast. And I highly recommend it. Anyways, all we're doing here is saying once the component is ready to go, we're going to console.log component ready. And then the template associated with that component is just a little panel. Okay. So, nothing too crazy here. Now, how are we able to read these .vue files? Well, the answer is within our package.json file, you can see we're pulling in the Laravel Elixir Vue extension. So, let's say you don't want to use .vue files. Your team's not familiar with it. You don't want to bother. Okay. Here's what you do. Come back, and you're just going to say require components/example. And then you're going to change this to example.js. And then your template, of course, has to leave. You don't need a script anymore. And you can do something exactly like

example. And then you're going to change this to example.js. And then your template, of course, has to leave. You don't need a script anymore. And you can do something exactly like this. And now you're good. You're no longer using .vue files. And of course, finally, you would want to get rid of this extension entirely. But yeah, you can modify every bit of this. Anyways, once again, give me a second to bring this back. And from our app.js, anytime you import a .vue file, you need to be explicit about the extension. Okay. So, we create a new Vue. We bind it to the body, or we mount it to the body. And now, our routes/web.php file loads the welcome view by default, right? So, if we take a look at that, you can see that even this file has been cleaned up just a bit. So, this is the welcome page for Laravel. In fact, let me show you. Laravel53.dev. I'm using Laravel Valet here, so I can just type

you can see that even this file has been cleaned up just a bit. So, this is the welcome page for Laravel. In fact, let me show you. Laravel53.dev. I'm using Laravel Valet here, so I can just type the folder name .dev, which is cool. Anyways, you can see even the splash page is a little different. And how cool is that? Love it. Anyways, let's go back to Sublime Text. And if we scroll down to the bottom, let's do this. We're going to get rid of everything within the body tag, and we can get rid of everything within the style tag as well. All right. So, now, how do we use this example component? Well, if we go back to app.js, you can see we're calling it example. So, that means it can be referenced like any other tag. But now, of course, right now, it won't work because you have to import your JavaScript file. And Laravel 5.3 includes a precompiled version out of the box. So, that means you can import this, js/app.js. And now, while we're

because you have to import your JavaScript file. And Laravel 5.3 includes a precompiled version out of the box. So, that means you can import this, js/app.js. And now, while we're here, let's also pull in our CSS file, css/app.css, and we'll get rid of the type. That's not necessary. Anyways, if we come back to the page now, there we go. We can see our component. And, of course, we could give it some spacing, myWebsite. Yeah. So, it uses Bootstrap out of the box. But once again, like Vue, there's nothing saying you have to use it. If you don't want to use Bootstrap or Vue, you delete one or two lines, and then, you know, you basically continue on your way. So, let's wrap this all within a container. Come back, refresh, and you get the basic idea. So, now, imagine we want to make changes. I will say gulp watch. All right. So, it compiled down Sass and Webpack. Let's go into sublime, update our example file, and we'll say,

basic idea. So, now, imagine we want to make changes. I will say gulp watch. All right. So, it compiled down sass and webpack. Let's go into sublime, update our example file, and we'll say, how about this? data, we will return where the message is, hello laracasts viewer. And then, up here, I'm going to reference the message. Okay. So, webpack, behind the scenes, is keeping an eye. It compiled it down. So, if I come back to Chrome and give it a refresh, now, it's working. Okay. So, that's kind of the core of some of the front end changes. So, yeah, just to reiterate one more time, this will get you up and running really, really quickly. But if you don't like Vue, if you don't want to use sass or bootstrap, you can remove all of that by opening a file and deleting it, and then continuing on your way. And with that, let's move on to something new.