Weekly Vue News #126 - Handle Client-Side Errors in Nuxt

Weekly Vue News #126

Handle Client-Side Errors in Nuxt

Sponsored

Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.

It's free in development to try it out 💚

Hi 👋

I wish you a happy new year! 🎉 Last year, we were a community of almost 600 developers; now we are over 2600. It's amazing to see how this community is growing. Thank you for being part of it! 🙏

During my Christmas holidays, I redesigned the website for this newsletter using Nuxt UI Pro. It was a great experience, and I'm very happy with the result. I hope you like it too. 🤗

Have a lovely week ☀️

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

Vue

📕 Announcing Vue 3.4 '🏀 Slam Dunk'

👉🏻 A 2x faster parser

👉🏻 Faster SFC compilation

👉🏻 More accurate reactivity system

👉🏻 Stable defineModel()

👉🏻 v-bind same-name shorthand

👉🏻 and more...

blog.vuejs.org

🚀 Vue Tips Collection

👉🏻 Michael Thiessen released the second edition of his Vue Tips Collection eBook.

👉🏻 You get the first two chapters with 30 tips for free.

michaelnthiessen.com

Nuxt

📕 Nuxt 3.9 is out

👉🏻 Vite 5

👉🏻 Interactive server components

👉🏻 New composables

👉🏻 A new loading API

👉🏻 And more...

nuxt.com

📕 Web scraper in Nuxt 3

👉🏻 This article series contains 4 parts and explains how to create a web scraper with Nuxt 3.

dev.to

📕 Building a Quiz App Powered by Nuxt Content

👉🏻 In this tutorial, you'll learn how to use Nuxt Content to build a quiz application.

masteringnuxt.com

📕 More secure Vue & Nuxt apps -> by default! 🛡️

👉🏻 Learn how to use the NuxtSecurity module to make your Vue & Nuxt apps more secure by default.

dev.to

🛠️ Nuxt OG Image v3 was released

👉🏻 A complete rewrite of the module to improve stability and developer experience.

nuxtseo.com

🛠️ Nuxt I18n v8.0 released

👉🏻 After two years of development, a stable release of Nuxt I18n for Nuxt 3 is available.

github.com

🛠️ Nuxt API Party

👉🏻 Connect with any API securely with server proxy & dynamic composable names.

nuxt-api-party.byjohann.dev

📅 Events

Vue.js Nation Conference

👉🏻 24 - 25 January 2024, Online Live Event

👉🏻 100% free

vuejsnation.com

Vuejs Amsterdam 2024

👉🏻 28 - 29 February 2024, Amsterdam

vuejs.amsterdam

Vueconf US 2024

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

vueconf.us

💬 Quote of the week

🔥 Nuxt Tip: Handle Client-Side Errors

Nuxt will display a generic error page if an error occurs on the client-side. You often don't want to show a fullscreen error page but the error at a specific place in your app. Therefore, Nuxt provides the <NuxtErrorBoundary> component:

Component.vue

            1 <template>
              2   <NuxtErrorBoundary>
              3     <AnyComponent/>
              4   </NuxtErrorBoundary>
              5 </template>

<NuxtErrorBoundary> will catch all errors in its default slot.

You can use the #error slot to display the error to the user. It provides an clearError function to clear the error and display the children again:

Component.vue

            1 <script setup lang="ts">
              2 const onError = (error: Error) => {
              3   // Here you can try to resolve the error
              4 }
              5 </script>
              6 
              7 <template>
              8   <NuxtErrorBoundary @error="onError">
              9     <AnyComponent/>
              10 
              11     <template #error="{ error, clearError }">
              12       An error occurred: {{ error.message }}
              13       <button @click="clearError">
              14         Try again
              15       </button>
              16     </template>
              17   </NuxtErrorBoundary>
              18 </template>

You can call error = null in onError to clear the error. However, this will re-render the default slot. If you haven't resolve the error completely yet, the error slot will be rendered again, which can lead to an infinite loop.

A solution is to navigate to a different page in onError:

Component.vue

            1 <script setup lang="ts">
              2 const recoverFromError = async (error) => {
              3   await navigateTo('/');
              4   error.value = null;
              5 }
              6 </script>

If you navigate to another route, the error will be cleared automatically.

Check out this live example that demonstrates how to handle errors in different contexts: pages, plugins, components and middleware.

😂 Fun

🧑🏻‍💻 In Other News

📕 Learn to code your own mini Grand Theft Auto game with self-driving cars

www.freecodecamp.org

📕 Web Development in 2023: JavaScript Still Rules, AI Emerges

👉🏻 This article covers web development trends in 2023.

thenewstack.io

📕 Deleting 50,000 Lines of Code in 3 Days

👉🏻 A developer recently deleted over 50,000 lines of code, ~70% of their frontend codebase.

👉🏻 Surprisingly, this massive code removal didn't break the application and led to a significant simplification.

aakashns.com

📕 The Strictest TypeScript Config

👉🏻 The TypeScript config contains other options that can more reliably protect your project from type-related errors, which the strict option has not yet automatically included.

dev.to