Weekly Vue News #135 - How Nuxt Uses Nitro, h3 and ofetch Internally

Weekly Vue News #135 How Nuxt Uses Nitro, h3 and ofetch Internally View online 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. 😂 Fun 🧑🏻‍💻 In Other News 📕 Clean code: Meaningful name 👉🏻 Everything you need to know about choosing meaningful, readable, and easily searchable names. 📕 Learn how to use JavaScript to create art with code 👉🏻 p5.js is a JavaScript library that's transforming the way artists and designers approach making art with code. 📕 Serverless Architecture Demystified: Strategies for Success and Pitfalls to Avoid 👉🏻 This article discusses the evolution and benefits of serverless computing, which was introduced with AWS Lambda in 2014. 🛠️ np 👉🏻 np is a better npm publish. 👉🏻 It has an interactive UI, ensures your working directory is clean, and keeps your package.json up to date. 🛠️ CodeRev 👉🏻 A tool for conducting technical interviews using code reviews rather than coding questions. 🎮 Cross My Heart 👉🏻 An impressive Frogger Demake in just 256 Bytes. 👉🏻 You've got to get the 🖤 up the screen using your arrow keys. Comments? Join the discussion about this issue here. Until next week, Michael Hoffmann (Curator) Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany