Project Introduction & Recap
Hey developers, welcome to part two of our Nuxt.js app. We are creating an iTunes Search app and we're using Vuetify and Axios. We're going to use a little bit of Vuex. So if you remember correctly, here's our completed app. We can put any artist in here like Jack Johnson and then it'll display all the album art for all the Jack Johnson's albums. It'll give you the name of the album and if you click on it, it'll open the iTunes Store on that artist. So let's go back to where we were in the last video and you can see we added this iTunes search bar at the top and it doesn't really do anything right now.
Cleaning Up the Default Nuxt.js App
But let's go and clean this up a little bit. First, we don't need a logo. So if you look back at our layouts, we can see we have this toolbar here. This is the last thing we added and then it goes into Nuxt here. And if we go into our pages, and we'll see here on our pages, here is like the default app with everything in it. So we're gonna go ahead and just delete all these sections. We don't need anything here. Actually, what we'll do is we'll leave the top section. You see where the logo is? This is the logo component, but we don't need it right now. So we're going to delete this and delete this. We're gonna delete the import logo from components here.
And then one thing I also want to do is this section class container, I'm gonna go ahead and delete that. And we're gonna go back into the default view, and I just want to make that a part of here. So we're gonna add it here. And that way if you look at this section here, the CSS, there's actually some CSS with the section and it just adds a little bit more to it. It does a few changes that we want. Right now it's in the middle of the page, but we'll fix that soon in a minute. And so you can see here that there's a bunch of default HTML and CSS. We're just gonna leave that all here for now, we don't care about it at all. And so we now have the template here, we don't need this logo here. And you can see there's a bunch of CSS here and we're gonna go ahead and just delete this too, because this is just stuff that comes with it that we don't need. So we'll delete that. Oops, we'll have the opening closing brackets.
Understanding the Nuxt.js Directory Structure
Alright, so now our iTunes search is correct at the top. So let me give you guys just a quick update of all the different directories in Nuxt. So you can see here on the left-hand side, we have... you can see here on the left-hand side we have these directories. And you could see here on the official documentation, it tells you a little about it. So the assets folder... it actually may have READMEs here. So this directory contains your uncompiled assets, Less, Sass, or JavaScript. We can see we have this style we had used with Vuetify in here.
components this is where all components are. Here's the logo one that it came with. So I'm gonna go ahead and delete that, we're not gonna use logo. layouts...The layout doctor contains your application layouts, and by default, kind of like we did last week, this is the application, this is the layout that'll happen, that will be attached to every single page in your application. You could actually change the layout that you want inside your pages, that's an option. But for now, we're gonna leave it at the default one and that's one it's gonna be used everywhere.
middleware, this is where this directory contains your application middleware. Middleware lets you define custom functions that can be run before rendering. So this is where we can put our server-side code. And we could set up multiple different middlewares and have every single different page have different middlewares in it. And so you might want to do something like that if you're doing some kind of authentication. We're gonna come back to this in a little bit and we're gonna see how we can access the Vuex store. That's one thing you actually have access to. If you look at this middleware integration, not to get too much into the weeds here, but you can export a default function and inside that you pass in a context. And this context has all sorts of stuff. It's hard to see here, but you have is client, you have params, you have query, you have the request object, the response object, redirect, error, and it also has the Vuex store. So you could actually access the store, which is cool. And this is all on the server side so you could put all your private keys, everything in here, you don't have to worry.
And then we have the pages. So this is kind of neat and this is what I want to do now.
Creating a Dynamic Route with Pages
The pages directory contains your application views and routes. The framework reads all the .vue files in this directory and creates the application router. So it's kind of weird, but you can get used to it. So let's go ahead and create a new folder and we're gonna call it results. So this will basically, we're creating a new route called results. And then inside results, try to create a new file called _id.vue. And this underscore has a special meaning to Nuxt and what that means when you see this underscore here, it means that the route is actually going to be like a parameter in it, and you'll see that in a second.
And we'll also look at our index, we don't have anything in it now. You can see here here is our app, right so far we don't have anything in it. And then we have our plugins that we talked about earlier that we created a Vuetify plugin. And then we have a static that's where we put our static files that we can access. And then we have our store. And now the store can be done a couple different ways, and we'll go over that in a little bit. So let's see if we can make this app, our app here, look kind of like what we're trying to create.
So you can see here we have the "Search iTunes" at the top, and then we just have an input. So that should be easy enough. Let's see if we can do that.
So inside our template, you always have to have some kind of tag inside of it at the beginning, an opening and closing tag, otherwise, you'll get an error. So we're going to just create a div. We're going to create h1 Search iTunes. We'll have a break here. And then I'm going to create a form. Now we want to inside this form, we want to create our input. And we'll put a placeholder in here. This is just basic HTML, Enter artist name. We're going to have a v-model attached to it called search and that will be good for now. And I guess one more thing I'll add is an autofocus so that way it has some kind of focus on it. You can see that kind of scrolled off the screen a little bit, but you should be able to see some of it.
And since we're using that, let's go ahead and create data. Remember your data function always has to return something, so we'll return, we'll go ahead and return our search because otherwise, we'll get an error that it doesn't exist. So we're going to save it. Great, we have "Search iTunes" and "artist name". Now we're gonna do some really basic CSS here because obviously, we want it in the middle, we don't want it kind of that ugly. So we're going to do a style tag here. First, we're just going to have everything in the middle, so we're going to do a text-align: center. And then we're going to do an h1 here and we're just going to put a little bit of padding on the side. I'll save it. Great. So now we have artist "Enter iTunes here," "Enter artist name." Obviously, if you hit enter it doesn't do anything, just refreshes the page. You can see here in the console, see nothing's happening.
So we can do a few things here. We what we want to do is we have this new route we called it id. And just for the heck of it, let's put something in here so we can see it. So we have a template, we'll put a div tag here, and we'll just do a "Hello world from results route." And if we open this up and just go to /results, you see "Hello from results route." You can see here that definitely this route's working, we're doing /results at the top, so that's good to know. Now I'm gonna make it a little bit bigger. No let's leave it at this size. So go back, here's the main one. So let's see if we can just make it so when we hit enter that it goes automatically to that route that we just created. So that should be easy enough.
So we have this input. You know, just so we can see it better I'm gonna put it right here. And what we need to do is we need to have some action attached to this. So we can actually put it right on the form. So what we want to do on the submit, we can do v-on or there's actually a shortcut which is this @ sign. And what this is saying is when we have a submit happening, prevent the default, which is to reload the, to actually send the action or reload the page there. And we're going to have it trigger an action or method called submit. So now we need to go down and we're going to add some methods. This is just like normal Vue.js, and we're going to call it submit. I can even have an event attached to it if we want to do something with that. And we want it to do something. So let's, just for right now, let's do an alert that says "hello world". So let's see here. We're going to type in hello. Okay, so now we see, we definitely see the pop-up that says "hello world", so we know it's working there.
Navigating with Dynamic Route Parameters
But instead, we want to change routes. Now there is a router so you have access to the router by doing this.$router. And then you can do a push. And what this does is it pushes something out of the route and it changes the route. So the easiest thing to do is just type in results here. And so we'll compile again. So let's do this. Let's do hello world. Alright, so it went over to the results route but we had a problem. So it failed to mount component: template or render function not defined. So it can't find it because we have the results route is has this ID involved with it. So it's looking for us to pass something to it and it's confused. So we could do something like this /results/123. And we'll go back to here, we refresh, we'll do hello world. All right, now it actually went to it because we had to add this parameter in it and it came up fine. "Hello from the results route." So that works.
So what we can do is instead of sending 1, 2, 3, we can actually send the results of what's inside our search box. So if we go back to the beginning here, we can do string interpolation. This is just basic JavaScript. And we're gonna do this.search. So what this is saying is when they, when you press the button, it's going to do this submit action and whatever's in the box is going to be submitted over. So we'll save it. Now if we do hello world, it still goes to it. And it actually sent over the search. So we can actually see the search if we go back to our ID view here, we do have access to it. So we can see what's coming in through the params. So if we do $route.params.id, that's what we called it, let me save it. So now if we do, let's say "hello Eric", you can see, "Hello from result route, hello Eric." So it actually passed in the params in here, so that's exactly what we wanted.
Summary and Next Steps
So the video's kind of running long, but this is the second thing to know. So what we've done so far is we've explained all the different directories, we added our form element, we were able to now submit that element and make it to our new route that we created called results, and it has a parameter. We can now display that ID in that route.
So thanks for watching. If you guys like these videos, please click that like button, click that subscribe button. Let me know what you think. I also have some books for my Vue.js in Action book. I do have some giveaways I'm giving away. So I might be giving away one soon, so keep listening, keep watching the series. I will be giving away some books during this series. So stay tuned. Thanks.
