Skip Navigation

Where to Go Next Vue JS Basics

In this episode, we will wrap up the series on Vue js and show you what you might want to check out next.

Transcript

So we've gone over the Vue JS basics. Now, where might you go from here? Well, under the side menu here where it says Tooling, there's some information about production mode and some of the things that you might go and do and configure. If you're using it just basics, the way we've set this up today, maybe you're including it on a WordPress site or just a basic HTML and CSS site, you'll want to go from the vue.js to a vue.min.js, as it's going to be a minified file. Now, keep in mind, when it becomes a minified file, or if you're referencing it as a CDN or content delivery network, that you're no longer going to have those Vue DevTools, and that's this option here that comes along with Chrome. So keep that in mind when you go and do that, that you're going to miss out on that, so you want to keep an additional version so you can kind of toggle on and off.

In addition, where you might want to explore next is single file components. And these are really cool. So you can see here, it integrates the template code by just referencing inside of a template tag, the script code, so all of your JavaScript for that component, and then the style tag and it's scoped. You can also reference CSS inside of here, or SCSS, depends on how your configuration goes. And what that's allows you to do is actually build a component that's completely standalone. It doesn't need to look like the rest of your site, or it can look like the rest of the site, but you can actually build components for your site or your application that are completely standalone. So that's something to check out and explore. That's single file components. You're going to need something like webpack or Browserify to go and configure that as the files need to get compiled. And it's basically going to take this code and compile it into one code base. So keep that in mind, if you're wanting to go down that route.

There's also some other things that you might want to check out, such as unit testing for your Vue. So if you're concerned about testing, I would say that's probably, for sure, beyond the basics. You just kind of want to get comfortable with Vue first, and then once you feel like you're intermediate to advanced, then I think it's a good time to start writing some unit tests to go and see and make sure that the functionality of your app or your components are actually doing what you want them to do, and they're testable. Now, some people say start testing first. I'd say, start testing after you understand enough what you're doing. It's doesn't make sense to write some tests when you don't know exactly what you're doing, because it'd be like taking a test and you didn't cover the course material. So think about that further along as you go.

There's a couple of other topics in here that you might want to explore, such as the separation of concerns and how you might set that up. On CodeTime though, we're going to have some series. If you're done with this series, I highly suggest checking out, if you're familiar with Laravel, checking out integrating Vue with Laravel. That Vue with Laravel will show you how to use Laravel Mix and it sets up this Browserify/webpack, they use webpack and Laravel Mix, and it sets it up for you. It's a pretty cool way of setting it up, but you'll need to use Laravel. So if you're not familiar with Laravel, you can watch the Laravel Basic series.

It is very different than JavaScript in front end. It's a back end tool called Laravel, and you can get that with laravel.com, but it's a very, very powerful PHP application builder, basically, framework. It is my favorite PHP framework. Probably my favorite framework of all time. Really abstracted and some cool concepts inside of it. So that might be somewhere that you want to check out if you're writing your back end code in PHP. So definitely do that.

The other thing is you might want to check out is starting to integrate your Vue code with some AJAX calls with jQuery, and pulling data maybe from a database or an API. You could use something like Axios, or you could use jQuery's own AJAX method. So definitely lots to explore there. We'll be putting up more Vue series here on CodeTime for different things as we go, so definitely check out those, as you should have now Vue basics down and ready to go make some applications. I hope you enjoyed. Until next time.