Welcome to Nuxt 3

♪♪ Hello, everyone. Today I'm excited to talk about Nux3 and its journey. It has been a long development process. There has been so much going on and so many improvements in Fragments.

Today I'm going to do my best to explain what we have done with the team for almost two years now. So let's talk about the journey and first come into Nux3. We start from scratch in July 2020. We decide to go with TypeScript for the rewrites. And obviously, as most of you are using Webpack with Nux2, we put a lot of effort to add Webpack 5 support.

In September we start to create the most famous features in Nux, which is the page routing, which is based on the Fire System. In October, we also worked a lot to get view-free support with the bundle renderer. Moving forward with November and Nux Nitro, you might have heard about it, and I will explain a little bit more in this talk. In January of this year we start to work on byte support. In February, we make Nitro works on major serverless platform, which is a huge, huge win for us. And by the way, with all this work we have made, we create this new organization on GitHub called NGS, or Universal JavaScripts, in March.

Also in March, we start work on NUXT Kites and NUXT CLI. In May, we decide to use these famous features, the PySystem Routing and Page Optional, that's gonna bring you a new experience to create NUXT projects by creating a Landing Page without any routing support. In June, we start to work on the Layout support. In July, we put MXScript support. In August, the Global Imports, Auto-Global Imports. And in September, we start to work on NUXT Bridge. And we finally get, last month, the support for these build and production. That means, in more than 400 days, and more than 300 pull requests, and about 700 commitments and 200 issues, we have updated a lot about NUXT Bridge and its vision. In addition to that, we created over 40 repositories on a new organization called NGS.

NUXT Bridge comes with a new engine called NUXT Nitro. Let's start with NUXT Nitro because that's what we bring NUXT to the future. Let's first of all talk about the output. The output directory is super important for us and we want to highly optimize this directory because that brings a lot of capacity to NUXT. This output is by default cross-platform. That's mean you can host it on nodes like you do for NUXT, but also on dno and workers like you can have on cluster and workers, for example.

We made a huge improvement on the call start performance and like you used to do on NUXT for the client-side routes, we get the API routes right now with automatic replacements, but also an isomorphic fetch. So, the highly optimized output is a key for us because right now when you want to create a modern website, you need to have multiple performances and packages.

We track dependencies for Node.js. We also do the code splitting, but on the server bundle. That means that the server bundle size now is under one megabyte and brings us to a call start, which is 75 to 100 faster than before. So, the cross-platform output brings us to another level, not only on Node.js environments, we are also marking Node.js packages for Workhorse reports. We get an ultra lightweight qualifying Node.js built-in. By default, because we like optimization, we get an auto-detection platform. We are able to render right now your Node.js website on browser-service worker. It's still experimental, but we're counting on you and the community to improve this innovation.

With this innovation, right now, you can deploy the Nuxt projects everywhere. That means we are targeting the serverless-based and the hybrid renderers on the JAMstack. So that's... was a huge work we've made since two years on the server part of Nuxt, which is Nuxt Nitro. But it's not only for Nuxt 2. It's also for Nuxt 3. It's also for Nuxt 2. And all these Nuxt 3 improvements, we want to bring it to our current users that are using Nuxt 2 to have a better transition for the future. And that's this package called Nuxt Bridge. You see the bridge between Vue 2 and Nuxt 2 obviously, and Vue 3 and Nuxt 3. So Nuxt Bridge, we obviously bring with it its Nitro engine to enhance your performances and get the serverless support. That's means right now, you can start to upgrade your projects to go with Nuxt 3 and Vue 3. In Nuxt Bridge, you also get the XMAS supports, ESM supports, with no more module.export on the same task. We got a built-in Type-C support by default and the brand new Nuxt 3 competition API with an import box. Thanks to the manual, we get also the great byte performances inside Nuxt Bridge, so you don't need to stick with Webpack or Bits. You can simply toggle which one you want to pick up for your projects. So to recap with Nuxt 3, it's gonna be lighter. Nuxt 3 will provide up to five times smaller modern client bundle and 100 times smaller deployment bundle. It's going to be faster obviously with an optimized code starts with dynamic server-side rendering cost splitting. In Nuxt 2, you used to choose between server-side rendering or static site generation.

But with Nuxt Bridge and Nuxt3, you will go hybrid. Hybrid means you're gonna have an incremental static generation and more capabilities. Future brings with great innovation and one of them is a suspense. Suspense fetches data not only in page components but in every components. That's bring more flexibilities and more capabilities to your project.

