Application Demo & Introduction
Hey developers, today we're going to look at Nuxt.js. Nuxt.js is a server-side rendered app. So in this tutorial, we're going to create this iTunes search app. So what the goal of this here you can see here the demo running, you're going to be able to put in any artist's name. So let's go ahead and put in like Taylor Swift, and this is going to do a request to the iTunes API and it's going to return every single album that has Taylor Swift in the name. It's going to pull the thumbnail, it's going to pull the name of the album, and of course the artist name. So you can see here you see Reputation is a brand new album, 1989, Red, Fearless and then some of our lesser-known tracks. Then you can be able to click this button and refresh it and go back to the search iTunes page.
Let's put in Eminem, he just had a new album that came out. You can see Revival is the first one in here. These are also links to each one of the albums, so if I click on it, it opens up in a new tab and it opens up the iTunes Store. So it's a fairly simple app, but the devil is in the details of course. So this app is using server-side rendering where actually instead of using the client-side to do the HTTP request to the iTunes API, we're actually doing it on the server side.
Tutorial Overview & Core Technologies
So the purpose of this tutorial is to go over how to create this app. We're going to go over a lot of different parts of Nuxt. We're going to look at middleware, we're going to look at how to interact with the server-side, we're gonna use a couple of different plugins.
So we're going to use Vuetify to do this nice taskbar/toolbar at the top to do these cards; this is all going to be in Vuetify. We're going to use Axios, which is an HTTP client to do our HTTP requests. So we're going to look at a lot of different things and also we're going to look at the end at Vuex. So we're going to see how we can access the Vuex store from the server side and also how we can access Vuex on the client side. So there's a lot going on here.
So to begin, we're going to start something very simple. We're gonna look at, this video will be on how to set this up, and then in the next videos we're going to kind of slowly go through all these different parts. But I want to make sure that you guys understand this first. And this tutorial is for anyone that you don't really have to have any Nuxt knowledge at all. So I'm going to try to walk through with you guys how to get this all set up and give you some resources of where to go. And you really don't need to know a ton of Vue.js either. So if you aren't familiar with Vue.js, just stick by to the end of the video. I think you guys will learn a lot. I'll go over the concepts of Vue.js and how it relates to Nuxt.
Nuxt.js Installation with Vue CLI
So without further ado, let's start with the installation. So if you look here, and I'm gonna bring up the Nuxt website, if you go to nuxtjs.org, you can see here in the right-hand side the installation. And there's a couple ways to install Nuxt, and like I said, it's a server-side rendered app and it comes with... You can actually use it and install it as an NPM module. You can use it to create generate static sites, but you can also create server-side rendered sites as well. So we're going to look at the SSR part. Now, the most common way of doing it, and what will work best for this tutorial, is we're going to use the starter pack. So we can either download the zip or you can install it.
So without saying, you do need to have Node installed to use Nuxt. So make sure you have node installed and once you install a node you'll have NPM. If you don't know how to install Node, I would go to nodejs.org or use something called NVM, you might want to Google that. We won't go into that here, we'll just assume that you have Node installed on your computer. Once you have Node installed you can do npm install -g vue-cli. I have down here, I already have a server running, but it would be basically npm install -g vue-cli. I already have it installed, and then once you have it installed, you can start with the starter pack. Now I want to get into it, but you don't have to use the starter pack. There are ways to just install and install Nuxt. You can see here you can just use the package.json file and do npm install --save nuxt. I know you can run that and there's some tutorials out there with using Feathers JS, but really this is a really nice way to start it because it has all the directories, has everything you need to get started.
So once you install vue-cli, you can use this option. I'm going to write it here, which is vue init nuxt-community/starter-template and then you put in the project name. So in my case I already made it, but it was my-itunes-search. And by the way, I just created this right before we started here, so this is a fresh install. I haven't made any changes to it. You hit enter here and it would go ahead... you can't see the end of it because the screen's not big enough, but basically it says search there and it would go ahead and install everything.
Installing Axios & Vuetify Dependencies
But instead of doing that, what we're going to do is we want to go ahead and add in a couple of dependencies to this application. And I mentioned it earlier. So the two we want is Axios and Vuetify. So let's do Axios first. So that's pretty easy to do: npm install --save-dev. Of course, you can do this with Yarn too if you have it. And then we'll name it Axios.
So if I enter there, it'll install Axios as a development dependency. And then we also will want to install Vuetify. So if you can look here, if you go to the Vuetify website, if you don't know Vuetify, it's a Material Design spec kind of framework for design. It has a lot of cool components and features. You can do a lot of cool design with it, you can make those nice cards we saw earlier. So if you go to the Vuetify Quick Start Guide, it tells you a little bit of how to do this. So we'll just go quickly through it. You can npm install vuetify or yarn add style of Vuetify, but we'll just do npm install --save-dev vuetify, and that will install it and it should just take one second.
Basic Nuxt Configuration
And then after it's installed, then we need to configure it. So to add the dependencies, since we actually added Axios, we can import that into any of our view components, but we're not going to. There's probably a better way to do it so it doesn't get duplicated everywhere. We can go to the nuxt.config.js file, and this is the file that you can do all your configurations. You actually can put in the title of your app that will show up on every page. So you can say My iTunes Search, iTunes Search Program. You can actually override this per page, but for now, you can see this will show up on every page. This is your viewport, your metas, links.
Here's something at the bottom, it's this extend. One thing I like to do, especially when I'm just testing out view is I like to take this whole block here and I just try to get rid of it because I really don't like it. So what this does is it does this linting on every single file when we save it, and I don't like that because I don't like to adhere to the linting rules that are coming in the starter pack. So if you just comment this out, you no longer have to worry about that, and we'll save it.
Configuring Plugins & Vendor Bundles
So what we need to do is, to add in what we need here, we'll go ahead and add in a plugin. So above loading here, we'll add something called plugins. So there's two ways to, there's quite a few ways to add dependencies to Nuxt. One of them is to add it in as plugins. If you go to the documentation on their site, you could see there's a whole section on plugins and how to add them in. By the way, here's --save axios that we just did, and it tells you how to use Axios.
And then if you use plugins, it tells you that inside the Nuxt config file you have to put in the location of the plugin. Add Vuetify to the plugins because that's what we want to do here. So we're going to create a plugins for Vuetify. We're going to create a file for this plugins which will help us out. And then we're also under the vendor, under build, we're going to create something called vendor, and we're going to add Axios here and we're going to add in Vuetify. And so what this build is gonna say is that when we build it, make sure this Axios library is included and then it doesn't get duplicated everywhere, and same thing with Vuetify.
And then for plugins, we'll use Vuetify as a plugin here. And we're going to do one more thing. Make sure I have everything okay. One thing we also want to do is we're going to add in some fonts, so all our fonts will show up for our Vuetify. So if you look right here, we're gonna add in a stylesheet, fonts Google API material icons. This is exactly what we need. We're gonna save it.
Implementing the Vuetify Plugin
And now we're going to go in and add our plugin. So we're gonna go to plugins, we're going to new file, we're gonna call it vuetify.js. And this is really all inside the instructions on the Vuetify website, so I'm not doing anything special here. So we're going to import Vuetify here.
And let's go back to the config file. So under plugins we're going to add CSS and we're going to add in assets/app.style. And then in here, we're going to make sure we install a couple more dependencies. We're going to install the style-loader, we're going to install stylus and stylus-loader. And this is all because of what we had to add in for that CSS. Make sure I have another L here. Okay, so it looks like we got all our dependencies installed.
And now we just need to see if everything works correctly. So actually one more thing we need to do here, we mentioned this app.style. We're going to make a new file called app.style and I'm going to copy and paste all this into it from another screen here. And what this is telling us is we're going to require the Vuetify colors. We can set the primary colors for all our different boxes, and then we're also going to import the styling. So we need all this so all our styling works correctly. So now we're going to npm run dev and that should start the server.
Okay, now it's run. You can see here we got the Nuxt.js project open here. And now let's see if our Vuetify is working. So we're going to... so there is this layouts folder, and this is kind of like a higher level component. This is going to be something that every every page uses. So we can add things into this default here. So what we're going to do is I'm going to add something called a toolbar, and this is going to be a component I'm going to create that will have everything we need for the toolbar that will show up at the top of every page.
But to add a toolbar inside our default here, this is just like a normal component, we'll actually have to import it in. So we'll go script here. We're going to import, and we're going to create this file in a second. We're going to import Toolbar from ~/components/Toolbar.vue. And then we're going to export, and we're going to actually make sure it's not inside the style tag. export default, and this is just the normal way we do, if you're familiar with Vue, this is the normal way we create view components. We're going to do components and then we're going to have to tell it about it: Toolbar. We're going to save that. Of course, there's no toolbar yet, so we get an error. So we're going to go into our components, we're going to create a new file called Toolbar.vue.
And then inside Toolbar.vue we're going to, I'm just going to copy and paste some code I've already created, and then I'll explain it to you. Okay, so we're using... we're going to have to... So we're using, every time you create a component you have to have this opening and closing template, if you have a template in it. And then we're using something called v-toolbar. This is part of Vuetify. We're going to put the dark color blue, that's the color of the toolbar. We're gonna create some side icons, so we call it iTunes Search, create a refresh icon. And then we're going to do some really quick scoped styles. So if you put a style at the bottom, this only affects this component, and is scoped for this component. And we're going to make the title at the top, we're going to remove the decoration from it. And we're going to create, keep the visited color as white if someone clicks on it.
All right, there it is. So we just had to refresh it again. You can see the iTunes Search is at the top, just like we expected. It doesn't really do anything right now, but we can see that it's working. So this is the first part. I will go into the next part soon. If you like these type of videos, click that like button and tell me below what you guys think of Nuxt.js. Thanks.
