Nuxt JS Crash Course

[Music] this video is sponsored by the ultimate freelancing bundle by study web development comm which gives you everything you need to start your own freelancing business including 130 page in-depth guide invoicing and client proposal templates website templates an SEO checklist and much more visit the link in the description and use the code brad 25 to get 25% off hey what's going on guys welcome to my knucks j/s crash course so in this video I'm gonna give you what you need to get up and running with next and we'll talk a little bit about what it is then we'll jump into creating a small project with it so I just have maybe three or four minutes of slides just to give you an idea of some of the advantages some of the features that Knox two offers so let's talk about what Knox actually is it's a framework for view j/s and that might seem a bit weird to have a framework for framework but next offers some great features that enhances the view j/s framework and it's actually really easy to learn as long as you're familiar with view so one specific purpose is server-side rendering of UJS apps and if you're familiar with next j/s knucks is very similar except it uses view instead of react I do have an XJS crash course as well if you're interested in that so as you probably know view j/s is a client-side framework for single page applications meaning that you have a single HTML file that loads everything via the client-side JavaScript and this has a lot of a lot of advantages for really interactive and quick user interfaces however there are some drawbacks and one of the biggest drawbacks is SEO when you load a regular view j/s app or a regular react or angular app everything is loaded through the JavaScript and typically search engine crawlers they don't wait for that loading so they essentially see a blank HTML page so it's not very good for SEO now what knucks can do is is it makes your application into a universal application that will preload your app on the server which will improve SEO okay it'll also load faster along with many other benefits so with the next app the title tag the metatags all that stuff that's in the head will be there before the actual javascript is loaded saya knucks uses a library called view meta to handle all the head elements on a page and you can set defaults in the config you can also set specific meta tags title tags for each page that you create and I'm gonna show you how to do that another fantastic thing about knucks is routing so with something like let's say PHP when you create a PHP file and you just throw it in your web folder and you visit the URL like let's say slash about dot PHP it just shows up it just works and with Knux you get that same advantage you get a pages folder and you can create for instance about dot view and you can just go and your browser and go to slash about and it will just work so there's no complicating routing setup or anything like that it just loads the page which is actually a view component so you still have while the dynamic capabilities that you know you can implement within a view component and again you have full control of things like meta tags and the title of each page which is fantastic alright so SEO routing that stuff those are the the for me the the best features of knucks but there are some other things that are included other features so with Vijay s if you just create a regular view app and you want to use the view router or view X for state management or view meta you have to install all that stuff manually you have to set it up manually with next it's there and it's ready to go you just simply create a file you can also choose between a universal app and a single page app so you can still build your your single page apps with next it doesn't have to be universally loaded you can use many different server-side frameworks such as Express this stuff is built right in so when you run the CLI and you create a new app it'll actually ask you if you want to use Express and then there's some other frameworks as well you'll see I forget the exact ones but this is easy to create a full stack application using something like view and Express so that's another reason you might want to use next you even have the choice to use a UI framework like bootstrap it'll just implement it right so you don't have to set it up yourself all right and like I said all the stuff is available when you generate a new project some other features are automatic code splitting you have babel trans file minification hot module replacement sass integration all this stuff is included with the framework and then once you're ready to build you can simply run next generate and it will create everything that you need to deploy in a dist folder so you can actually host it anywhere you want including a static host like metla 5 alright so that's it guys I just wanted to kind of give you the the advantages of using Knox should tell you some of the features now we're gonna jump in and see how it works what we're gonna do is create a simple dad jokes application using a third party API we're gonna implement page routing view components data fetching head elements and more alright so let's get started okay so this is the Knux J s website Knox J s org and this is where he could find all the documentation guides examples stuff like that and this here is the API that we'll be using its kind of a silly API it just gives you dad jokes which are just like corny jokes and you can see we can fetch a random joke and it just gives us an ID and it gives us a joke okay those are the two fields we'll be working with and we can fetch a specific joke by ID which will be doing on the single joke page and then we can also get a list of jokes using the slash search endpoint and you can even add a term so right here if we add a term equals and then whatever so we'll actually implement a little search box where we can search the jokes as well okay so that's the API we'll be working with so if we go to get started at net knucks J Escom I'm sorry org you'll see that it's it wants us to run create knucks app ok so that's the generator that will create our application and you can install it globally but what we're going to do is is use NP X so that we don't have to install it we can just run it so I'm gonna open up a terminal and just do NP x create - knocks - app and then we want to give it a name I'm just going to call it dad jokes and it's gonna generate our application but it's gonna ask us some questions as well so project name description will just say lists will say bad dad jokes okay so it's gonna ask us if we want a custom server-side framework like express KOA adonis happy there's a bunch of them to choose from this is if you want to make a full-stack application ours is just a front-end app so we're gonna choose none and you have some choices here you can have PWA support linter format or prettier which i already have in my text editor I am gonna choose Axios though because I like to use Axios to make requests as opposed to the fetch API and then you can also choose a UI framework like bootstrap you can even use beautify Balma I'm gonna go with none as well and then for test framework I'm going to choose none but you can choose jest or Ava if you want now it's going to ask us for our rendering mode so you can do it just a standard view j/s single page app however we're gonna take advantage of server-side rendering and choose Universal author name package manager you can use yarn if you want I prefer NPM and this should generate all our files for us okay so our application has been generated we just want to CD into dad jokes and from here I'm going to run vs code and then I'm also going to run the server from here and to do that we do an NPM run dev alright and it's gonna start on 3000 get these cool little graphics showing you the client the server is loaded and we'll go ahead and open this URL and that's what we get so we get this little boilerplate just like with a standard view application okay now I want to show both of these on the same page so I'm just gonna make that a little smaller so first thing I want to do is just go through the folder structure here so you get a better idea of what you're working with so the package jason is pretty simple we just have next as a dependency it also uses cross env for a cross and cross-platform issues and then Axios because we chose to install it now if we had chosen Express and some of the other stuff a tasks that would also be here it also uses node Mon for any server-side servers so that it will auto reload and then up here you can see we have our dev script with which we just ran we also have our build generate and start script so pretty simple package jason let's look at store now store is going to be empty because this is this is where you're going to put your view x files if you choose to use view x so it says creating a file in this directory will automatically activate the option and the framework so the view x is basically included you just need to create your files now we're not going to use view X so I'm not gonna do anything here but just to let you know that that's your your state or your your view X store static so this is for any static files you have and for instance if you have like a robots.txt in this folder it'll get mapped to just slash robots.txt so that's your static folder you have plugins so if you install any plugins or create any plugins pages this is a very important folder this is your pages so if you want let's say in a boat page you could just put about dot view and I'm gonna get back to this in a minute middleware so if you have any middleware or you want to create a new middleware you can do that in this folder layouts we have a default dot view and basically this is the this is basically the wrapper so right here this next is whatever page that were viewing so if you want like a nav bar or header or something that you want on every single page then you want to put it in here and this is just like any other for you component you can put a script tag and stuff like that and we're gonna heck we're going to do that in a little bit let's see components so basically any components you want to insert into a page you would put in here and pin to be clear pages are components they're just routed components okay this is four components you want to insert such as the logo which they have as an actual view component okay and then assets this is for unn compiled assets as you can see right here it's for like less SAS files other JavaScript files so that's pretty much it for the for the base structure of an ox tab so it's not too complicated so what I want to do is just let's let's clear some stuff up actually you know what let's first create a page because that's one of the best features of next and I want you to see that so in pages I'm gonna create a new file and I'm gonna call it about dot view and why if you're using vs Cotto it definitely definitely recommend using the veter I think that's how you pronounce it this right here veter extension which has syntax highlighting snippets of allows you to use Emmet within templates definitely would suggest that if you're using vs code we can just do scaffold and it will actually generate a view component with the template the script in this style so in this about page I want this to be very simple I'm just gonna go on the template we're gonna have a div now in view I'm not gonna I'm not gonna go over everything about view j/s but real quick you just have to have a parent element here like I can't do another div down here everything has to be within one element so let's put an h1 and let's say about I would just say about dad jokes and we'll go ahead and put a paragraph here and let's just say this is a an app that displays corny dad jokes okay and then I'll just put a that's it that's all I want okay now I'm gonna save this and then and I haven't done anything I there's no routing file or anything like that and if I go to slash about there it is it works so it's it's similar to what you would do with like an HTML file or PHP file where you up upload it to your server and it just works you don't have to set specific routes or anything like that okay now I talked a little bit about meta tags and the head the title stuff like that stuff for SEO and what's great about this is I can go down into my script here and I can put in head can go like that so a head method and we can return from this I cannot type today return an object and we can put a title and this can be dynamic you can use some you know this dot whatever if you if you want you know for maybe a post title or something like that but I'm just going to use about us here I will say about the app and then we can include meta as an array and we can put any meta tags we want as an object takes three things an H ID which is a unique identifier for that I'm going to say I want this to be the description and then the actual meta tag looks the actual meta tag which you're going to do name which is description and then we want the content so content let's say best place for corny dad jokes alright so I'm gonna save that and the Vita extension will automatically make my single quotes double so I think that's what's doing it maybe it's prettier I don't know but let's go ahead and reload this and notice that the title now says about the app okay so we have a title if we look at the source code you can see our titles there and then if we look at the description right here content equals best place for corny dad jokes so this is a huge advantage with Knox's is the SEO okay your titles and all that stuff will show up and it just looks better I you know you know we don't have to install any separate package or anything to have dynamic titles all right so that's our boat page that we can close that up we're not going to do much more with that let's see next thing I want to do is show you within pages you can either create the page dot view or another thing you can do is create a folder and you can call it whatever you want the page to be I'm going to have I want slash jokes so I'm going to create a folder called jokes and inside jokes I'm going to create an index dot view and there's a reason I'm doing this but you could do this with a boat you could have in a folder called a boat and then an index dot view inside that or you can just call it about dot view so if I'd go ahead and scaffold right here and for now I'll just put a div and I'll just say jokes and save I should be able to go to slash jokes and it works okay and there's a read again there's a reason I did that and I'll show you in a little bit and that reason is I want to have a single joke page as well as a list of jokes so let's let's create a component now I want to have an app header that shows on every page or we can actually have navigation between these links so I'm going to go into components I'm going to delete this logo dot view we no longer need that but we're going to have to fix up the index dot view real quick let's just get rid of this section and this is actually going to be a very simple page we're just gonna have let's put an h2 and we'll say welcome to the best corny dad jokes app on the web and we don't need to bring in logo so we don't need this we're actually not gonna have any components in here so we can get rid of that one thing I do want though is a head so I'm gonna copy from about I'll just copy this whole explored default and in our index let's just say welcome to dad jokes and we'll just leave the same description and then down at the bottom I'm gonna get rid of all the styling in fact I'll just get rid of the whole style tag and save that and now if we go back to the index we should just see this now like I said I want to create a header so in the components folder I'm going to create a file here called app header dot view and don't call it header because you're gonna have some issues just because of the the header html5 tag I tried that and it was giving me issue so I just changed it to app header so let's go ahead and scaffold a template here or a component with a template and in here I'm gonna use a header tag with the class of Heather and let's put an h1 with the class of title and we'll just say dad jokes so basically our logo and then I'm gonna put a UL here with the class of men you actually don't even need a class we'll just do a ul and then the list item now this is something that is specific to next instead of using an a tag for a link you want to use Knox - link so it's similar to if you're familiar with react it's similar to you know the link in the reactor outer and we're gonna use a two attribute and then let's set this to slash and this will be our home link alright and then I'll just go ahead and copy this down twice let's change this to slash jokes jokes and let's change this to about and have slash about okay so that's it for the HTML let's go down to our script now since this is a component we have to just give it a name say app header and then I'm gonna add a little bit of styling but I'm gonna paste it in just so I don't have to waste time writing CSS I'll just quickly go over it okay so we just have our main header class I'm displaying Flex so that the logo and the menu are side-by-side and then space between for justify content will push the links way over to the right we're gonna align them Center add some margin and padding and a border and then we just have the title which is a little bigger change the color the UL will be display flex so that it's it displays in a row and then for the links we're gonna just add a background color or padding stuff like that all right so that's our app head our component I'm gonna save that and where I want to put this now is in my layout the reason for that is because I want this on every single page so in the layout I'm actually going to get rid of all the styling I'm gonna have some styling that I put in here so I'm going to keep the tags but I want to go up actually let's create a script tag we don't have one of those so we want to export default now we're going to be bringing in the app header so in components we're going to add app header and of course we have to import that if we want to use it okay that's gonna be up one level okay and then let's stick that right above our output right above the next I'm sorry the next and say a Petter and if we save that now we get our header now there's there's bullet points here that there's some styling that I want to have some global styling so I'm going to paste that in real quick right down here and the style so I'll save that now I just want to add this Dib that wraps around everything I'm going to add the class of container which I have in the style that I just put in okay so we just get this white container so let's take a look real quick we just added a reset we changed the font line height background is going to be gray for the body links ul and then the container we have a max width of 800 added some margin margin Auto to put it in the middle overflow padding and white background okay so just some basic styling and now we have a navbar so I can go to jokes I can go to a bow and there was no special routes or anything I just simply put those components or those pages in the pages folder okay so let's start to let's start to deal with our jokes because that's the main part of this application so I'm going to actually one thing I want to do is add yeah the jokes needs a head because I want to change the title so in my jokes slash index file I'm just going to copy the head right here and inside the jokes paste that in and we'll just say dad jokes all right now we're gonna have to fetch fetch our jokes from the API so let's go ahead and do that now I'm guessing that you guys are familiar with view J s at least if you know if you're not at least watch the crash course so they have just to kind of give you an idea of how things work lifecycle methods stuff like that data so in our jokes we want to have some data so I'm gonna add right here data and the way this works is we just return an object with any data we want and we're just gonna have a jokes array okay I'm gonna put a comma here everything needs to be separated with a comma now in order for our request to run as soon as this component loads we're going to use a life cycle method called created so right here I'm just going to say created and we're gonna make a request to our API and we're using Axios and we need to actually send let's see let's go to the search endpoint we have to send this header value of accept application Jason otherwise we're gonna get back the HTML page as opposed to the JSON data so I'm going to create a config config object with a headers object this is how we do it with Axios and we're gonna have accept and then we're gonna have content - what am i doing application slash jason alright and then under that config we're gonna make our request now I'm actually gonna make this ace and use a sink of weight here so let's say we want this to be a sink and then we'll go ahead and Const res equals a weight whoops weights and then make our request so Axios dot get and we need to get let's see this URL right here so it's the slash search and we want to make sure we pass in our config as a second parameter all right once we do that we should probably put this in a try-catch actually let's do a try-catch so grab that and just move that up into the Tri and for in the catch I'm just going to do a console log of the error all right so once we get that what we need to do is assign the response data to actually I'll console log at first just so you can see what it gives us so let's do res dot data and I'm gonna save this and it should run as soon as the component loads so let's open up our console and see what we got X Oh Axios is not defined so I have to bring in Axios forgot all about that so it's imports Axios from Axios and it's already included because we chose that in the beginning and this is what we get back so we could add pagination if we wanted to I'm not going to get into that in this video though you can see it has the limit next page previous what we are interested in is the results the results has the object with the ID and the joke okay so what I want to do here is a sign this results to this jokes data that we have or this state whatever you want to call this so I'm gonna say this dot jokes is gonna equal res dot data and then we just want the results stored in that okay so we'll go ahead and save that and now we should have that available to us so we want to output our jokes up here and the way I'm going to do this is I'm gonna have a joke component so each one that displays will be a joke component all right so I'm going to create that and go into components and let's create a new file called joke dot view so in this component we're gonna do a scaffold and we're gonna have a div with the class of joke and then in here we're just gonna have a paragraph with the actual joke that's passed in as a prop alright now we have to give this component a name so we'll call it joke and then any props that are going to be passed in and props is it's gonna be an array and we're gonna have a joke prop and an ID okay and then for styling I'm just gonna quickly add a little bit of style in here so just some padding and border say one pixel let's do dotted and gray and let's do margin one REM on the top and bottom okay and that's it so I'm gonna save that and then go back to my jokes page and basically I want to loop through and output a joke for each each one that we have in our array so to do that let's let's delete let's keep the div and let's put in actually we have to bring in our component so it's say import joke from and we actually want to go up to levels oops into components slash joke and we want to add that down here as a component so let's go right here and say components and joke okay so now we can go up here and we can insert it so let's say joke now there's a bunch of stuff we need to add here one we need to loop through and show a joke for each one in the array so we're going to use a v4 directive we're going to say V - 4 equals let's say joke I'll do joke in jokes okay so this right here pertains to disarray that's getting filled by the response and then we also want to add a key that's what this error is telling us custom elements in iteration require a V bind key so V - bind key which just has to be a unique value so I'm going to use the joke ID now when we use this V bind we actually don't need this we can get rid of that and just keep : key all right now we have two things to pass in as a prop the joke itself and the ID remember we listed those as props so let's say we want the ID is going to equal the joke dot ID and then the joke itself is gonna equal joke dot joke okay so let's save that and there we go so each one each of these is a joke component that's getting passed in the data that's fetched from the API all right so next thing that I want to do here is I want to be able to click on this click on one of these and have it take us to a specific row which is gonna be jokes slash and then the ID of that joke so let's let's create a new page now the way that we handle parameters like that like say slash ID is within this jokes folder I'm gonna create another folder I'm gonna call it underscore ID okay and the ID pertains to the parameter okay when we do slash and then something it's gonna be the ID so in here we want to create a new file called index dot view and I know all the index dot views can get a little confusing but from within here let's go ahead and scaffold and let's just put a div and for now I'll just say single joke and save and now if I go to slash anything like slash 12 we get single joke now if I want to access this parameter I can simply access it with we can even put it up here and we can just use money sign route dots params dot and then the actual program which is the ID save that we get twelve okay if I do one two three we get one two three so we can access the parameter with this alright so like I said I want to be able to click on a joke and have it take us to slash ID so I'm gonna go into my joke component okay so components and then joke dot view and I'm actually gonna wrap this in a link so this div right here I'm gonna wrap in a next link should be next and for the to attribute I'm actually gonna do colon two because this is gonna be dynamic we're gonna insert a variable into this so let's put some double quotes and then single quotes and say we want this to go to jokes slash and then outside of the single quote we want to concatenate on ID okay and we want to bring all this stuff up into that alright so now I'll save and now if I go over here there these are now links and if I click on one it goes to slash and then whatever that ideas okay so we can access that parameter now in the single joke page I want to make another request using the ID to get that specific joke so let's do that let's let's close our joke component up because I should be done with that we can close up about and close up that header default yeah all I really want is that the underscore ID slash index dot view file so within here it's we're gonna do you know similar to what we did in the jokes where we make a request so I'm going to bring in let's say bring in Axios from Axios and let's see we're gonna have data and we're gonna return a data object with a joke and that's gonna be an object alright and then we want to make our request so that's gonna be in created okay so this will run immediately so I'm actually gonna copy from our jokes index view this whole request right here yeah this whole thing and let's make sure we label this async and paste that in now the endpoint is not going to be slash search in fact I forget what it is let's see so it's gonna be /j slash and then the joke ID so what we'll do here is let's use back ticks so we can use a template literal change that to backticks and then it's gonna be slash j and then slash our ID which we can get remember with that route dot params ID now since we're down here and the created the way that we access that is with this dot route dot Rams dot ID if you just do route params it'll be undefined so that should allow us to get that and then down here we're going to set this dot joke to to res dot data there's not going to be a results it's just gonna be joke okay as you can see right here it shows you the response it gives you so we want to put this into the joke actually wait a second do I want to do that yeah yeah I guess that's fine so let's save that and then let's see if that actually loads can't resolve X I spelled Axios wrong okay so I'm going to open my console and let's see this isn't oh I didn't console.log anything so let's actually you know there was a console log this dot joke and there we go so we get that particular joke so now we want to put this into the Dom so let's get rid of the console log and let's go up top here I do want to have a back a back button so I'm gonna do a next link and let's do two and we'll just set this to slash jokes and say back to jokes and then under the next link let's put an h2 and that's what we'll put the actual joke all right let's see let's even do an HR and then I'll put the ID I'll do a small tag and I'll just say joke ID and we can go ahead and use our route route params dot ID so let's save that and there we go so if I go back let's go down to this one why was it called the dark ages because of all the nights okay oh that's very unfunny but let's go ahead and click it and you can see it takes us to that page to that joke it's getting it from the ID right here making the request and then we're putting that into the Dom here and like if we have this isn't really a good example because we don't have like a title or anything but if we did we could make a dynamic title we could put like you know if it was a blog post we could put the post title in here pretty easily so if I grab head from one of these and go into here and let's put this at the bottom so for the title I could do this dot joke and save and you can see that now the joke is actually in the title it's really long so I probably wouldn't do that in a real application it's too long but we can do that okay so you can put dynamic values here all right now I want to add a little search box just to extend the functionality of this a little bit I mean you know this is all just view j/s next is really easy to learn if you already know view there's just a couple extra features such as you know server-side rendering and SEO and stuff like that and also if you want to build a full stack application it makes things a little more organized so let's create a new component and I'm gonna call this search jokes dot view all right so search view search jokes is going to be a form that we can submit and we can actually search through the jokes based on you know snippets of text so let's give this a name search jokes and some data so for our data we're gonna return text which is going to be a string and up here in the template let's create a form and let's have an input here so type text and then we want to connect this to the text in the data so we use the v-model directive for that and we can set that to our text data and then let's just add a placeholder so a placeholder will say search jokes and then let's have a submit button okay and then I'm just going to add an event handler up here so I'm going to do at submit actually let's do submit dot prevents which will prevent the default and we want to set that to let's just call this on submit okay and then down here under data I'm just going to create methods and let's have an on submit and what we want to do here is just omit the search text up to the parent so that we can basically filter this by whatever is in that text so the way we do that and this is all in my view crash course but the way that we do that is with this dot dollar sign he MIT and I'll call this search - text and the payload that we want to send is this dot text whatever is typed in and then we'll just set the text to empty the text box alright so I'll go ahead and save that and then we need to go where we're going to embed this which is going to be in the jokes page so jokes and then index view and yeah we're gonna put this let's uh let's bring it in first so search jokes we need to add it to our list of components here okay and let's put this right here so search jokes now remember where he mitting something called search text right or emitting an event called search text so we're gonna do V dash on search - text then we're gonna call a method called search text okay so we have to add that down in our methods which we don't have so I'll put this right under the created will say methods which is an object and then we'll have search text and we'll have access to the text that is passed in and the reason for that is in our search component we added in our on submit we added this dot text so that's gonna get passed in as a parameter let's see where are we okay so let's make sure we put a comma here now within search text I'm gonna make another request if we look at the API Doc's we can just send a term so just like this we can do this term equals they put hipster but we want whatever is in our input box so I'm gonna make this async and then I'm gonna copy this config and the try-catch I'll go ahead and put that in here and then let's let's use back text right here so we can put our term in so I want to surround this in back text and we want to do search question mark term equals and then we want to put in that text parameter like that and then we just want to set the results to this dot jokes just like we did up top so let's save that and let's go back and you can see we now have this search box and let's search for let's see you can see that this one has the word knot in it so let's search for nut onsubmit is not a function oh it needs to be lowercase all right let's try that again let's go to jokes and search for nut and there we go another nut so it's just gonna look for any nu T in any of these jokes okay if we put say Y and search we get a bunch of jokes that have the word Y all right so hopefully you guys can see the benefit of next I know that we did a lot of just regular view J's stuff but I like to actually build something and put something together as opposed to just say hey this is what it does and see you later I like to actually give you an example and give you a nice little project to follow along with alright guys so that's going to be it hopefully you enjoyed this if you did please leave a thumbs up also if you could follow me on social media follow me on Twitter Instagram all that stuff I'd really appreciate that I'm trying to build a bigger social media audience also if you want to support me on patreon if you want to support me directly that's that's greatly appreciated so thanks a lot guys I really appreciate it and I'll see you in the next video hey guys one of the best if not the best resource I can refer you to for starting a freelance business is at study web development comm slash freelancing the creator Kyle shared it with me and I can personally vouch that this bundle is well worth it you get 130 page guide to freelancing and it comes with things like invoice templates client proposals HTML and CSS templates a portfolio website access to a private Facebook community and much more so use the code Brad 25 to get 25% off today

Channel: Traversy Media

Views: 155,922

Rating: 4.9595346 out of 5

Keywords: nuxt, nuxtjs, nuxt js, vue, vue js

Id: ltzlhAxJr74

Length: 46min 8sec (2768 seconds)

Published: Wed May 01 2019