Vue 3 comes also with a composition API which is a great experience and improvement to reuse these features and functionality inside your projects. We go also with brand new Nuxt CLI to improve the scan folding and bootstrap your next projects. We want also to improve our developer experience and we work hardly to give you a Nuxt dev tool and bring you better experience to work faster with better error message infos and quick views right into your browser. Nuxt Kit, I mentioned it, everyone loves the modular of Nuxt and this modular ecosystem that brings your projects to another level by being able to connect to any API or services. Nuxt Kit gives you the power to transition between Nuxt too and Nuxt Read with ease.

As I mentioned, we're gonna support Webpack 5, which is faster than before and really optimized. And as a convention for us, you don't need to configure it at all. We're gonna also support Bytes, which is still in early stage for us in beta but we believe in the work made by Evan and want to move forward in this direction. Obviously, as everyone was waiting for us, we support Vue 3. And as I mentioned, at the very beginning, Nuxt 3 is rewritten in TypeScript so we can have the TypeScript by default support. So that was a huge work on Nuxt 3. But in the meantime, we continue to work on Nuxt 2 and we didn't abandon it. We're going to continue to work on it because we don't give up. So on Nuxt 2, we have made over 23 release, closed a thousand of issues, and merged a lot of pre-requests. We bring also some innovation, like faster status generation. The Nuxt image modules and Nuxt image based on ideas is a great innovation. We can see a lot of example right now, but I recommend you to move to Nuxt image if you don't have it yet, and I cannot mention all the innovation and all the release made by some great contributors we get in our community, and I want to take time to thank all of you for your contribution.

Nuxt mission. Our mission is super simple. We want to help you to create a project and work with your team faster and better. We know that front-end development can be hard sometimes, and you get a lot to learn, lots of tools, and it cannot be better than working as a team and a community to move the web forward. And right now, because of that, we have reached over 1.7 million downloads monthly in September over 38K stars on GitHub. And this stat is tricky. But for what we can track on the internet we get over 200K live website activity. And our websites get over 500K unique visitors every month.

Thank you so much. And for this occasion, we have also worked on the brand new websites. This is expensive, isn't it? This website is bring by NextLab, the company behind Next, but it is working hard to push forward with more than website creation. It has been made with a brand new technology called Docus, but no spoiler. I just recommend you to check out our GitHub repository on github.com. I'm Alexander Chopin, COO at NextLab and co-founder of Next. You can follow me on Twitter at IamNext. And if you want more information about our company and what we are working on, I recommend you to go on a brand new website on NextLab. You can see our project and some story about why we create Next, how it will impact your development, but also some new projects we have created, like View Telescope, which is a tool for the view community that help you to probe the web and list all the web site made with view and its technology, like Viewtify, Quasar Framework, NextGIS. And don't hesitate to discover DOCUS, a brand new technology that helps us to migrate our new web sites. You can find, obviously, these web sites on our GitHub organization, It's open source because we love open source. Thank you for your attention.

Awesome, thank you for your talk, Alex. And before we get to the Q&A part, let's have a look at the answers to the question that you asked our attendees. The question was, what kind of projects are you building with Nuxt.js? It seems like people are using Nuxt.js to build, well, just about everything. Are you surprised at all? Not at all, but this question seems useless now. So that's a very positive thing, right? Awesome.

Let's have a look at some of the questions that people asked. Someone asks, I haven't used Nuxt yet, but I'm curious. Can Nuxt3 help us build apps faster and simpler? I'm guessing you're going to say yes compared to the previous version. And how about the learning curve? Obviously I need to remind you that Nuxt3 is not stable yet. So if you want to start a project, I recommend you to start with Nuxt2. Obviously because Nuxt3 is still in the data. And you will be able to migrate to Nuxt3 when this will be stable. And then you need at least to know Nuxt3 if you want to use Nuxt for free. And that's the same for Nuxt2. You need to know Nuxt2. And that's the only requirement you need to have.

So if people want to learn or get started with it, where should they get started? With the documentation? Do you suggest any self-based learning places? Documentation is always the best place. That's the source of truth. And actually we are updating the documentation every day because the framework is moving fast forward. But you can also check some of the nice videos from our ambassadors on YouTube, like Tim Dennings, Debbie O'Brien, Alex Wichter, and Ogorz. And Josh. Yeah, that's the best place to find information right now. We want also to create videos when Nuxt is really going to be stable. Awesome. Another question is, does it make sense to use Nuxt.js for building a social network website? Yes, that makes sense. A social network is a huge modern website. That's maybe the best use case for modern websites. Facebook creates React for that. And that's a good example. Yeah, essentially, you can go with it.

