My top 5 favourite Nuxt 3 features

next three is out yeah baby we have been waiting for a pretty long time but it's finally here and next to having like all these major features you've been hearing about you know using vit having few three composition api and typescript there's actually a bunch of other features that you might not have considered but that are really really really cool and they really help you in your daily life when you're working with nuxed all the time so in this video i want to give you my top five quality of life features that nux now also brings so let's dive in [Applause] [Music] [Applause] [Music] so i am sharing my screen now and so let's have a look at what's on this screen because what you can see there's a whole bunch of things going on with very little code and so there's a couple of things that i like about nox 3 that really helps the quality of life of the developer in such little code first of all we are in app.view which means you don't have to have a page you can just be app.view and that's it if you only have one page or one route and so now router the view router is actually not in there when you bundle which is great um of course if you want pages you can get those and we'll do that in a sec but first of all you can see their script setup which basically uses your composition api setup function and it's like a little shortcut and so every cons that you declare here works directly in your template and also as you can see there's an await here so it works with async await asynchronously directly which is super super handy and so now the next thing that i really like about how nux 3 works is like we have use fetch here that is just generally available and i am actually fetching api stuff and so as you can see here i have server slash api stuff and so in here i'm exporting just some json for now keeping it simple and if you're old enough like me you will understand what you're reading here anyways what this does it fetches the data from api stuff and puts it in the template which actually looks like this very simple stuff right but it actually gets a whole bunch better i like it so much more because what we can do now let's say um let me just find my browser i only want ros and not rachel's data here because if you're doing ssr for example um there will be a script tag with the state of the app that will then hydrate so if you want that to be as small as possible you don't want rachel and ross if you only want to see ross right so what you then can do is just go to my code here you can actually say i want to add some options here i want to only pick oops i want to only have ross and when we now check what that became is only ross but that means if you look in the code the window next only has ross here which is really cool because it now became much like super small and that's what we want less data over the wire and so that's really cool there's actually more you can also morph whatever you receive so i just did a quick copy paste there because it's a bit long for typing so you get the response and i just want to push them in an array rather than having an object and then it basically just name and message because that's what i did here right i want name and message and so it's a really nice way to actually transform the data that you get right there in your call and these are just these lovely quality of life things and it works really well okay on to the next alright so the next thing i really love is how you can add metadata to your page like your title description or gtags things like this and now in nox3 you can actually start doing this we can actually have a hat component and put a title inside i think it probably needs a capital t let me just check probably correct then end of the head let's see and there it is title that's super cool but because it's in the template we have this data prop here right so what if i actually want rachel's stuff in here so i can use your data rachel and there it is maybe we should just take a break and so that is just the quality of life of this is awesome it's so easy and we can also use meta which is yet another really cool composable that you just get because i kind of want to add some language to my body or maybe add a class and then the class should be probably ross and so now when we look at the stuff here the body has class ross and so you can do it on multiple different ways and that's just one of those things that really help out and it's yet again super great all right i'm back with the last thing that i want to talk to you about in this video today and that is how you can use pages and layouts and how super flexible that became now because actually they started using slots which is actually what few slots are meant to be i guess but that means you can use slots and scoped slots from within your pages and then into your layout which is really really strong and so when we now look at my code i've changed it a little bit from where it was before in my app.view i have now added something called a next page and with this component it now starts looking for a pages directory and in our case i have pages index and of course i'm also sending like a little paragraph here pushing stuff from the app.view which if you didn't have any layouts you could actually use app.view as your base layout you could add your header and footer in here for example but we're taking it a little bit further today so we're pushing stuff out and we're loading a next page so when we now go to index i have added a index page but i've also now said okay i want an extra layout as well so we have the next layout component and i'm wanting the custom layout that you can see here in layouts custom so lots of things going on and then so in this index page i actually just have a little image from people from friends why not and it's then loaded through the custom layout which is here so lots of things going on but let me just show you that in the html so we have our app.view we have our custom layout pushing some stuff and then we have our friends image from the guys in the lazy boys and so basically you can have multi-layered stuff but when it becomes super super interesting is when you start to use slots right because you can see in my custom layout here i have a slot but nothing prohibits me from doing this why not oops add a header slot right and then in my page why not go for a template yeah i just copy pasted that because it's so much typing which goes into the header slot where you add some data that goes then into the into the layout again and so now you have some header template content that i just put in from here and so you can kind of deal with the scope of what data these um slots are getting so it's going to be super simple now imagine you have a navigation in the header slot in your component you go to the blog page and you can just push another navigation where block is set to active so you don't really need to use um things with a router anymore with ifs and l's and checks and to set stuff active and stuff of course nux used to do that a little for you but this is so much easier and you can do so many different things with this and layouts just became super strong so next to the huge things that the nux team has delivered on like vit integration the nitro server the surface stuff that runs everywhere and all the amazing things like the you know the nox devtools and all the things actually i really would like to commend the next developer team to also think about the developer experience and give you these like seemingly smaller things that make our lives as developers so much happier and so i couldn't be more excited to get this thing to a bit more of a stable state so we can start using it i will probably have to rebuild my website yet again anyways that is life of someone who works with cool technology that constantly changes anyways thank you for watching and more next content is coming soon cheers

Channel: Tim Benniks

Views: 3,997

Keywords: nuxt, nuxt 3 tutorial, nuxt 3.0, vue, vue 3, composition api, nitro, serverless, front end developer 2021

Id: ek-hhoZLFVg

Length: 9min 36sec (576 seconds)

Published: Thu Oct 21 2021