Wrapping Up

[00:00:00]
>> So we've been through a lot today, right? We've gone from the beginning, from scratch, learning about the core functionalities, a view that really drive Nuxt. And then, we started really diving into the fundamentals about what makes Nuxt really powerful. And so that's whether that's page-based routing, the composables they provide for us, there's honestly a heck of a lot more that we can cover.

[00:00:20]
But I hope that with this, you feel a lot more comfortable as far as exploring the dots and starting to experiment with things yourself. But as far as some things I do wanna call out, right, cuz from here, you got so many Nuxt things to explore. Remember what I told you Nuxt has the nitro back end engine that they're working with.

[00:00:36]
Well, basically, they came up with a way that if you add a server folder to your project, you basically get a back end that scaffold it for you. So you actually create API's with that, and actually it runs a whole node server for you with API calls. And it can store stuff and update things, it's ridiculous.

[00:00:54]
And that, once again, could be a workshop all in and of itself. But once again, that's one of those things, where if that's something you start to reach for, where you start to do more full stack Nuxt things. And you wanna explore what that's like, then server ware, middleware, and authentication, all this stuff you have what you need to start basically exploring that and trying things out.

[00:01:13]
But again, it's not something that everyone deals with, so that's why this is not being covered in this particular one. The one thing I do, wanna make sure that I do have kind of a brief pitch on the however on Nuxt modules, which is one of the best things about the Nuxt ecosystem.

[00:01:27]
And so two particular modules that I do wanna call out is Nuxt Content. And so Nuxts content, basically think of them like plugins into your Nuxt library. So you would basically say, hey, I'm gonna install Nuxt Content, and I'm gonna enable it. And what this does is Nuxt was really brilliant in this regard in terms of all you do is you create a content folder inside of your directory.

[00:01:51]
And they can contain any sort of static files like markdown files, CSV files, JSON files. And what it does is it makes it really easy for you to easily parse those things into your page views, so you can imagine. So to show you actually a live example of that, let me go to my GitHub for my personal site.

[00:02:10]
This is an older implementation of it, but it will definitely demonstrate the point. You'll see here that inside of my content blog, I have a ton of different markdown files. And typically, when it comes to rendering markdown files, you have to get a markdown rendering engine, you have to grab it, you have to parse it, there's a lot of things you gotta do.

[00:02:29]
But with the way the Nuxt Content works, all I gotta do is inside of my page for my blog for the slug. You'll notice that all I have to do is grab all of my content from that folder. And then what it does is it makes it so easy for me to render, because it provides this global component called nuxt-content.

[00:02:49]
It passes the document as a data, and it just renders everything correctly. And even to the point, where you can actually put view components inside of markdown files in you all know how to actually register those things. It's serious, it's ridiculous how much power comes with that. And it's highly recommended for anyone looking to build their own personal site in Nuxt, and try out some blogging features and that kind of thing.

[00:03:11]
And so they did an absolute phenomenal job with that, so keep an eye out on Nuxt-content. The other one that I think is really worth keeping an eye on is Nuxt image. And so this is a DX improvement on the whole concept of image processing. Because as we all know, right, images are a big issue when it comes to payload.

[00:03:32]
But when you have Nuxt image, I saw this in an earlier build, so I know this is basically the direction they're heading. The way it works is you basically call this global component called Nuxt image, and you pass in the path of whatever the image is, right? And so this case, it's nuxt-icon.png.

[00:03:50]
Well, what that actually will do is that if you pass a different property, so we come down here, and we say, IF, these are placeholders for high quality width or even things, let me see, we may go down a little bit. Responsive sizes at viewport with small do 100 viewport width, then medium 50 viewport width, large 400 pixels, what it'll actually do is it'll actually go out.

[00:04:14]
And wait, [SOUND] it will actually go out and cut all the images to the sizes that you specified. And then I'll put the correct elements that then show the source set on all of those things configured correctly so that you don't have to do any work beyond that.

[00:04:33]
And taking that image processing off of my plate., that's huge for developers. Because oftentimes this is something you have outsource to a different third party service, or you have to build your own special thing. But with Nuxt image, and that being built in, it's just as easy as saying on this component for this image, generate these specific sizes, it'll just do it for you.

[00:04:57]
And the syntax is actually quite fun to work with once you start figuring out what you're looking for. And I'm so excited for the things that are coming out with. And so the other thing to realize about a lot of these, Nuxt modules is the Nuxt team is aware that a lot of these things are not just Nuxt problems.

[00:05:13]
These are things that overall are things that all frameworks are dealing with. So if you haven't heard of unjs, this is their GitHub, here we go. And so unjs is their way of public, they're basically JavaScript modules to solve these various problems that could theoretically be ported to other frameworks.

[00:05:33]
it's just a nice image and Nuxt Content have that branding, and obviously, they're like Nuxt as a first class citizen. But otherwise, unjs is a repo that's kind of worth watching if you're looking for basically your third party, a Java open source. JavaScript library, you just wanna import and use, and then you can walk away from it.

[00:05:51]
Thanks everyone for spending the time with me today, it's been an absolute blast. Once again, my name's Ben Hong. If you're looking for me on any of the internet things, I'm under the moniker bencodezen, and so happy to chat with you all as you have more questions about Nuxt.

[00:06:04]
So honestly, please feel free to reach out, my DMs are open. And so really appreciate you all spending the time with me today, and I guess with that, till next time.
>> [APPLAUSE]