Nuxt 3 is coming, this is why you should be excited!
Nuxt 3 is coming, this is why you should be excited!
By Vlad Pintea-Gärtner
5 min read
Nuxt 3 beta is out and ready to play with. While not production ready yet, most important features can be experimented with and, as we’ll discuss later, it will bring about an easy way to upgrade at your own pace.
- Authors
- Name
- Vlad Pintea-Gärtner
- linkedinVlad Pintea-Gärtner
Nuxt 3 beta is out and ready to play with. While not production ready yet, most important features can be experimented with and, as we’ll discuss later, it will bring about an easy way to upgrade at your own pace.
So what’s new anyway?
- Vue3 support
- General optimizations of performance and bundle size
- Native typescript support
- Improved developer experience and debugging
- True hybrid rendering
- The new Nitro engine
- Cross platform support
- Nuxt Bridge
That’s quite the list, and some might be obvious. Let’s jump into them and see what’s so cool about these upcoming features.
Vue3 support
Unlike its older brother that still uses Vue 2.15.x (as of feb 2021), Nuxt 3 will come with support for Vue3 and all of its goodies. To read more in depth about the differences https://javascript.plainenglish.io/differences-between-vue-2-and-vue-3-ee627e2c83a8 but lets see a few things that that means for Nuxt:
Improved routing with Vue router 4. New utilities for the Composition API, a superset of vue-composition API, with better SSR support and an easy migration path. Integration of Suspense API, which allows your components to wait for API calls before loading up and rendering, allowing you to load a fallback component in the meanwhile, something React fans will feel familiar with.
General optimizations of performance and bundle size
A new version without improvements across the board would be a weird sight, nuxt very much delivers as expected. With nuxt 3 you get a 20% reduction in core bundle size over its predecessor, and all the performance improvements that come with Vue 3.
The core bundle isn’t the only size reduction we see however. When built the entire project goes into a highly optimized ./output folder, thanks to better dependency tracking using @nft/vercel. Further adding to that, nuxt 3 comes with improved code splitting further reducing our bundle sizes.
Native typescript support
Typescript is a superset of Javascript, offering many additional features out of the box, such as decorators, typing, interfaces, etc. While in the past additional configuration was required to use Typescript with Nuxt, with the new version TS becomes a first-class citizen, ready to use after installation.
Improved developer experience and improved debugging
Performance improvements are great, and TS is a gift, but there’s more to improve your experience working with Nuxt 3.
The new framework comes with a new Nuxt CLI tool to enable easier bootstrapping of project and scaffolding.
Nuxt Devtools can be enabled from the project’s configurations, enabling fast and reliable debugging straight in the browser.
With the goal of offering good maintenance and long term stability, Nuxt Kit can be used. Nuxt Kit can be thought of as a sort of Nuxt SDK, offering access to core functionalities to module developers so future changes will not negatively impact your solution and require a massive code change. It comes with access to various configurations and utilities to make using it, and Nuxt, feel like a breeze.
In your project, you can now count on Nuxt to auto-import necessary global utilities and composable components for you, speeding up development and offering some protection against errors.
True hybrid rendering
Commonly with Nuxt we can serve up our site with server-side rendering or client-side rendering. Nuxt 3 will enable us to use many more strategies alongside those, like pre-rendering, preview mode, distributed persistent rendering, HTTP caching strategies and others. Nuxt Nitro uses a vendor-independent caching layer, allowing you to easily customise the desired solution, globally at app level, or per page, allowing you to best manage the performance of your application in a granular way.
The new Nitro engine
I’ve mentioned the new Nitro engine, but what is it? It is the new foundational element of Nuxt. Written from the ground up to ensure Nuxt is platform independent and easy to deploy anywhere, with any rendering and caching strategy we see fit. Cleaner base code, with no runtime dependencies, that is fast and lightweight. Nitro enables a lot of the improvements we’ve discussed before now.
Cross platform support
Enabled by the new Nitro engine, cross platform support makes working with the evolving Javascript ecosystem accessible. Whether you are working with NodeJs, Deno, Cloudflare workers or event Browser service worker, all supported out of the box, with an auto-detect feature that removes the hassle on your end, freeing you to use Nuxt in any solution that matches your project.
Nuxt Bridge
Last but not least on our list of major Nuxt 3 features is Nuxt Bridge. A tool that offers basically 2 major functionalities, which I am personally excited about.
Nuxt Bridge will help you use Nuxt 3 by ensuring compatibility with older dependencies and configurations from your Nuxt 2 project, making it easier to upgrade without worrying too much that all will break.
If, however, the above does not sound like a safe approach to you, you can Bridge Nuxt 3 functionality into your Nuxt 2 project, allowing you to upgrade iteratively, and giving you granular control over which features you want to implement first. This one is particularly exciting on a large project where stability is key, as you can slowly move towards the contemporary solution while maintaining control and stability, and being able to allocate time in a way fitting your project priorities. This is what you will be able to import into your Nuxt 2 project at your own pace:
- Nitro engine
- ESM and built-in TypeScript support
- Composition API with Nuxt 3 composables and auto-imports
- Nuxt CLI and Devtools
- Vite integration
Conclusion
With the new release of Nuxt still being in Beta, details are scarce, but I hope you’ve read enough to get your appetite running. We, and the Nuxt developers themselves, of course do not recommend this on production code, but most of all the goodies are there for you, some barely glossed over like ESM modules and Vite integration.
We hope your exploration of Nuxt 3 is enjoyable and cannot wait for the first production-ready release to see what you come up with.
Upcoming events
Coven of Wisdom - Herentals - Winter `24 edition
Worstelen jij en je team met automated testing en performance? Kom naar onze meetup waar ervaren sprekers hun inzichten en ervaringen delen over het bouwen van robuuste en efficiënte applicaties. Schrijf je in voor een avond vol kennis, heerlijk eten en een mix van creativiteit en technologie! 🚀 18:00 – 🚪 Deuren open 18:15 – 🍕 Food & drinks 19:00 – 📢 Talk 1 20:00 – 🍹 Kleine pauze 20:15 – 📢 Talk 2 21:00 – 🙋♀️ Drinks 22:00 – 🍻 Tot de volgende keer? Tijdens deze meetup gaan we dieper in op automated testing en performance. Onze sprekers delen heel wat praktische inzichten en ervaringen. Ze vertellen je hoe je effectieve geautomatiseerde tests kunt schrijven en onderhouden, en hoe je de prestaties van je applicatie kunt optimaliseren. Houd onze updates in de gaten voor meer informatie over de sprekers en hun specifieke onderwerpen. Over iO Wij zijn iO: een groeiend team van experts die end-to-end-diensten aanbieden voor communicatie en digitale transformatie. We denken groot en werken lokaal. Aan strategie, creatie, content, marketing en technologie. In nauwe samenwerking met onze klanten om hun merken te versterken, hun digitale systemen te verbeteren en hun toekomstbestendige groei veilig te stellen. We helpen klanten niet alleen hun zakelijke doelen te bereiken. Samen verkennen en benutten we de eindeloze mogelijkheden die markten in constante verandering bieden. De springplank voor die visie is talent. Onze campus is onze broedplaats voor innovatie, die een omgeving creëert die talent de ruimte en stimulans geeft die het nodig heeft om te ontkiemen, te ontwikkelen en te floreren. Want werken aan de infinite opportunities van morgen, dat doen we vandaag.
| Coven of Wisdom Herentals
Go to page for Coven of Wisdom - Herentals - Winter `24 editionMastering Event-Driven Design
PLEASE RSVP SO THAT WE KNOW HOW MUCH FOOD WE WILL NEED Are you and your team struggling with event-driven microservices? Join us for a meetup with Mehmet Akif Tütüncü, a senior software engineer, who has given multiple great talks so far and Allard Buijze founder of CTO and founder of AxonIQ, who built the fundaments of the Axon Framework. RSVP for an evening of learning, delicious food, and the fusion of creativity and tech! 🚀 18:00 – 🚪 Doors open to the public 18:15 – 🍕 Let’s eat 19:00 – 📢 Getting Your Axe On Event Sourcing with Axon Framework 20:00 – 🍹 Small break 20:15 – 📢 Event-Driven Microservices - Beyond the Fairy Tale 21:00 – 🙋♀️ drinks 22:00 – 🍻 See you next time? Details: Getting Your Axe On - Event Sourcing with Axon Framework In this presentation, we will explore the basics of event-driven architecture using Axon Framework. We'll start by explaining key concepts such as Event Sourcing and Command Query Responsibility Segregation (CQRS), and how they can improve the scalability and maintainability of modern applications. You will learn what Axon Framework is, how it simplifies implementing these patterns, and see hands-on examples of setting up a project with Axon Framework and Spring Boot. Whether you are new to these concepts or looking to understand them more, this session will provide practical insights and tools to help you build resilient and efficient applications. Event-Driven Microservices - Beyond the Fairy Tale Our applications need to be faster, better, bigger, smarter, and more enjoyable to meet our demanding end-users needs. In recent years, the way we build, run, and operate our software has changed significantly. We use scalable platforms to deploy and manage our applications. Instead of big monolithic deployment applications, we now deploy small, functionally consistent components as microservices. Problem. Solved. Right? Unfortunately, for most of us, microservices, and especially their event-driven variants, do not deliver on the beautiful, fairy-tale-like promises that surround them.In this session, Allard will share a different take on microservices. We will see that not much has changed in how we build software, which is why so many “microservices projects” fail nowadays. What lessons can we learn from concepts like DDD, CQRS, and Event Sourcing to help manage the complexity of our systems? He will also show how message-driven communication allows us to focus on finding the boundaries of functionally cohesive components, which we can evolve into microservices should the need arise.
| Coven of Wisdom - Utrecht
Go to page for Mastering Event-Driven DesignThe Leadership Meetup
PLEASE RSVP SO THAT WE KNOW HOW MUCH FOOD WE WILL NEED What distinguishes a software developer from a software team lead? As a team leader, you are responsible for people, their performance, and motivation. Your output is the output of your team. Whether you are a front-end or back-end developer, or any other discipline that wants to grow into the role of a tech lead, RSVP for an evening of learning, delicious food, and the fusion of leadership and tech! 🚀 18:00 – 🚪 Doors open to the public 18:15 – 🍕 Let’s eat 19:00 – 📢 First round of Talks 19:45 – 🍹 Small break 20:00 – 📢 Second round of Talks 20:45 – 🙋♀️ drinks 21:00 – 🍻 See you next time? First Round of Talks: Pixel Perfect and Perfectly Insane: About That Time My Brain Just Switched Off Remy Parzinski, Design System Lead at Logius Learn from Remy how you can care for yourself because we all need to. Second Round of Talks: Becoming a LeadDev at your client; How to Fail at Large (or How to Do Slightly Better) Arno Koehler Engineering Manager @ iO What are the things that will help you become a lead engineer? Building Team Culture (Tales of trust and positivity) Michel Blankenstein Engineering Manager @ iO & Head of Technology @ Zorggenoot How do you create a culture at your company or team? RSVP now to secure your spot, and let's explore the fascinating world of design systems together!
| Coven of Wisdom - Amsterdam
Go to page for The Leadership Meetup