Welcome to Nuxt 3

Rate this content
Bookmark

Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.

29 min
20 Oct, 2021

AI Generated Video Summary

Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.

1. Introduction to Nux3 and its Journey

Short description:

Today I'm excited to talk about Nux3 and its journey. We start from scratch in July 2020. In September we start to create the most famous features in Nux, which is the page routing. In October, we also worked a lot to get view-free support with the bundle renderer. In February, we make Nitro works on major serverless platform. In March, we create this new organization on GitHub called NGS. In May, we decide to use these famous features, the PySystem Routing and Page Optional. In August, the Global Imports, Auto-Global Imports. NUXT Bridge comes with a new engine called NUXT Nitro. 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.

♪♪ 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.

2. Nuxt 3 Improvements and Nuxt Bridge

Short description:

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. The highly optimized output is a key for us because when you want to create a modern website, you need to have multiple performances and packages. We track dependencies for Node.js. The server bundle size is now under one megabyte and brings us to a call start, which is 75 to 100 times faster than before. We are targeting the serverless-based and hybrid renderers on the JAMstack. Nuxt Bridge brings the Nitro engine to enhance performances and provide serverless support. Nuxt 3 will be lighter, with a smaller client bundle and deployment bundle. It will be faster with optimized code starts and dynamic server-side rendering cost splitting.

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.

3. Nuxt Bridge, Nuxt3, and Nuxt 2 Updates

Short description:

Nuxt Bridge and Nuxt3 bring hybrid capabilities with incremental static generation and suspense for fetching data. Vue 3 introduces the composition API for improved reusability. The brand new Nuxt CLI enhances project bootstraping. Nuxt Kit enables easy transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. Nuxt 2 continues to receive updates, including faster static generation and the innovative Nuxt image modules. Our mission is to help you create projects faster and better, with over 1.7 million monthly downloads and a thriving community.

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.

4. Introduction to NextLab and New Websites

Short description:

Thank you so much. We have worked on brand new websites made with a technology called Docus. Check out our GitHub repository on github.com. I'm Alexander Chopin, COO at NextLab and co-founder of Next. Follow me on Twitter at IamNext. For more information, visit our website on NextLab. Explore projects like View Telescope, Viewtify, Quasar Framework, NextGIS, and the brand new technology DOCUS. Our websites are open source.

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.

QnA

Q&A on Nuxt.js Projects and Learning

Short description:

Let's have a look at the answers to the question about projects built with Nuxt.js. People are using Nuxt.js for a wide range of applications. When it comes to building apps faster and simpler, Nuxt3 is the way to go. Although Nuxt3 is not yet stable, starting with Nuxt2 and migrating later is recommended. The documentation is the best place to learn and get started, and there are also helpful videos from Nuxt ambassadors on YouTube. Using Nuxt.js for a social network website is a great choice, as it is a perfect use case for modern websites.

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.

Fetching Data and Nuxt vs DOCUS

Short description:

In Nuxt, you can fetch data before or after navigation. Nuxt is suitable for web applications and more. DOCUS is a new project that combines Nuxt with additional features, such as content modules and an admin panel. Our websites are made with DOCUS and will be open source soon.

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.

Debugging Next Projects and Nuxt 3 Stability

Short description:

Another question about debugging a Next project in VS Code and the recommended setup. Why start a new project in Nuxt 2 and then migrate to Nuxt 3? How stable is Nuxt 3 and should I start porting my project? Hold your horses, it took us a year and a half to create the new foundation. We want to ensure stability and not break existing projects.

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.

Rendering Components on Front End in Nuxt 2

Short description:

In Nuxt 2, you can use the 'client-only' components to render specific components only on the client side, even if the back end has already prepared the DOM elements.

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.

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

JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.