Introduction to NuxtJS - Nested and dynamic pages, layouts, asyncData + axios, meta tags, and VueX

today we are going to be building a knock step so this is very exciting and we're gonna go pretty deep but in order for us to go that deep you're gonna need to know a couple things first so you can need some basic view j/s knowledge whether that's from watching my previous videos reading the docs or building an app of your own just as long as you know the basics that's fine you also need for section 8 basic view X knowledge so if you don't have basic view X knowledge you can just skip section 8 and you'll be fine you will not need basic view router knowledge it might be helpful but although next builds on view router it essentially replaces the entire API so you don't need that you also don't need to have watched all eight plus hours of my billing and app series so this video is a great starting point for your next journey so let's take a look at what we'll be covering so first we're gonna go over why we should use NOx in the first place if you're happy with your current view setup why should you change turns out there's some pretty good reasons but it isn't for everyone next we'll go over the installation process and then we'll go over the project structure so what is in each of the files and folders that the basic installation gives you Nix we'll go over pages and routing and so pages I think is one of the coolest additions to next over a basic view app and essentially it eliminates the entire router file and does a lot of good stuff for you then we'll go over creating a navbar and using the layouts functionality of next then we'll learn how to talk to the server using Axios and the async data hook then we'll go over using meta tags to change the title which helps a lot with SEO and then we'll implement view X within our nook stop using the fetch hook and finally we'll have a summary and review that is a lot to cover in one video we are gonna go farther into next then most of the YouTube videos you'll see so let's get started but first a quick PSA down below in the description there's going to be time-stamped links they can use to get to any section of this video and there's also links to the github commits that we're going to be creating in the later sections alright let's get going so the first question will have to answer is why knocks why not just use view on its own and probably the biggest reason people switch to knocks is it's got server-side rendering built-in so that means that instead of waiting for the JavaScript to load and then processing calling out to the API all that that all happens server-side and then the user gets sent an HTML file and for your regular users that's not a huge deal you know just saving a second or two on initial load but for web crawlers that is a huge difference so you're gonna get a lot better search results if you have some sort of server-side rendering there's only as far as I know only the Google web crawler does JavaScript and it still penalizes you for that initial load time second you get automatic code splitting and so that's another thing that as your app gets bigger it's gonna be a bigger and bigger deal because when you're sending over stuff over the wire you don't want to send your three megabyte admin file let's say for example you've got this really heavy app it's ten megabytes or whatever even 20 megabytes so if it's a user that really loves this at finds it's useful then you know loading all that is unfortunate but not terrible but if you have to load all that for a splash page as well that is a disaster people should not have to load 20 megabytes in order to look at your splash page so automatic code splitting solves that for us another advantage of using Knox is easier async data so I don't know if you've ever had this problem where you're loading data but it hasn't loaded yet and so your console throws all the errors and so what you have to do is you have to grab where the data is going to be and do data and and data dot whatever you're going to do to it and so that's gets really annoying and async data will block the loading of that page until your data is loaded and that solves that whole category of errors next also includes a lot of the popular view packages built in already so view X view router view meta and probably a couple others that I'm less familiar with and so it integrates them all into one hole and so all the stuff all the conveniences that you're used to from those come automatically now I'm sure there are a lot more advantages to next but I'm just getting started with it and so will discover all those advantages in future videos as we learn more however before we get to installing it I do want to point out one downside so about a year and a half ago someone asked on github how do we add NOx to an already existing project and the answer was the simplest solution is to rewrite from scratch so if you have a large app already that is a huge downside granted most of the changes take place in the routing layer and the data loading layer so you're not going to have to change your view X stores or your components much at all but this is still something to keep in mind next is not a drop-in solution for your existing app let's go ahead and install next and create our first app so we don't actually have to install next and do these as separate steps using in px we can just use create Knox tab and then as the final argument will include the name of our project so we hit enter and it's gonna fetch all of our packages then it's going to start asking us some questions so this is the project name we want and we'll want a description and our author name and we'll choose our package manager let's go with yarn and then we can choose a UI framework so I do like having a UI framework but when I tried it earlier with beautify it had some weird default so we'll install it manually later then a custom server framework so we've already got a server running that has our data so we'll just hit none and then we can choose some next modules so we definitely want Axios and by the way we're hitting spacebar to choose these and we'll go ahead and have some progressive web app support all right and our linting tools will go with just yes Lent and no testing framework for now and so this one's important so if we pick single page app then we're not gonna get the server-side rendering benefits so if we want just an HTML page to be displayed first before loads view and all of our code we'll need to pick Universal and I am using vs code so I'll use GS config JSON and now it'll install everything for us now let's take a look at what's been built we will CD into our folder and run yarn dev and so that will start up our server so it's in development mode and it's listening on localhost 3000 so we can type that into our address bar and we'll see that our site is running awesome however we now run into our first problem so I have a server and it's built in rails and rails by default also uses the port 3000 and so if I had had my rails server running first then it would be our nook staff that would be giving the error so how can we solve this we could change the port that our server is using but you might not always have control over your server so let's go ahead and change where our next app is running so to fix this open up your next app in your favorite text editor I'm using vs code today and then find the Knux da config J's file so this is going to include all the configuration for your specific nook steps so notice that the universal mode that we selected during the setup is set here and then we'll add an option at the end called server and we will set the port to be 8000 and so we're gonna save that and we'll note that it's already reloaded to be on port 8000 in our server we will go to port 8000 and see this is still running there and now we can start up our back-end server and it will run properly now so we've got our app installed and running and pretty soon we are going to start customizing it and building our screencasting app but before we do that I do want to do an overview of the project structure this will be just a quick overview but I know that I feel a lot more comfortable if I know what each of the files and folders does before I start working so first we'll look at the three folders that contain view files that is pages layouts and components so if you've worked with a view router before then pages is the equivalent of views and so each of your individual URLs is going to have a file in pages that's associated with it now each of these pages is a view component but it has some special properties which we'll get into later in this video and the same goes for the view files in layouts there are also components but they have a couple extra properties added on by knux and so each of the layouts acts as something that sort of wraps all your components once again towards the end of this video we'll be discussing layouts in more detail and finally the components folder these are the reusable components that you would think of normally as a view components there are either not any or not many things added on by next and you use them by putting them in your pages in your layouts or in other components okay so those are the three folders where you'll be putting your dot view files your store folder is where you're going to be putting your view X store files next we have our plugins we're not going to build any plugins in this video but they are a special type of function they're run before mounting the root view J s application and middleware is another special type of function and they're run before rendering either a page or a group of pages we have two or three depending on how you look at it folders left so we have the static folder in the assets folder so the assets folder is for your uncompelled assets that you do want compiled using webpack the static folder is for your assets that you do not want compiled using webpack you want them directly accessible we're not going to use these two folders in this particular video and finally we have the dot next folder which it looks like it includes a lot of stuff that is useful but a documentation doesn't really say anything and if I change one of these you know it doesn't show up in our get changes so I don't think we're supposed to change them they are just for reference so those are all of our folders let's go over these files now so the first thing you might notice is that there is no router file and that's because the folder structure of pages automatically creates our router for us and we'll go over more on how that works later on in the video when we're creating our own pages okay so the first four do not actually affect how the app runs editor config the stuff our editor yes Lindt specifies how our styling is supposed to be our code styling that is not our visual styling get ignore we'll make sure our git ignores the things that are not useful and then Jase config dot JSON is something specifically for vs code now these three do affect how our app runs Knox da config yes we already saw that we can use it to change stuff like changing the port that would serve Don and it comes with some pre-built end stuff so if we want plugins and modules we will have to put those in and then we can configure modules such as Axios in their own separate configuration and I don't think we'll be needing to mess with this throughout the rest of this video but if you need to set an option this is probably where you want to look first finally we have our package JSON and our yarn dot lock so our package JSON it has our dependencies our dev dependencies for stuff like linting and then our scripts and you notice we've already run yarn dev which just runs next and then yarn dot lock locks in our dependencies to a specific version so that our development and production will have the same versions of everything so now we've got our app running you know your way around the folder structure and it is finally time to start building our app let's make our first page so we'll go ahead and create a new file in pages and we'll call it videos dot view so here we can create our base and let's go ahead and just make sure it's working so we have a header with videos and then when we go to Chrome it turns out yes lint is a spoil sport so let's turn that off we'll go to our will actually go to our Knox config and turn off this build module and then that should be enough to yeah now it behaves nicely all right now we'll go to slash videos and we can see that it is showing up excellent notice that we did not have to put anything saying hey we've got a route here it automatically got that from the fact that we had something called videos in the pages directory and in fact all of the nesting that you would do within the router file can be done within the pages directory just by manipulating the folder structure and we'll be showing that in more detail through the rest of this section but first let's go ahead and make this more of an actual component so within a pages component you can do everything that a regular view component can do so for example you can have your data and so let's go ahead and get an array of videos all right which pasted this short array of videos in and then go ahead and loop through them and notice this is working exactly like it does in a regular view app and we can see that all right they're displaying the styling might not be the best but we'll fix some of that when we talk about layouts our nixed goal is to be able to click on one of these and then be able to be taken to a page that's like this in the URL so slash the ID and then be able to see that video we'll start with the technique that we know will be ineffective but the way that it's ineffective will be instructive so we want videos slash one so we'll just create video slash one and here we will write say we are in video 1 and you'll notice here that it didn't create a file called video slash 1 it created a videos folder and then a 1 dot view file within that folder so keep that in mind we will go to video slash 1 and you'll notice that unlike video / - it is showing something it is found but it doesn't show this it just shows videos and the reason for that is videos slash one is a child rout of videos so within videos we need to put in next child and so we can see now that we are in video 1 and my grammar is bad oh well so it will show what's in here and then in knucks child it'll show what's in the child routes this is similar to router view in a regular view router and so anywhere that you would use router view you'll now use nuts child okay so that's all great except we don't want to show the entire list of videos above where we're looking at a video we don't even want to show it below like we could do this and now the list of videos is not in our way as much but we still won't want that and the solution to this is to have an index page so so we indexed our view and as a matter of fact we'll just go ahead and rename this and now when we go to videos one we just see we're in videos one and when you go to slash videos we see what's in the index page now what is implicit in this is that there is always going to be something like this so our videos dot view is going to be this by default so this is equivalent to not having videos dot view at all but if we want something in both the individual routes in the index route then we can put it here and it's there and in the individual route so we've learned a little bit about the structure but there are some issues so first that grammar that's fixed now second we don't want to make a to dot view and a three dot view and so on and so forth we want these routes to be dynamic and so what we'll do for that is we will change this and we'll do underscore ID and what that'll do is that'll give us a per am and now instead of saying we are in video hard-coded one we can say we are in video dollar-sign route dot prams dot ID let's give that a try it says we're in video 1 and if we're in video 5 all right we're in video 5 so anything that has an underscore will be turned into a per am now let's turn that ID into an actual video so we'll go to our index and we will grab all the data here and will once again return that video array and then we will create a computed property of video and this video will use the params ID on the route and the videos here and we'll find the correct video then up here we will get video dot name instead of just doing the params ID and now video 5 is unavailable but video 1 and video 16 and video 71 the videos that we have are all available now let's take this structure even further let's say we want an edit page and videos / ID / edit so what we'll do is we'll rename this to ID slash index dot view and then we'll add an edit dot view and those are both in the ID folder and here we'll just say editing and we'll get the route params dot ID so we'll do slash edit and see that it is indeed getting the ID so at this point we could paste in the list of videos again and then recreate the computed property and then uh put the name here but I have a better idea let's go to our index dot view and we'll take all of this machinery and we'll cut it and we will paste it into a new file underscore ID dot view and so we'll put that all in there and then in our next child component we will feed in the video and to make that work we'll have to go in here and define our props and say that a video will be passed in and now we'll see that it's working exactly as we expect and we'll go ahead and go to edit and put in props video and put in video name here and then we go to edit will see it showing up correctly though that is pretty cool we are able to pass down props to child routes just like we were passing down stuff to a child component because I mean pages really are just components with some extra stuff added and in a future section we'll be seeing some of that extra stuff specifically the async data hook but first let's clean up a bit so in our videos dot view want to clean up that and let's go ahead and put some links in here so that we can access the individual videos more easily so we will use the next link component which if you've used a view router is very similar to what they have just calling a different name and we'll have our two as well and we will go ahead and put in slash videos and then the video ID and we'll see that it does create those links and we click on them and they work now we'll go to that show page and we'll add in an edit button so just a basic button for now and we'll wrap that in a Knox link and we'll see that that link works as well then in edit we will go ahead and create a button there as well [Music] and now we can go back and forth between the edit and show pages we don't yet have a link to get back to the videos page that's what we'll be adding in the next section when we will create our navbar and learn about layouts in this section we're going to add a nav bar up at the top here that can take us between our videos page and our home page and we're also going to make this videos page centered a little bit better so it's not shoved over there to the side in a regular view app we would probably put this in app dot view but this is a nook step and so the architecture is a little bit different in our pages we have our index top view which is our home page and we have our videos index what's above those if not app dot view where can we put our nav bar you may have guessed from the title of this section it will be in the layouts in our case the default layout for now we'll be going over alternate layouts later in this section so let's take a step back and look at the architecture of next so on the outside we have our entire HTML file we're not gonna mess with that and then we have our layout which is what we'll be learning about in this section and then we have our top-level pages so our top-level pages are the ones that choose which layout they're going to use and in our app we have our home page and our videos page as our top-level pages and then within them there are page children which are everything in these folders so now that we know the basic architecture let's go ahead and start messing with our default layout so here our default layout is just a template and some styles and those Styles came with the app and the template is very simple it's a wrapper div and then the rest of the Knox tab we can put stuff around that but we will not want to ever delete that so here we can see its above then our Nook stop and then below and it's showing up on every page and if we delete this well it's just what's in the layout so we don't want to delete that let's go ahead and create our navbar so we'll have a div and we'll give it an ID of navbar and with that ID we can start styling it we will give it a height of 40 pixels a width of 100% and a background color of a dark grey and this will not be the most stylish navbar in future videos we will do much better styling than we have right now but this is just showing you the features of next alright so we've got that and we'll start putting links in there so we can do a next link and it will be - just the home page and we'll do another next link that is two videos and we'll see that okay they're not very visible but they do work let's make them a little bit more visible all right that is much better and we'll go ahead and give them a little bit of margin right so they're not all squished together all right that's good now we'll want all our stuff no longer shoved off to the left but you know centered a little bit better and so what we'll do for that we will around our next we'll go ahead and have a div with an ID of default body wrap our app in that and then in default body we will have a max width of 800 pixels and then we will have a margin of auto and so that will essentially Center the 800 pixel element good let's go ahead and do that for a navbar as well we'll wrap these links in a nother div and we'll give it the class of nav bar links and the reason we're doing this is because we want the navbar to stretch across the entire length of the screen we want that with to stay a hundred percent but we also want the links themselves to be centered and so we will copy this code and now they should be centered excellent then we'll see that we can go to any of these we can go to the Edit Page and we can go to the home page and the navbar is the same well essentially the same there's a slight AHA x-axis shift when going between home and videos but that's not a big deal it's probably a CSS problem and not a layout problem so we've got our default layout and it's working pretty well for us now what if let's say we wanted to have a route where it's slash theater where you can take up the entire screen and there's no nav bar you just watch the video like it's a theater and so we can't actually have it like this because it has to be a top level layout what we'd have to do is create something like this so theater is the top level so we can go ahead and do that will make our alternate layout and we will be sure to include our next app and then around that we'll be wrapping a div with the ID of theater body and then we'll give that some very simple styling we will be giving it a background color of black and all right so there's an issue we don't have sass here but my default component creator puts in the sass so all right much better now we need to create the theater route where we're going to be using this layout so we'll go to our pages directory and create a new theater dot view and here we will actually in here let's go ahead and make the text color white by default we'll put some text in there so we can tell we're in the correct route and then we will define our layout as theater so we'll go there and excellent it is clearly using via theater layout the styling is not exactly what we wanted we wanted this to go all the way down but that is not a knucks tissue or a layout issue that is a CSS issue and so I'll consider this a success we have successfully created our default layout which has our navbar and we've created our alternate layout and learned how to use that layout from a top-level page so far we've been hard coding our videos array into each route that needs it and it's only been in two different pages so far so it hasn't been a huge deal but as our app grows and our data gets more complex and as we want it to respond to changes made by users then this will no longer cut it we'll need to pull it from a server fortunately next has some great built-in tools for letting us do just that so a first is async data this is one of the added hooks in a next page and so what async data does is basically the return value of it gets put into data and so this would run just the same as data so this and this are the exact same as of now and you can also have a data hook while you have an async data hook and your data hook would be for your static data async data would be for your dynamic data you're pulling from the server now what sets async data apart from just a regular data call is that in async data it's not going to display the template until the promise that you returned from it resolves so here we're not returning a promise so it'll just display immediately but we could return you a new promise or if we're going to use Axios to call to our server then that automatically returns a promise so we could call Axios dot git slash videos this is just a sample code this doesn't actually work yet and so if Axio stock it returns a promise it'll wait until the server call is finished so let's try to make this code actually work so we'll have to get Axios from our context and we'll call dollar sign Axios and then instead of slash videos will be getting HTTP colon slash slash localhost 3000 slash API slash videos and then we will assign that to our response and we'll wait for that to finish using the async/await syntax so it'll wait here until this resolves then assign it to response and then let's go ahead and console.log our response and then stop it with the debugger so we'll need to open our console to make this work and we'll reload and oh it looks like our console log in debugger are not working huh why is that swell wait and now they're working so what was the difference between those two cases so notice we're on this page we reload we reload it's not working then we click to another page and we go back to the page and it's working so the difference was the second time we reached it via link whereas the first time we reached it via the URL so remember NOx does server-side rendering on the first page so that means when we go to slash videos it's being rendered on the server which means that the browser doesn't get it doesn't run our console dot log or our debugger and the server doesn't respond to debugger or console dot log it's just skips over them so this can be frustrating when you're trying debug but there is a reason for it and to get the benefits of server-side rendering NOx does have to do this sort of magic and it's better that you understand the magic so you can work around it when it gets in your way so in order to check out our response data we'll have to go to another page and then click on the videos link and now we are properly in our debugger and so our response you can see we can get data data and in data data there is an array and we'll be wanting the attributes on each of those items so be doing something like this all right that is actually exactly what we doing to get our videos so we will let our videos equal to this and then we'll return in our hash just the videos now let's see this working we'll go over to our videos and there we go we are pulling 8 different videos from the server now let's go ahead and put a Singh data in our individual video route so we will change this to a Singh data we will get the context and we'll let a response equal context dot Axio stock yet and we will type in our entire route and in a little bit we will make it so we don't have to type in this entire route every time we'll get context dot prams dot ID for our ID all right so that will be our response and then we'll get our video and that will be response data data attributes then we will return that video from our data hash and that means we can delete this videos array and we can delete this computed property and we can check and I've got to put async/await there so here we go this should be working now excellent it is so we've got async data working in both of the pages that need it let's go ahead now and do some stuff that will make it a little bit nicer and neater so first we can get Axios and our params directly instead of having them on context and we'll see that it's still working and we can do that here as well so that's just a little bit of niceness and then an even bigger deal is setting the base URL so we'll go ahead and cut this localhost 3,000 slash API and then we will go to our knucks config KSR go to Axios in there and we'll set our base URL to this and it will want single quotes alright and what that means is now we don't have to put this on any of our URLs so is all still working and these are now much neater and if we decide to change our base URL or we want to change it based on whether we're in dev or in production we'll want to do that then it's only one place that needs to change and that's the basics of how we use async data and Axios let's take a look at the title of our page so it says view screencast nuts and it's gonna say that for every single one of our pages so let's go ahead and make that a little bit more useful for our users and as a side effect this will help our SEO by helping the web crawlers understand what's in the pages better so to do this we will use the head attribute and so head the default is in Knox doc config yes and then it can be overridden on individual pages let's change it in Knox doc config yes first so it's currently getting it from the package name and let's change that so we're defining it directly view screencasts learn view j/s through cool tutorials now we'll go to our page and reload and we'll see that the title has changed so this is a good default and that'll be good for our home page and any pages that where we forget to add our own title but let's go ahead and update the title on some other pages so we will start with the videos index and we will have our head and our title here and our title will be a view screencasts - a video list and we'll go to that page and we'll see that it has been updated to view screencasts - video list whereas everything else is still the default now let's put this on our ID and so this is the parent page to edit and index so we'll see whether it is inherited all right so it looks like it is inherited good now let's try to make this more dynamic so we'll want the video's name and that means we'll have to get data from a sync data into our head so let's turn this head into a function and we'll be returning a hash with the title but the title will not be this static value it will let's just start with the title of the video so we'll get this dot video that's been returned from async data and use the name and we reload this and good we've got the name there we'll go ahead and add something afterwards excellent so currently we have the same title for the show and the Edit Page what if we wanted to change them up a little bit we could copy this and put let's say watch video name - view screencast in one and edit in the other but then we'd have to duplicate this and for this small amount that may be fine but I want to show you another technique and that is the title template so the title template you have what's going to be shown and then percentage s where you put the title from the child pages so here in index we will have our title in our head and here we'll put watch and let's go ahead and see that it's showing up there one thing to note about this technique though is that if a title is not defined then it will just use a default so we're no longer getting what we were before of this going in the title so that is something to keep in mind and so that I see it there are two ways around this one is to put a blank title here and then there we go it's showing up as our title template just blank and then what's in the title template the other option is to just make sure you don't forget anything I think this is a better more robust strategy but we still do want a title here so we will put this title as edit and now we'll say edit name a video now one thing to keep in mind when using the title template is it looks like there can only be one title template active at any one time so if we go here to our videos and define a title template as let's see videos - % s then if we go to our watch page it's not showing that because the title template comes from here but if we go to videos then it is showing up so it's displaying this and then before it it's displaying this so it looks like the title template that's used is the one that is the closest one above it in the page hierarchy there are a lot more things you can do with the head tag and meta properties in general if you're interested in that look at the documentation for view meta the head method is built on top of view meta and so with just a couple small syntax differences the functionality is the same with regular view I cannot imagine building a large site without view X with next and hooks like acing data I can imagine it happening it might still be better with you X but if you wanted to avoid it view X then you'll have an easier time of it and as a matter of fact with our app as it is right now we don't actually benefit from doing view X in our current situation but since a lot of you are probably interested in how to integrate it we'll go ahead and make the change right now to get started we'll create our index file in the store so index j s in the store folder and something to note is that it's not going to look like a view X file that's in a regular view app so instead of having a big ole hash that you return you export the state and mutations the actions and the getter separately and in next to point X you can still use the classic mode so it's a lot closer to what it would look like in a regular view app but that's going to be removed in next three and you do save quite a bit of boilerplate by just using the new modules mode so for our very simple store today we're going to be exporting a state and a mutations hash and so the state is just going to be this function for our very simple app today it'll just be videos that has an empty array now we'll go ahead and export our mutations and that's just going to be a hash and we'll have one mutation called set videos it will take in the state and an array of videos and for now what it'll do is it'll just set the videos on the state equal to the videos that come in now let's go ahead and use this in our videos index page so we'll still be getting the videos that way but instead of doing it in a sink data we're gonna be doing it in the fetch function so fetch is it's a hook like a sync data but instead of returning a data hash it just lets you do stuff so in this case we're going to be calling out to the store in order to make that commit that mutation so we'll call store doc commit set videos and then pass in our videos and there's no need for a return value because we'll be fetching our videos straight from the store so go store dot state dot videos to grab them and let's check and see if this all works we are here on our videos index page reloading and it does indeed work now let's go implement view X in our individual video pages and so here once again instead of using async data we'll use fetch and we'll pass in the store as one of the arguments as well and now it becomes a little bit less clear on how to do this so we could commit the individual video into our videos array and then filter those videos when we're grabbing our individual video that's one option and if we did that we'd have to make sure that it's not interfering with the video set here so it'd have to be a set instead of just an array our other option is to have something like current video which I mean part of me just really doesn't like that but it does seem more efficient than you know doing all the rigor mole around filtering out the videos and making sure you're not adding an extra of them I would say that if downloading the videos data was expensive and you could be sure that when you visit this page they'd already been downloaded such as for example if they are downloaded on the initial page load for the entire t'v piratey of the app then it could be worth it to go and just grab it from this array and then you wouldn't even have to make this API call here but as it is we're not sure whether the videos have been loaded so you might as well just go grab this and set it to current video so let's go ahead and use the current video object not because it's necessarily the best long-term choice but because we don't really know what the best long-term choice will be what the needs of our app are and so while we're demonstrating view X we might as well go ahead and do the simpler one all right so we've set the current video and here now we don't need to return this video we actually just need to commit this alright now we've set the current video and here we'll grab the store dot state dot current video and then we'll see when we click here uh-oh it is not actually working and we can see that it's because we're using this dot video in a head and so we could copy this and replace it here and then it will start working once we use it this dot there there we go so now it's working but this is a little bit long and unwieldy to use every time and so we can make a computed property for video and that will return basically this and now we can call this stop video name here and just video here and we'll see that it's still working we could also import the map state function from view X and that would let us shorten this a little bit so we'd call map State and then we'd call it like that so if you wouldn't use view X that's how to do it and if you're wanting to use modules then it's also really easy so we've created our index J s but if you want to create a module you just create a file in the store folder with the name of the module you want and then you do it just like the index jsut export your state your mutations your actions your getters and it will automatically be put into the modules and it will by default be namespaced you might also be thinking is this really worth it to use view X and that's a good question so here we've added five lines here and three lines here and a line here so we've added almost ten lines for doing something that was previously complex with just this and so I would say for an app this simple then no view X is not worth it and I don't know enough about using more complex patterns in next to tell whether acing data is going to take care of all your needs or whether you do need to use view X alright that was a lot of information thank you so much for sticking with it and I hope you learned as much as I did so now what we're gonna do is we're gonna do a quick review of everything we learned well the major parts of what we learned and then we're gonna go over what comes next so the first thing we did after learning why we would want to use next in the first place was we created our next app by using npx create next app we were able to create all these files which is all you need to get started then we took a quick detour changing the port that it's served on because it conflicted with our back-end server then we got into the meat of next which is the pages folder so our app at this point has two top-level pages the home page which is at pages slash index dot view which was already created when we created our next step and then the videos page and that videos page had two sub pages there was slash index so that would show it slash videos and then slash ID which that would show at / videos / and then the underscore means it's dynamic so it could be a 5 it could be a 10 it could be whatever number you wanted and you could even have dynamic words although an ID is usually a integer or a hexadecimal then our videos / dynamic ID page has two child pages index and edit all right so those are the pages we created and so pages are like view components but they have some extra properties first is that the folder structure will determine our route structure notice that in this commit there are no changes to any route file and in fact there's no route file at another difference between the pages and the regular view components is that instead of using router view to house all the child routes we use knucks child which it can just be a drop-in replacement for router view but it can also and maybe router view can do this but I hadn't seen it in the documentation it can take in props just like a regular component and so here we're passing down the video to both edit and index and you'll see that we have the props array there so that's we learn in that section and as a quick review of the actual code we wrote we had our data property and it's returning just an array of videos and then looping through them and that's in the videos index and then in the videos slash ID we had our videos array and then a computed video property which we passed down to our edit and index files next we put in our links and next link is pretty much a drop-in replacement for router link so here we're just linking to an individual video show page or videos /id slash index and here were linking to a videos edit page and here's another link to a video show page next we learned about layouts and so the default layout takes care of a lot of the stuff that would normally go in app dot view and since we don't have an app dot view it needs somewhere else to go and so that's what our default layout is for so we put in a nav bar and we also wrapped the main app in a div with ID of default body that allowed us to do some very basic styling that made our app look a little bit better so the default layout is just making up for stuff that you can do and Nux does in a different way the real power comes in alternate layouts so here we have a theater layout which has the entire background black and it can stretch as wide as you want no navbar and we assign that to the theater page with this one line very simple it is worth noting of course that the layout can only be assigned to top-level pages so you couldn't assign it directly to pages / videos / ID / index it has to be in a top-level page next we went over how to use async data and Axios to connect to a server so here in our nook stock config yes we have our base URL option and so we're signing where we're going to be going on the server so here it's localhost in your production app it's going to be different so then in our pages / videos / index where previously we had just been returning an array of hard-coded videos now instead of returning it in data we're returning it in async data which is like data and in fact everything we return there will be placed on the data hash but the template won't load until all the promises are resolved and so here we are using Axios which were bringing in through an argument and we're calling doc get to get our videos and then we're processing it and then we are returning just a hash with the videos key on it and then we'll see that on the ID page we are doing something similar except instead of calling the slash videos we are calling two / videos / the ID and we can get the params from the first argument of acing data which you could call it as context params or do it like this and of course remember to do a sync before this so you can use a wait and then process the response and just return the video key and notice that we can get rid of this computed as well all right so we learned how to use async data and Axios then we learned how to do our head tags and titles so we focused on the titles and in knucks duck and figs is we put in a nice default title so if a title is not defined on a specific route then it will use this one then we went and on our individual pages and I realize I'm using routes and pages interchangeably I hope that's not too confusing so on our video / index page we have our head object and then in a title key we are putting this string and so that's what's going to display on our tab as the title and it's also it's going to be used by search engines then in video / ID we do something a little bit more complex so first we are using the name of the specific video so underscore ID makes it dynamic and so we can get the dynamic video and second we are introducing the title template so this percentage s adds on the title and together those make the title template so when we go to this page it will be watch video name - view screencasts and when you go to edit it will be edit video name - view screencasts oh and notice that if you use dynamic properties in the head then you need to have it as a function whereas if you're just hard coding stuff you can have it as an object now we focused a lot on the title because that was really easy to see but there's a lot more you can do with this and if you're curious you can look up the view meta documentation because next implementation is just a thin layer over view meta finally we looked at of UX and it's really easy to implement we just go to store slash index j s and instead of doing a entire hash and creating a view store explicitly we return our state our mutations our actions and our getters when we're calling the store it's just the same as it would be in a regular view app and if you want to use modules then it's just like how you do it in store /index except you name the file the name that you want the module to be and so it could be store / or videos and then it would automatically go into a name spaced videos module finally when you're calling to your store you don't want to use the fetch hook that is new in next and what it does is like async data it doesn't allow the template to be displayed until all the promises have resolved however unlike async data it does not return something to the data hash and so you can go ahead and instead of returning your video you commit it to the store and that's the basics of Knox if you want to learn more I have two pieces of good news for you the first is that you should know enough now about Knox that you can understand the API documentation on the official site the second is that I'm going to continue this series however I'm going to be doing it as part of my longer building of UGS screencasting app from scratch series if you've been watching then that will be excellent news because that means we're gonna take everything we've built over 15 videos and eight hours and we're gonna be learning how to do all of that in Knox but without having to relearn the basics if this is your first time on the channel on the other hand then you have a choice to make here so if you are very new to view then I'd recommend going starting from the beginning and watching it through if you're an advanced view user and Knox is the only thing that's new to you then I just recommend waiting until part 17 which is going to be the next video and following along and there might be a couple points where you wake up what was that as we copied and pasted some code but mostly you'll be able to keep up if you're somewhere in between then maybe you start from the beginning but watch it at double or triple speed and slow down on the parts that you don't understand whatever you decide I'm happy to have you here and now we're going to go to the in screen where we're gonna have clicky links over here and you're gonna have like 20 seconds to click on one of them all right I'll see you soon you

Channel: Vue Screencasts

Views: 49,123

Rating: 4.968689 out of 5

Keywords: Javascript, vuejs, vue, javascript frameworks, web development, frontend javascript, nuxtjs, vuex, vue-meta, vue-router, server-side rendering, meta tags, axios

Id: NS0io3Z75GI

Length: 78min 38sec (4718 seconds)

Published: Mon Oct 14 2019

Reddit Comments

[u/admjwt]

I think I kind of bring this up anytime someone posts about Nuxt.

I do love the framework, and in a lot of regards it's really useful and increases development productivity quite a bit.

But debugging it can be a serious pain. It has a real tendency to just kind of eat exceptions and errors, and default to basically just saying "Somethings wrong", but doesn't actually give you any useful info as to what it is. I think that's pretty much 100% because it generates it's own version of the pages based on the code you put together in Vue.

If they ever improve the ability to debug it, and throw errors related to what you actually wrote, as opposed to some line it generates, or just saying "Missing stack frames", with no context as to where/why, then I really think it will gain a considerable amount of traction.

It's still an overall good framework, and I do recommend it, but be prepared for shit to just mysteriously not work.

[u/Neekzorz]

Nice, highly recommend Nuxt if you're making a large application with Vue. Does so much out the box.