HOW TO: Create a Nuxt.js app

hi I'm Greg Pollock and you're watching scaling view with next in this first lesson we're going to be creating our first next app we'll create our first project together well take a look at the folder structure that knucks generates for us and then we'll start building out our example app going into this course I'm assuming that you know the view basics including view router and view X if you aren't familiar with these you can jump into our previous course let's take our real world view course take our view X course and our next level view course then come back here so obviously I'm assuming that you're familiar and comfortable with HTML CSS and JavaScript given that let's get to it to create our first next app we need to make sure that we have NPM greater than five point two point zero this allows us to run npx create next app and then a project name this will fetch and run the latest create next app generator to create our next app it will ask us for the options we want to use with our next app it'll initialize a git repo for us and then finally this command will run npm install to fetch all the dependencies we need if you prefer yarn over NPM that's perfectly fine you'll want to run this command okay we're about to start coding and I really believe the best way to learn is by doing so I highly recommend that you fire up your code editor and your terminal for this command and follow along with us so in our terminal we're gonna go ahead and run NP x create next app and then our app name is real world next we're asked for our project name I'm just gonna hit enter our project description if we want to configure a custom server framework to use I'm gonna select none and then which features to install and I just use the arrow keys and spacebar to select them and then enter when I'm done next I'm not gonna select a UI framework or a test framework I'm gonna choose the universal rendering mode and we'll go into what exactly that means in the next lesson I'm the author and I'll choose NPM as the package manager it's going to create a git repo for us and run NPM install and then bring us back to the command line and then tell us what we need to get started I'll follow the directions CD into the directory and run npm run def this compiles all of our code and tells us that our development server is on localhost port 3000 stepping into our browser if I hit a refresh we can see that our next app is running I'm gonna go ahead and add this generative project to get up and just show you what that looks like because I think you should do this too so I've already populated the fields I'll hit create repository and here since it already created a new get repo for me I need to copy this git remote add origin command we'll need to use that in a moment once again I want to encourage you to follow along with this course because it's nice to have a nook step you can play around with just explore the different commands try new things and maybe even create a portfolio project so you can show people that you know how to create the next app back on the command line I'm going to add everything into a git commit then I'll paste in that remote ad origin line and now I can push up my first commit to the master branch back in my browser if i refresh the page I can verify but indeed my next app is stored on github when we create a new view application it comes with a source directory and a components directory but that's it just one small components directory which begs a few questions where do you put all your components do they all go into this directory do you create a views directory for your top-level components and where do your layouts go you know the ones that have router view in them next answers all these questions for you with intelligent defaults the first thing to know about the next component folder structure is that there's no source directory all the folders are in root components contains our reusable view components a layouts directory which contains our layouts like for example a blog layout or a store layout or a home layout and a pages directory that contains our top-level views always in dot view files these components in our pages directory are used to generate our routes and I'll show you how that works in a minute I also want to mention that next gives these components additional functionality based on which directory we put them in which becomes really useful and you'll see why in the next few lessons if we look in these folders that were just generated for us we'll see that layouts has a default dot view this is our default layout in our pages directory we have an index dot view which gets rendered inside of the default layout then our components directory has the next logo and that gets rendered in the middle of the page in don't worry and the rest of this lesson we'll explore the functionality of these different components so those are the three folders where we put our dot view components then we have the store directory which is where we put our UX store files a static directory where we put files that we want to serve exactly as they are from the root the example would be the robots.txt if you're familiar with SEO you want one of these or the favicon that appears next to your title then there's the assets folder where you put your uncompelled assets things that need to be compiled when you deploy production such as your stylus files your sass files images or fonts let me show you an example of what happens to images you put in the assets directory if I put my logo dot PNG in this directory inside the index dot view in my pages directory to include this image I would write tilde assets logo dot PNG next by default will be using view loader file loader and URL loader for effective asset serving what this means is when we build our project if the image file is greater than one kilobyte the URL to access this image will look something like this in case you're wondering what that hash code is that A to F seven nine six five dot PNG is it's basically a version hash this is useful if I ever create a new version of logo dot PNG when I go to deploy it if the file size has changed if it's changed even slightly it's gonna have a different version hash which means when people load up my website for the second time since that logo changed it'll load the new logo and not the old one otherwise if logo dot PNG changed but the name remain the same then the browsers that already have that image cached aren't going to load the new one on build if the image is less than one kilobyte it's gonna inline the image it'll look something like this with a big long image hash it does this to reduce inline image requests because it doesn't have to go fetch the image it's going to be right there inline in the HTML next in the next folder structure we have the plugins folder here we put JavaScript plugins to load before starting the view app like external javascript helpers or libraries then we have the middleware folder for custom functions to run before rendering a layout or a page and lastly we have the Knox doc config yes which we can use to modify the default next configuration as you can see next has a bunch of intelligent defaults but the great part about it is you can modify all of them when you need to inside the next config js' file in a minute we're going to create our first pages in our example app inside the pages directory we'll create the index top view that'll have our event list and our create dot view which will allow us to create an event after we create these pages do we need to create a router j/s the answer here with next is nope because it's going to auto generate the routes for us this file that we're used to writing when we're using view router we don't have to write anymore by default next is just going to work mapping these pages to those routes we're gonna do a bunch of things in the example app and let me walk you through them before you actually see it in the code firstly we're gonna fix some settings in vs code see if you followed along our tutorials and you have your editor configured like mine you're gonna run into a conflict unless you tweak something inside veter if you're not using vs code and Vito don't worry about it next we're gonna take a look at the default layout and copy/paste in some global styles then we'll simplify our index dot view file start up our development server make sure everything works we'll then create a second page our create view then we'll create a new component for navigation our navbar and finally we'll use our navbar component inside of our layout so first let's fix that conflict in veter so here in vs code I'm going to go up to preferences and settings inside of that I'm going to click on extensions and scroll down to find Peter inside of this I'm looking for the default format or HTML I'm going to set that to none [Music] will allow our es lint to do our HTML formatting next we're going to add some styles in the default layout so I go into the default dot view file inside of here you see this next component this is where page templates are going to get rendered this is kind of like router view from the view router library next I'm gonna add an ID to work with our styles I will delete all the existing styles and I'm going to paste in some different ones if you want to copy and paste these in into your own project you can just look down below in our lesson text it's all there ready for you to copy and paste next we're going to simplify our index top view file inside of the pages directory so let's go ahead and open that up I'm going to go ahead and delete everything and start from scratch we want this file to be real simple we'll simply add a template and then h1 that has a title of events next let's make sure everything's working by starting up our development server and testing it out we'll run npm run dev they'll compile everything it'll take a little longer for you I sped this up so in a browser we can see that it's properly loading our event title great now back in our editor let's create a new page so I'm just going to copy our index page and create a new page called create dot view I will paste in our simple template and just change the title to create an event back into the browser at this point and go to slash create we can see that I can navigate to that page without editing a routes file because remember next is generating our routes based on the file name we made a create dot view file inside of our pages directory and because of that we can navigate to slash create and it will load up that page inside of our default layout next let's create a new component for our navigation bar so first we'll go into our components directory and we need to delete that logo dot view so we'll go ahead and delete that and we'll create a new file inside of our components directory called navbar dot view this is going to have a simple template it'll have a div with a class of nav and inside here we're going to create some links with next we use next link instead of router link and we specify the route it navigates to using the 2 attribute here our title will link to the route Rao next we'll add a navigation tag and inside of there there's going to be two links to each of our pages so we'll just copy and paste our knucks links they're not going to have class of brand the first one is going to have the text list and the second one which links to create will have the nav text of create and it'll have a separator between the two lastly I'm going to paste in some styles which you can get on the page below this video finally we need to edit our default layout to use the navbar component so jumping back into our default layout we need to add a script tag and import the component that we just created navbar inside of our export default we'll add this component and now we can use it inside of our template now in our browser our create link goes to our create page and our list link goes to our index top view clicking on the title also navigates to our index top view to review in this lesson we learned how to create and run our first knucks project we looked at the folder structure that knucks generates for us and lastly we built out our example app in the next lesson I get to show you some of the great SEO features that next comes built in with as well as attempt to explain to you exactly what Universal means which I have to admit I only understood recently so it'll be fun thanks for watching in our next lesson we'll start to get into the cool SE cool they're really cool cool bye my Chinese cool Internet in our next lesson we'll check out the badass SEO features of knucks and figure out what Universal means it'll blow your mind not professional keeping it professional because that's just how we roll [Music]

Channel: Vue Mastery

Views: 12,627

Rating: 4.9876542 out of 5

Keywords: javascript, vuejs, vue.js, front-end web development, nuxt, nuxtjs, greggpollack, howtocreateanuxtapp, nuxtapp

Id: sYIUkTap1ds

Length: 15min 53sec (953 seconds)

Published: Wed Mar 27 2019