▲ Community Session: Nuxt on Vercel
Chapters8
Discusses starting a portfolio or project, how to init quickly, and points to blog posts and open source code for deeper learning.
Nuxt on Vercel demo highlights powerful tooling, community-driven growth, and new features like Nitro, Next Content, and route rules that streamline optimization and hosting.
Summary
Vercel’s community session spotlights how Nuxt integrates with Vercel’s stack, with Sebastian, Daniel, and Hugo sharing real-world usage, templates, and upcoming features. They tout the MCP toolkit and Next content as engines for AI-enabled sites, plus a growing ecosystem of open-source modules and templates. Hugo explains practical tips for optimizing Nuxt workloads on Vercel, emphasizing route rules for selective SSR and incremental static generation. The team teases Next version 5 and Nitro as pathways toward web standards, while stressing forward- and backward-compatibility to keep upgrades painless. They showcase tooling like the Next Agent for getting started, templates on nx.com and nx.dev, and online admin panels for feedback and content streaming. The conversation keeps returning to community: Discord, GitHub, and a thriving ecosystem of 300+ modules and 1,000+ contributors. Eve from Versell Academy adds a React-to-Nuxt translation course, signaling broader access for newcomers. Overall, the session blends hands-on demos, roadmaps, and community-driven momentum that makes Nuxt on Versel feel approachable and future-focused.
Key Takeaways
- Route rules in Next enable granular optimization by pattern-matching routes to selectively disable SSR or apply ISR, helping teams tune performance with simple config lines.
- Next content and MDX-like components underpin a runtime markdown system with streaming and autoclosing, enabling AI-assisted page generation that can power landing pages using a built-in u component.
- The Next Agent provides templates and guided setup to kick off Nuxt projects quickly, with recommendations available directly in the documentation and on nx.com/nuxi.
- Nitro version 3 and Next 5 are highlighted as critical upgrades that bring closer alignment with web standards and broader runtime flexibility (bun, dino, node), with a focus on keeping upgrades painless and backwards compatible when possible for production teams.
Who Is This For?
Developers and teams already using Nuxt or evaluating Nuxt on Vercel who want actionable build/hosting tips, roadmap context, and community resources. This session is especially valuable for those interested in performance optimization, AI-assisted content tools, and seamless upgrade paths.
Notable Quotes
""Never tried Nux before. Might might be worth a try now.""
—A candid invitation for newcomers to explore Nuxt with Vercel.
""Community is the best bit... open source is about people""
—Emphasizes the community-driven nature of the project.
""We want people not to be afraid of those upgrades""
—Daniel's point on keeping major upgrades painless and well-documented.
""Nitro moves us towards web standards""
—Sebastian framing Nitro as a standard-driven evolution.
Questions This Video Answers
- how do route rules help optimize Nuxt pages on Vercel
- what is Next Content and how does it work with Nuxt
- how can I start with Nuxt on Vercel using templates and the Next Agent
- what are the benefits of Nitro v3 for Nuxt apps on Vercel
- how to upgrade Nuxt versions safely without breaking changes
Nuxt on VercelNext AgentMCP toolkitNext ContentNitroRoute RulesIncremental Static RegenerationAI-assisted contentMDX-like markdown with componentsNPMX on Vercel
Full Transcript
And if I want a portfolio for example, maybe not really important to say using this, but yeah, you have directly what you want and then you can init quickly uh your project. So yeah, that's it I think for the agent right now. I don't know if uh we have more idea. Um well, you can mention the blog post where we u Oh yeah, we have everything in detail to explain how it was implemented. Um as well as the source code is open source. So if you want to deep dive into how we created the next agent on the website, what components we use in order for for being on the side uh to show the thinking uh everything under the hood and if you want to contribute to add a more feature to it.
Um this is I think the where you can start learning from it. I mean, and this isn't the only thing either, right? Because um Hugo built the MCP toolkit, um which enables any Knox website to also be a KN uh to be an MCP server and and be integrated into uh into any AI that that supports it. Um and nux.com has really become like the the focus for a lot of of things. You would never believe that it's it's this AP it has this API. So, it's our modules API that powers the KN dev tools.
It has MCP servers, like a lot of them, um, which you can connect to from your Knox app, from your your AI agent, and now it has inbuilt chat. I mean, someone needs to stop Hugo. Uh, he is he is just too good. Thank you. Something that that he he did. Um, I'll try to share my my whole screen. um that I find quite impressive. I don't know if you if you're now seeing my screen. Yeah. Um it's this admin. So, I'm sorry you guys won't be able to to connect to this admin, but we do have this widget on the website when you can uh give your feedback and that's actually quite useful in order to for us to to be to know what are the pages to focus more over time.
uh is it improving? And he recently pushed the MCP admin where uh we plugged into our conversation and I'm not mistaken here. I could ask um go on the next admin MCP and tell me the uh poorest page of feedback how to improve it and this way will normally if I configure it properly is called but that's the admin uh Yeah, that's what I guessed. I think I need to use the uh Z agent called the next admin MCP and tell me about the poorest page feedback and how to improve it. Finger crossed this one is the good one.
should be. Yeah. Then it's telling us that this page has uh average score. We only had three feedback, but this way we able to understand uh some uh leads how to improve this page. It's probably because it's only a week of feedback. Uh you can ask for more. Yeah, exactly. And something else we've been working on, you mentioned next content. So next content is our base CMS where we uh have all of our documentation in able to use component within markdown. In the past months, we've been working on a project named We extracted the core of content in order to be able to use to open it and collaborate with the Zkit team as well as the next team for having this markdown with components as runtime.
And while we're talking about AI, um this project also supports streaming and autoc closing. So we have uh ongoing feature uh happening here. Uh this made this is the worst. uh being able to say generate me a very beautiful page about let's say basketball shoes and we can uh right now the AI is basically streaming pure markdown but by leveraging uh and teaching AI to use this syntax it can start generating landing pages using this u component under the hood. So this is very early uh stage progress but this is uh quite promising and we want to we are working to open it to everyone in V1 in the next weeks and that's on the uh the current progress for Markdown and yeah I think that's maybe uh Daniel may have some progress he wants to share or let's just see that he left the the call.
Oh, he's back right on time. is back. Hello, welcome. You know, I just like to keep you on your toes. So yeah, I was I was talking about Comark and Nex content uh I mean Nexon V4 and then I was like Daniel may have something to to mention and then I figured out you were out on the call. Well um yeah. Um so I think one of the very interesting I I don't know if it's is it how many people are listening to this? Are we allowed to spill some secrets about things that we're thinking of working on?
Give the people what they want. Okay. Like don't tell don't tell anyone, right? It's just between us and us the the the very close friends who are listening right now. Um it's the treat for being Exactly. Um we're we're we're talking about how to improve KNX. So, Knox for a very long time has been this uh and this overlaps a little bit with what Sebastian says, but I'd like Knox for the a very long long time has been um a solution for SEO. So, people have uh been to to use Nux and get great search engine results just out of the box.
In fact, I think for quite some time, Nux was top of the search results for Nex.js. That that that is right. Uh, Sebastian, you remember that as well, right? People would search for for Next and Next would be be top of the list. And it's no longer true. We we absolutely do not rank for for next anymore. Um, but we're thinking about what we can do uh with stuff like Next content to mean that Next is the best or is is a phenomenal platform for answer engine optimization. So, uh what what you do when people are actually searching for information about your product or whatever, but they might be using um uh some other other thing like an agent or maybe they're using a smart speaker or something like that.
Um how do they get information about your your site? And there's a lot of things we have planned on that. I'm not driving that project just to be clear, but within the team we are. I I don't want to spill too many secrets, but um that is something that's worth worth mentioning maybe um when it comes to thinking about some cool new stuff that that might be happening on the next content end of things. Yeah, if you uh if you look on the recent P request on nux.com repo or the uh NXUI documentation, Benjamin and has been pushing more uh AEO optimization.
So basically if an agent is trying to crawl the next documentation if we detect it with the accept header except waiting for text mod then we are serving the mdon pages directly same if we detect the user agent we also doing it for all the pages we're trying to add the JSON LD so more content for agent to to understand uh what they are crawling to give them to reduce the the context window also by giving them the content directly and so far we experimenting and we are thinking of what features could be part of the core or either our core module.
But for this before refactoring and trying to think of something agnostic we need to first experiment it ourself and yeah and see how the community adopt it and if it actually makes sense because we it's evolving so fast. We've been talking about LLM.txt txt MCP now it's about accepting Morgan as a header how is it going to be in in two weeks um so we don't want to push feature directly in the core if we need to duplicate them uh one month later so we're going step by step on this but experimenting every time we can I think one of the things I love about next and I mean we talked about the modules ecosystem and the fact that uh it is possible to extend it.
It means it's possible to build things like this that don't make it into the core and they don't need to make like they can be an experiment. They can be something that people use in production, they use on their websites and we can really get feedback um not just conceptual feedback or feedback on an RFC but actually practical feedback on uh real world projects or real world use cases um before we we need to you know u make make the decision about whether something um becomes a core module or not. I don't see if there is any question in the chat um or live chat.
There is stuff we we could answer or um I I have a question and that I know you've already shared kind of what um the secrets of what you're working on, but is there anything um upcoming that you're particularly excited about next that that you can share? the uh there are a lot of things that I'm excited about, but um I don't want to uh what so one of the things is that we're working on uh getting everything ready for for next version 5. This is something we've been talking about for a while. Um Nitro version 3 um was is the the the main feature that that this brings.
Um, and getting the ecosystem ready for this move is is a big piece of work, but it's something that's really the right direction. So, Nitro moves us towards web standards. So, really really minimal um server uh wrapper that as much as possible defers to native um wherever that that is whether that's bun, dino, node or or whatever. Um, and the I think the the move is going to be something that people immediately feel very happy about. I'm uh version five nightly um locally and it is a real joy to use already even though it's it's it's not not not out there in a in a beta or alpha even.
Nice. And we've had a community comment. Uh someone said they're very excited for V5. Um, and another question as well. Uh, what are your top recommendations/tips on optimizing nuxed workloads on Versel? Hugo, do you want to go first? Like optimizing nooks on vers. Uh, because it like it depends on which way like what do you mean about like like optimization by optimization? like is it like a like for speed, for build, for Yeah, I think there are many ways, but uh yeah, I would I would go at least for the runtime part. Um and I think that's something we're still trying to figure out is how in next we can suggest the user that this page could be cached or either rendered.
Um it's always tricky as we can have components doing data fetching that you can use in pages. You can have uh authentication directly in your old application. So in that way you you don't want to cach or if you start caching pages uh with authentication let's say you have a header and then you display the authenticated user then you want to make sure that you are you pre-rendering a placeholder making sure that you don't have this hydration error because you figured out on the client side that you authenticated. So um I would say that in next we do have this very powerful feature that is also coming from Nitro.
It's called the route rules. So with these route rules, you'll be able to mention part of uh routes using patterns. So you can say this group like let's say I have an admin embedded admin slash admin disable the SSR I don't need it for this part. The slash blog star then you uh you put them as is because we don't push blog posts every seconds. So you can leverage the incremental static generation with basel and with these uh row rules you'll be able to optimize part of your apps with just the lines of config and this this would be my biggest recommendation of uh before pushing to production check your road rules.
Awesome. Thanks uh go ahead go ahead. Oh, sorry. One thing that might be um worth checking out is npmx. Uh so npmx if you haven't come across it is a uh it's a replacement for npmjs.com. So it's a a browser for npm the registry. Um and it's uh it's built in and it's hosted on Versel and we've really highly optimized it for performance. So if you're looking for how to optimize something for performance on bossell and you want to look at what some of these things look like in a real world app that we've designed to scale to a lot of page views there are so so many people use it um then check it out.
So you'll see the root rules um in action. You'll see caching. So we use uh we cache uh um with incremental um static generation. So effectively building um and and caching payloads uh when required. We use uh the new feature in next 4.4 which is uh payload cache even for non-p pre-rendered pages which is um to me it's very cool. Um it means you get the benefits of uh fetching data before you even move to a page. So the data that will be required by that page is already fetched by the framework in advance. Um and that means makes for a really really fast um experience.
Uh and there are lots more things um there that that you might be able to to spot and and maybe try out on your website. Amazing. Thank you. Um and we've also had a comment um someone said never tried Nux before. Might might be worth a try now. Um, so we've got some um, next curious folks in the audience. Um, for those people, what is the best way for them to get started with the NX? And I know we've already mentioned some AI tooling as well. Um, but yeah, any recommendations there? Um, might take this one.
Uh, right now now we have the next agent, so it can give you like really nice ins about uh, where to start if you want to use a template or start from scratch using the documentation. Um so we have like a lot of template on um nux.com but also on nuxi uh and also we have nux new uh which also some other templates um but yeah might ask directly u to the to the agent now and also on the next documentation you can already open in vis zero also if you want to just chat uh with the project before like taking it to an ID and just start really coding.
I do think often when getting started um I mean I I haven't had any problems getting started from from zero but I like to have at least a minimal project cloned uh personally. Um so I have my own template uh just on GitHub Daniel rownx-site-template um and you can clone that. It's very minimal, but it has things like uh tests, endto-end tests, unit tests, um and things like that that are that are hints to um LLMs that I want to continue building the project in this way. Um and I find things like that, minimal templates are a little bit like seed crystals u for LLMs.
They they point it in the right direction and give the the necessary um direction for it to grow in the way that you probably want. Um, and really you don't need anything special on top of that. Um, although you can add in stuff, but you don't need anything special. Um, you can just get started with with a a template or a basic next um like new project and just say this is what I want to build. And I found LLMs are phenomenal with it. They don't have any issues. Um so the main thing I think is um with any new thing that you're trying build in opportunities to learn and not just have the results right like okay it looks great but do you at that point feel you've tried tried something you've not really tried next like something has been created for you um so if you can build in opportunities to maybe uh ask the LLM give me a tour um teach me um the features of next using what you've built.
Um, stuff like that is really useful because it connects the dots. It one, it's helpful for you as you review the code that's been created and two, you learn like you gain new skills and experience with something. Um, uh, Cat Hick, Dr. Cat Hicks, um, if do look her up on GitHub, she's produced some Claude skills for building and creating learning opportunities with anything that you're doing. little 10-minute exercises in the middle of coding challenges that let you try and internalize some of the stuff that maybe your agent is working with. We have unprecedented access to knowledge that we don't have, right?
To being able to do things that we might not have known how to do six months ago. the the key thing like is how do we keep ourselves continuing to grow and develop as people and building in some of these um these habits and skills and learning breaks is I think a really really important thing if we want to see you know our our brains continue to you know develop that's such a good point um as a fresh uh user as well um And I'm mainly from a spelt background. Um, but I also had my agent kind of map the the concepts from from spelt to next.
Um, so yeah, definitely a plus one on using our agents to help us learn. Just want to add to that. Sorry. That's that is great. And and I think that's I'm sharing uh my my screen again. Um, Nex is truly a progressive uh framework. So we we made sure that you can start the minimal project you you can get started with is with one app dot view file that is your your main shell and then you can progressly add rooting data fetching. Uh we do have this feature uh of autoimp importing which was one of the best improvement in term of developer experience.
Now with the rise of AI um we we are thinking of having you can anyway disable it if you prefer to to have imports directly in your code but this is um really for me the best way to to start with um we also have a so we're running a for on max on different models similar to how the next US team is doing and so far without even uh tricking the agent with skill or agent MD they are quite good at the most of the NX knowledge so far on top of this if you are into MCP I need to double check where we have uh this but I think yeah we do have this uh MCP server that you can add directly into your copy code so yeah is it So that's uh we are uh AI powered but so far uh even without adding the MCP server um agents are quite good so far and yeah what I like to recommend is try with the minimal setup and start adding feature step by step and if you use AI for doing it ask it to to explain why and yeah like Daniel said add this skill to make sure that you you keep your brain active as much as possible.
Here here. Um, so we've got a few more questions to finish up this section. Um, one from the chat. So I'm seeing NX being used a lot in the German e-commerce community. Do you think in general NX is more popular in Europe than in the US or is it kind of balanced/ the other way around? Well, I mean, I'm based in Edinburgh. Uh, Sebastian's based in Porto. Hugo is in London. Uh, Maya, you're you're based in Europe as well. Like, I feel I might be the wrong person to ask whether how popular NX is in the US, but my my feeling is it is more popular um in Europe.
Sometimes that seems to be how it works. React tends to be more popular in North America. view uh was much more popular elsewhere in the world. Um and that seems to be true with NX as well. But we need to change that. We need more people to use NX in in in the US. We need we need a core team member from the the US something like that. I don't know. Nux all over the world. Yes. So next question um from X. With Nux evolving fast from 3 to 4 to 5, what's the best strategy for teams to handle production migration safely, especially with SSR and Nitro changes?
I don't want to. So far, yeah, we don't. Yeah, I'll start. um between Nox 4, Unox 3 and Nox 4, uh like I believe there were almost no breaking changes or there were very well doumented. So you can just copy the page to to your AI and help and ask it to to help you on this and even if you don't use AI, it was quite easy to to migrate. Um and it was only if you were using specific features quite advanced that you could have a breaking chance. So Daniel made sure that the the upgrade was very smooth.
It was harder from two to three uh because we uh we had also this upgrade from view 2 to view 3 that was a um a different framework a different approach on using the composible era and we took the approach to also rewrite the whole server engine so it could work seless environment with performance. So this took a big rewrite. We plan to rewrite next. So the next major are going to be approachable and there is this upward compatibility that we also have built which mean that you can start um upging to V5 or to the new feature coming or the breaking change that that are happening in V5 ahead of time so you can get prepared.
And I let Daniela continue on this. I think that's the the key that's one of the key things I would say is we want to be forwards and backwards compatible. And uh and I think the upgrade to version 4 was three to four. We we very deliberately wanted to make that uh proof that you don't need to be afraid of breaking changes in NX and you don't need to be afraid of majors. um like sometimes it feels like you get stuck on on something like oh we can't we can't release a major and so our plan is to release a new one every year uh at least um and that interestingly seems to be matched with a lot of other projects.
So if you look at node for example their new um release schedule of uh making sure that there are majors every year um ma matches pretty well with us and I think in general the the pattern is um when you use nux you're using it u to build a project like a house um so you your project is uh it's alive it it like a house it needs um new paint it needs touching up um you always want your website to be adopting the best practices of today, not just the best practices when you wrote it.
Um, which is why Knox needs to continue to evolve and make sure that it is it does have um what you need to build a great website. Um, and I think probably in the last uh last few months um we've seen some supply chain attacks on npm. It just reinforces the need to make sure that with all of your dependencies, you stay up to date um and you stay tracking uh the latest um that that you can. Uh and the responsibility for us as package creators and maintainers is to make sure that that upgrade those upgrade steps are as painless as possible.
Um so if you are finding that you are upgrading next and it is painful that is my that's a problem tell me complain to me please because we don't want that to be the case we don't want people to be saying oh how do I upgrade we want people to be saying oh it was a joy you know it took me half a day to do this major upgrade um not two months um so we really want to optimize for that for lots of reasons not just because it's what websites need but it's because E that's what the ecosystem needs.
Um and yeah, we want people not to be afraid of of those upgrades. And if you want to ping Daniel, it's on blue sky and row.dev. You can find me almost everywhere. Almost everywhere. Amazing. Wonderfully said. Thank you. And I want to finish off our questions uh about community. So not long ago, I saw a photo. I think I can't remember what conference it was, but I remember it was one of you speaking and there was an image of a community and and it said something like Nux is about the people. Um, so it seems you have an amazing community.
Uh, tell us about them. Uh, where can we get involved? Um, contribute, etc. Tell us more. I think Daniel is frozen. Yeah, it was Daniel talk at V Amsterdam, I think. Um, and yeah, I don't I would say that if you want to join us, we have the Discord server who is very active and we uh we share many many news on this. We have the uh GitHub anyway the the issues on GitHub, the Po Quest, this is where also the code is being written. This is where ideas are implemented, shared. If you want to help us, there are many things where you can uh either help on the issues, give ideas, um share your experience, share your demos.
We also have the Twitter account, nux_gs. We have a blue sky account. We're using the nux.com. Uh I think we have a master account, a LinkedIn showcase page if you're into LinkedIn. Uh we don't have an Instagram page neither Soundcloud but uh you the Discord is also a nice place to hang out if you want to question just chat with us we we're there also and uh yeah that's I think uh the whole people we share but also other modules creator yeah like you don't need to contribute directly to the core and I think that's one of the beauty of Nex is you can start with a template that you want to share and you can start with a module because you you built a feature uh by creating a module and you can share with the whole community.
I think we have more than 300 maintain module for the current version of Nex. So with more than 1,000 contributors so please u please come and hang out with us. You're going to enjoy it. Let's go. Amazing. I think Danielle you I can't hear you. but he said we have a Soundcloud, I think. Great one. Yes, all the platforms. let's see. I think he'd have something good to to add on the community side. Yeah, maybe he's cooking up the first track for the SoundCloud. secret project. Am I Am I Am I back? Um I just want to say that community and I'm glad you brought it up.
I think community is the best best bit. Um about even um and I think the I mean I think community is what open source is all about because community is like open source is me taking something or not me but any one of us taking something and saying to someone else, hey, what do you think about this? Do you like it? Do you want to get do you want do you want to help make it better? And so and that community is is is what makes open source worthwhile. It's why we do it. It's what it's the whole point.
I very strongly believe that contributing MD is more important than agents.mmd. I would rather have zero agents and lots of people than the other way around. Like the thing that makes it worthwhile is the fact that there are people that I care about who are part of a project. Um and honestly that's been true I think of not just NX but the Vue community for example has been very much like that. Um but yes it's all about the community and um it is always wonderful to see new people join and start to to contribute to become part of it.
Um and that includes just coming and asking for help as well. I should say that's how I got involved. Um coming and and pestering people in Discord to find answers to my questions. I love it. so much. So, yay for humans. Yay for community. Um yeah, you can just ship things and share it with the world. Um we'd love to see it. Um so yeah, um we'll wrap up with you guys. Um I'm so inspired at the rate and the quality of the things that you're shipping. So super excited for the Nux journey um and what you're shipping next.
So yeah, thank you so much to you guys, to the rest of the Nux team, Nux maintainers, contributors, and of course the Nux community. So yeah, thank you Sebastian, Daniel, and Hugo for joining us today. Thank you. Thanks. Bye. And audience, one more thing. Don't go anywhere. I want to bring on Eve from the Vasel Academy. Hello Maya. Hello, Eve. Welcome back. Thank you so much. I love to see you. This is the most fun part of my month is launching a course and doing very little, hearing everybody talk and that team is so full of goats.
Like, holy. Absolutely. Absolutely. So good. Um, but yeah, you are a goat included. Um, and I'd love to I'd love to hear more about uh what your what you've cooked with the uh new course. Yeah. So we are super excited to launch today a new course. My screen is shared there. Nucks on Versel. It is a course for folks who are used to working in a React world. And this kind of provides that translation layer between React and Nux projects. So if you are signing on to a new job or if you're working on a side project and you're like, I really want to use this but I don't know where to get started.
This is the way. Um, of course the agents will help you get there, too, and you should use all of those tools, but this helped you build a project. We built a hot hotring finder app so that you can find your favorite hikes and hot springs. And yeah, so check it out. There's lots of new courses coming on Versell Academy, too. Little pitch, but this one is the newest. Amazing. Thank you so much, Eve. um for the audience, Eve has the best courses and um she really um embraces the build to learn. Um so yeah, definitely go check it out.
We'll add a link as well so uh to make it easy for you. I'm excited to go through this myself and build more with Nu. So yeah, thank you so much for joining us today. Okay, thank you. We are at the end of our community session. Thank you so much to our community for spending time with us. We hope you enjoyed it and if you want to join us for future community sessions then you can find all the details on our community platform at community.bsellar.com/live. We've also got lots of events upcoming and in the works.
So check out our events page and our meetups page for those online and in your area. Um and lastly fresh off the press um tickets have dropped for Versail Ship. Um that will be held in locations across the world. So yes, super exciting. Make sure to go check out versell.com/shipip and apply for your tickets. And also, it's worth a visit um just for the design and interactions alone. The team really cooks on that one. So, yeah, that's all from me. Thank you so much, everyone. Have a good day. Bye.
More from Vercel
Get daily recaps from
Vercel
AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.



