Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
Transcript
Nuxt 3 Journey
Hello, everyone. Today I'm excited to talk about Nuxt 3 and its journey. It has been a long development process. There have been so much going on and so many improvements to the framework and today, I will 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 the first commit to Nuxt 3. We started from scratch in July 2020. We decided to go with TypeScript for the rewrites. Obviously, as most of you are using Webpack with Nuxt 2, we put a lot of effort to have the Webpack 5 support. In September, we started to create the most famous features in Nuxt, which is the page routing, which is based on the Vite System. In October, we also work a lot to get Vue 3 support with the bundle-renderer. Moving forward, with November and Nuxt Nitro. You might have heard about it, and we expand a little bit more in this talk. January of this year, we started to work on Vite support. In February, we make Nitro works on major serverless platform, which is a huge, huge win for us.
[01:58] And the way, with all this work we have made, we created this new organization on GitHub called UnJS, Universal JavaScript, in March. Also in March, we started work on Nuxt Kits and Nuxt CLI. In May, we decide to put this famous features Vite System on page optional that's going to bring you a new experience to create Nuxt project creating landing page, without any routing support. In June, we start to work on the layout supports. In July, we put MxScript supports. In August, the auto global imports, and September we start to work on Nuxt Bridge. And we finally got last month the support for Vite built in prediction.
That's me in more than 400 days and more about 302 requests and about more 700 commits and 200 issue. We have updates a lot of about Nuxt 3 and it's vision. In addition to that, we create over 40 new repository on the new organization called UnJS.
Nuxt Nitro
[03:42] So Nuxt 3 comes with a new engine called Nuxt Nitro. So let's start with Nuxt Nitro because we bring Nuxt to the future. Let's first of all, talk about the outputs. 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 default cross-platform. That means you can host it on Node like you do for Nuxt 2, but also on Dino and Workers like you can have on Workers, for example. We made a huge improvement on the cold-start performance and like you used to do on Nuxt for the client-side routes, we get the API routes right now with automation replacements, but also an isomorphic fetch.
Highly Optimised Output
[04:45] So the highly optimized output is a key for us because right now, when you want to create modern websites you need to handle 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 1MB and brings us to a cold-starts, which is 75 to 100x faster than before.
Cross Platform Output
[05:21] So the cross-platform outputs bring us to another level, not only on Node.js environments, we auto-mocking, of course, Node.js package for Worker supports. We get ultra lightweight polyfills for Node.js built-ins. By default, because we like optimization, we get auto-detection platform. We are able to render, right now, your Node.js websites on browser service worker. Is still experimental, but we are counting on you as a community to improve this innovation.
Deploy it everywhere
[06:11] With this innovation, right now, you can deploy your Nuxt projects everywhere. That means we are targeting the serverless based and the hybrid rendering on the Jamstack. That was a huge work we made since two years on the server part Nuxt, which is Nuxt Nitro. But it's not only for Nuxt 3, it's also for the Nuxt 2. And all this Nuxt 3 improvements, we want to bring it to our current user that are using Nuxt 2 to have a better transition for the future. And that's this package called Nuxt Bridge.
Nuxt Bridge
[06:59] We see the bridge between Vue 2 and Nuxt 2, obviously, and Vue 3 and Nuxt 3. So Nuxt Bridge will obviously bring with it Nitro engine to enhance your performances and get serverless support. That means, right now you can start to bridge projects to go with Nuxt 3 and Vue 3. In Nuxt Bridge we also got the EcmaScript supports, ESM supports, with no more module.exports on the syntax. We got built-in TypeScript support default and a brand-new Nuxt 3 composition API with auto-imports. Thanks to Evan You, we get also some great Vite performance inside Nuxt Bridge. So you don't need to stick with Webpack or vids, you can simply toggle which one you want to pick up for your project.
Nuxt 3 Advantages
[08:08] So to recap with Nuxt 3, it's going to be lighter. Nuxt 3 will provide up to five times smaller modern client bundle and hundred times smaller deployment bundle.
It's going to be faster, obviously with optimized cold-starts with dynamic server side rendering code-splitting.
In Nuxt 2, you used to choose between server side rendering and static side generation, but with Nuxt Bridge and Nuxt 3, you will go hybrid. Hybrid means you can have incremental static generation and more capabilities.
Vue 3 brings with it great innovation, and one of them is Suspense. Suspense fetch data not only in your page components, but in every component that brings more flexibility and more capabilities to your project right now.
[09:09] Vue 3 comes also with the Composition API, which is a great experience and improvement to reuse these features and functionality inside your projects.
We go also with the brand-new Nuxt CLI to improve the scaffolding and booster up your Nuxt projects.
We want also to improve our developer experience and we work hardly to give you Nuxt Devtools and bring you a better experience to work faster with a better error message, infos and quick fixes right into the browser.
Nuxt Kit, I mention it, everyone loves the modularity of Nuxt and this modular ecosystem. That brings your projects to another level being able to connect to any API or services. Nuxt Kit gives you the power to transition between Nuxt 2 and Nuxt 3 with ease.
[10:25] As I mentioned, we're going to support Webpack 5, which is faster than before and reoptimize and has a convention for us, you don't need to configure it at all.
We're going to also support Vite, which is still in early stage for us in beta that we believe in the work made Evan and want to move forward in this direction.
Obviously, as everyone was waiting for us to support of Vue 3.
And as I mentioned at the very beginning, Nuxt 3 is rewritten in TypeScript. So we can have the TypeScript default supports.
In the meantime on Nuxt 2
[11:13] So that's 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 working on it because we don't give up.
So on Nuxt 2, we have made over 23 releases, closed a thousand of issues and merge a lot of pre-request. We bring also some innovation for you like a faster Static Generation, the Nuxt Image modules, and Nuxt Image based on IPX is a great innovation. You can see a lot of examples right now that 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 releases made some creative contributors we get in our community and I want to take time to thank all of you for your contribution.
Nuxt's Mission
[12:22] Nuxt's 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 frontend development can be hard sometimes, and you get a lot of 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 starts on GitHub and this stats is tricky, but for what's we can track on the internet, we get over 200K live website typically, and our websites get over 500K unique visitor every month. Thank you so much. And for this occasion, we have also worked on the brand new website, it looks fancy isn't? This website is brought NuxtLabs, the company behind Nuxt, but is working hardly to push forward modern 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/nuxt/nuxtjs.org.
[14:14] I'm Alexandre Chopin, COO at NuxtLabs and co-founder of Nuxt.js. You can follow me on Twitter at @IamNuxt. 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 for NuxtLabs. You can see our project and some story about why we created Nuxt, how it will impact your development, but also some new projects we are creating like Vue Telescope. Which is a Vue community, that helps you to crawl the web and list all the websites made with Vue and it's technology. Like Vuetify, Quasar Framework, NuxtJS, obviously. And don't hesitate to discover Docus, the brand new technology that helped us to migrate our new websites. You can find these websites on our GitHub organization. It's Open source, because we love Open source. Thank you for your attention.
Questions
[15:18] Floor Drees: 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 Nuxtjs? It seems like people are using NuxtJS to build well just about everything. Are you surprised at all?
Alexandre Chopin: Not at all. But stupid questions are useless now. But maybe.
Floor Drees: Awesome. So that's a really positive thing, right?
Alexandre Chopin: Yeah.
[15:53] Floor Drees: 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 Nuxt 3 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?"
[16:13] Alexandre Chopin: Okay. So obviously I need to remind, that Nuxt 3 is not stable yet. So if you want to start a project, I recommend you to start with Nuxt 2, obviously, because Nuxt 3 is still in beta and you will be able to migrate to Nuxt 3 when this one will be stable and then you need at least to know Vue 3 if you want to use Nuxt 3. And that's the same for Nuxt 2, you need to know Vue 2. And that's the requirement you need to have.
[16:44] Floor Drees: So if people want to learn or get started with it, where should they get started with the documentation? Do you suggest any sort of self-based learning places?
[16:57] Alexandre Chopin: Documentation is always the best place. That's a sort of truth. And actually we are updating the documentation every day, because the framework is moving fast forward. But you can also check some nice videos from our ambassadors on YouTube, like Tim Benniks, Debbie O'Brien, Alex Lichter and others, Josh and yeah, that's the best place to find information right now and we want also to create videos when Nuxt 3 is going to be stable.
[17:29] Floor Drees: Awesome. Another question is, "Does it make sense to use NuxtJS for building a social network website?"
[17:35] Alexandre Chopin: Yes. That makes sense. Social network is a huge modern website, but maybe the best use case for modern websites, Facebook, tried React for that and that's a good example. And yeah, definitely. You can go with it.
[17:59] Floor Drees: Awesome. Another question, "What do you mean fetching data before and after navigation?"
Alexandre Chopin: I'm not sure to understand that.
Floor Drees: I am pretty sure you mentioned something in your talk and maybe that's what-
Alexandre Chopin: Yeah.
Floor Drees: This organized chaos that's the nickname of this attendee, is referring to.
[18:21] Alexandre Chopin: During the talk, I think I was mentioning that we are fetching data before rendering the page and HTML components, but you can also disable it and act like you do with Vue and it's differ and so you get the data after the rendering, like normal SPA with client rendering.
[18:44] Floor Drees: Okay. I would love to hear from organized chaos, if that answered that question. All right. Next question. "When should Nuxt be used? I use Quasar and it provides SSR." That's Karen asking this question.
Alexandre Chopin: So can you repeat the question, please.
Floor Drees: "When should Nuxt be used? I use Quasar." I don't know if I'm pronouncing this right. I hope I am.
[19:09] Alexandre Chopin: Yeah. That was the question of the Quasar. So you can use it for web applications or for modern websites. Quasar it's a great solution also especially when you want to do mobile developments, that's vast odds or fields. We don't play these games and we are focused on web applications and modern websites.
Floor Drees: Awesome. What is the Docus project goal compared to Nuxtjs?
[19:39] Alexandre Chopin: So that's the following software at the top of Nuxt. Nuxt is a powerful tool 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 Nuxt plus plenty of cool features like the content modules, internalization and then plenty of stuff and a cool admin panel, and this through Docus. And our websites are made with this software, which is going to be open source really soon. But as you can imagine, with the Nuxt 3 releases, we were pretty busy on Nuxt, so we are patching Nuxt and when Docus is going to be ready to be open, it's going to be open source too.
[20:34] Floor Drees: Very cool. Another question Wdbacker, some of these usernames are really interesting to decipher. "Do you have a recommended setup for debugging a Nuxt project in VS Code using resources I find on the internet. I still have debugging issues with source maps in VS Code, namely breakpoints not in the right place."
[21:00] Alexandre Chopin: Okay. I don't have any recommendations 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 some answers.
Floor Drees: 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?"
[21:35] Alexandre Chopin: 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 Nuxt 3. For example, you can mention as a static site generation, we don't have it implemented yet on Nuxt 3, it's going to come soon, but it's not ready to be used in production. So that's why I recommend to use Nuxt 2, if you want to have a business or something very stable, just to be sure that nothing can be broken in two months due to an update.
Floor Drees: Awesome. I can't imagine that a lot of people are worried about migrating, because it takes time.
Floor Drees: It's tedious sometimes. All right.
Alexandre Chopin: We will not... We don't reach for that so don't worry, it's going to be super smooth.
[22:32] Floor Drees: Great. Wuestion from Bash. "I'm working on a big project using NuxtJS how stable is Nuxt 3?" I feel like there are going to be a lot of questions. "How stable is it at the moment and should I start porting it to Nuxt 3 or at least like lay the foundation, I guess for porting?"
Alexandre Chopin: Obviously, no. Stay on Nuxt 2, but you can start to install Nuxt Bridge, which is the bridge between Nuxt 2 and Nuxt 3 with the features from Nuxt 3 into Nuxt 2. So this is more stable and then from Nuxt Bridge to Nuxt 3, it's going to be pretty much transparent.
Floor Drees: Okay. So in summary, everyone hold your horses. I love that you're all so excited, but-
[23:17] Alexandre Chopin: Calm down, calm down. It took us a year and a half to create the base and new foundation. That's for the future. It's a good future, I think we... In this competitive market and two communities React vs Vue we need to take our time and be sure that we are not breaking... Sorry. The current software we get is super mature, we worked on it for five years and we want to continue for the next five years.
[23:51] Floor Drees: Awesome. All right. People keep on asking questions about the differences between 2 and 3. Let's grab this one, "Will the components be rendered on the frontend side, if the backend already prepared the DOM elements?"
Alexandre Chopin: Can you repeat this? Sorry.
Floor Drees: I need to repeat the question for myself. Honestly.
Alexandre Chopin: Yeah.
Floor Drees: "Will components be rendered on the frontend side if the backend already prepared the DOM elements?"
[24:33] Alexandre Chopin: So maybe you want some components to be rendered only on the frontend side and disable the other 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.
[24:58] Floor Drees: I hope so too, but it's anyone's guess. "What kind of metrics should we use to decide on moving to Nuxt versus just stick with Vue.js?"
Alexandre Chopin: Still, can you recap the question?
Floor Drees: I think people are like, "When would someone decide for Nuxt versus just using Vue.js?"
Alexandre Chopin: Okay. I see.
Floor Drees: Just a pitch. We need a product pitch.
[25:28] Alexandre Chopin: A pitch. If you don't want to maintain the server-side rendering with Vue and you want to work as a team and reuse your project components, module plugins, and create a large scale application, go with Nuxt, otherwise stick with Vue. There is a nice paragraph on the Vue.js website documentation explaining Nuxt and what's the difference between Vue and Nuxt, there is no difference. It's just a matter of architecture. We bring this convention to our configuration because the Vue ecosystem is super rich, we get plenty of plugins and it's very useful and it responds to every use case. But in our case, we just want to provide a ball play, to create a web application that can scale without being afraid of maintaining tricky parts with the server side rendering.
[26:30] Floor Drees: Right. Because people can't get over the 2 versus 3 questions. I have a question for you. It is Hacktoberfest which is only my favorite time of the year. Is Nuxt at all participating in Hacktoberfest, and if so, what kind of issues or what kind of things would you love to see contributions on?
[26:54] Alexandre Chopin: Usually we participate every year at Hacktoberfest, but this one, as we release Nuxt, we are in the middle and we have to reorganize all the repository indications and that's pretty much the end of the month. We will try to do our best to participate, but right now we are not.
Floor Drees: I think that's fair enough. So it's also fair to say that you personally are not participating in Hacktoberfest then?
Alexandre Chopin: No.
Floor Drees: You are, yeah?
Alexandre Chopin: Yep.
Floor Drees: You are. So what kind of project test are you participating in? I'd be curious to know.
[27:30] Alexandre Chopin: It's obviously around Nuxt but yeah. I won't tell. It's a surprise. You need to follow me on Instagram.
Floor Drees: Okay. That is exciting. Maybe people can pitch their libraries to you in the Discord channel and so try and get you to help them out.
[27:54] Alexandre Chopin: I've seen some funny module created since the release of Nuxt 3, especially-
Floor Drees: Oh really?
Alexandre Chopin: one, just to get better access. And I wish there is more contribution to such modules because that makes me laugh a lot and I really appreciate the engagement the community and the humor, so yeah.
Floor Drees: All right.
Alexandre Chopin: Keep going.
Floor Drees: So you heard the man.
Alexandre Chopin: Yeah.
Floor Drees: More fun contributions, please. It seems like we're all out of questions and you've answered my special questions. So I'm pretty happy. I hope you had a good time.
Alexandre Chopin: Yeah.
Floor Drees: And I really want to thank you for joining the Q&A.
Alexandre Chopin: A thanks to all of you for watching me and all your precious questions.
