Nuxt CLI Starter Project

[00:00:00]
>> So let's go ahead and open up the project, shall we? So hopefully, you've clone down the repo and there's only a main branch on there right now. So if it looks barren, that is by design because what we're gonna do is we're gonna fill it out over the course of the workshop so that you can see how it progresses and get really experienced building Nuxt 3 apps from scratch.

[00:00:17]
So with that said, let's go ahead and just kick things off, shall we? So when you wanna scaffold a brand new Nuxt 3 site, you're gonna use their Nuxt CLI, which is they've called Nuxi. So actually, let me just bring that up on the docks, so you can see.

[00:00:31]
So on the getting started, you'll see here that they have this, basically this command line tool called Nuxi, and that's what's responsible for doing the create. So in the past if you used vue CLI create and all that stuff, this is basically the equivalent, but it's been rewritten for basically the new tooling chain of Nuxt 3.

[00:00:48]
So we're basically gonna run this command. So in here, I'm gonna run npx. So if you're new to the NPX command, it's basically allowing you to run these sort of terminal like command line packages, basically as one-offs. Because otherwise what you end up doing is in the past, you would install all your packages globally.

[00:01:05]
And then as a result, you have all this stuff that you may be used once or maybe a few times a year, but it's taking up all this space on your computer when it's not necessary, so NPX kind of like basically helps you avert that. So we do npx nuxi, then what we do, we're initializing a new project.

[00:01:19]
And just to keep things simple, I'm gonna initialize it under the folder called App. And so that'll go ahead, and you'll see actually that was pretty done fast. One of the big things about Nuxt 2 and Nuxt 3 is that performance has been hugely amped up. And part of that is due to the way Vue 3 was rewritten, but also Nuxt 2 or Nuxt 3 with the new nitro engine if you ever hear that pair with Nuxt.

[00:01:43]
It's basically their new backend tooling that powers everything that's going underneath of it. And so they've done a lot to optimize that and really rewrite how that works. And so this is another reason why we'll see a lot of performance improvements in terms of seeing the Nuxi or when you're running dev environments.

[00:01:58]
For those you who have used Nuxt 2, sometimes it would spin for a few seconds just before you would get to the point where it loaded. And now that it uses V and more optimized algorithms, is just way faster. So anyhow, let's go ahead and jump into the app, shall we?

[00:02:12]
And I'm gonna go ahead and install the dependencies while we go over what we see in there because it's gonna take a little while to install, and I want you all to wait for me. Okay, so what do we see inside of app? Well, this looks pretty simple.

[00:02:26]
For those who haven't scaffolded a Nuxt 2 app before, the Nuxt 2 scaffold whenever you would, like scaffold, the app was pretty intensive. It had a ton of folders in there, there's a lot of boilerplate. And this year is kind of takes the opposite approach this time, where as you can see, what we have here is we have your standard Git Ignore which ignores specific files within the repo so that you don't have to commit those.

[00:02:48]
We have a Nuxt Config, which is, again, fairly common for most of the apps these days, whether it's like a vue Config or whatnot. We have your standard package-log, package.json which tracks our dependencies. We have a basic README inside of here, and we have a TypeScript config file that's automatically generated for us.

[00:03:06]
And so before anyone panics, you might notice you're like, wait, wait, wait, I did not opt into TypeScript, what is happening here? Well, one of the things that's really great about TypeScript is that you don't have to use it. But what it does do is that for library authors and for the Nuxt team, which has rewritten a lot of things in TypeScript, it means that you get a lot of free typing even if you're not using it.

[00:03:27]
So later on when you see us hover over things, we're not gonna be using TypeScript at all, but you'll get the benefits of the types that will come forward. So just know that when it comes to this, even though you didn't technically like say you wanted to use TypeScript, it's enabled there for you.

[00:03:41]
Because at the end of the day, if you ever choose to actually say I wanna progressively enhance towards TypeScript. Now you don't have to worry about like upgrading the tool chain or anything, it's just there for you. And so if you missed it earlier this week, I did a TypeScript and Vue 3 workshop.

[00:03:56]
And so if you want to learn more about progressive enhancement with TypeScript, be sure to check out that recording and that workshop. I throw out one more file to go over, and that is this app.vue, and you'll also notice it's quite barren. And also, in my opinion, this is a good thing.

[00:04:11]
So normally, typically, when you're starting out, you would probably run NPM run Dev, right? So let's just do that. So npm run dev, and then you wait, and then you say, look, it's gonna be a port 3000. Great, so then what do you do? You open up your browser, and so that works pretty well.

[00:04:26]
But let's do an optimization though to that workflow. Inside of package.json, instead of just running nuxt.dev, you can actually pass it a flag, which is -O. And so when you save this, what this is going to do is when I run npm dev, is actually going to automatically open the environment in the current tab or basically, the browser that I want it to.

[00:04:47]
And so it's a small optimization. But honestly, most of the time we're running NPM run Dev, this is actually what we wanna do. We wanna open the tab, so why not shortcut that bit? So that's a little bit of enhancement on your workflow. So now that we have everything running, you're gonna see this is a really, one of the things I will say I love about the Nuxt team is they put a lot of time into the design and just like having fun with it.

[00:05:06]
And so having this nice little gradient, dark theme, absolutely beautiful. And so this is the Nuxt welcome component. And so you can see here, there's links to the documentation, GitHub Twitter. But my favorite thing about this, which might not be as apparent is that this Nuxs welcome, if you look around the app, there's no component anywhere.

[00:05:25]
There's no boilerplate exist anywhere, why? Because if we actually go ahead and hover over this, and if you right-click it, and then you Go to Definition, for example. Another way you can do that to shortcut it, if you hold Option, I believe Alt on Windows, you can actually click in it and that'll do the same thing, it'll basically go to the definition.

[00:05:43]
And we'll be using that a couple of times, I think throughout the workshop, so something to note. But you notice that notice Nuxtwelcome is actually a component that's being imported from a library that's basically hidden away from your code base. Because after all, they know that when you scaffold a website or an app, you're not gonna wanna use the Nuxt welcome.

[00:06:00]
This is something you're basically gonna spend the first commit deleting all the boilerplate, so why bother? So it's there for you just to have something as a placeholder, but the moment we delete this from our website, and we just say like Hello Frontend Masters. You see, our site did update as expected, but more importantly, Nuxt welcome is not gonna be bundled in your site at all.

[00:06:22]
So that to me is the nice kind of developer experience that I'm kind of hoping for. Because when you have so much boilerplate, we've all done that where we just commit something that says delete boilerplate code. So that said, the reason I wanted to show you the definition though is that maybe you're curious about how they did that page.

[00:06:41]
And so you can learn more about it inside of, basically you can look at this path, look at how everything works. So that's not hidden from you at all, it's just not part of your code base out of the box. The other folder that I need to mention here actually is that you'll notice we're in this .nuxt folder.

[00:06:55]
And so the .nuxt, so if you don't know the period, that prefix is a folder name, typically means it's supposed to be hidden. And usually, this means it's not something you're supposed to touch, and that maintains true for this as well. This basically contains a bunch of files that the nitro server that Nuxt is running on, it's referencing to do a bunch of optimizations and stuff.

[00:07:14]
And so it's there also because sometimes you do wanna kinda peek under the hood, like we just did to be like, wait, where is this coming from exactly? But otherwise, you should basically never come in and modify this cuz every time you run npm run dev, it will regenerate this entire folder.

[00:07:28]
So this is not something you wanna touch.