▲ Community Session: Nuxt on Vercel

VVercel
컴퓨터/소프트웨어자격증/평생교육AI/미래기술

Transcript

00:00:00And if I want a portfolio, for example, maybe not really important to say using this, but
00:00:13yeah, you have directly what you want and then you can edit quickly your project.
00:00:29So yeah, that's it, I think for the agents right now, I don't know if we have more idea.
00:00:38You can mention the blog posts where we have everything in detail to explain how it was
00:00:45implemented as well as the source code is open source.
00:00:49If you want to deep dive into how we created the next agent on the website, what components
00:00:55we use in order for being on the side to show the thinking, everything under the hood and
00:01:02if you want to contribute to add a more feature to it, this is I think where you can start
00:01:08learning from it.
00:01:11And this isn't the only thing either, right?
00:01:13Because Hugo built the MCP toolkit, which enables any Nuxt website to also be a Nuxt, to be an
00:01:22MCP server and be integrated into any AI that supports it.
00:01:30And Nuxt.com has really become like the focus for a lot of things.
00:01:35You would never believe that it has this API.
00:01:39So it's our modules API that powers the Nuxt dev tools.
00:01:42It has MCP servers, like a lot of them, which you can connect to from your Nuxt app, from
00:01:48your, your AI agent, and now it has been built with chat.
00:01:53I mean, someone needs to stop Hugo.
00:01:55He is, he is just too good.
00:01:59Thank you.
00:02:03Something that he did, um, I'll try to share my, my whole screen, um, that I find quite
00:02:10impressive.
00:02:11I don't know if you, if you're now seeing my screen.
00:02:15Yeah.
00:02:16Um, it's this admin, so I'm sorry you guys won't be able to connect to this admin, but
00:02:22we do have this widget on the website when you can, uh, give your feedback.
00:02:27And that's actually quite useful in order for us to be, to know what are the pages to focus
00:02:32on over time, uh, is it improving?
00:02:37And he recently pushed the MCP admin where, uh, we plugged into our conversation and not
00:02:47mistaken here.
00:02:50I could ask, um, go on the Nuxt admin MCP and tell me the, uh, forward page and more feedback
00:03:04or to improve it.
00:03:09And this way we'll normally, if I configure it properly, it should call, but that's the
00:03:16admin, uh, yeah.
00:03:23That's what I guessed.
00:03:24I think I need to use the agent called the Nuxt admin MCP and tell me about the poorest
00:03:35page feedback and how to improve it.
00:03:42Maybe across this one is the good one should be, yeah.
00:03:56Then it's telling us that this page has, uh, average score.
00:04:00We only had three feedback, but this way we're able to understand, uh, some, uh, leads how
00:04:07to improve this page.
00:04:09It's probably because it's only a week of feedback.
00:04:12We can ask for more.
00:04:14Yeah, exactly.
00:04:17And something else we've been working on, uh, you mentioned Nuxt contents and Nuxt contents
00:04:21is our base CMS where we, uh, have all of our documentation in DOM and we're able to use
00:04:29a component within Markdown.
00:04:32In the past months, we've been working on a project named Comark.
00:04:36So we extracted the core of the contents in order to be able to use, uh, to open it and
00:04:44collaborate with the Zvetki team as well as the Nuxt team for having this Markdown with
00:04:50components as run time.
00:04:53And while we're talking about AI, um, this project also supports streaming and auto closing.
00:05:00So we have, uh, ongoing feature, uh, happening here, uh, this made, this is the worst, uh,
00:05:10being able to say, generate me on the page about, uh, let's say basketball shoes.
00:05:20And we can, uh, right now the AI is basically streaming pure Markdown, but by leveraging
00:05:26and teaching the AI to use this syntax, it can start generating, uh, landing pages, uh,
00:05:33using these, uh, components under the hood.
00:05:37So this is very early, uh, stage progress, but this is, uh, quite promising and we want
00:05:44to, uh, we're working to open it to everyone in the V1 in the next weeks.
00:05:51And that's on the, uh, the current progress of Markdown.
00:05:56And yeah, I think that's maybe, uh, Daniel may have some progress he wants to share.
00:06:01Or I just see that he left.
00:06:03Oh, he's back.
00:06:04Right on time.
00:06:05He's back.
00:06:06Hello.
00:06:07Welcome.
00:06:08You know, I just like to keep you on your toes.
00:06:17Uh, yeah, I was talking about comark and next content, uh, I mean, next content before, and
00:06:28then I was like, Daniel may have something to mention.
00:06:30And then, uh, I figured out what you were after the call.
00:06:35Well, um, yeah.
00:06:37Um, so I think, uh, one of the very interesting, I don't know if it's, is it, how many people
00:06:44are listening to this?
00:06:45How do you spell some secrets about things that we're thinking of working on?
00:06:52Give the people what they want, don't tell, don't tell anyone, right?
00:06:57It's just between us and the very close friends who are listening right now, um, we're talking
00:07:12about how to improve our knocks.
00:07:14So not for a very long time has been this, uh, and by this overlaps a little bit with
00:07:19that special side, but like next to the, a very long, long time has been, um, a solution
00:07:25for SEO.
00:07:26So people have, uh, been to, to use next and get great search engine results just out of
00:07:33the box.
00:07:34In fact, I think for quite some time, next was top of the search results for next JS,
00:07:42but that is right, uh, Sebastian, you remember that as well, right?
00:07:46People would search for, for next and next would be top of the list and it's no longer
00:07:50true.
00:07:51We absolutely do not rank the next anymore.
00:07:53Um, but we're thinking about what we can do with stuff like next content to mean that next
00:07:59is the best, uh, is, is a phenomenal platform for onset engine optimization.
00:08:05So what you do when people are actually searching for information about your product or whatever,
00:08:10that they might be using, um, uh, some other, other things like an agent, or maybe they're
00:08:16using a smart speaker or something like that.
00:08:19Um, how do they get information about your, your site?
00:08:22And there's a lot of things we have planned on that.
00:08:24I'm not driving that project just to be clear, but within the team we are, and I don't want
00:08:28to spell too many secrets, but that is something that's worth mentioning maybe, um, when it
00:08:33comes to thinking about some cool new stuff that, that might be happening on the next content
00:08:37end of things.
00:08:38Yeah.
00:08:39Thank you.
00:08:40If you, uh, if you look on the recent Peru quest on a Nuxt.com, uh, repo or the, uh, Nuxt
00:08:47UI documentation, Benjamin and Hugo has been pushing more, uh, uh, AEO, uh, optimizations.
00:08:53So basically if an agent is trying to, uh, crawl the Nuxt documentation, if we detect
00:09:00it with the accept header, except waiting for text modern, then we are serving the modern
00:09:06pages directly, same if we detect the user agent, we also, uh, doing it for all the pages,
00:09:13we're trying to add the JSON-LD, so more content for agents to, uh, to understand, uh, what
00:09:19they are crawling, to give them, to reduce the context window also, like in giving them
00:09:24the content directly.
00:09:26And so far we are experimenting and we are thinking of what features could be part of
00:09:31the core or either our core module, uh, but for these, before refactoring and trying to
00:09:36think of something agnostic, we need to first, uh, experiment it ourself, um, and yeah, and
00:09:42see how the community, uh, adopted and if it actually makes sense because we are, it's evolving
00:09:48so fast.
00:09:49We've been talking about LLMs.txt, MCP, now it's about accepting a markdown as a header.
00:09:56How is it going to be in, uh, in two weeks?
00:09:58Um, so we don't want to push feature directly in the core if we need to deprecate them, uh,
00:10:06once later.
00:10:07So we're going step by step on this, but experimenting every time we can.
00:10:16I think one of the things I love about Nuxt, and I mean, we talked about the modules ecosystem
00:10:21and the fact that, uh, it is possible to extend it.
00:10:24It means it's possible to build things like this that don't make it into the core and they
00:10:28don't need to make, like they can be an experiment.
00:10:31They can be something that people use in production, they use on their websites and we can really
00:10:35get feedback, um, not just conceptual feedback or feedback on an RFC, but actually practical
00:10:42feedback on, uh, real world projects or real world use cases.
00:10:46Um, before we need to, you know, um, make, make the decision about whether something becomes
00:10:53a core module or not.
00:10:56I don't see if there is any question in the chat, um, on live chat, the rest of we, we
00:11:07could answer or.
00:11:08Um, I, I have a question and that I know you've already shared kind of what, um, the secrets
00:11:15of what you're working on, but is there anything, um, upcoming that you're particularly excited
00:11:20about next that you hand share?
00:11:32There are a lot of things that I'm excited about, but, um, I don't want to, uh, uh, what,
00:11:40so one of the things is that we're working on getting everything ready for the next version
00:11:44five.
00:11:45This is something we've been talking about for a while.
00:11:47Um, nitro version three, um, was, is the main feature that, that this brings, um, and getting
00:11:55the ecosystem ready for this move is a big piece of work, but it's something that's really
00:12:01the right direction.
00:12:02So nitro moves us towards web standards.
00:12:05So really, really minimal, um, server, uh, rapper that as much as possible to first native,
00:12:12um, wherever that, that is, whether that's bond, Dino node or, or whatever.
00:12:18Um, and the, I think the, the move is going to be something that people immediately feel
00:12:24very happy about, uh, version five nightly, um, locally.
00:12:31And it is a real joy to use already, even though it's, it's, it's not, not, not out there in
00:12:36a, in a beta or alpha even.
00:12:38Nice.
00:12:39I know we've had a community comment, uh, someone said they're very excited for V5.
00:12:45Um, and another question as well, uh, what are your top recommendations slash tips on
00:12:50optimizing Nuxt workloads on Versailles?
00:12:53Hugo do you want to go first, like optimizing Nuxt on Versailles, uh, because it's like,
00:13:07it depends on which way, like, what do you mean about like, like optimization, like optimization,
00:13:14like, is it like for speed, for build, for running?
00:13:19Yeah, I think there are many ways, but, uh, yeah, I will, I will go at least for the runtime
00:13:28part.
00:13:29Um, and I think that's something we're still trying to figure out is how in Nuxt we can
00:13:36suggest the user that this page could be cached or either rendered, um, it's always tricky
00:13:44as we can have, uh, components, uh, doing data fetching that you can use in pages.
00:13:49You can have, uh, authentication directly in your old application.
00:13:53So in that way, you, you don't want to cache, or if you start caching pages, uh, with the
00:13:58authentication, let's say you have a header and then you display the authenticated user.
00:14:03Then you want to make sure that you are, uh, you're pre-rendering a placeholder, making
00:14:09sure that you don't have this hydration error because you figured out on the client side
00:14:13that you authenticated.
00:14:14So, um, I would say that in Nuxt, we do have this very powerful feature that is also coming
00:14:21from Nitro.
00:14:22It's called the route rules.
00:14:24So with these route rules, you'll be able to mention part of, uh, routes using patterns.
00:14:29So you can say this group, like let's say I have an admin, embedded admin, slash admin,
00:14:35uh, disable the SSR.
00:14:37I don't need it for this part, uh, the slash blog, a star star, uh, then you, uh, you put
00:14:45them as ISR, uh, because we don't use blog posts every, uh, seconds.
00:14:50So you can leverage the incremental static, uh, generation in version.
00:14:55With these, uh, route rules, you'd be able to optimize part of your apps with just the
00:15:01lines of config.
00:15:03And this, this would be my biggest recommendation of, uh, before pushing onto production.
00:15:10Check your route rules.
00:15:12Awesome.
00:15:13Thanks.
00:15:14One thing that, uh, go ahead.
00:15:18Oh, sorry.
00:15:20One thing that might be worth checking out is NPMX.
00:15:23So NPMX, if you haven't come across, it is a, uh, it's a replacement for npmjs.com.
00:15:30So it's a browser for NPM, the registry, um, and it's, uh, it's built in Nuxt and it's hosted
00:15:36on Vercel and we've really highly optimized it for performance.
00:15:42So if you're looking for how to optimize something for performance on Vercel, and you want to
00:15:45look at what some of these things look like in a real world app that we've designed to
00:15:49scale to a lot of page views, there are so many people use it, um, then check it out.
00:15:58So you'll see the route rules, um, in action, you'll see caching.
00:16:01So we use, uh, we cache, uh, um, with incremental, um, static generation.
00:16:09So effectively building, um, and caching payloads, uh, when required we use, uh, the new feature
00:16:17in Nuxt 4.4, which is a payload cache, even for non pre-rendered pages, which is, um, to
00:16:27me, it's very cool.
00:16:28Um, it means you get the benefits of, uh, fetching data before you even move to a page.
00:16:34So the data that will be required by that page is already fetched by the framework in advance.
00:16:39Um, and that means makes for a really, really fast, um, experience.
00:16:45And there are lots more things, um, that you might be able to spot and maybe try out on
00:16:52your website.
00:16:53Amazing.
00:16:54Thank you.
00:16:55Um, and we've also had a comment, um, someone said, never tried Nuxt before, might be worth
00:17:03the try now.
00:17:04Um, so we've got some, um, Nuxt curious folks in the audience, um, for those people, what
00:17:09is the best way for them to get started with the Nuxt?
00:17:12I know we've already mentioned some AI tooling as well, um, but yeah, any recommendations
00:17:16there?
00:17:17Um, I think this one, uh, right now, now we have the Nuxt agents, so it can give you like
00:17:24really nice hints about, uh, where to start if you want to use a template or stuff from
00:17:29scratch using the documentation.
00:17:31Um, so we have like a lot of template on, um, Nuxt.com, but also on Nuxt UI, uh, and also
00:17:39we have Nuxt.new, uh, which also some other templates, um, but yeah, might ask directly,
00:17:48um, to the, to the agent now.
00:17:51Um, also on the Nuxt UI documentation, you can already open in v0 also, if you want to
00:17:57just chat, uh, with the project before like taking it to an ID and just start really coding.
00:18:08I do think often when getting started, um, I mean, I haven't had any problems getting
00:18:12started from, from zero, but I like to have at least a minimal project cloned, uh, personally.
00:18:17Um, so I have my own template, uh, just on GitHub, Daniel Rose slash Nuxt dash site dash
00:18:23template.
00:18:24Um, and you can clone that.
00:18:25It's very minimal, but it has things like, uh, tests and tests, unit tests, um, and things
00:18:31like that, that are, that are hints to, um, LLMs that I want to continue building the project
00:18:37in this way.
00:18:38Um, and I find things like that minimal templates are a little bit like seed crystals, uh, for
00:18:44LLMs.
00:18:45They, they point it in the right direction and give the necessary, um, direction for it
00:18:50to grow in the way that you probably want.
00:18:52Um, and really you don't need anything special on top of that.
00:18:56Um, although you can add in stuff, but you don't need anything special.
00:19:01Um, you can just get started with, with a template or a basic Nuxt, um, new project and just say,
00:19:09this is what I want to build.
00:19:10And I found LLMs are phenomenal with it.
00:19:12They don't have any issues.
00:19:14Um, so the main thing I think is, um, with any new thing that you're trying, build an
00:19:19opportunities to learn and not just have the results, right?
00:19:24Like, okay, it looks great, but how do you at that point feel you've tried, tried something
00:19:29you've not really tried Nuxt, like something has been created for you.
00:19:33Um, so if you can build in opportunities to maybe, uh, ask the LLM, give me a tour, um,
00:19:40teach me, um, the features of Nuxt using what you've built.
00:19:45Um, stuff like that is really useful because it connects the dots at one it's helpful for
00:19:49you as you review the code that's been created.
00:19:51And two, you learn like you gain new skills and experience with something.
00:19:56Um, uh, Cat Hick, Dr. Cat Hicks, um, do look her up on GitHub.
00:20:02She's produced some Claude skills for building and creating learning opportunities with anything
00:20:07that you're doing little 10 minute exercises in the middle of coding challenges that let
00:20:12you try and internalize some of the stuff that maybe your agent is working with.
00:20:17We have unprecedented access to knowledge that we don't have right to being able to do things
00:20:22that we might not have known how to do six months ago that the key thing is how do we
00:20:29keep ourselves continuing to grow and develop as people and building in some of these, um,
00:20:35these habits and skills and learning breaks is I think a really, really important thing
00:20:41if we want to see, you know, our, our brains continued to, you know, develop
00:20:46That's such a good point. Um, as, uh, as a fresh Nuxt, uh, user as well. Um, and I'm mainly
00:20:56from a Svelte background. Um, but I also had my agent kind of map the, the concepts from,
00:21:02from Svelte to Nuxt. Um, so yeah, definitely a plus one on using our agents to help us learn.
00:21:08Does someone want to add to that? Sorry. That is great. And I think that's, uh, I'm sharing
00:21:17my screen again. Um, Nuxt is truly a progressive, uh, framework. So we, we made sure that you
00:21:26can start the minimal project. You can get started with these, with one app.vue file.
00:21:32That is your, your main shell. And then you can progressively add routing, data fetching.
00:21:40We do have this feature, uh, of auto importing, which was one of the best, uh, improvement
00:21:45in terms of developer experience. And now with the rise of AI, um, we are, we are thinking
00:21:51of having a, you, you can anyway disable it if you prefer to, to have imports directly
00:21:56in your code. Uh, but this is, uh, truly the, for me, the best way to, to start with. Um,
00:22:03we also have EVALS. So we're running EVALS on Nuxt on different models, similar to how
00:22:11the Nuxt is doing. And so far, without even, uh, tricking the agent with a .m skill or agent.md,
00:22:21they are quite good at most of the Nuxt knowledge so far. On top of this, if you, um, are into
00:22:28MCP, I need to double check where we have, uh, these, but I think, yeah, we do have this,
00:22:35uh, MCP server that you can add directly into your JPG code. So yeah. Yeah. So that's, uh,
00:22:49we are AI powered, but so far, uh, even without adding the MCP server, um, agents are quite
00:22:57good so far. And what I like to recommend is try with a minimal setup and start adding feature
00:23:03step-by-step. And if you use AI for doing it, uh, ask it to, uh, to explain why. And,
00:23:10uh, yeah, like Daniel said, uh, at this key to make sure that you, you keep your brain
00:23:16active as much as possible. Here, here. Um, so we've got a few more questions
00:23:25to finish up this section. Um, one from the chat. So I'm seeing Nuxt being used a lot in
00:23:30the German e-commerce community. Do you think in general Nuxt is more popular in Europe than
00:23:36in the US or is it kind of balanced slash the other way round?
00:23:42Well, I mean, I'm based in Edinburgh, uh, Sebastian, Hugo is in London. Uh, Maya you're, you're
00:23:51based in Europe as well. Like I feel I might be the wrong person to ask about whether, uh,
00:23:57how popular Nuxt is in the U S but my, my feeling is it is more popular in Europe. Sometimes
00:24:02that seems to be how it works. React tends to be more popular in North America. View was
00:24:09much more popular elsewhere in the world. Um, and that seems to be true with Nuxt as well,
00:24:15but we need to change that. We need more people to use Nuxt in, in, in the U S we need, we
00:24:19need a core team member from the U S something like that. I don't know.
00:24:25Nuxt all over the world. Yes. So next question, um, from X with Nuxt evolving fast from three
00:24:35to four to five, what's the best strategy for teams to handle production migration safely,
00:24:41especially with SSR and nitro changes.
00:24:50I don't want to, so far we, yeah, we don't know. Uh, I start, um, between Nuxt 4 and Nuxt
00:24:583 and Nuxt 4, uh, like I believe there were almost no breaking changes or they were very
00:25:03well documented. So you can just repeat the page to your AI and help, uh, and ask it to,
00:25:11to help you on this. And even if you don't use AI, it was quite easy to, to migrate. Um,
00:25:17and it was only if you were using specific features, uh, quite advanced that you could
00:25:21have a breaking change. So Tanya made sure that the upgrade was very smooth. It was harder
00:25:27from two to three, uh, because we, uh, we had also this upgrade from Vue 2 to Vue 3 that
00:25:33was a, um, a different framework and a different approach I'm using, whether it's the composable
00:25:40era. Uh, and we took the approach to also, uh, rewrite the whole server engine. So you
00:25:46could work, uh, serverless environment with performance. So these two big rewrites we plan
00:25:53to rewrite next. So the next major or going to be, uh, approachable and there is this,
00:26:01uh, port compatibility that we all have built, which means that you can start, um, uh, aging
00:26:08to V5 or to the new feature coming or the breaking change that is happening in V5 ahead of time.
00:26:15So you can get prepared and let Daniela continue on this.
00:26:22I think that's the key. That's one of the key things I would say is we want to be forwards
00:26:26and backwards compatible. And, uh, and I think the upgrade version four was three to four.
00:26:34We very deliberately wanted to make that proof that you don't need to be afraid of breaking
00:26:39changes and next, and you don't need to be afraid of majors. Um, like sometimes it feels
00:26:45like you get stuck on, on something like, Oh, we can't, we can't release a major. And so
00:26:50our plan is to release a new one every year, uh, at least. Um, and that interestingly seems
00:26:57to be matched with a lot of other projects. So if you look at node, for example, their
00:27:01new, um, release schedule of, uh, making sure that there are majors every year, um, matches
00:27:09pretty well with us. And I think in general, the, the pattern is, um, when you use next,
00:27:15you're using it, uh, to build a project like a house. Um, so your, your project is, uh,
00:27:21it's alive. It, it, it like a house, it needs, um, new paint, it needs touching up. Um, you
00:27:28always want your website to be adopting the best practices of today, not just the best
00:27:33practices when you wrote it, um, which is why Knox needs to continue to evolve and make sure
00:27:38that it is, it does have, um, what you need to build a great website. Um, and I think probably
00:27:46in the last, uh, last few months, um, we've seen some supply chain attacks on NPM. It just
00:27:52reinforces the need to make sure that with all of your dependencies, you stay up to date,
00:27:57um, and you stay tracking, uh, the latest, um, that, that you can, uh, and the responsibility
00:28:03for us as package creators and maintainers is to make sure that that upgrade, those upgrade
00:28:08steps are as painless as possible. Um, so if you are finding that you are upgrading
00:28:14next and it is painful, that is my, that's a problem. Tell me, complain to me please,
00:28:21because we don't want that to be the case. We don't want people to be saying, Oh, how
00:28:25do I upgrade? We want people to be saying, Oh, it's a joy. You know, it took me half a
00:28:29day to do this major upgrade, um, not two months. Um, so we really want to optimize for that
00:28:36for lots of reasons, not just because it's what websites need, but it's because the ecosystem
00:28:42needs. Um, and yeah, we want people not to be afraid of those upgrades.
00:28:47And if you want to ping Daniel, it's on blue sky and row.deb.
00:28:54You can find me almost everywhere. Amazing. Wonderfully said, thank you. And I want to
00:29:01finish off our questions, uh, about community. So, uh, not long ago I saw a photo. I think
00:29:07I can't remember what conference it was, but I remember, uh, it was one of you speaking
00:29:11and there was an image of a community and, and it says something like a nexus about the
00:29:16people. Um, so it seems you have an amazing community. Uh, tell us about them, uh, where
00:29:20can we get involved, um, contribute, et cetera. Tell us more.
00:29:30I think Daniel is frozen. Yeah. It was Daniel Turk at Vue.js, Amsterdam, uh, I think. Um,
00:29:40and yeah, I don't, I would say that if you want to join us, we have the discord server
00:29:47who is very active. And we, uh, we share many, many news on this. We have the, uh, GitHub
00:29:54anyway, the, the issues on GitHub, the pull request is where also the code is being written.
00:30:00This is where IDs are implemented, uh, shared. Um, if you want to help us, there are many
00:30:07things where you can, uh, either help on the issues, give ideas, um, uh, share your experience,
00:30:15share your demos. We also have the Twitter accounts next to us on GS. We have a blue
00:30:20sky account. We're using the next.com. Uh, I think we have a Mastodon account, LinkedIn
00:30:26showcase page. If you're into LinkedIn, uh, we don't have an Instagram page, uh, neither
00:30:31SoundCloud, but, uh, you can, the, the discovery is also a nice place to hang out. If you want
00:30:39to have a question, just chat with us. We are, we're there also. And, uh, yeah, that's, uh,
00:30:46I think, uh, the whole people we share with also all the modules create, or you're like,
00:30:51you don't need to contribute directly to the core. And I think that's one of the beauty
00:30:54of NERSC is you can start with a template that you want to share it, and you can start with
00:31:00a module because you, you built a feature, uh, by creating a module and you can share
00:31:05with the whole community. I think we have more than 300 maintain module for the current version
00:31:10of NERSC. So with more than 1000 contributors. So please, uh, please come and hang out with
00:31:17us. You're going to enjoy it. Yeah. Let's go. Amazing. I think Daniel, you can't hear you.
00:31:27Yeah. But he said we have a SoundCloud, I think. I think he'd have a, something to add on the
00:31:51community side. Yeah. Maybe he's cooking up the first track
00:31:55for the SoundCloud. So I just want to say that community, and I'm glad you brought it up.
00:32:05I think community is the best, best bit, um, about Nuxt even. Um, and I think the, I mean,
00:32:13I think the community is where open source is all about because community is like open
00:32:17source is me taking something or not me, but any one of us taking something and saying to
00:32:21someone else, Hey, what do you think about this? Do you like it? Do you want to get, do
00:32:26you, do you want to help make it better? And so, and that community is, is, is what makes
00:32:32open source worthwhile. It's why we do it. It's what is the whole point. I very strongly
00:32:38believe that contributing.md is more important than the agents.md. I would rather have zero
00:32:44agents and lots of people than the other way around. Like the thing that makes it worthwhile
00:32:50is the fact that there are people that I care about who are part of a project. Um, and honestly,
00:32:56that's been true. I think of not just Nuxt, but the Vue community, for example, has been
00:33:00very much like that. Um, but yes, it's all about the community and, um, it is always wonderful
00:33:06to see new people join and start to contribute, to become part of it. Um, and that includes
00:33:12just coming and asking for help as well. I should say that's how I got involved, um, coming
00:33:18in and pestering people in Discord to find the answers to my questions.
00:33:23Love it so much. But yay for humans, yay for community. Um, yeah, you can just ship things
00:33:28and share it with the world. Um, we love to see it. Um, so yeah, um, we'll wrap up with
00:33:34you guys. Um, I'm so inspired at the rate and the quality of the things that you're shipping,
00:33:40so super excited for the Nuxt journey, um, and what you're shipping next. Um, so yeah,
00:33:45thank you so much to you guys, to the rest of the Nuxt team, Nuxt maintainers, contributors,
00:33:50and of course the Nuxt community. Um, so yeah, thank you, Sebastian, Daniel and Hugo for joining
00:33:55us today.
00:33:56Thank you.
00:33:57Thanks.
00:33:58Bye.
00:33:59And audience, one more thing. Don't go anywhere. I want to bring on Eve from the Versailles
00:34:07Academy.
00:34:08Hello, Maya.
00:34:09Hello, Eve. Welcome back.
00:34:11Thank you so much. I love to see you. This is the most fun part of my month is launching
00:34:18a course and doing very little, hearing everybody talk. And that team is so full of goats, like
00:34:25so good. Um, but yeah, you are a goat included. Um, and I'd love to, I'd love to hear more
00:34:36about, uh, what you're, what you've cooked with the, uh, new course.
00:34:40Yeah. So we are super excited to launch today a new course. My screen is shared there. Nuxt
00:34:48on Versailles. It is a course for folks who are used to working in a React world. And this
00:34:55kind of provides that translation layer between React and Nuxt projects. So if you are signing
00:35:03onto a new job or if you're working on a side project and you're like, I really want to use
00:35:08this, but I don't know where to get started. This is the way, um, of course the agents
00:35:12will help you get there too. And you should use all of those tools, but this helps you
00:35:16build a project. We build a hot, hot spring finder app so that you can find your favorite
00:35:24hikes and hot springs. And yeah, so check it out. There's lots of new courses coming on
00:35:30Versailles Academy to a little pitch, but this one is the newest.
00:35:34Amazing. Thank you so much Eve, um, for the audience. Eve has the best courses and she
00:35:40really embraces the build to learn. Um, so yeah, definitely go check it out. We'll add
00:35:45a link as well. So, uh, to make it easy for you. Uh, I'm excited to go through this myself
00:35:50and build more with Nuxt. So yeah. Thank you so much for joining us today. Thank you. Okay.
00:35:59Thank you. We are at the end of our community session. Thank you so much to our community
00:36:03for spending time with us. We hope you enjoyed it. And if you want to join us for future
00:36:09community sessions, then you can find all the details on our community platform at community.versailles.com/live.
00:36:16We've also got lots of events upcoming and in the works. So check out our events page
00:36:20on our meetups page for those online and in your area. Um, and lastly, fresh off the press,
00:36:26um, tickets have dropped for Versailles ship, um, that will be held in locations across the
00:36:32world. So yes, super exciting. Make sure to go check out verailles.com/ship and apply
00:36:37for your tickets. And also it's worth a visit, um, just for the design and interactions alone.
00:36:43The team really cooks on that one. So yeah, that's all from me. Thank you so much, everyone.
00:36:47Have a good day. Bye.

