Vue.js Live Conference

Vue.js London 2023

<p>Learn how to build a Vue application deployed to the edge to bring a blazing fast experience to your end users.</p>

Nuxt on the Edge

Hello everyone, I'm very glad to be here. I won't have so much time so I will dive directly. I'm going to talk about Nuxt to the edge and what it means. I'm Atinux, also known as Sebastian Chopin, which is my real name. I am CEO at Nuxt Labs and we do a lot of things such as consulting and audits. It's also good if you want to migrate from Nuxt 2 to Nuxt 3. We also developed Volta, which is a project management built on top of GitHub and helped us develop Nuxt 3 and make it a stable version. And recently, Nuxt Studio is using Nuxt and Nuxt content with live edition. Nuxt is a web framework to create full stack view application. So the question you asked to Daniel about the full stack experience is definitely on our roadmap, but we had to stabilize the framework, make it a good framework for front-end development before diving into the full stack experience. We also have many features. In case you don't know Nuxt, we have server-side rendering, client-side rendering, static site generation, edge-side rendering, hooks system, file system router, auto-import if you're lazy like me, data fetching, middleware, plugins, layouts, transitions, server API, TypeScript, state management. We have a default state management, but obviously you can use Pinya of UX. We have the island component, which is experimental, but very promising regarding the server components. The layer system. I don't know if some of you have used layers internally. Few people. Basically, it's a Nuxt app that you can push on NPM and you can extend. We have preprocessor for stylus, SAS, the module ecosystem, SEO testing, processes, and many other features that I won't show you today. The edge, who already deployed to the edge? One, two, okay. Five people out of 10 people. It's a limited environment and it's running on CDN nodes. It's been pushed by Cloudflare workers a few years ago. And basically, when you deploy your code, it's replicated on the network. Here it's Cloudflare network and there are about 200 nodes. It renders quickly your code and it's very cheap to host. It runs in milliseconds from your end user whenever they are in the world. You have zero-minus-second call starts, no server to maintain. It's scaled automatically and it's affordable compared to, it's not a scam, but the serverless Lambda, which can cost you a lot of money. Here we're talking about 50 cents per million of requests and they have a free tier for 100,000 requests per month. But Cloudflare worker is not the only one. Today we have Dino deploy, Legon.app, which is open source as well. I highly recommend you to check out Vercel edge function based on Cloudflare, Netlify edge function, edge.io, Stackpath, and many more are coming. But it has a limitation. It's different than node and browser. It's mostly using the V8 engine to analyze your JavaScript code. Like six years ago, you could not use window on node and you cannot use the file system in the browser. When you were working on plugins, it was a hard experience. But today people are more used to create universal JavaScript plugins. It's similar for the edge runtime. You have more limitation, but you have more advantage. It's a trade off. And right now the total size is limited to five megabytes. But thanks to Nitro and Nuxt, we mock and polyfill most of the node and browser environment we can do for production with an AMP, part of the NGS community. And we produce and optimize output, like I say, about three megabytes for the total vendor. We also see database coming to the edge based mostly on replicas and HTTP proxy. Escalate from Cloudflare D1 and the recent one, Torso. Postgre with neon. Vercel Postgre is based on neon. You have Superbase, even though they offer more than just Postgre. MySQL with planet scale. Harper DB for hybrid approach. KV with upstash based on radius and Cloudflare key value storage. And I'm going to deep dive because we don't have too much time. Trying to make a live demo for you. It's not as impressive as making Nuxt live. I'm jealous of Daniel. What I've done is I have a simple Nuxt 3 project. Can everyone see the screen or should I zoom? And I have Nuxt space layer, which is basically an NPM package. And it's a simple Nuxt application. So I added some utilities such as user session and some server utilities I can use on my routes. And it provides me a SQLite database in development. And I can use Drizzle to specify tables. So let's enable it. Run the server. What it will do, it will automatically create a table, a Drizzle config, telling me that I can Drizzle kit generate SQLite for my migration. And let's see how it looks like. So what I want to do is I have my page. This is not easy to live code on that. Coffee or tea? I don't know about the English people. If you really prefer tea or coffee. So let's make a small demo with this. CSS is boring. I'm sorry. But I will have votes coffee. That's not coffee. But that will work. And we'll have tea here. Two buttons. Let's make it like this. I usually code faster. Don't worry. And let's make our button a bit nicer. P4. Border. Rounded. If you think it can be nicer, don't hesitate to shout. A tailwind class on stage. Okay. But in order to vote, I will need people to log in. Because I don't want anyone to vote easily. So what I'm going to do is first have my vote function. Thank you. My choice. This is Copilot, by the way. Otherwise I don't know how to code. I'm going to create my votes table. So in order to do this, I'm exporting votes table. Let's name it votes. It has an ID, which is an integer. I need to give the column name, which is similar. And primary key. Then what I want to have is the user ID. It's also an integer. No. Integer. User ID. And it's not null. Next I will need the user name. Not null as well. And the final choice. Which is also a text. Not null. One thing I want to precise on my table is I can only vote once. So for this, I'm going to create an index. So I'm getting this vote table here. And I can return my indexes. So user ID index. I should have this unique index here. It's a bit boring. I'm sorry about this. But we are getting close. And on votes.userID. That's nice. So let's create an API route. If you use this Nuxtl extension, you can create a new API route directly. Let's call it vote.get. By adding this.get suffix, I'm only limiting to the get request. So I should be able to return useDB. And I have access to select. So Nuxt space layer will automatically add me this table object. And I can see my vote table, which is typed. I will order by this tables.vote.id. Because I want the last one first. And return all. I will need to import this. I will find a way to import this. But not right now. Like I say, I'm lazy. So I'm going to use the Nuxt dev tools. We have a... I don't know if you have seen. Server route tab. So if I click here, it's similar to Postman. And I can directly call my API. So it says no data found. So what I need to do is every time I change server DB table, I need to run this query. So it created the migration. Restarting my server. And I can get the votes. Nice. But I still need to be able to vote. So I'm going to create a POST request. Let's make it async. I'm getting the body at first. Wait with body. Let's get the choice. Like this. Body or empty. And let's make some verification. Because I don't know here if everyone will play the game by just clicking or making API request. Yeah. I saw you. So if it doesn't include return. So in Nitro, we have this H3. H3 is the HTTP server we have under the hood. Which is blazing fast. And we have everything that is auto imported. Thanks to TypeScript, we can have everything. But choice choose between coffee or tea. So let's make our POST request now. Body. Send it. Choice tea. Okay. It works. What we want to have now is authentication. So in order to add authentication, I'm going to create an out.get request. And for this, I will say GitHub user. It's a magic method. In order to work, this comes from the layer. I simply need to create an OAuth application and add this environment variable. And then I can send back my GitHub user. GitHub user like this. Going back to Vue, the most interesting part. I can say use user session. Inside I will have a logged in and user and clear. So clear is a method to remove the logout of the users. What I can do is here. Hmm. All right. No. No. Come on. So if I'm logged in, I will say welcome user.login. Because it's an object from GitHub. And I will have a button that's clear. Let's make it underline to log out the user. Otherwise, let's call API slash out. Login with GitHub to vote. Some CSS. Okay. So what happens now when I click on API out? I'm still on slash API slash out. I've been redirected from GitHub. I have the code here. Five minutes. All right. So it's disturbing. Going back to the out route, what I want to have if this is from the library. But if I don't have any GitHub user, it means I've been redirected to GitHub. The first time I hit that route, then it redirects me to this route. I have my GitHub user. I'm going to set the user session. By giving the GitHub user. And return send redirect to the home page. Obviously, if I refresh. But verification code. I don't mind. Let's try again on this. Login. Then I do have my user. If I take a look at my application, the value of the cookie is actually sealed, encrypted. And this is why we do have this environment variable to unseal the session on the server side. But it actually has everything I set inside this object. So what I need to do here is I want to make sure that it cannot vote if it's not authenticated. So I can get the session by making require user session. And now what I want is actually saving the vote in my database. So const vote usedb.insert table vote.value. So I get user ID, which is my session.user.ID. Username session.user.login. And the choice. I want it to return the object when inserting the row and getting back to me. Then I can send back the vote. Let's see how it looks like. Choice. Coffee. Okay. If I try to save it again, I'm getting this unique constraint error because it cannot save of this unique index. I need to use this on conflict to update. So the target is actually the user ID. And I want to set the choice. Let's try again. It doesn't create any new entry, but it's updating my information on the table, on the entry, and I can have my list of votes. That looks all right for the API side. Let's list the vote now. So I'm getting the vote refresh from useFetch. I'm going to use useFetch because when you do server-side rendering and you want to get the data from a page, useFetch will do it during the server-side, store the data in the payload. So during hydration, we don't make any API call, but directly get it from the payload injected in the HTML, saving one HTTP request. So here, let's display our vote. Yeah. That did the work. By user name. I prefer emoji, though. I do have my vote. So now what I want to do is to vote. We did it with the dev tools. So what I'm going to do here, I don't need to useFetch because it's an action which is done on client-side. I can call vote. It's a post request and the body, I don't need to JSON stringify because dollar fetch will do it for me. And once it's done, I will simply refresh. I will make the API call again, update this reactive value. And it's now reactive. What I want before pushing my demo is to have the total of votes because otherwise it's quite useless. I will first have the user choice. Let's say it works. User ID. ID. Total. Thank you. And total. Let's display the vote. Total coffee. And lastly, because I'm picky, I will just display the total. I would like to have BG. To give a nice user experience. So you know what you have selected without looking at the activity. Does that work? Class user choice. User ID. Yeah. One minute. Let's say it's fine for this. Unmounted. Let's pretend we have a socket connection but not like this. Set interval. Normally you should keep the interval, clear it when you unmount. But let's say I don't have time right now. Push time. So on the Cloudflare, I linked this GitHub account that I just pushed right now. It's going to deploy. On my settings, I created a D1 database that I linked here. I don't have any tables right now. So what I can do is use the console. Go in my migration. Take this first statement. Later I think of a way to automate this. But so far that's the only way. Migration or obtain anyway. So it's not that bad to do it manually. So I have my vote table. Going back to that deployment. Potentially I can keep that during the Q&A. Don't know about the time. What I can do is show you another demo I've done using Cloudflare KV. The code is open source as well. You can edit this page. It will automatically save on Cloudflare KV. And if you refresh, it automatically have the data. And also have fun to generate this OG image if you change the title. Using RLAN data. We have another demo using Todoist. Upload complete. Refresh. If you want to try to vote, you can go to view-london.pages.dev. View-london.pages.dev. I will also try to vote. Because I'm in London, I will say T. And let's see if some people have time to vote. Yes, it's working. And we can have in our database the votes from you guys. So thank you very much. They have backup, Cloudflare have backup and more. But so far, the demo is here. It's open source. I also have other demos that I will link in the readme. And thank you very much. That was impressive. Wow. Oh my gosh. I thought I could like it, but you took it to a whole other level. I still got it. So many cool questions as well coming in. But the first one is about NUX. You work on NUX. How does the roadmap to a full stack NUX 3 look like? How close is it currently? Is it something you're spending a lot of time working on? I see that smile. Well, I've been experimenting for months now. I want to find a way that the full stack experience will be edge first. So you won't have to manage anything. Like when you static generate, you don't have to worry. I want something that can work on any environment. And I have to think of the full stack experience, even though if you are statically generating your app. So, but I will say end of the year, we may have something promising. Nice. One thing also I find, at least for me personally as a developer, is developers are as good as like are good and then their tools make them even better. The way you were using Copilot was so impressive as well, just the way it was helping you. Are you a big fan of Copilot? This is another question that came in. It's quite useful, I have to say. Maybe because I repeated the demo five times, I got some of what I was trying to do. But it saves you time. It doesn't replace you, but it saves you time. So I do like it. That's a smart thing, actually. Do the demo a couple of times, train it a bit on what you want and then... No, no. It wasn't the first time. Nice. Awesome. We've got another question that comes in. Any plans for anything like Next server actions? I created an RFC on Next, I think it was 2019, about server functions. I'm still in between. I see the advantage of server component. We do have data fetching on the component parts. It has to be carefully crafted. So far you can make API routes in Next, even though when you do server side rendering, we directly call that function instead of making an API request. I'd have to play and see what the best developer experience before shipping stuff like this. Nice, nice. And think back, because you've been working on Next for a while now. So thinking back to when you started and your vision for Next, how has that changed since you started working on it? It's hard to answer, honestly. When you're inside the framework and you're answering the issues, it's another mindset that when you're actually using it. So I'm trying to do both. Getting the user experience, because they can have very good ideas or giving you some new path. And using it is also important, because if you care about developer experience, you have also to taste what the current developer experience is. If you could go back to yourself when you wrote your first line of code for Next and give that version of yourself one piece of advice for the road ahead, what would it have been about the kind of progress and the way Next has changed? I think I won't say anything. A big question. Sorry, I just threw it up on there as well. I'm very happy with the path we have done. We always refactor the code anywhere at one point. I think we made the right mistake in order to fix them later. That's amazing, making the right mistakes as well. And one thing which I was super impressed is SSO in three minutes as well. That was awesome. A big shout out to you as well. And Mick, that whole process of not just going to build, like oftentimes when people do demos, you build a small thing that doesn't really, it's not something that's actually going to work in production at scale, but that was like that. What was that process in terms of especially not just integrating it, but the whole experience of thinking about Next and thinking about all the tools that developers were going to integrate with, like SSO? I'm kind of ad-libbing on this question here, but how did you go about thinking about that developer experience and adding to it? I'm not sure I understood the question. So my question was, you made it very, very easy to integrate SSO with GitHub and we saw you do that. And is that something that has been intentional and by design and something that you aim to have in Nuxt and all the tools that support Nuxt as well? Well, Auth is not that hard in a way to integrate, but we still don't have an official solution in Nuxt 3 so far. And that's why I'm planning to do the integration myself because it can be a nightmare to have a basic Auth system. So I want to first give the utilities so you can have the freedom to create your own API routes how you want, but keep using the utilities that save you time. It's a long process and I think that's why we still don't have an official Auth solution. Testing, making an application and refactoring, I think is the key for good developer experience. Awesome. Thank you so much for your time. We really appreciate you. Apparently, one of the questions right now is who broke the app. So I think you're going to grab your computer and see if you can fix it. But everyone give a one more massive round of applause. Sebastian, thank you so much.
