Vue.js – From The Ground Up

Vue.js Tutorial From Scratch – e07 – NPM, Webpack & Single File Component

we're gonna pick right back up from where we ended in the previous episode now if you missed components 101 go ahead and view that video first in this

video I want to tackle actually getting a full NPM build that will allow us to compile all of our assets that is JavaScript and CSS and put them all together into a single file the way that

a production environment would actually run now you know that we have covered a lot of laravel and when you compile your assets in laravel everything gets compiled into a single file now we're

gonna do this without laravel but we are gonna use mix and mix actually ships with laravel and what it does is configure a lot of the complicated web pack things that way we don't even have

to worry about them so I will start with the same example that we had and at the end of this video we're gonna have this component our accordion component that we have here in a single component file

and we're gonna have an entire NPM build around our project so before we get started there are a little bit of software requirements that we're gonna have to have for this so if I jump back

into my terminal if you ran NPM dash V you should have a version of NPM now if you don't have a version of NPM you can head over to node.js org and then download the latest one that you can

find now this is a very simple click through and accept terms and it will install it for you very straightforward so with that out of the way you should be able to go back to your terminal and

again run NPM – V or no – V and get a version for both so NPM if you are not familiar with NPM it is a package manager for JavaScript and while it's not the only package manager that you

can use it's probably the most popular one so now let's go back to Chrome and let's check out levo mix now yes this is called laravel mix but Larry mix does have a standalone version you don't have

to use it with level and I highly recommend that you use it even if you don't use level we are in the installation section and if you scroll down there is this

stand-alone project to reiterate level mix is gonna be a layer on top of web pack that is gonna make configuring web pack a breeze and you're gonna love it so let's go ahead and follow the

instructions now I already have a directory so I will not create one but I will run NPM in it – why and so what this does is it creates basically our package JSON file with nothing special

just a very basic package JSON that we can add some dependencies to it so next let's go ahead and add as a dependency so we do that by saying npm install laravel – mix and then – – save – dev so

this will save levo mix into our dependencies for this project so let's go ahead and let it finish and there we go so there is one more dependency that we're going to need so let's go ahead

and pull that in right now npm install cross – e + V now let of a mix does ship with a couple of different scripts that we can run so that we can do watch or we could do production and all of that

requires cross e + V cross V and V all it really does is just tell NPM what environment we are in whether in production or development so with that being pulled in let's go ahead and

switch back to phpstorm and let's check out what got a tattoo our project so there we go now we have this node modules directory now there's note modules directory I gotta warn you it is

huge there's a ton of stuff inside of here but you don't have to worry about it a lot of those libraries get pulled in so that web pack can do its thing but just

ignore that folder altogether as a matter of fact you don't even commit that folder into your repo so if you are following along you don't commit the node modules directory you would

probably add that to your get ignore file okay so we have our node modules now we need a web pack configuration now the nice thing is that level mix and if we scroll down here for level mix letter

of a mix now level mix it does have a nice set up for us so if we go into setup we have this webpack that mix that Jas so what we could do is actually copy this file to

our local project and out of this node modules directory and if you follow the instructions it will actually have you do that it's going to copy from node modules level mix setup web pack that

mixed ijs into your directory so let's go ahead and run this command right now – copy that web pack config file into our project so if we run that hop back to phpstorm now we have this web pack

that mix j/s now this file has a lot of comments and really it's all about the API available to you through level mix now we are going to explore some of these at some point but for now let's go

ahead and clean up this entire file and it really only needs to be two or three lines long so if we get rid of all the comments this is it this is basically your entire web pack configuration file

now really we know it's not because mix is taking care of everything for us but the simplicity of this really illustrates how powerful level mix is so let's look through this configuration

file and dissect what it's doing so it's going to take any jas files named app that j/s that is inside an SRC directory and then it's going to compile them to a directory called dist then it's going to

take any sass and compile that sass file into the same directory so what we need to do is add this app that Jas and app that s CSS file into an SRC directory so let's go ahead and make an SRC directory

first and let's CD into SRC so now let's go ahead and make that app that J's file so I'm going to Bhim a pas and I'm simply just gonna save and quit and let's go ahead and add app that s CSS

