Transcript:

• Welcome to this talk, “What’s New in NUXT 3”. My name is Dan Vega, I’m a Spring Developer Advocate at VMware. Before we get started today, I just wanna thank all the conference organizers for putting this together. It’s great to be back at in-person events. I’m sure we all have Zoom fatigue at this point. So it’s good to see you all. And I’ve actually been in the Vue community for a few years now, and this is my first Vue conference. So it’s good to be here and meet all of you. I’m a big fan of yours. So if we get a chance in the hallways, let’s chat about Vue. So I’m gonna tell you a little bit about me and why I’m here talking about NUXT. So first and foremost, I’m a husband and a father. My beautiful wife, Jen, my two daughters, Isabella and Juliana. We live outside of Cleveland, Ohio. I have been a software developer for over 20 years. So yes, I’ve been doing this a long time. A lot of different roles in that 20 years. One of those roles was a few years ago, I was working at a coding bootcamp and we had a curriculum built on Vue. I helped kind of build that curriculum up. We taught kind of the foundations of Vue and ever since then, I’ve just been a huge fan of it. I’m also a Spring Developer Advocate, as I mentioned at VMware. Spring is this framework that’s built on top of Java. So yes, I’m the Java guy at a JavaScript conference. No, I’m not lost, I just happen to love building things for the web as well. You can find me on Twitter @TheRealDanVega. How many people are on Twitter? All right, for those of you not holding your hands up, what are you waiting for? You do not need to follow Elon Musk to be on Twitter, not yet. You can think of him as crazy, you don’t need to follow him. Join the conversation over there. So, as I said, I’ve been doing this a while. I come from an era of web development where writing JavaScript was not fun. It was not what all the cool kids used. It was very mundane, it wasn’t fun at all. Back in the day we had the JavaScript bible, that was about this thick, that taught you everything you needed to know to write JavaScript. And then we had the good parts, which was like this thick, which was actually good pieces of JavaScript. So, you know, that’s where I came from. And then Jake ware came along and I fell in love with JavaScript kind of from the beginning of that. And we’ll see kind of what that evolved into. When I started first started learning by Vue, it got me really excited about building for the web again. You know, that idea of being able to build something and get it out on the web. And that’s kind of been my mindset since I learned Vue. And NUXT 3 has really started to kind of reignite that fire for me. It’s a great framework, it has me excited for the future of Vue, just because of all the things it can do and just how versatile of a framework it is. This is my website, DanVaga.dev. It’s kind of a personal project of mine that I’ve started up 15, 16 some years ago as a way to start blogging. You know, I like to learn things and then kind of teach that to other people so that they don’t have the same mistakes that I do when I was trying to build something. How many people in here have like a personal portfolio or a blog or something to show off kind of their uniqueness? All right. So for everybody else who didn’t put their hand up, what were you doing during the pandemic? You had two years! Come on, two years to get something together. No, just kind of say that, the personal project of mine has been that thing over the years, like I said, I do a lot of kind of backend development. This is my way of being able to get something out on the web so I write, I don’t blog as often as I used to, I do have a newsletter that allows me to write. And this current form of the site is all written in a static site generator in Vue. And about probably mid last year, I decided that there were a bunch of features that I needed and that I wasn’t getting out of the current framework that I was using. So I was like, what are my options here? And so I started hearing about NUXT 3 and I said wow, that seems like a lot of the things that I’m looking for that I’m not getting right now, that seems like something that would solve my problems. So being that this is a personal project, I didn’t have a have a hard requirement of get this done right now. So I said okay, I’m gonna start taking the time to explore some of these features and see if they are going to work for me in moving this site over to NUXT 3. And so that’s what I’ve been doing. So I’ve been learning these features and that’s kind of really why I’m here today. Just to kind of talk to you about what I’ve learned and what is available on NUXT 3 and why maybe you should choose it for your next project. So we’re gonna break this down into a few kind of different categories. First is gonna be developer experience. What are the things that we care about when we’re writing code? What are the things that are gonna help us be more productive? What do we care about as developers? Then we’re gonna talk Nitro. Nitro is the new server engine in NUXT 3, really cool stuff there. We’ll also talk about NUXT modules and really kind of NUXT 3 modules. The current state of modules in NUXT and where they’re kind of heading. And then we’ll talk about the point ops. So again, building for the web. It’s great to build stuff, but if you can’t get it out there then what are we doing here? So let’s talk about developer experience. So if you wanted to get started with NUXT you will need Node JS, you’ll need the latest LTS version. If you run Nodash Fee and you already have something installed, check the docs, there are certain versions that you should be on. You’ll need a text editor or an IDE. So Visual Studio Code. Volar Extension is a recommended extension going forward, so make sure you have that installed. I also, like I said, I do a lot of work in Java and there are a lot of times that I build Java projects alongside Vue. And so I’m using IntelliJ IDEA, which is built on WebStorm, another great IDE. If you haven’t used it, go ahead and check it out. So, first thing I wanna talk about is NUXT Bridge. So I think in an ideal world, we’d all like to build new projects from scratch. That’s kind of the fun part, right? You get a clean slate, you get to build new things and you get to kind of have your creativity and go forward. But that’s not always the real world, right? We have apps that are written in NUXT 2 that we want to go ahead and upgrade to NUXT 3. And so NUXT Bridge gives us that ability. It gives us a lot of the features that are coming in NUXT 3 within our NUXT 2 applications. So if we wanna upgrade in to NUXT 3, this is a really good place to start. Maybe don’t move it right into production, but do it locally, see if you can add. It’s just a module that you go ahead and add into your NUXT 2 project, and it gives you a lot of the abilities from NUXT 3 Like the Nitro server, composition API, new CLI and dev tools. And compatible with a lot of the NUXT two modules, which is important. So I would suggest if this is something that you want to do head over to the documentation, they have a great section on, hey, if you are moving from NUXT 2 to NUXT 3, these are the steps that you need to take. The NUXT CLI! So there’s a new CLI that’s called NUXI, and this is going to replace the Create-NUXT-App. And I know you probably can’t see that in the back, but I’m running NUXI usage. And that is telling me from the command line hey, here are the different options. There are a whole bunch of different commands that you can go ahead and run. So we can do things like create a new application. So we’ll see an example of that in a second of how to create a new application using NUXI, but it also does a whole bunch of other things. So you can add elements to your project. So if you are not sure what the convention is for creating a new component or an API or a composable, you can run NUXI-ADD and then that type of element and give it a name and it’ll go ahead and create it for you. So it’s a really great command line tool. And then there’s things for like development mode. So when you wanna run in development mode and start writing some code, when you wanna build, when you wanna generate a static website. And there’s a whole bunch more check out the documentation, Again, it will kind of walk you through all the different commands. One thing that I saw in a discussion form. So another great place to kind of be looking around as you’re trying to figure out if this is gonna work for you as well, is on the NUXT 3 discussion lists. So there’s a whole bunch of great discussions going on about what’s coming and where we are with it. And I saw somewhere that this is going to be extensible at some point. So you’ll be able to add in your own commands, which is really cool. Okay, so here’s a quick example of just a little video. So I’m running, NPX NUXI in it. Hello NUXT 3. That’s the name of the project, you see it’s very fast. It’s telling us to go ahead and change directories into Hello NUXT 3. Once we do that, we can run NPM install and we can install all our node modules. And once that’s done, we’ll go ahead and NPM run dev. And you won’t see it, 'cause it’s gonna go really fast, but it starts up the Vite server and the Nitros server. And we end up at this kind of hello world screen. It’s a really nice screen. It’s got some hey, getting started, where you should go first, as well as some information about documentation, GitHub, and Twitter. So what you end up with is this very minimal approach here. This minimal starting project. And I happen to be a really big fan of this. I don’t like to be brought into a project where there’s a million things of all the things that you could do, but you may not use, right? In this case, there’s a simple NUXT welcome component. And if you look on the left, if you can’t see it, there actually is no NUXT welcome component. This ships in the node modules directory somewhere down the line. So it’s not one of those components where you need to like go and delete a whole bunch of stuff to kind of start your application. It’s really minimal and I like this approach. And you’ll see, if you’ve come from something like NUXT 2, there’s no pages directory. So what this means is that if you wanna opt in to creating different routes, you have to create that pages directory and create your different components. But what this means is if I just want to kick off a quick demo, I’m not buying in, I don’t have to pay for Vue router being installed. There’s no pages directory, there’s no re-router. So again, I’m a big fan of kind of this minimal approach and it’s same in the package.json. There’s not a whole lot going on here, right? There’s a few scripts, there is a dependency on NUXT 3, and that’s it. So I’m a big fan of the kind of minimal approach to getting started. So like a house, a great framework starts with a solid foundation. And these are three of my favorite things about moving to NUXT 3, is Vue 3, VITE, and TypeScript. So let’s talk about those. So with Vue 3, we’re gonna get all these performance upgrades that come with Vue 3 without having to do anything in our NUXT application. So Vue 3 is smaller, faster, stronger, ships with better performance, smaller footprint. And those smaller footprints result in faster page feeds for your users. So we’re getting this right outta the box just by kind of upgrading a NUXT 3 and getting Vue 3 along with that. One of my favorite things is the composition API in Vue 3. So we have that script set up, we’re to kind of write our functions, we can use composables, just being able to use that composition API in NUXT 3. There’s also this idea of a composable. So in the context of view applications, a composable as a function that leverages the view composition API to encapsulate and reuse stateful logics. So stateful logics, big thing there, if it’s stateless logic like a date format or function, we can write a function for that. But when it’s stateful logic, we can write these composables. So there’s some really good examples of composables in Vue, in the Vue documentation. But in NUXT 3, we get a whole bunch of composables out of the box. These are a little small, I’m sorry, but they’re things like UseFetch, UseLazyFetch, UseAsyncData. If you wanna like work with UseHead is really helpful if you’re like working in a document and you wanna change the title within the head or add some links to the head, a whole bunch of useful composables that are coming right outta the box for you in NUXT 3. And there’s also a way to plug in VueUse, which is another great library. There’s a module for that in NUXT, which gives you access to a whole bunch of composables. So before you sit down and think to write your own logic, to do something like access a cookie, or access local storage, there’s probably a composable for that, so reach for those first. TypeScript! Any TypeScript fans in here? Yes, all right! So TypeScript is fully supported right out the box. In NUXT 3, you’ll see that there’s a TSconfig file right in the root of the project. And it’s very minimal, it extends what’s in the NUXT directory in the TSconfig. And that TSconfig does has a whole bunch of options for us already kind of set up along with some aliases. And it also gives us a whole bunch of types out of the box. This is really useful for a whole bunch of things in the application, and so, oh, sorry. We can write whether it’s our components, our API routes, plugins, whatever we want to do, writing our script set up we can say lane equals TS, and we can go ahead and take advantage of TypeScript right outta the box without having to do anything ourselves. Of course, it’s customizable as you’re going. So Vite, we heard from Alex this morning. There are a lot of great benefits to using Vite, the biggest one is performance. You get that hot module replacement really, really fast. I saw a couple of developers even mentioning that it’s so fast that they are turning the visual studio code save settings way up, so that it can catch up with how fast Vite is reloading. So that’s pretty cool to see. If you go ahead and run NUXI info right from your command line in your project, this kind of dumps out a bunch of information about your project. You’ll see that the default builder is Vite, so it is the default builder in my project that I’m using right now. But you can also use Webpack. I heard some questions about, you know, what if I wanna move to Webpack for certain things? You can use a Webpack builder within your NUXT 3 application. The reasons it’s so fast, again, we heard this morning, it’s built on esbuild, it’s written in Go, compiled the native extremely fast. And I’m really excited about the future of Vue because of Vite, but not only Vite or Vue. I know I have some friends who write React, I question their life choices sometimes, but they do do that. And, you know, we get to talk, I love that Vite is kind of framework agnostic and it it’s really helping grow the community. So big fan of Vite, I’m excited to see where that kind of goes. Another really great feature is auto imports. You can see that we’re using ref here, we’re using a computer property, we’re using an unmounted lifecycle hook, and I haven’t imported anything. So this comes for free with NUXT 3, whether you’re in a component or in an API or in a plugin, you get a lot of things imported for you. And I’ll tell you, once you start writing this, it’s hard to go back the other way and having to explicitly import things. Because who’s been in a file where there’s like 50 imports and like, what is going on here? So this is really cool. Again, you can do it in all kinds of different things. Components, composables, APIs. And I just wanna shout out to the documentation. I’m a big fan of that. If you look in the minimal approach that we had in our application, there weren’t a ton of folders, but as your needs grow, and as the features you start writing kind of keep growing. There’ll be many more folders in your application. And that directory structure one there in the guide tells you if you click on composables, we’ll say hey, this is what this folder is used for and this is what you might find in here. So big fan of the documentation, check it out. All right, so that’s kind of developer experience. Now NUXT Nitro. So this is a new server engine that was written for NUXT 3. Basically giving you the ability to run JavaScript anywhere, whether it’s Node, Deno, Service Workers, Browsers, it has serverless support, right outta the box, which is optimized for speed and low cold starts. It’s built on a new HTTP framework called H3 along with a whole bunch of other libraries that aren’t NUXT specific, if you go out on GitHub and look for unified UNJS, there’s a whole bunch of projects under there, one of those is H3. And so they’ve kind of made that code available outside of NUXT, but they are using H3 internally for the Nitro engine. API route support. This is something we’ll look at in a second, but this is big being able to give you the ability to stand up some API routes. Development server with hot module reloading. And zero config, or at least minimal config, to deploy your applications almost anywhere. So here’s just a quick example. I just have a data/events.ts and I’m defining an event with a few fields on it. And I have constant events, which is an array of events. And so I just have two events in there that I’m defining. I’m exporting that out. Oops. And now what I can do is I can go into server routes, I can create a new folder called /server/API and I can create a file in there called event.ts. So this gives us the ability to basically setting up an export default. The define event handler is coming from NUXT, we get past the event, which has the request and the response on there. And what this allows us to do is we can basically stand up new API routes. And so the important thing here is this events.ts is basically accepting requests for gets, posts, puts, deletes, whatever, but we can also create a specific route. So if we wanted to be able to just handle a post, we could say events.post.ts and that will only respond to post requests. The really cool thing about this is if you notice at the bottom, we’re just returning events, we haven’t done anything. We haven’t added any specific headers saying the content type as JSON. We haven’t had to stringify this array into something. We are just returning the natural array that we’re working with, which is events, and H3 underneath the hood is handling that all for us. So this kind of really simplifies everything when you’re writing out your API routes. So from there, if I were to run the application, NPM run dev, I get the dev server up and running. I now have an API route located at /API/events. So if I were to hit that on the command line, I get those two events back. But more importantly, I can go ahead and share that with other people. So now I’ve stood up an API for other people to pull that information, or for other devices, maybe I wanna write a mobile app to pull this information. I now have the ability to kind of create full stack applications right here in NUXT. So what about data fetching? So there are a couple different ways that we can fetch data. There’s a globally available $fetch and underneath the hood, that’s using oh my fetch, and it just gives us the ability. It’s a preferred way in NUXT 3 to kind of call out to your data. And so we can say fetch/API/events and then use that right here in our template. There are also some composables that we saw earlier. Things like UseFetch, UseAsyncData, UseLazyAsyncData, et cetera. So there are different ways you can go out and grab that data if you need to. And I just wanted to show a different example. So that was a get one before we’re looking at a post example, the important thing to take here is we have this form, somebody’s putting in their email address. Homer’s gonna be really mad at me at the HTML that I’m using, so I’m sorry Homer. But I wanted to keep it on one little screen here. So you submit that newsletter, your email address, a function calls that using that fetch method again, but now we can add the method of post on there. The important thing I wanna talk about here is when we’re defining this API route, we can take in, use that defined event handler, and you’ll see there’s a composable there called UseBody. So what that UseBody is, is taking that request, so the event has a request in there, and that composable now allows you to kind of use the information from the request body. So I can go down and say, if body.email doesn’t equal blank, then go ahead and persist to a database. There’s also a throw create error. So that’s built in a NUXT as well, allows me to go ahead and throw an error on the service side. So there’s a whole bunch of really great composables within H3 for doing different things. So we saw UseBody, we may want to use a cookie, we may wanna set a cookie. There’s things for using the query, sending redirects, sending errors, a whole bunch of things built into H3. And that instead of having to kind of attach things to the request and the response, they decided to go ahead and make those available as composables and I really like that approach. Okay. So next up is NUXT modules. So what is a module? NUXT exposes a powerful API called NUXT modules. And this is a really a great way to add a whole bunch of configuration and projects on top of NUXT without having to manually kind of do it yourself. So if you go out and look at the NUXT module’s website, there’s a way to kind of filter by NUXT 3. And at the time I took this screenshot a few days ago, there were 25 modules available. So some of the big ones like VueUse and Tailwind and Content, which we’ll talk about in a second, are already there. But this is one of the big things, is getting these modules ready for V3. So excited to see kind of where that goes. To install a NUXT module, all you gotta do is NPM install, the module name, and then inside of your NUXT config you’ll will define it in the modules array. So here, we’re just saying install Tailwind and include it in the module section, and you’re ready to go. There’s no more kind of manually setting up Tailwind. It’s already there for you, you can use it in your components. So one of the big ones that I was looking forward to, and really kind of waiting on was this content module. And what this allows you to do is it’s called content made easy for developers. And so what we can do is we can create a content folder in our project. And then inside of there we can create data files, whether it’s a markdown, CSV, JSON, whatever. And this is what I currently do on my website for both my blog and my newsletter. It’s a really great workflow. So I’ll create a markdown file with some file name. So I have one that’s called Spring-4-GraphQL.markdown and that is the alias of the blog post. So I’ll just write in markdown, I’ll end up committing this to get, somewhere down the build pipeline that will get built and pushed out. And so I think this is a really great workflow, especially for writing, uniting thing, newsletter, blog posts, documentation, et cetera. You can also use components in markdowns. This is really cool. This is one of the things that I was looking for. Maybe halfway down a blog post, you wanna say hey, here’s some type of component to say sign up for my newsletter. So you don’t have to repeat that over and over again. So being able to use components in markdown is really cool. This is Content version two just came out probably a week ago, maybe a little over a week ago. So how do you install it? Again on new projects you can go ahead and init something called the content app. And then using that -t for template, you can say content and you get this really nice starter that gives you some examples of how you could build out content in your application. If you wanna add to an existing project, you can. And just like any other module, I’m gonna go ahead and declare it in that module’s array. If you wanna display content, I have a script set up here where I’m using async data to grab a list of all the articles, but they have this really nice feature. So I’m querying the content under my blog folder. And I maybe I have a whole bunch of data within that blog post, but all I really want for my display purposes is a title, a description, and a path. So I could say, just give me those fields. So I need all of that information sent back to the browser. And then you can just go ahead and, you know, iterate over it with the V4, like you would anything else. There’s also a bunch of components for content. So one of 'em is content doc. So based on the route, it will go ahead and display all the information in that content. So for this example, again, there’s a Spring-4-GraphQL.markdown doc. If we went to local host 3000 blogs spring for GraphQL, it’s gonna pick up that route. And that knows what it needs to go ahead and display using that content doc component. All right, so finally deploying with NUXT 3. As my friend and coworker Josh Long says, production is the greatest place on the internet. And because if we can’t get something out there, then you know, what are we doing here? I often think that’s Josh as buzz and I’m Woody. And he’s explaining to me how great production is, and I have to agree with him. So in one case, probably a little hard to read, I’m sorry, but if I ran NPN run build, we basically hit a build to an output folder under server. And this is using the default preset, which is node server. And so from there, if you wanted to test something locally in the output folder, you can just run node and give it that output server directory. So that’s one way. One thing that I’m really excited about is static hosting. It’s not fully baked in yet. It’s mostly working, I think. But you can run NPM run generate. And what if that will do is generate actual static files in the output public folder. So now those are just files that you can take and put on any static hosting like AWS, or our friends at Nullify, I’m a big fan of Nullify. And you know, so there are supported hosting providers. Some of these are zero configs, so things like Nullify, if you go ahead and create a get repository, set that up in Nullify, and you commit to that, you don’t have to do any configuration. It will notice that, it will figure out exactly what it needs to do. And all you gotta do is commit your code to GitHub and you are up and running in production. So I took these two last slides from Sebastian from Vue Amsterdam, so thank you for that. He kinda highlighted what’s coming next to NUXT 3. So NUXT Image is another one that I’m kind of waiting on. So if you use images in any of your content, that’s gonna help you get really good, lazy loading and things like that outta that. Full static site generation. You know, again, I write content on a blog. I wanna just generate static pages of those and serve those to my users as fast as possible. There’s a hybrid rendering mode, a preview mode, which looks really cool, server sessions in auth, Service Workers, and SEO helpers and IT8N support. Now, not all of these are needed to move to NUXT 3.0, but some of these are, and I know these are the ones that they’re working on next. I saw NUXT 3.0 is plan for summer of '22, 2022. And I hope someone on the NUXT team appreciates my very clever use of emojis there. And so with that, that’s all I have. Thank you.