Optimising Developer Experience with Nuxt 3

Rate this content
Bookmark

Optimising developer experience with Nuxt 3 - a tour through the ways the new version of Nuxt will save time and make your life easier. We'll explore the new nitro-powered isomorphic fetch, dive into Nuxt 3's more powerful dynamic routing, and along the way tour a host of other features that will give you superpowers.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Daniel Rowe is a member of the framework team for Nuxt and a former CTO of a tech startup. He has experience with Nuxt both as a user and as a contributor to its development.

Daniel Rowe's talk focuses on optimizing developer experience with Nuxt 3.

Nuxt is a progressive JavaScript framework based on Vue that simplifies the development of web applications by providing features such as server-side rendering, static site generation, and a zero-configuration setup.

Nuxt 3 includes improved documentation, auto-importing of libraries, helper functions, and components, an enhanced server framework, and simplified deployment processes.

Nuxt 3 integrates documentation directly into the configuration schema, making it easier for developers to find relevant information without needing to search online documentation.

Auto-import functionality in Nuxt 3 allows automatic importing of components, helper functions, and libraries as they are used in the code, facilitating better tree shaking and reducing the need for manual imports.

H3 is a new ultra-minimal HTTP framework in Nuxt 3 that provides utilities for requests like useCookie and useBody and is designed to be fast and cross-platform.

Isomorphic fetch in Nuxt 3 is a utility that performs a local function call on the server but makes a proper network request on the client, optimizing serverless endpoint interactions.

Nuxt 3 generates a single runtime file that can be deployed to various platforms including Netlify, Vercel, Cloudflare, and Azure with minimal or no configuration.

Developers can find more information about Nuxt 3 on the official documentation website at nuxtest.org, follow Nuxt on Twitter, or join the Nuxt Discord server for community support.

Daniel Roe
Daniel Roe
26 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk discusses optimizing developer experience with Nuxt 3. It highlights improvements in documentation, auto importing libraries, server developer experience, and deployment. Nuxt 3 introduces a unified solution for schema, documentation, and defaults, as well as auto imports for easy component access. It also introduces a faster server framework called H3 and allows for efficient network requests with isomorphic fetch. Deployment is simplified with a single entry point and support for various platforms. The goal is to make Nuxt 3 amazing and backport features to Nuxt 2 apps.

1. Introduction to Developer Experience with Nuxt 3

Short description:

Hi, I'm Daniel Rowe, and I'm going to be talking about optimizing developer experience with Nuxt 3. Developer experience is a topic close to my heart. The more we make opportunities for creativity and reduce constraint, the better developer experience we see. NUXT is a view framework, a JavaScript framework, suitable for someone with no knowledge of it.

Hi, I'm Daniel Rowe, and I'm going to be talking about optimizing developer experience with Nuxt 3. Developer experience is a topic close to my heart and I think that's probably true for most of us here today. It matters a huge deal, doesn't it? The tools we use have the capacity to make our life painful or make it magical.

At the moment I'm speaking in my role as a member of the framework team for Nuxt itself which means I get to maintain and work on the framework alongside a huge community of people who contribute and make Nuxt possible. In my previous role though I was CTO for a tech startup. Our main product was built on Nuxt and so I've really encountered Nuxt from both angles both as a user being frustrated by issues trying to solve them and in fact contributing and fixing issues was my first way of contributing to the Nuxt community, but I also of course have now got the perspective of working on the the Nuxt team too and really I'm going to be thinking about developer experience from both perspectives today.

This is where I'm based. I'm in the northeast of the UK, it's already cold and crisp, it's definitely autumn and this is where I sit most days. I'll look across my desk and see my cat, one of my cats, I have three but that's Lily in the picture and I'll have a cup of coffee if it's in the morning or a cup of tea if it's the afternoon and this is where I like to be. I like to sit and code or chat, figure out problems and try and make things better. This is where I feel most in the zone.

