Welcome to Nuxt 3

Bookmark

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.



Transcription


Hello everyone, today I'm excited to talk about NETS3 and its journey. It has been a long development process, there has 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 first coming to NETS3. We start from scratch in July 2020. We decided to go with TypeScript for the rewrites and obviously as most of you are using Webpack with NETS2, we put a lot of effort to have the Webpack 5 support. In September we start to create the most famous features in NETS which is the page routing which is based on the PySystem and in October we also worked a lot to get Vue 3 support with the bundle renderer. Moving forward with November and next Nitro, you might have heard about it and we'll 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 platforms which is a huge, huge win for us. And by the way, with all this work we have made, we created this new organization on GitHub called NGS for Universal JavaScript in March. Also in March we start work on NextKite and NextCLI. In May we decide to use these famous features, the PySystem Routing and Page Optional that's going to bring you a new experience to create NETS 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 Next Bridge. And we finally got last month the support for build reproduction. That means in more than 400 days and more than 300 pull requests and about more than 700 commits and 200 issues, we have updated a lot about NextStream and its vision. In addition to that, we create over 14 repositories on the new organization called NGS. So NextStream comes with a new engine called NextNitro. So let's start with NextNitro because that's what we bring next 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 Next. This output is by default cross-platform. That means you can host it on node like you do for Next but also on DNO and workers like you can have on ClusterWorkers. We made a huge improvement on the cold-start performance and like you used to do on Next for the client-side routes, we get the API routes right now with automaton replacement but also an isomorphic fetch. So the highly optimized output is a key for us because right now when you want to create modern websites, you need to have multiple performances and packages. We track dependencies for Node.js. We also do the code splitting but on the server vendor. That means that the server vendor size now is under 1 megabyte and bring us your cold-starts which is 75 to 100 faster than before. So the cross-platform outputs bring us to another level not only on Node.js environments, we also mocking of course Node.js package for workers reports. We get an ultra lightweight qualified 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 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 Next 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 of Next which is Next Nitro. It's not only for Next 2, it's also for Next 3, it's also for Next 2. And all these Next 3 improvements, we want to bring it to our current users that are using Next 2 to have a better transition for the future. And that's this package called Next Bridge. We see the bridge between View 2 and Next 2 obviously, and View 3 and Next 3. So Next Bridge will obviously bring with it its Nitro engine to enhance your performances and get the serverless support. That means right now you can start to create projects to go with Next 3 and View 3. In Next Bridge, you also get the XMAScript support, ESM support, with no more module.export on the server. We got a built-in Type-C support by default and a brand new Next 3 composition API with an import box. Next to the menu, we get also some great byte preferences inside Next 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 Next 3, it's going to be lighter. Next 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 and code splitting. In Next 2, you used to choose between server-side rendering or static site generation. But with Next Bridge and Next 3, you will go hybrid. Hybrid means you can have an incremental static generation and more capabilities. View 3 brings great innovation and one of them is the suspense. Suspense fetches data not only in page components but in every component. That's bring more flexibility and more capabilities to your project. View 3 comes also with the composition API, which is a great experience and improvement to reuse features and functionality inside your projects. We go also with brand new Next CLI to improve the scaffolding and disrupt your next projects. We want also to improve our developer experience and we work hardly to give you a next DevTools and bring you better experience to work faster with a better error message, info and quick feeds right into your browser. Next kits, I mentioned it, everyone loves the modular of Next and this modular ecosystem. That's bring your projects to another level by being able to connect to any API or services. Next kits gives you the power to transition between Next 2 and Next 3 with ease. As I mentioned, we're going to 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 going to 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 everyone was waiting for us to support View 3. And as I mentioned at the very beginning, Next 3 is rewritten in TypeScript so we can have some TypeScript by default support. So that was a huge work on Next 3. But in the meantime, we continue to work on Next 2 and we didn't abandon it. We're going to continue to work on it because we don't give up. So on Next 2, we have made over 23 releases, closed a thousand issues and merged a lot of requests. We bring also some innovation like a faster static generation. The Next Image modules and Next Image based on IPX is a great innovation. You can see a lot of examples right now, but I recommend you to move to Next 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 on our community. And I want to take time to thank all of you for your contribution. Next 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 about 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 start is tricky, but for what we can track on the internet, we get over 200k live websites. 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. It's expensive, isn't it? These websites is bring by NextLab, the company behind Next, which 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. I'm Alexandre Chopin, CEO at NextLab and co-founder of Next. You can follow me on Twitter at I am Next. 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 Vue Telescope, which is a tool for the Vue community that helps you to probe the web and list all the websites made with Vue and its technology, like Vue.TiFype, Quasar Framework, NERGY, and so on. And don't hesitate to discover DocuS, the brand new technology that helps us to migrate our new websites. You can find, obviously, these websites 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. That's a good question. It seems useless now. Awesome. So that's a really positive thing, right? Awesome. Let's have a look at some of the questions that people asked. Someone asked, 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? 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 for free. And that's the same for Nuxt 2. You need to know Nuxt Vue 2. That's the only requirement you need to know. 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 like 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 nice videos from our ambassadors on YouTube, like Tim Dennings, David O'Brien, Alex Fischer, and Auguste, and Josh. And yeah, that's the best place to find information right now, but we want also to create videos when Nuxt 3 is 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. Social network is a huge modern website. That's maybe the best use case for modern websites. Facebook, Trade, React for that. And that's a good example. And yeah, I think you can go with it. Awesome. Another question. What do you mean by fetching data before, after navigation? I'm not sure to understand that. I am pretty sure you mentioned something in your talk, and 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 it's cheaper and so you get the data after the rendering, like a normal HPA with clients. Okay, I would love to hear from organized chaos if that answers that question. All right, next question. When should Nuxt be used? I use Quasar and it provides SSR. That's a parent asking this question. Can you repeat the question? When should Nuxt be used? I use Quasar. I don't know if I'm pronouncing this right. I hope I am. Yeah, that was a question. You can use it for web application or for modern websites. Quasar is a great solution, 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 modern websites. Awesome. What is the DOCUS project goal compared to Nuxt.js? So that's the following software at the top of Nuxt. Nuxt is powerful to create web application top of view, 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 and termination and plenty of other stuff and a cool admin panel and this great DOCUS. And our website are made with this software, which is going to be open source really soon. As you can imagine, with the next three releases, we went 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. Very cool. Another question by WD Becker. 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 debug issues with source maps in VS Code, namely breakpoints not in the right place. Okay. I don't have any recommendation for VS Codes, 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 something to answer. That makes a lot of sense. All right. 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 that you don't have in Nuxt 3. For example, you can imagine 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 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 can be broken in two months. Awesome. I can imagine a lot of people are worried about migrating because it takes time and it's tedious sometimes. We can't wait for that. So don't worry. It's going to be super smooth. Great. A question from Bash. I'm working on a big project using Nuxt.js. How stable is it? 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 Nuxt 3 or at least lay the foundation for porting? Obviously, no. Stay on Nuxt 2. You can start to install Nuxt Bridge, which is the bridge between Nuxt 2 and Nuxt 3 with features from Nuxt 3 to Nuxt 2. 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. 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 current software we got. It's super major. We worked on it for five years and we want to continue for the next five years. Awesome. All right. People keep on asking questions about the differences between 2 and 3. Let's grip this one. Will the components be rendered on the frontend side if the backend already prepared the DOM elements? Can you repeat the question? I need to repeat the question for myself, honestly. Will components be rendered on the frontend side if the backend already prepared the DOM elements? So maybe you want some component to be rendered only on the frontend side and disable the server 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's answered the question. 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? Still, can you recap the question? I think people are like, when would someone decide for Nuxt versus just using Vue.js? Okay. Just a pitch. We need a product pitch. 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 what's the difference between Vue and Nuxt. There is no difference. It's just a matter of architecture. We bring this convention of our configuration because the Vue ecosystem is super rich. We get plenty of plugins and it's super useful and it responds to every use case. In our case, we just want to provide a ballplay to create a web application that can scale and we don't be afraid of maintaining tricky parts with the server side rendering. Because people can't get over the two versus three 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? If so, what kind of issues or what kind of things would you love to see contributions on? Usually, we participate every year of Hacktoberfest, but this one, we release Nuxt three in the middle and we have to reorganize all the repository and dedication. That's pretty much the end of the month. We try to do our best to participate, but right now, we are not. I think that's fair enough. It's also fair to say that you personally are not participating in Hacktoberfest. You are. Yeah? You are? What kind of project are you participating in? I'd be curious to know. Obviously, around Nuxt, but yeah, I won't tell. It's a surprise. You need to follow me on Twitter. Oh, okay. That is exciting. Maybe people can pitch their libraries to you in the Discord channel and try and get you to help them out. I've seen some funny modules created since the release of Nuxt three, especially in Halo World 1, just to get the beta access. I wish there is more contribution to such modules because that makes me laugh a lot and I really appreciate the engagement by the community and the humor. All right. So, you heard the man. More fun contributions, please. It seems like we're all out of questions and you've answered my special question, so I'm very happy. I hope you had a good time. I really want to thank you for joining and for joining the Q&A. Thanks to all of you for watching me and all your precious questions.
29 min
20 Oct, 2021

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Workshops on related topic