The Developer Experience With nuxt 3: Here's What You Need to Know

Daniel Roe — Core team member at Nuxt.js

Hello, dear readers! I’m back with another insightful piece, this time focusing on the developer experience in Nuxt 3, as presented by Daniel Roe, a core team member of Nuxt. Daniel also did a live coding session which covered all the following topics in action.

If you want to watch that, or the entire talk, you can find it on YouTube.

Intro

Daniel Roe, with his background as a CTO of a SaaS startup and experience with a creative agency, emphasizes the significance of the developer experience.

Having been a user of Nuxt, he understands the challenges developers face and believes that enhancing this experience is beneficial for both developers and companies.

He believes that improving the developer experience is beneficial for everyone. It aids the developer in implementing their ideas faster and more efficiently, and it’s also advantageous for companies as it leads to quicker and better results.

The vision is to be as minimal as possible, as lightweight as possible, and to reduce context switching

Typescript in Nuxt 3

One of the significant changes in Nuxt 3 is the full integration of Typescript. This doesn’t mean developers have to use Typescript, but it offers full control of the IDE, generating a tsconfig.json file that sets paths and provides type hinting.

Nuxt 3 takes full control of the developer’s IDE. This is achieved by generating a tsconfig.json file. This configuration file is the heart of any Typescript project, and by controlling it, Nuxt 3 can introduce a plethora of features.

For instance, it sets paths for every alias defined in the Nuxt project, whether it's by Nuxt itself, some other module, or an additional library. This ensures that developers have a smooth experience with imports, type hinting, and other IDE features.

Documentation at Fingertips

One of the significant advantages of using Typescript is the ability to provide inline documentation. Nuxt 3 leverages this by moving as much documentation as possible into the editor.

This includes detailed descriptions of functions, their parameters, expected return types, code examples, and even links to further reading.

This approach ensures that developers have immediate access to crucial information without having to switch contexts or browse external documentation.

Reducing Boilerplate in Nuxt 3

One of the standout features of Nuxt 3 is its commitment to reducing boilerplate code, making the developer experience smoother and more intuitive. Here’s a deeper dive into how Nuxt 3 achieves this:

Auto-imported Functions

In Nuxt 3, developers no longer need to manually import commonly used functions. For instance, when using Vue 3, functions like ref, onMounted, and reactive are frequently utilized. In Nuxt 3, these are auto-imported, eliminating the need for repetitive import statements.

This not only reduces the noise in the code but also streamlines the coding process.

<script setup>
const props = defineProps ({ name: String })
const greeting = computed(() => 'Hi ${props. name]')
</script>

<template>{{ greeting }}</template>

Minimal Initial Setup

A fresh Nuxt 3 project comes with a minimal set of files. This includes:

• app.vue: The starting point of the application.

• nuxt.config: While this configuration file is present, it's initially empty and can often remain so, thanks to Nuxt's convention-over-configuration approach.

• package.json: Contains just one dependency - Nuxt.

• tsconfig.json: A configuration file generated by Nuxt to take full control of the IDE, enabling features like path aliases and type hinting.

Smart Data Fetching

Nuxt 3 introduces an isomorphic fetch function, $fetch, which smartly handles response headers. This function can determine whether the response is text, JSON, an array buffer, or another type, and processes it accordingly.

This eliminates the need for developers to manually parse responses, making data fetching more intuitive.

export default defineEventHandler (event => {
  const { id } = useQuery(event) // /api/user?id-1 => 1
  const user = await $fetch( https: //api.dev/users/${id}*)
  return {
    id,
    user,
  }
})

Server Functions

In Nuxt 3, server functions can directly return objects, such as JSON. This means developers no longer need to set headers or stringify responses manually.

This approach not only simplifies server-side code but also powers type inference, providing developers with accurate type hints when fetching from these endpoints.

Conclusion

I hope you enjoyed this part and that it was as valuable to you as it was to me. Over the next few days, I’ll share the rest of the talks with you. Stay tuned…

Shout out to my friend Shahrokh, who made me excited to write the next part.

Also published here