Nuxt.js Basics - Video Game Site & API

what's up guys Andre here and today I'd like to take a look at the basics of Knox Jas we'll be learning by making an app so we'll build out a video game site using the IG db-api while learning about the basic features of next in the process so what exactly is next Knox is a framework on top of UJS so why would we want another framework on top of you well the main reason is for server-side rendering if you're using just a normal view app everything is rendered in the client the disadvantage is that your SEO will take a hit with next your application is rendered on the server using node and Google can crawl your site like it does traditionally Knox can also serve as a static site generator but we won't be looking at that feature in this video furthermore Knox adds more conveniences and structure to your view app which in my opinion makes larger applications more organized we'll take a look at some of the features as we go along so before you start you should definitely be familiar with the basics of view and its surrounding ecosystem like view X and the view router so here is the demo app that we'll be building it's a video game site like I said and it's very basic it just pulls from the API and these are just the popular games out now and if you click on them then it will go to a details page and it has different information about this particular video game yeah well build this from scratch using Knox and this i g DB api and also tailwind ok so let's jump into the docs and let's get started so to install it you can just use this command which uses npx so let's just go ahead and do that and px create Knox app and it's called it next example and you're presented with a bunch of options here so let's just go through this you can choose a custom server framework but we're just gonna use none and we're gonna use tailwind for the UI framework because tailwind is awesome and for a rendering mode if you want server-side rendering then you should choose Universal if you just want a standard single page app then choose single page app we're gonna use Universal yes we want Axios cuz we will be working with the video game api yes lint I'm just gonna say no for years lint and prettier and it's use NPM okay so that's done so let's just CD into it next example and then we can do NPM run dev okay so that's done let's go ahead and jump into that and see what we get okay so here's the default and next page and it's opened that up in our code editor and open up in vs code and let's take a look at the folder structure we get for here it's quite different from if you're used to using a view CLI up so let's go through it so this page you see here is the index page and there's an error here about yes lint failing that's fine let me just close this because we're not using it I tried using it when I was building this up and I found that yes Linden prettier just got in my way and it was formatting things to the point where I didn't I didn't like it I think I need to configure it more to get it to a point where I'd like it but I'm just gonna turn it off here okay so here is the index page let's check if talen works so let's just see if we can add like a background here so let's see if we can do BG blue see if that works and it does cool okay now let's go through the folder structure okay before we do that I just want to show you that this app is server rendered so if you right click and view page source this is what comes back from the server and if you were to do this in a normal view CLI app then you won't see this text because it's rendered on the client but since this is server rendered you'll be able to see that text so if we do view page source it's gonna take a while because it's loading tailwind which is a huge file but if we go down here you'll be able to see it so my stunning there it is again if you were to do this and if you see Ally up you would not see this coming back from the server because it is rendered in the client cool now if you inspect this is what you see when everything is rendered including what JavaScript renders for you so that's the difference between view source and just inspecting the elements okay now let's take a look at the leaf folder structure get it start from the top assets are where your assets goes I believe the Tailwind CSS files in here so we can add any components in here that we like components is similar to a view CLI app and it's where we should put our components you can see there's one for the logo here which is just a bunch of divs if you inspect it you see that this was just a bunch of divs cool layouts layouts allow you to extend different views you need a default one and here's the default one here but you can easily create other ones and extend them as well so here is where we'll be creating our header if you actually I have this design here so we'll have a header in here and this is I mean there's no footer but if there were footer this is where you'll put it so we'll be making use of this default layout here middleware so let's take a look to read me so middleware lets you define custom functions that need to be ran before rendering a page or layouts so we probably won't be using middleware for this app but if you're familiar with middleware in a server-side language say node or laravel then it's pretty similar and the next folder is pages and these are where your pages or your routes live they are still view single file components and will transform any file inside this folder to a route for your application so let me show you what I mean so index is the main page when we open our app so to make a new route all we have to do is add another page in here say about set a template in here about actually it's a div about page here and that will automatically register a route for you if you go here go to slash boat and that should show up and there it is that's how easy it is to create routes not that it was difficult to do in a normal view app but this just makes it as easy as possible you can also use folders here so if I were to create a folder called about and within that let's put this one in there move it and then it's rename it to index this will work the same way and we'll take this approach because we need to use this for route parameters later on and I think it's cleaner that way okay so I had to restart my nook server for that about page to start working again okay let's set up the skeleton for our app we won't focus styling in this video we'll just get everything in place and then style it in the next video so let's start by adding a navigation component to the default layout so if we go here the layouts let's just add a navigation in here so let's make a new component first actually so let's call it a navigation dot view let's just do template let's make a div and it just make some anchor tags in here so I should say home home and about and let's import this in our application in our default layout here so I'm going to make a script tag and I'm gonna import navigation from at components navigation and then it's add that here in a components key porn let's just say navigation okay and it's yielded up here okay see if this renders so there we go home has the menu and so there's a belt so how do we get these anchor links to go to that specific route in normal view you would use router link but for next you would use Knox to link so next Knox link so you say to and then you tell it where you want to go so the first one is just home and then we can close it and then next one is about slash about and about okay see if this works so now we're in the about page and there's the home page cool and you can see the route changing there awesome okay so now for the main page I want to fetch all the popular video games from the video game API so let's go into the documentation so this is the API I found and it's actually pretty extensive and has a lot of options so let's look at a basic example it's free to use for a certain amount of requests and here's an example using Axios but I'm gonna use my rest client which is insomnia and we'll just see how this works so let's just grab a basic example so this is the endpoint here and yeah just grab this and go into our make this bigger for you guys just make it fullscreen okay let's make a new request it's gonna be a get request let's call it I GD P get games to create that and then that is the route or the URL but we need to authenticate and we have to send in our API key here we also have to send an application JSON so let's go into that accept application JSON and we have to set the user - key let's do that and my API key is here and put that in there and with any luck this should work and there we go we get a list of games and all their associated information so let's go back to the examples page and let's grab the one there's one here for popular right here so let's do this instead and as you can see it's very extensive where you can specify the fields and you can sort you can do a whole bunch of other things which we'll explore as we go along but let's just change this to popular and these are the popular games that we're getting and I think by default it shows ten you can change that but I'm good with ten we'll just show ten on the index page okay so if you look at my design here what do we have on the index page we just have three pieces of information we need for each game we need obviously the title we need the genre and we need the cover so what we have here in the response we have the title that's good and we don't need this so we need the cover and we need Shon rrah so let's go in to the dogs check out the end points and game is the one we're interested in and here's all the fields you can specify so let's start with the genre there's a field here called genre so we can add that to our request so if we just add a genre here we can get that feeling back at a comma I think it's plural each onerous okay so now we're getting this genre but it's only the ID and we want the actual name of the genre so we kind of want to do a join on this genres table so how do we do that so if we go back to the document tation figured a reference and if you go to expander this is what we need to do says we can combine multiple requests so to do that we just have to give it the field name were looking for so in our case we want Shon rose dot name and then we have to add on that this expand option let's go ahead and do that put it at the end here you can split a genre in here and let's see if that works ok so now we have this name and we can use that to display the information we need now be careful with if you're using this expanders because I believe for the free tier you only have 100 and you can I actually went over that so just be careful when you're using this and what's the other field we need we need the let's go back to endpoints here we need the cover I believe it's called cover it's go back the game and so for cover here yeah so we need the cover so let's go ahead and grab the cover let's put it here cover okay so we get a URL back along with some other information so let's see if this gives us what we want let's go into here and just paste that in so HTTP okay so that's the cover but it's kind of small so how do we get a larger image here again go back into here reference images and here are the different sizes and we just have to change the URL to get these size we want so I want this size cover big so all I have to do is change the URL to T underscore cover on the score big and we get a bigger image so that's what we'll do okay so now that we have our API call set up let's make a request from inside our app with Axios so in our index this is where we wanted to make an AJAX request traditionally you would do something like add a created hook and then make an excuse call in here and then we'll have some data which returns an object and say we have some information about games and that's an empty array and then as the Axios call resolves we'll just set games - like response data or something and you can totally do that still but I'd like to illustrate how to use async data from within next so if we go into the docs and go to async data so async data is similar to data here but all of this happens on the server so if you want any data to be rendered on the server and then you would use async data so let's go ahead and do that so I'm just gonna grab this sorry just this and I'm gonna paste it in here I'm gonna leave the normal data in here so let me just put async data underneath actually it's put on top and after this results then it will be joined with the normal data so let's go ahead and grab our endpoint from our rest client let's copy this and it's paste it in here and this is what happens when it's successful so this is the data that's gonna be merged with our data down here once it resolves so I want a property called games and that's just gonna be whatever is returned from this which should be an array and when there's an error I just want to console.log it that's fine and I believe I need to import Axios here so let me just import Axios from Axios and I also need to make sure that I'm sending over the user key here so there are a few ways to do this but I'm gonna do it in the layout because we're gonna be doing this for all of our Axios calls on the layout I'm just gonna import Axios here as well and set the defaults here so I'm just gonna paste it in and it's just setting the user key header for every Axios request we make so there's my key and yeah it's gonna attach that so let me save that let me save this and let's see what we get so here okay let's remove that creator took I don't need that okay okay is he over getting here are we getting that games property and we are cool and there's the games that we're interested in okay so now let's render out the games in this index page so let's go back up to here and get rid of all of this stuff here so the section don't need that just add a container here and then let's make a game container and here is where I want to render the game so I'm gonna loop over them using v4 so v4 game in games and the key is gonna be game that ID so if you go into here each game has an ID which is unique so he is therefore the key and we want the image let's make an image tag here the source is gonna be game dot cover dot URL and we have to bind that and all to say cover and then we want the game name and we also want a game genre let's see what so the genre is an array I'll just go with the first one so it's genres first thought name so genres first dot name and let's see if this renders out the games and there we go so there's all the games cool we can add some margin-bottom on this it's at a class on this again real style this in the next video I just gonna dump everything onto the page okay so yeah like I said for the image this is too small so how are you gonna get a larger image like I showed here we just had to replace this part I think by default it's t underscores thumbnail or T underscore thumb and then we want to replace that with T and a score cover big so we can use some JavaScript in here so right here I'll just do it replace T underscore thumb with T underscore cover big and see if I did that right back here and then go to a larger image so this actually has to be a link because this is supposed to link to the details page so let's go ahead and change this to a link actually not a link should be ain't Knox to link and we have to add to and where do we want it to go so we wanted to go to a slash games actually you should be like this - games slash and we want the ideally we'd want a slug but in the API you can search for slug you have to use the ID so we'll just use the ID game that ID and that should link to that route which will make it a second so if you look to the bottom left you'll see that the ID is a pending cool into the margin bottom I think we have to make it display:block which I think it's just block yeah cool okay go alright so we have this rendering out in our page so now we want that game's route so obviously it can be found to be able to find it so let's go ahead and make a new folder for games games and we don't need an index because there's no route to go specifically to just slash games but we need a route that a dynamic route around parameter sorry that grab the ID here so we can make use of it in the page component so to do that we have to make a new single file component and prepend it put the underscore so in our case it's underscore ID dot review and it's a template in here and game detail page so now this should work let's go back and do a hard refresh so there you go and I'll show you how to grab this ID cuz we're gonna be using this to make another Ajax call to the API okay so let's grab the I'm gonna grab the ID here and we'll go back into our rest clients so we can see how to craft our API endpoint so back into here let's duplicate this one and let's call this I GD P get game singular flips up okay so here we can just add the ID and then we can specify the fields so let's just not specify the fields for now here we go okay so we get some information here we get the name the summary and a bunch of other information so let's go into our design and see what information we need and let's just jump dump everything on the page and then like I said it will style it in the next video so we need the name the publisher the cover the platform's the release date so let's go through this one by one so go back into our rest client and then I'm gonna put that fields back and let's just specify exactly what we want so I'm gonna erase all of this and we're gonna need that expand in a second let's just cut that out okay so right now it's just a name cool what's the next thing we need the publisher so let's grab I think it's called publishers and again it comes back as an ID so we need to do put the first name and then do the expanding and publishers and there's a name cool next we need the cover so we did that already before so just cover and we can do that replace trick cool and we need the summary there's a summary cool we need the platform's so that's another expander so then if we just two platforms here it's give us an array of platforms but again they are IDs and they want the actual name so we'll do platforms dot name and we'll expand the platforms as well there you go there's a whole bunch of platforms and there's even a summary of the platform which we don't need but I'll just leave it what else we need he released it I believe it's called first release date and it comes back as a UNIX timestamp but we can easily convert this into a human readable date we need a new website and the field is called websites it has a whole bunch of them as you can see it's an array and it has different websites like the official website the Twitter page but the official website is the one with category 1 so we'll filter that down when we're rendering it on the page what else do we want we want the ratings so there's a field called total rating and yeah we'll just display this as well and we want the screenshots which is similar to the cover what's gonna come back as an array because it's more than one some screenshots and there you go cool well that is all the information we need so let's go ahead and make that Ajax call from within here so let me just make a script here and let me import Axios and we just paste this in here which is the end point let's copy this out and let's go back to our index page and just grab this async data and it's based on in okay so this is the end point now and paste that in and instead of games we just want one game it's only information for one game and yeah we have to get this ID from the route parameter so this so let's go ahead and just replace this with this variable and it's just gonna be params dot ID and that should do it let's see if we're getting back some data so I'm just open up dev tools here and let me refresh the page all right it's open view drill down and find it okay so we do get it and yeah this is the right game but notice how it's coming in as an array we just want the object so we can just do this we can just set it to the first one here the reason it's an array is because you can actually have multiple IDs in here like another idea and it will have an array of two games or however many you specify okay so let's just dump all this information on the page so back to our code and it's just dump everything in here start with the game name see if that works okay destiny to look cool let's put in the center actually container annex Auto let's dump out he publisher so game publishers 0 and there it is but that's an object so let's go dot name cool now let's grab it cover so I'm gonna do the same thing I did here let me grab this and space that in and then that's gonna be yet that's right it should be right teeth um okay see if that works ok let's put this summary in a P tag game DUP summary not you know what's doing that to refresh and it goes away and I'm just gonna do the rest of the fields it's pretty much the same just if you're not sure just look into the data you're getting back and this is everything you need so yeah I'll fast forward to when it's done ok so there's all the information we need and again I said it's like four times ready but we'll stylet it like this in the next video ok so I want to show you a few more things within next the first one is so this is a config file here and there's a progress bar that shows and if you change the color of this right now it's white so that's why we didn't see it change to a nice green color so for FC throw a 2 D okay and now I think you might have to restart the next server let's see yeah there's no progress bar yeah so let me restart in duck server okay so see if this works now very fresh okay so you see that green bar on top and if you go here you'll see a progress bar yeah we're getting why is this okay the reason gained this error is because I'm getting course errors which makes sense because the free tier of this API doesn't allow course and I think it's allowing course for some requests but it's not allowing it for other requests so here's a way to get around this course issue if this were a real app I'd obviously just set it to allow course and you can do that from within the API but for testing purposes we can set up a proxy and you can use this course anywhere proxy and just prepend it to the URL you're looking at for the API so let me show you what I mean let me just append this to here then that should serve as a proxy and we no longer get that course issue I think we have to add another header yeah we do so we have to add X requested width so I'm going to add it here requested with and I'm gonna set that to XML HTTP request and now that should work okay so let's do this in our code so I'm gonna go back to our code I'm gonna add this header in our code and that should be in default right here it's gonna add an additional header X requested width and then for our two Ajax calls let's just make a proxy URL so for this case I'm gonna do it here and it's just line that up and then we can just prepend it here so we'll just do this proxy URL and it's the same thing for the other requests so right here let's do that and let's grab this and do the same thing and now this should get rid of those course errors that we're getting so back to here we go back to our app and this should go away so let's go back to the main page cool no more cores errors let's click on this that oh there it is cool so yeah my CSS is acting weird but it's their home you see the progress bar which was what I was trying to illustrate before I saw these cores issues and yeah cool okay what else do I want to show you okay let's look at the title of the page so you might want to change the title depending on what route you're on you can send you can set a global one in the config so in the next config right here you can just set it right here right now it's set to package name let's set that to videogames we have to restart the app or the Knox server yeah I probably do let's restart it okay let's test it out again okay so there's a title and if you want to set the title for a specific route you can add a custom head method in that specific page so for this case right here what's the side another method called head and its return object and title goes here so we want this stop game name and it's just a pend videogames see this works so there you go you see that change there cool okay one more thing page transitions so let's look for that so this works similarly to the transition component in view but let's do a very basic page transition where it just fades in and out as you go to a different route and there's more examples here in the examples page I think there is a code sandbox for route transitions so I'll just take a look at that there's a video here too so here's an example of different types of page transitions so there's one there's one so yeah just take a look at this example there's code here we'll just do a very basic one so for this you need to specify the transitions within a CSS file so I'm just gonna grab this and the default transition name is page so you can have different transitions for different animations you want but we'll just stick with this one so let's use our we really have a tailwind CSS I'll just put in here so I'll put it right here okay and then we just have to include that CSS in our Knox config and I think it's really added because it's adding tailwind in our Knox gonna fake and it is right there so I think that's it see if this works just hard refresh so there's the e transition cool okay so I think I know why it's this playing this way it's clashing with the default container Styles here which is provided by the Knox provide by Knox when you install it so I'm gonna remove this actually we can remove all of this because raising tailwind anyways and again we're gonna style it in the next video so let's just see if this always renders correctly now so home it does about starting that about super seducer okay so now it renders correctly cool so there you have it guys we've taken a look at the basics of Knox Jas and built out this video game app that pulls from the IG DB video game API as you can see next not only add server-side rendering but a bunch of conveniences that make development with view even easier if I were to build a medium to large-sized view app I would definitely reach for Knox J s so stay tuned for the next one as I will use tailmon CSS to style it as I have in my design here please like comment and subscribe if you have already done so thanks for watching guys see you in the next one kay thanks bye [Music]

Channel: Andre Madarang

Views: 26,575

Keywords: nuxt, nuxt.js, vue nuxt, nuxt vue, vue.js nuxt, nuxt.js vue, nuxt vue.js, nuxt basics, nuxt tutorial, video game api, igdb api, igdb api tutorial, igdb api example, nuxt router, andre madarang, drehimself, nuxt rest, igdb api rest, nuxt transitions, vue.js api, nuxt api, nuxt.js api, vue video game api, nuxt axios, nuxt asyncdata

Id: LAfzHhQVvRk

Length: 45min 27sec (2727 seconds)

Published: Thu Oct 04 2018