Weekly Vue News #135

How Nuxt Uses Nitro, h3 and ofetch Internally

Hi 👋

I had a good time at Vue.js Amsterdam! I happened to be sitting next to a newsletter subscriber, greetings go out to Julian!

We're close to 3000 subscribers of this newsletter which is a big milestone for me. It would help me a lot if you would recommend the newsletter to your colleagues and friends. 🙏🏻

Have a nice week ☀️

Vue

📕 How to Write Clean Vue Components

👉🏻 In this blog post, Alexander shares a design idea that will make your Vue components better.

📕 A Conceptual Model of State in Vue 3.4

👉🏻 The defineModel macro introduced in Vue 3.4 simplifies hierarchical state management and reduces the need for global state or prop drilling.

📕 Ultimate Vim Vue Setup

👉🏻 How to achieve a proper development experience for Vue in Vim.

📹 This Vue 3 Component Pattern is Fire 🔥🔥🔥 (and you should use it!)

👉🏻 In this tutorial, Erik explains the controlled props pattern.

👉🏻 This pattern uses props and allows you to easily reuse complex components in Vue.

🛠️ Vuestic Admin 3.0

👉🏻 An open-source admin template based on Vue 3, Vite, Pinia, and Tailwind CSS.

👉🏻 It's more than just a collection of framework's components, but a suite of ready-made pages with context and interactivity.

Nuxt

🚀 NuxtHub

👉🏻 Build full-stack Nuxt apps, on the edge.

👉🏻 Access to a Database, Key-Value, and Blob storage with zero configuration.

📕 Handling Supabase admin requests in Nuxt

👉🏻 In this article, Jakub will guide you through the process of handling these admin requests in Supabase from your Nuxt application.

📕 How to integrate Brevo Live Chat into a Nuxt 3 app

👉🏻 Learn how you can easily integrate Live Chat into your Nuxt application.

📹 Using defineProps with TypeScript

👉🏻 Daniel Roe dives into what exactly defineProps does in Vue & Nuxt when you use the new TypeScript generic with it.

🛠️ Send emails with Nuxt

👉🏻 You can easily send your first email using Nuxt and the Resend Node.js SDK.

📅 Events

Vue.js Live Conference

👉🏻 25 - 26 April 2024, Online

Vueconf US 2024

👉🏻 22 - 24 May 2024, New Orleans, US

vuejs.de Conf

👉🏻 8 - 9 October 2024, Bonn, Germany

💬 Quote of the week

🔥 Nuxt Tip: How Nuxt Uses Nitro, h3 and ofetch Internally

If you are using Nuxt 3 you might stumble upon one of the following tools: NitroNitro, h3h3 or ofetchofetch. I often see that people are confused by these tools, so let me clarify their responsibility and how Nuxt uses them internally.

All of the following packages are published in the UnJS ecosystem which consists of 56+ packages.

ofetch

Nuxt provides access to ofetchofetch via the $fetch$fetch API. Its described as "A better fetch API. Works on node, browser, and workers".

It can smartly parse JSON responses (with access to raw response if needed) and request body and params are automatically handled, with correct Content-TypeContent-Type headers.

h3

h3h3 is an H(TTP) server framework built for high performance and portability running in any JavaScript runtime.

Its event handlers automatically convert responses. For example, if you return a JSON object it will be stringified and sent with the default application/json Content-Type header. If an event handler returns a Promise, h3 will wait for it before it sends the response. Additionally, it provides a set of useful helper functions for body parsing, cookie handling, redirects, headers and more.

Nitro

NitroNitro uses h3h3 internally and is a server toolkit to create web servers with everything you need and deploy them wherever you prefer.

It provides cross-platform support for Node.js, Browsers, service-workers and more. Additionally, it supports API routes and middleware and a development server with hot module reloading

Nitro powers the server API endpoints and middleware in Nuxt 3.