Key Takeaway

Nuxt is evolving into an AI-integrated framework through features like MCP servers, AI-optimized documentation headers, and the upcoming Nuxt 5 which utilizes Nitro 3 to bring universal web standards to server-side rendering.

Highlights

  • Nuxt 5 is in development with Nitro 3 as its core feature to align the framework with web standards for environments like Bun, Deno, and Node.

  • The Route Rules feature in Nitro allows for granular performance optimization, such as disabling SSR for admin panels or applying Incremental Static Regeneration (ISR) to blog sections.

  • Nuxt 4.4 introduces a payload cache for non-pre-rendered pages, fetching required data automatically before a user navigates to the next page.

  • The team launched a Nuxt on Vercel course on Vercel Academy specifically designed to provide a translation layer for React developers moving to Nuxt.

  • Nuxt documentation now optimizes for AI agents by detecting specific user-agent headers to serve Markdown content and JSON-LD directly.

  • The Comark project extracts the core of Nuxt Content to provide a runtime for Markdown with components, supporting AI-driven streaming and auto-closing features.

Timeline

AI Agents and MCP Integration

  • The Nuxt Agent source code is open source to allow developers to understand the components and thinking process behind AI implementations.
  • The MCP toolkit enables any Nuxt website to function as an MCP server for integration with various AI agents.
  • Nuxt.com uses a modules API to power dev tools and connect AI agents directly to the application infrastructure.