file and again I will just quit and now we have those files alright let's go back to phpstorm and in my SRC directory I have an app KS and an app that s CSS okay awesome so

we're doing great so far so what else do we need well of course we need view we need to pull in view so let's jump back into my terminal and npm install view and we'll also save

that to the dependencies and there we go we now have view at our disposal so the first thing we need to do is if you remember up until this point let me pull up my index that HTML we have been using

a CDN for view but it's time for us to depart from that compiled file and actually compile our very own view from scratch so to do that let's jump to the App J's file that we just created and

right at the top we're going to say import view from view and so what this will do is it will import view and now we can begin to use view so let's go ahead and bring in from index.html we

can actually get rid of this script right here and let's go ahead and for now I'm going to bring this entire thing that we have right here inside my script tag I will bring that into my app that

Jas file so inside of here of course we have the exact same thing all I did was just copy pasted over this is the code that we generated in the previous episode so now with that if we visit

back the web pack that makes file we know that this app that Jas is going to be compiled but we need to trigger that action alright we need to compile this code

down so we can compile our assets on a single basis or we can continually compile them using a watch so in my terminal I am inside my SRC directory so let me go back to just my view from

scratch directory and now let's run NPM run watch now at first this is not gonna work and if we run this then of course it says well I don't know what you're talking about so if we actually visit it

back to the documentation and scroll down just a little bit more we have this section here for NPM scripts so let's go ahead and copy this entire code block from scripts and back in phpstorm

in my package JSON file right at the very end right here let's add a comma and then let's paste in those scripts alright I'm going to hit save and now let's go back to the term

and run that MPM run watch one more time but this time it does work so what this is going to do the first time around is it does need to install some additional dependencies that it needs so we'll let

it do its thing and we'll be back when it's done okay and it's done so it says it is finished please run mix again okay let's try it one more time npm run watch and now we get an error and this may be

a little frustrating a lot of the stuff that we do would note sometimes you do run into issues like these so it's saying that it cannot find the module cross spawn but I'll tell you what would

probably fix it let's run npm install by itself and this will probably fix our problems okay and now it's all done let's go ahead and run npm run watch one more time and let's see if we can get it

to compile properly and if you get a message like this then we are good to go alright so let's go back to phpstorm and see what layer of a mix did for us so now we have this new distribution

directory and if we open that up we have an app that j s and an app dot CSS now these are the files that you will actually reference inside your index.html from here on out so if we

open app dot j s this is a fairly large file but you see that everything in here has been compiled and it basically looks nothing like our app that J s but that's okay it is taking all of the libraries

that we need to use and bringing them in to a single file so before we can test this out in the browser here is our index.html from the previous lesson yes we still have view and

everything in here but we are not using this app that J s file so let's go ahead and use that now I will add a new script tag and let's add an SRC meaning a source of slash DST slash app dot J s so

now instead of pulling view through a CDN we're actually compiling our very own version of that so let's go ahead and head back to the browser let's check out our project one more

time I will hit refresh and we get a blank page alright let's go back and see if we made any mistakes so it looks like it's a very simple fixed in my script file I simply just forgot to put in the

period it needs to be a period that way it knows we are starting from our route and then dist and then app that J s alright simple mistake let's go back to Chrome and try that one more time

refresh there we go now is it still working yes it is so we are actually running all of you all together but we aren't compiling it alright so now that we have all of that setup done it's time

for us to export that into its very own single component so let's go back into my directory inside my sources directory I will create a new directory for components and inside components let's

go ahead and generate a new view component and it's gonna be called accordion so you remember from our previous example that is basically what it is so now this is a new style of file

that we see in view so we have this template then we have a script and then we have a style so a single view component file allows us to put all three of these things into a single file

so let's refactor this so that we can see how it actually gets put inside a single view component file so I will actually open up this in its own separate window so you can see them side

by side alright so this view component everything that is in between these curly brackets will basically go in between these curly brackets so let me go ahead and grab my props and I will

bring my template but my template of course will end up in a different place so I will cut this out and then let's add that right here so we'll have a prop we'll have a template we have our data

and then let's go ahead and get rid of this component all together then what I can do is move my template out of this template into the outside now you have to agree that this is much better and