So I have a question for you, when have you felt most productive, most in the zone, most in that flow state that we sometimes talk about as developers? Just take a moment call it a mind, see if you can freeze that moment in your head. It might have been that you were confronting a problem. You had some great idea that you were implementing. You'd been on a bug hunt for it seems like ages and you've found it at last. Maybe you've published a library and you're seeing the GitHub stars come in, or you've just seen your first PR merged. Whatever the reason, it feels like you are on top of the world.

So the more I've thought about my own moments of being in the zone or talk to others who have had the same experience. I think there are a lot of things that go into them and it's a hugely complex topic. Obviously we want to replicate it. It's addictive. It's a wonderful moment in time and it depends on lots of things going on. Everything from your own personal well-being, to how much sleep you've had, how much caffeine you've ingested, to whether people are treating you well or fairly, whether they are giving you the value that you deserve, how you feel about yourself.

But there are some common factors I think when it comes to thinking about the tooling that we use which is particularly of course the topic that I'm thinking about today ways in which the tooling we use can promote that in the zone moment, can promote our developer experience and I think it's particularly around these two axes. So on the one hand constraint things that are holding us back and on the other creativity the things that we're trying to do that sense of vision or energy or impetus that we have. And now when I'm talking about constraint I'm not talking about the constraints that you work with when you're trying to find a solution to a problem like a business problem I'm talking about the constraint that's more like red tape that just holds you back that prevents you from implementing the idea that you might have. Obviously that might be hugely oversimplifying it but I think you see great developer experience when you have that creativity when you're going with the flow you have some amazing idea and there's very little if anything to prevent you from realizing it.

So the more we we make opportunities for creativity and the more we reduce constraint I think we see better developer experience and that is really where NUXT has always sought to position itself. Don't worry if you don't know what what NUXT is, NUXT is a view framework, a JavaScript framework. It's a it's a progressive framework which means that it's suitable for someone with no knowledge of it.

2. Improvements in NUXT 3

Short description:

NUXT is a progressive framework that takes away a lot of boilerplate and allows you to focus on your ideas. With NUXT 3, we've made improvements in documentation, auto importing libraries, server developer experience, and deployment.

You can pick up NUXT, install a NUXT project and you should be able to start developing straight away. It doesn't require extra configuration, it works out-of-the-box but if you need to take ownership of it and take full control you can do that. As you start building with NUXT you can configure pretty much anything. In fact with the modules ecosystem and the whole modules container you can configure everything about NUXT and make it work almost in a completely different way from how it did when you first picked it up.

It's a progressive framework but it really is meant to take away a lot of the boilerplate. That zero configuration side of things is hugely important, it's in the NUXT DNA. So when you pick up your NUXT project you might see there's a pages folder, just drop any Vue component in there and it will become a root into your app it will be bundle split, it will be set up with Vue router, it will have a name. All the things that you might have to do previously as part of the boilerplate of a Vue project gets done for you automatically by NUXT. More recently you might have wanted to have a static website. NUXT makes server-side rendering possible. In fact it was one of the few solutions that did early on in the days of Vue applications, it was quite a complicated thing to set up and NUXT made that possible and more recently with static site generation, NUXT makes that possible too. Lots of other things from VueX store integrations to automatic registration of middleware. I think probably the main thing that I'd highlight is this concept of modules. The idea if you need to implement a progressive web app or you need to implement authentication you don't have to do it yourself. You have a CMS you want to integrate or some other service you just pull in the module for it and NUXT makes it possible for you to get on with your idea without actually needing to step back and figure out the boiler plate you would require to properly set up that service or re-implement that that concept. So no need to reinvent the wheel. The concept of NUXT is really to free you from constraint and free you to focus on that idea you have your vision.