Integration with AI agents involves exposing internal logic and source code so developers can deep dive into the implementation. The Nuxt website serves as a hub for these experiments, utilizing an API that manages modules and connects to multiple MCP servers. This infrastructure allows AI to interact with Nuxt apps in a standardized way.

Feedback Loops and Markdown Evolution

  • A widget on the Nuxt website collects page-specific feedback to identify which documentation areas require improvement based on average scores.
  • The Comark project extracts Nuxt Content features to enable Markdown with components as a runtime for both Svelte and Nuxt teams.
  • AI models can generate full landing pages by streaming pure Markdown that utilizes specific component syntax provided by Comark.

An administrative MCP agent processes feedback data to find pages with the poorest scores, such as those with only a handful of entries over a week. On the content side, Comark represents a collaborative effort to standardize Markdown components. This system supports streaming and auto-closing, allowing AI to build complex UI structures by simply generating the correct Markdown tags.

Agent Experience Optimization (AEO)

  • Nuxt documentation serves Markdown versions of pages when it detects AI agent headers like 'accept: text/markdown'.
  • JSON-LD inclusion reduces context window usage for LLMs by providing direct, structured data during documentation crawling.
  • The module ecosystem allows for experimental AEO features to be tested in production before they are considered for the Nuxt core.

Optimizing for agents involves more than traditional SEO; it requires serving raw data formats that LLMs can process efficiently. By detecting user agents and specific headers, the site can bypass heavy HTML and provide Markdown or JSON-LD. This approach reduces the token cost for agents while the team monitors community adoption to decide on permanent core features.

