Nuxt 3: From Zero to Hero by Daniel Roe: Vue.js Nation 2022

[Music] hello uh it's a pleasure to be be here and what is an evening uh for me I'm based in the northeast of uh the UK so it's it's definitely a cozy winter evening uh on my my end I've got my cup of T tea which which will keep me going

uh as we dive into uh next uh three and I've taken on myself to attempt to build a n 3 Wordle clone um I want to show you a little bit about how n 3 Works um there are lots of other better Wordle Solutions out there so go in and uh and and check out some of those but it should provide a way for us to dive into what looks like a real application um and and and hopefully I can show you some of what I love about next if You' not come across it N is a framework for building web applications and N 3 is in

beta um it's open for testing I've just installed this just now it's the the the very latest Edge version installed off of npm uh so we're going to encounter hopefully no bugs along along the way um and uh I think that's probably enough from me um so when you install your basic nx3 application notice it's really minimal compared to what you're used to um if you are are familiar with a nexx 2 application for example uh there's not a lot to go on um the app. viw file is our

uh starting point a pretty minimal uh not a lot else um so I've started our Dev server in the background um and I in a moment I'll I'll fire up a um a web browser as well so we can see what we're building but in instead of starting on the front end I thought I'd start on the on the back end um so n has the capacity to uh handle a lot of things uh that a

server would normally do um and it does so using a new engine called Nitro Nitro is a a joy to work with you can just return objects directly rather than worrying about stringifying them for example um we're going to uh create a handle which is going to uh take care of passing a guas so somebody guess is a word and we'll say is that a valid guess and we'll store the state as well um so

we're going to uh sport handle this um Define handle function just type hints it for us it doesn't doesn't actually do anything other than that um so what we can do with a Nitro API call is just return something so I could say word is guess great um let's just perform a quick HTTP request and going to get back

post that request to it and we're going to get back uh an invalid guess believe I may have a demo project running in the background because that is definitely far too advanced for this stage of the uh of the uh the particular uh demo let's fire that off and restart it okay an next application is now starting on the right port and we now

have a simple word now what we're going to want to do is evaluate the guest that comes in and then score it in some way um so normally if you're using Express you'd get the uh request body U but in this particular case we have some tiny helper functions which can be tree shaken out of the build if you don't use them from this Library called H3 um H3 is part of the njs uh family of libraries uh and it's uh it's designed for for anybody to use and make um