much easier to edit than it is inside where it was before and style for now we can actually get rid of that altogether we don't need it okay so let's go ahead

and hit save on that one now we need to bring in this component into our app that Jas file so let's say import accordion from where are we bringing this from well we're bringing

this from component accordion dot view and you don't have to put the dot view file but we will anyway you don't have to okay so we are importing accordion which is coming from this file here and

now we need to net our view instance know about this component so let's add a new section here for components and this is just simply an object of components so the component that we're going to

have is accordion and that's it now this view instance knows about this component right here how cool is that let's hit save and let's make sure that our work is still working hit refresh

and sure enough everything is still working now just to prove that we are pulling from this I'm just gonna do something silly here and say something like give me the title and then we're

just gonna add the words inside right that way you know when we hit save and we compile we know that we are actually pulling in from the new component that we created hit refresh sure enough there

it is so yes we have successfully extracted our very first view component now more importantly in this lesson what we went through is how to set up a modern JavaScript build using NPM and

web pack and of course we did use level mix to help us out so let's go ahead and review everything that we did let's go back to our index dot HTML file this file of course looks very different than

it did at the beginning of the lesson let me pull this in right here so we can see the entire file this file now simply brings in this singular app that jas file now there's a lot going on with

this app dot J's file as you already know because we now have web pack in our configuration now again we use layer of a mix but if we visit the web pack that makes file

all we are doing is taking an app that J's file that lives inside an SRC directory and we are compiling it as JavaScript into our dist folder then we're also going to do the same thing

for our sass file so if it finds an app that a CSS file it will also compile that into a dist directory now for this lesson we didn't add any sass to this app that s CSS file but we can for sure

so inside of this how do we get this to compile well for that we have to head over to the terminal and then you have a couple of choices we ran npm run watch but you can also

run npm run production and i will actually run that right now it's either prod or production either one will work and this will actually minify this four file notice here that this file was 345

kilobytes now check out the new file the new file is 97 kilobytes this is just one of those really powerful features that we can use with web pack so what it has done is has minified our code and

made it a third of the size actually less than a third of this size so that's pretty awesome news let's go back to phpstorm and see how that file looked different

now if you remember before it had a lot of space but now it looks very different now it has basically contracted that entire file into a minified version so whenever we run npm run prod or

production then of course you get the production compiled version for development I recommend you use NPM run watch because what this will do is continually compile the files every time

it detects a change and so we were able to change and refactor all of our codes behind the scene and not worry about it being compiled or not so for development and p.m. run watch

and then once you're ready to ship some code to your server then you will use NPM run production to get the small as possible size of file that you can get so then finally back in phpstorm we

added a whole new directory inside our source we have this components now and then we added this accordion that view file again this accordion that view file has a template

and it has a script and it can also have its own styling so you can add the styling for this accordion right in this file if you wanted to you don't have to of course you can continue to do CSS how

you've been doing it before but it is nice to have a section here for maybe just accordion specific styling instead of it being spread out and file you can put it directly inside by simply just

adding a style now if you don't want these styling classes in here to change your entire project you can add scoped to inside of this style and now it will only work with anything inside your

template it will not affect anything outside of your template so just keep that in mind we'll explore some of that later on so we have our props and we have our

data again we constructed this component in our previous lesson so this lesson was more about extracting this into its own component than it is about the actual component itself so we go back to

our app that Jas file which is located inside our SRC directory and we imported this accordion component from components according that view and then we simply declared it as a component to our root

view instance and with that we have successfully extracted our component into a single file view component

It’s time for us to depart from the compiled CDN of Vue and start compiling our own assets with NPM and Webpack. We will be pulling in Laravel Mix but just for it’s Webpack configurations. Finally, we are going to refactor into a Single-File Component.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Vue.js Documentation
https://vuejs.org/v2/guide/

Download VSCode
https://code.visualstudio.com/

DigitalOcean Referral
https://m.do.co/c/7dce5364ef4d

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Modern applications require a robust Javascript framework. In this series, we are exploring Vue.js from scratch, covering all topics of writing Javascript code that is maintainable, performant and best of all powerful.