Weekly Vue News #150 - Change Status Code of the Response in Nuxt

Weekly Vue News #150 Change Status Code of the Response in Nuxt View online Hi 👋 Remember last week when I mentioned moving the whole server logic from AWS into my Nuxt app? I hoped that it will not cause any issues. Well, it did. 🤦🏻‍♂️ The current server is configured with 512MB of RAM, but sending the weekly newsletter took more than 1GB of RAM, and my server crashed. I triggered the API endpoint on my local machine to send the newsletter, and it worked fine. After careful consideration, I decided to move only the email sending process to an AWS Lambda function. This function is triggered by the Nuxt app, ensuring that the app is not hindered by the email sending process. This solution not only provides the server with sufficient resources to handle other requests but also proves to be a cost-effective alternative to upgrading the server. 🚀 Have a nice week ☀️ Vue 📕 12 Design Patterns in Vue 👉🏻 In this article, Michael Thiessen compiled 12 different design patterns for Vue, along with short and concise examples of how they work. 📕 Mastering Pinia course is now complete 👉🏻 Become an expert in the official state management solution for Vue.js. 👉🏻 Course created by Eduardo, the author of Pinia. 📕 Conquering Complexity: Building a Scalable Single File Component (SFC) Architecture in Vue.js 👉🏻This blog post delves into the art of crafting a scalable SFC architecture, empowering you to tackle large-scale Vue projects with confidence. 📹 How to use Vue Suspense for async components 👉🏻 Alvaro explains the basics of Vue Suspense and why it's essential for handling asynchronous components. 👉🏻 Learn how to effectively use fallback content while your async components load. 🛠️ Conquering forms in Vue 👉🏻 In this talk, you get introduced to FormKit — a form-building framework — and how it can empower Vue developers to write consistent, accessible, even delightful forms. 🛠️ MistCSS 👉🏻 MistCSS now supports Vue as a target. 👉🏻 Write your atomic Vue components in CSS only. 👉🏻 Get a type-safe and error free component with 50% less code. 💚 Want More Exclusive Vue Tips Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Nuxt 📕 Nuxt 3.12 is out 👉🏻 Opt-in to Nuxt 4 changes 👉🏻 Nuxt Scripts auto-install 👉🏻 Layer auto-registration 👉🏻 Built-in a11y improvements 👉🏻Performance improvements 👉🏻 Module author improvements 📕 Introducing Nuxt Studio v2 👉🏻 Revamped UI interface, 👉🏻 Google authentication, 👉🏻 Supercharged collaboration, 👉🏻 and many more... 📕 Async and Sync? How useAsyncData does it all 👉🏻 Learn how to create functions that adapt to await usage, enhancing your understanding of Nuxt and empowering you to apply these patterns in your own projects. 🛠️ nuxt-meta-pixel 👉🏻 A unique integration for Facebook pixel in your Nuxt app. 👉🏻 Written in TypeScript, even the Facebook's events are typed. 👉🏻 You can load as much meta pixels as you want. 🛠️ instadraw 👉🏻 A Nuxt app that allows you to share your drawings with the world. 👉🏻 Using NuxtHub Blob storage (Cloudflare R2) and deployed on the Edge (Cloudflare Pages). 👉🏻 Demo: https://draw.nuxt.dev/ 🔥 Nuxt Tip: Change Status Code of the Response Nuxt provides the setResponseStatus composable to set the status code (and optionally the status message) of the response. This composable only works on the server and will have no effect on the client. Additionally, it can only be used in the Nuxt Context. The Nuxt context is only accessible in plugins, Nuxt hooks, Nuxt middleware, and setup functions (in pages and components). Let's take a look at how to use it: 1const event = useRequestEvent() 2 3if (event) { 4 setResponseStatus(event, 404, 'Page Not Found') 5} eventevent will be undefinedundefined in the browser, so you can safely use this composable in your Nuxt context. In my client's project, I used this composable to set the status code of the response to 410 when a product has expired. This way, the search engines will know that the product is no longer available and will remove it from the search results: 1<script setup lang="ts"> 2const { data, error } = await useFetch('/api/product'); 3 4const event = useRequestEvent(); 5 6if (event && data.value?.isGone) { 7 setResponseStatus(event, 410); 8} 9</script> The important part here is to await the useFetchuseFetch composable to be able to evaluate the datadata value inside the script datascript data tag. 📅 Events VueConf CN 2024 (6 July 2024, Shenzhen, China) PrageVue 2024 (17 September 2024, Prag, Czech Republic) vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 Promises From The Ground Up 👉🏻 This post dives into the mechanics of Promises, their states (pending, fulfilled, rejected), and how to work with them using the .then() and .catch() methods. 📕 A virtual DOM in 200 lines of JavaScript 👉🏻 A virtual DOM makes UI modification easier by tracking changes in a simplified representation of the DOM. 👉🏻 A library tracks changes to the root DOM element by keeping a structure of virtual nodes, representing each HTML element. 🛠️ Effects Showroom 👉🏻 A library of effects that can be installed into your terminal. 🛠️ CSS Grid Garden 👉🏻 Learn CSS Grid with a virtual garden game. 😂 Fun Comments? Join the discussion about this issue in our Discord community. Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🧵 Repost the latest X thread 📨 Reply to this email: feedback is welcome Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany