The Nuxt big thing in web development?

it is april 25th 2022 and you're watching the code report after 16 months of hard work nuxjs version 3 has finally hit release candidate it's been 84 years and it was well worth the wait it's kind of like the next js for the vue ecosystem and at first glance the only real difference is just one vowel but the truth is that next has implemented some really unique features that are about to blow your mind if you've never used it imagine a world where every file has access to every component in your project so you never have to write an import statement ever again i never thought i'd see it in my lifetime but nuxjs figured out a way to handle auto imports in a way that makes total sense we'll look at that along with a bunch of other features over the next few minutes first we need to talk about its documentation when you generate a new project you get this extremely minimal starting point and you're left wondering what do i do next well just like view itself this is a progressive framework that can do a lot of different things like build a single page app a static site a server rendered site a rest api or all these things together at once what stands out in the documentation is that there's a page that corresponds to every directory in your project many of these directories do some magic like pages handles all of your routing like next js and i really like how the documentation explains what every file and a project will do on top of that it has traditional api documentation as well as a ton of examples with interactive demos now the big core feature of nux that makes everything else possible is a server engine they built from the ground up called nitro it supports ssr and static site generation but most importantly it allows you to deploy on the edge like on cloudflare workers for example that means you're not limited to node.js and you can literally run server-side code all over the world as close as possible to the end user making your site extremely fast but the one thing it doesn't do yet is hybrid rendering where you have some routes that are static and others that are server rendered although this will be supported in the future now the most important aspect of rendering is how you fetch data on the server if we go into a component you'll notice we have a setup script which contains code that will run on the server now we can fetch data from our api or a database with composables like use async data or more conveniently use fetch it makes a request then returns a date of value that we can then use directly in the template below and did you notice i'm using top level weight that makes things incredibly simple but we're not going to stop there one problem you might encounter with server rendering is sending too much data over the wire you can easily filter the properties you need from the object using the pick option or you can use transform to change the format of the data entirely but what if we want to refresh this data later it also returns a refresh function that we can simply call from the client side template it also has pending and error objects that we can use in the ui as well so really awesome data fetching capabilities out of the box another thing we might want to do while we're here is add some dynamic data to the head of the document one way to do it is with the head component in the template or we can go to our server side script and define it in the use head composable that's useful but one weird thing you may have noticed here is that i'm using these components without importing them from anywhere one of the most mind-blowing features is auto imports everything in the framework is automatically available to you in any file without an es import on top of that any code that you define in the composables or components directory is made available on every page automatically the only thing i don't like about this is that it makes me wonder how many hours of my life i've wasted trying to organize my imports and exports in other projects and one other potential issue is name collisions but it will give you a warning when that occurs you might also be wondering if this produces a massive javascript bundle but the answer is no because it will automatically perform code splitting based on the components that you use on each individual page now let's switch gears to another awesome feature layouts a complex application might have multiple different types of pages like a blog and an admin area every page can be assigned a layout which will wrap it with an entirely different ui and that layout can also have slots where specific pieces of ui can be inserted it's just a really practical way to compose a complex ui in addition next also supports nested routing very similar to the remix framework for react and that's really cool because it means you can transition different parts of the ui while changing the route without needing to re-render the entire page and that can be really useful for a dashboard style app yet another challenge you'll face when building a multi-page application is state management like sharing data across multiple pages nux provides a use state composable that allows you to define state with a shared key its value is preserved after being rendered on the server and then can be shared across multiple components on the client side another thing we need to talk about is server routes like pages the file system corresponds to a certain route you can add a suffix like git post or patch to any of these files to change the http method that is used but what's really awesome is that instead of sending a response you just return a value and by doing that it allows nux to automatically create typings for all of your api routes which means you get a strongly typed api with almost no effort there's tons of awesome stuff here and i could keep going but let me know if you want to see a full next tutorial in the comments this has been the code report thanks for watching and i will see you in the next one

Channel: Fireship

Views: 615,028

Keywords: webdev, app development, lesson, tutorial

Id: noq-ZHTD2Cg

Length: 4min 55sec (295 seconds)

Published: Mon Apr 25 2022

Reddit Comments

[u/ik-wil-kaas]

I fooled around with the Nuxt 3 RC this weekend.

I had a blast with it. Generating static pages worked fine too.

[u/tjrchampion]

And there’s me thinking for my next project I’ll transition to react/next js! Been waiting for Nuxt 3 for some time, great new features and excited to get started. 👍