NUXT 3 really takes the same path again. So with NUXT 3 there are lots of things to talk about, lots of ways in which we've tried to improve developer experience, but I want to focus on four today in particular. I want to focus on how we've sought to improve the documentation, because and that might sound minor, but I think it's quite a profound way in which we've sought to change the documentation, make NUXT easier for devs to use. I want to focus on how we're auto importing libraries, helper functions, and components. I want to think about our server developer experience. This is really possibly a completely different way of approaching server side functionality, and I want to think about the deployment, and how we've sought to make the developer experience of taking an app, and actually deploying it effortless and amazing. So first to dive into documentation. And when I'm talking about documentation, let me use the example of the Nuxt configuration schema. So the Nuxt configuration schema is an example of something that we need huge documentation for. If you go to the current Nuxt2 docs, you'll see there are pages and pages and pages of information about how to configure Nuxt, not that you have to do this, but when it comes to taking full control of your Nuxt application, there are lots of ways we provide to do that. And that's part of what it is to have a progressive framework. We have to give options because there's so much the framework does, so much heavy lifting it does for users. But the moment you have something that has a lot of configuration, it means that it's possible for the application itself and the documentation to diverge.

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

Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
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.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
Making Magic: Building a TypeScript-First Framework
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
Top Content
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Building a Better Hammer - The Story of Nuxt 4
Vue.js Live 2024Vue.js Live 2024
28 min
Building a Better Hammer - The Story of Nuxt 4
Nuxt is a framework for building web apps using Vue and Nitro, driven by a vibrant open source community. Nuxt 4 aims to make the framework more usable and extensible, while focusing on collaboration rather than competition. The modules ecosystem and pluggable architecture enhance Nuxt's functionality and customization options. Nuxt prioritizes user choice and aims for stability and reliability. Nuxt 4 introduces thoughtful breaking changes and is eagerly anticipated by the community.
How to Make a Web Game All by Yourself
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
How to Make a Web Game All by Yourself
This talk guides you on how to make a web game by yourself, emphasizing the importance of focusing on tasks that interest you and outsourcing the rest. It suggests choosing a game engine that allows distribution on the web and aligns with your understanding and enjoyment. The talk also highlights the significance of finding fun in the creative process, managing scope, cutting features that don't align with the game's direction, and iterating to the finish line. It concludes by discussing the options for publishing the game on the web and leveraging unique web features.
Atomic Deployment for JS Hipsters
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
This Talk discusses atomic deployment for JavaScript and TypeScript, focusing on automated deployment processes, Git hooks, and using hard links to copy changes. The speaker demonstrates setting up a bare repository, configuring deployment variables, and using the post-receive hook to push changes to production. They also cover environment setup, branch configuration, and the build process. The Talk concludes with tips on real use cases, webhooks, and wrapping the deployment process.

Workshops on related topic

Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
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.
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
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.
Managers Are From Mars, Devs Are From Venus
TechLead Conference 2024TechLead Conference 2024
111 min
Managers Are From Mars, Devs Are From Venus
Workshop
Mo Khazali
Mo Khazali
A Developer’s Guide to Communicating, Convincing, and Collaborating Effectively With Stakeholders
It’s a tale as old as time - collaboration between developers and business stakeholders has long been a challenge, with a lack of clear communication often leaving both sides frustrated. The best developers can deeply understand their business counterparts’ needs, effectively communicate technical strategy without losing the non-technical crowd, and convince the business to make the right decisions. Working at a consultancy, I’ve both failed and succeeded in architecting and “selling” technical visions, learning many lessons along the way.Whether you work at a product company, are a consultant/freelancer, or want to venture beyond just being a developer, the ability to convince and clearly communicate with stakeholders can set you apart in the tech industry. This becomes even more important with the rise of GenAI and the increasingly competitive developer market, as problem-solving and effective communication are key to positioning yourself.In this workshop, I’ll share real-world examples, both good and bad, and guide you through putting the theory into practice through dojos.
How to create editor experiences your team will love
React Advanced Conference 2021React Advanced Conference 2021
168 min
How to create editor experiences your team will love
Workshop
Lauren Etheridge
Knut Melvær
2 authors
Content is a crucial part of what you build on the web. Modern web technologies brings a lot to the developer experience in terms of building content-driven sites, but how can we improve things for editors and content creators? In this workshop you’ll learn how use Sanity.io to approach structured content modeling, and how to build, iterate, and configure your own CMS to unify data models with efficient and delightful editor experiences. It’s intended for web developers who want to deliver better content experiences for their content teams and clients.