Learn how to build a Vue application deployed to the edge to bring a blazing fast experience to your end users.
Nuxt on the Edge
AI Generated Video Summary
Nuxt is a web framework with many features including server-side rendering, client-side rendering, static site generation, edge site rendering, and more. The Edge is a limited environment running on CDN nodes, such as Cloudflare network. Database options on the Edge include Postgre with Neon, Versel on Neon, Superbase, MySQL with plan scale, HyperDB, and KV with redis and Cloudflare storage. The speaker demonstrates creating a demo with a votes table, handling API requests, adding authentication, saving votes, and displaying results. The roadmap to a full stack Nuxt 3 with an edge-first experience is in progress. Copilot is a helpful tool for developers. Integrating SSO with GitHub and improving the developer experience are important considerations for Nuxt 3.
1. Introduction to Nuxt and the Edge
Hello, everyone. I'm going to talk about Nuxt to the edge and what it means. Nuxt is a web framework with many features including server-side rendering, client-side rendering, static site generation, edge site rendering, hooks system, file system router, auto-import, data fetching, middleware, plugins, layouts, transitions, server API, TypeScript, state management, the island component, the layer system, preprocessor for stylus and SAS, the module ecosystem, testing, processors, and more. The Edge is a limited environment running on CDN nodes, such as Cloudflare network with about 200 nodes. It's quick, cheap, scalable, and affordable compared to serverless Lambda. Another option is dnodeploy.legon.app, which is open source.
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 at Inoox, also known as Sebastian Chopin, which is my real name. I am CEO at Nuxt Labs, and we do meet 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 site 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 PNU 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. A 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, as you have heard, testing, processors 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 miniseconds from your end user whenever they are in the world. You have zero minisecond call starts, no server to maintain, it's scale 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 dnodeploy.legon.app, which is open source as well.
2. Introduction to Edge Functions
3. Database and Live Demo
The total size is limited to 5 megabytes, but with Nitro and Next, we can mock and polyfill most of the Node and browser environment for production with AMP. Database options on the Edge include Postgre with Neon, Versel on Neon, Superbase, MySQL with plan scale, HyperDB, and KV with redis and Cloudflare storage. A live demo will be shown using a simple Next 3 project with a Next space layer, utilities, and an SQLite database. The Drizzle tool will be used to specify tables.
And right now, the total size is limited to 5 megabytes. But thanks to Nitro and Next, we mock and polyfill and most of the Node and browser environment we can do for production with AMP, part of the NGS community. And we produce an optimized output, like I say, about 3 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. Versel on Neon, Superbase, even though they offer more than just Postgre. MySQL with plan scale, HyperDB for hybrid approach, KV with redis and Cloudflare storage.
I'm going to deep dive because we don't have too much time. I'm trying to make a live demo for you. It's not as impressive as making Next live. I'm jealous of Daniel. What I've done is I have a simple Next 3 project. Can everyone see the screen or should I zoom? Okay. And I have a Next space layer, which is basically an NPM package. And it's a simple Next application. So, I added some utilities such as user session. And some server utilities I can use on my routes. And it provides me an 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 from a 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. So, coffee or tea. I don't know if you really prefer tea or coffee.
4. Creating Demo and Votes Table
Let's make a small demo with this. CSS is boring. But in order to vote, I will need people to log in. I'm going to create my votes table. It has an ID and a user ID.
Let's make a small demo with this. CSS is boring. I'm sorry. But I would have vote coffee. Coffee. That's not coffee. But that would work. And we'll have tea here. Two button. Let's make it like this. I usually code faster. Don't worry. And let's make our button a bit nicer. P4 border. If you think it can be nicer, don't hesitate to shout.
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 with 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.
5. Creating Vote Table and API Route
User ID, user name, and final choice are required fields. An index is created to ensure each user can only vote once. An API route called vote.get is created to handle GET requests and retrieve the vote table data. The table is ordered by vote ID in descending order. Next Dev Tools will be used for development.
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.user ID. That's nice.
So let's create an API route. If you use this nexter 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 use DB. And I have access to select. So next space layer will automatically admin 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 Next Dev Tools.
6. Creating Post Request and Making API Call
We have a route tab similar to Postman where we can directly call the API. To update the server DB table, we need to run a query. After creating the migration and starting the server, we can retrieve the votes. Now, let's create a post request to enable voting. We get the body and choice, and perform verification. Nitro provides a blazing fast HTTP server with auto-imported features. Let's make the post request now.
We have a I don't know if you have seen several 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 you created the migration, we're starting 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. Read 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 clicking or making API requests. 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. Bad choice. Choose between coffee or tea. So, let's make our post request now. Body.
7. Adding Authentication and User Session
To add authentication, create an out.get request and use the magic method to retrieve the GitHub user. In Vue, use the user session to handle logged in users and provide a log out button. If logged in, display a welcome message with the user's login. Otherwise, call the API to log in with GitHub.
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. Endpoint. And for this, I will say user, equal await. It's a magic method. In order to work, this comes from the layer. I simply need to create an application and add this environment variable in my dot auth. 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. Clear is a method to log out the users. What I can do is here. All right. Now. Now, come on. So, if I'm logged in, I will say welcome user dot 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. Log in with GitHub to out.
8. Handling API Out and Saving Votes
When clicking on API out, the user is redirected from GitHub and the user session is set. The vote is then saved in the database, and an error occurs if the vote is not unique.
Some CSS. Okay. So, what happen 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 is 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. I don't mind. Let's try again on this. Log in. Then I do have my user. If I take a look at my application, the value of the cookie is actually saved and created, 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 requireUserSession, and now what I want is actually saving the vote in my database. So, const vote useDB.insert tableVote.value. So, I get user ID which is my session.user.id. So, user ID, user name, session.user.login, and the choice. I want it to return the object when inserting the row and getting back to me. And then I can send back the vote. Let's see how it looked like. Coffee. Okay. If I try to save it again, I'm getting this unique constraint error because it cannot save this unique index.
9. Updating Votes and Displaying Results
I need to use onConflict to update the target user ID's choice. After updating, I can list the vote using useFetch for server-side rendering. To vote, I can call the post request directly on the client side. After refreshing, the vote count is updated and reactive. Before pushing the demo, I will include the total votes and the user's choice.
I need to use this onConflict 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'll do the work. I prefer emoji though. Emoji. Okay. I do have my votes.
So now what I want to do is to vote. We did it with the DevTools. I don't need to use fetch 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. Once 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. Otherwise, it's quite useless. I will first have the user choice. Let's say it works.
10. Displaying User ID and Database Setup
User ID, total, and user choice are displayed. PG is used for a better user experience. On mounted, a socket connection is simulated. The GitHub account is linked to Cloudflare for deployment. A D1 database is created and linked. The console is used for migrations.
User ID. Const total. Total T. Let's display them here. Total coffee. Total tea.
Okay. And lastly, because I'm picky, I would like to have PG 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 choice. Yeah. One minute. Let's say it's fine for this. On mounted. 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 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.
11. Cloudflare KV Demo and Voting
I have my vote table. Going back to the deployment. I can show you another demo using Cloudflare KV. The code is open source. You can edit this page and it will automatically save on Cloudflare KV. If you want to try to vote, you can go to View-London.pages.dev. I will also try to vote. Let's see if some people have time to vote. We can have the votes from you guys in our database. Thank you very much.
Take this first statement. Later I think of a way to automate this. But so far, that's the only way. Migration or obtain any way. So, it's not that bad to do it manually.
So, I have my vote table. Going back to the deployment. Potentially I can keep that during the Q&A. I 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'll automatically have the data. And also have fun to generate this image. If you change the title. Using our data, we have another demo using to-dos. Upload complete. Refresh. If you want to try to vote, you can go to View-London.pages.dev.
I will also try to vote. I'm in London, so I will say T. Let's see if some people have time to vote. Yes, it's working. 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. Its open source. I also have other demos that I will link in the read me.
12. Roadmap to Full Stack Nuxt 3
The roadmap to a full stack Nuxt 3 is being worked on, with a focus on an edge-first experience and compatibility with any environment. The goal is to eliminate the need for manual management and provide a seamless full stack experience. The target is to have something promising by the end of the year.
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 another level. So many cool questions as well coming in. But the first one is about nuxt, you work on nuxt. How does the roadmap to a full stack nuxt 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 apps. But I would say, at the end of the year, we may have something promising.
13. Developers and Copilot
Developers are good, and their tools make them even better. Copilot was impressive and helpful. It saves time and doesn't replace you. Demo a couple of times, train on what you want.
Nice. One thing also I found, at least for me personally as a developer, is developers are good, and 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. It 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 a bit on what you want, and then... No, no, it was the first time. Nice, nice.
Next Server Actions and Vision
Any plans for Next Server Actions? I created an RFC on Next in 2019 about server functions. I see the advantage of server components and data-fetching on the component parts. I'd have to play and see the best developer experience before shipping. It's hard to answer how my vision for Next has changed. I try to get user experience and use it myself. I'm happy with the path we've taken and making the right mistakes. The process of integrating SSO was impressive. Thinking about Nuxt and the tools developers integrate with SSO was important.
We've got another question that comes in. Any plans for anything like Next Server Actions? Actually, 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 components. 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 is, 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 kind of when you started and your vision for Next, how has that changed since you started working on it? It's hard to answer, honestly. Obviously, when you... 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 of giving you to some new paths. 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 Nuxt and give that version of yourself one piece of advice for the road ahead? What would it have been about the progress and the way Nuxt has changed? I think I won't say anything. 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 to fix them later. That's amazing. Making the right mistakes as well. And one thing which I was super impressed is SSO in 3 minutes as well. That was awesome. A big shout out to you as well. And that whole process of not just going to build. Like often times when people do demos, you build a small thing that'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 Nuxt and thinking about all the tools that developers are going to integrate with SSO.
Developer Experience and SSO Integration
How did you go about thinking about the developer experience and adding to it? Integrating SSO with GitHub has been made easy, but there is no official solution in Nuxt 3 yet. The speaker plans to do the integration and provide utils for creating custom API routes. Testing, application development, and refactoring are crucial for a good developer experience. Thank you for your time and applause to Sebastian.
I'm kind of like 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. My question was you made it very, very easy to integrate SSO with GitHub. And then 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, it's 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 HOT system. So I want to first give the utils. So you can have the freedom to create your own API routes how you want, but keep using the utils that save you time. It's a long process. And I think that's why we still don't have an official HOT 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 one more massive round of applause to Sebastian.