Another question, what do you mean by fetching data before and after navigation? I'm not sure I understand that. I'm pretty sure you mentioned something in your talk. Maybe that's what this organized chaos, that's the nickname of this SMB, is referring to. During the talk, I think I was mentioning that we are fetching data before rendering the page and the HTML components, but you can also disable it and act like you do with you, and so you get the data after the rendering, like a normal HPA with clients. I would love to hear from organized chaos, if that answers that question.

All right. Next question. When should NUX be used? I use Quasar, and it provides SSR. That's Karon asking this question. So, can you repeat the question, please? When should NUX be used? I use Quasar. I don't know if I'm pronouncing this right. I hope I have it right. Yeah, that was the question. That was cool. So, you can use it for web application or for more than website. Quasar is a great solution also for, especially when you want to do mobile developments. That's us, our field. We don't play this game. And we are focused on web application and more than website development. Awesome.

What is the DOCUS project goal compared to NUX.js? So, that's the following software at the top of NUX. NUX is powerful to create web application on top of Vue. But still, there is a lot of great tools to create modern websites. And we want to package it in a new project, new software. Which is pretty much NUX plus plenty of cool features. Like the content modules, the anthomanization, and plenty of other stuff. And a cool admin panel, and these great DOCUS. And our websites are made with this software, which is going to be open source really soon. As you can imagine, with the next free release, we went pretty busy on Next. So, we are patching Next, and when DOCS is going to be ready to be opened, it's going to be open source too.

Very cool. Another question by W.D. Becker. Some of these user names are really interesting to decipher. Do you have a recommended setup for debugging a Next project in VS Code, using resources I find on the internet? I still have debug issues with source maps in VS Code, namely breakpoints not in the right place.

Ok. I don't have any recommendation for VS Code. But I recommend you to ask the question on our Discord channel or GitHub Discussion. And people with the same problem as you or the same stack can recommend to answer. That makes a lot of sense.

Another question is, why do you recommend starting a new project in Nuxt 2 and then migrating to Nuxt 3? Because, as you can see on the V3 documentation, not all the features are implemented in Nuxt 3. So you might need some features that already exist in Nuxt 2, but you don't have on Nuxt 3. For example, you can imagine, as static site generation, we don't have it implemented yet on Nuxt 3. It's going to come soon, but it's not already ready to be used in production. So that's why I recommend to use Nuxt 2, if you want to start a business or something very stable, just to be sure that nothing's going to be broken in two months, in terms of date. I can imagine a lot of people are worried about migrating, because it takes time, and it's tedious sometimes, right? We can't wait for that, so don't worry, it's going to be super-smooth.

Great. Question from Basch, I'm working on a big project using Nuxt.js. How stable is Nuxt 3? I feel like this is going to be a lot of the questions. How stable is it at the moment, and should I start porting it to the Nuxt 3, or at least lay the foundation for porting? Obviously not stay on Nuxt, but you can start to install Nuxt Bridge, which is the bridge between Nuxt 3 and Nuxt 3, with the features from Nuxt 3 to Nuxt 3. So this is more stable, and then from Nuxt Bridge to Nuxt 3, it's going to be pretty much transparent.

Okay, so in summary, everyone, hold your horses. I love that you're all so excited. Calm down, calm down. It took us a year and a half to create the base and the new foundation. That's for the future, a good future. I think in this competitive market, and two communities, React versus Vue, we need to take our time and be sure that we are not breaking the rook. Sorry. The current software we get is super major. We worked on it since five years, and we want to continue for the next five years.

Awesome. All right. Keep on asking questions about the differences between two and three. Let's grip this one. Will the components be rendered on the front end side if the back end already prepared the DOM elements? Can you repeat the question? I need to repeat the question for myself, honestly. Will the components be rendered on the front end side if the back end already prepared the DOM elements? Maybe you want some components to be rendered only on the front end sides and disable the side rendering for some components? Obviously, yes. It's called client-only on Nuxt 2. You can put your components inside the client-only components and it's going to be rendered only on the client side. I hope it answers the question. I hope so, too, but it's anyone's guess.