Nuxt 5 and Nitro 3 Development

  • Nitro 3 acts as a minimal server wrapper that prioritizes native web standards for cross-runtime compatibility.
  • The Nuxt 5 nightly build is currently being tested locally to ensure ecosystem readiness for the major version shift.
  • The transition to version 5 focuses on creating a joy-of-use experience through reduced overhead and improved server performance.

Development of Nuxt 5 centers on Nitro 3, which aims to make the server layer as lightweight as possible. By adhering to web standards, Nuxt becomes more compatible with diverse runtimes like Bun and Deno. The team is currently in an internal testing phase to ensure that when the alpha is released, the upgrade path for existing users is stable.

Performance Tuning and Vercel Optimization

  • Route rules allow developers to toggle SSR, ISR, or caching for specific page patterns within a single configuration file.
  • Nuxt 4.4 features a payload cache that speeds up navigation by pre-fetching data for non-pre-rendered pages.
  • The npmx.com site serves as a real-world reference for highly optimized Nuxt applications running on Vercel.

Optimization starts with the Route Rules, where developers can set pattern-based instructions like disabling SSR for '/admin/**' or setting ISR for '/blog/**'. Using npmx as a case study, the team demonstrates how to scale to high page-view counts using incremental static generation. The recent addition of payload caching further reduces perceived latency by loading page data before the user even clicks a link.

Migration Strategies and Community Growth

  • The Nuxt release schedule targets at least one major version per year to align with the Node.js release cycle.
  • A compatibility layer enables developers to adopt Nuxt 5 features and breaking changes ahead of time while remaining on older versions.
  • The Vercel Academy 'Nuxt on Vercel' course provides a specific learning path for React developers to transition their skills.

To prevent the pain associated with the version 2 to 3 migration, the team now prioritizes forward and backward compatibility. This allows teams to upgrade in stages rather than undergoing months-long rewrites. Supporting this growth is a diverse community and new educational resources, including a hot-spring finder app project that teaches React developers the specific nuances of the Nuxt ecosystem.

Community Posts

View all posts