Weekly Vue News #129 - Cancel Fetch API Request in Nuxt

View and discuss online,

Weekly Vue News #129

Cancel Fetch API Request in Nuxt

Sponsored

Vue.js Nation 2024, 🗓️ 24-25 January

Here's what makes Vue.js Nation 2024 a must-attend event:

✨ Vue.js Nation brings an epic lineup of speakers!

Insights on the Vue.js ecosystem are presented by a distinguished lineup of 20+ speakers, including industry leaders such as Evan You (Creator of Vue.js and Vite).

✨ Key technology roadmaps and development plans revealed

Catch up with the latest advancements in Vue.js, Nuxt, Quasar, TypeScript, Pinia, PrimeVue, TresJS, Vuetify, Composition API, and other pivotal technologies.

✨ Exclusive insights

Gain exclusive tips and tricks from the Vue.js Core Team and other leading experts.

✨ Attending this event is 100% FREE!

Vue.js Nation remains committed to being the largest and only 100% free Vue.js online conference in the world.

→ Join Vue.js Nation for free

🗓️ 24-25 January

It only happens once a year, so don't miss out!

Hi 👋

this week is Vue.js Nation week! The conference will take place on Wednesday and Thursday, and I look forward to seeing you there.

Additionally, I'm raffling one ticket for the Vue.js Amsterdam Conference 2024. You can participate here.

In other news, you can now buy lifetime deals for CodeSnap.dev.

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

Sponsored

Win a free ticket for Vue.js Amsterdam 2024

🏆 Win a FREE ticket to attend the Vue.js Amsterdam Conference 2024

✨ I teamed up with the Vue.js Amsterdam Conference to raffle one ticket to the conference.

👉 Participate here

Vue

📕 Vue tools to master in 2024

👉🏻 Vapor Mode

👉🏻 Vue 2 End of Life

👉🏻 Nuxt Tools

👉🏻 FormKit

www.vuemastery.com

📕 Vue Templates: Should They Start from the Top or the Bottom?

👉🏻 "To reiterate, I recommend writing in the order of script→template→style tags in Vue".

👉🏻 I prefer the same order for my Vue components.

dev.to

📹 The new Vue 3.4 feature NOBODY talks about…

👉🏻 Learn how hydration errors and mismatches are easier to debug now.

www.youtube.com

🛠️ The next iteration of Vue DevTools

👉🏻 Enhance your Vue development journey with an amazing experience!

github.com

Nuxt

📕 How to Migrate Large Applications Efficiently from Vue.js To Nuxt.js

👉🏻 This blog post will guide you through the process of migrating a large Vue.js application to Nuxt.js.

blog.canopas.com

📕 Nuxt Monorepo for Large-Scale Vue Web Application

👉🏻 " I found Nuxt 3 to be extremely suitable for developing large-scale projects, with a strong focus on Developer Experience (DX) and being very friendly to Monorepo setups."

serko.dev

📕 Nuxt: Superpowers for your Vue 3 application

👉🏻 Learn about the incredible suite of conveniences Nuxt brings to Vue applications, from auto-imports to out-of-the-box server-side rendering & more.

tighten.com

📅 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: Cancel Fetch API Request in Nuxt

It's a common use case to cancel an API request, for example, when a user navigates away from a page.

In Nuxt 3, you can use the signal parameter from AbortController with the globally available $fetch helper to cancel an API request:

Component.vue

            1 <script setup>
              2 const abortController = new AbortController();
              3 
              4 const { status } = useAsyncData(
              5   'testApi',
              6   () =>
              7     $fetch('https://hub.dummyapis.com/delay?seconds=1', {
              8       signal: abortController.signal,
              9     }),
              10 );
              11 
              12 const cancelRequest = () => {
              13   abortController.abort();
              14 };
              15 </script>
              16 
              17 <template>
              18   <div>
              19     <span>Status: {{status}}</span>
              20     <button @click="execute">Trigger Request</button>
              21     <button @click="cancelRequest">Cancel Request</button>
              22   </div>
              23 </template>