#title Weekly Vue News #87 - Refresh Data in Nuxt 3 by Watching Sources Using useAsyncData #preview Ready for your weekly Vue & Nuxt dose?
Refresh Data in Nuxt 3 by Watching Sources Using useAsyncData
Hi 👋
I'm busy working on a blog post for my upcoming talk at Vue.js Live Conference.
While I don't have any big announcements to make this week, I'm always working on improving my content and finding new ways to serve my community. As always, I appreciate your feedback and welcome your thoughts and ideas.
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
Nuxt 3's
In many scenarios (pagination, filtering results, searching, etc.), you may need to refresh the data loaded from the API based on user action. You can use the refresh() method that is returned from the useAsyncData composable.
The refresh() method is also returned by the useFetch, useLazyFetch, and use useLazyAsyncData composables. For more information, check the
Example refreshing data using the refresh method
Let's take a look at a simple code example using refresh:
1 <script setup lang="ts">
2 const page = ref(1)
3
4 const { data: posts, refresh } = await useAsyncData('posts',
5 () => $fetch('https://yourDomain.com/posts', {
6 params: {
7 page: page.value,
8 },
9 })
10 )
11
12 function previous() {
13 page.value--
14 refresh()
15 }
16
17 function next() {
18 page.value++
19 refresh()
20 }
21 </script>
By default, Nuxt waits until a refresh is finished before it can be executed again.
Example with watching params change
Nuxt provides an alternative for the refresh() method which I prefer: the
This built-in option watches a list of reactive sources and automatically reruns the fetcher function when any changes in these sources are detected.
Let's take a look at the above example using the watch option:
1 <script setup lang="ts">
2 const page = ref(1)
3
4 const { data: posts } = await useAsyncData(
5 'posts',
6 () =>
7 $fetch('https://yourDomain.com/posts', {
8 params: {
9 page: page.value,
10 },
11 }),
12 { watch: [page] }
13 )
14
15 function previous() {
16 page.value--
17 }
18
19 function next() {
20 page.value++
21 }
22 </script>
| 👉🏻 It can be difficult to keep a large Vue.js project structured, but there are a number of tactics you can employ to do so. |
| 👉🏻 Here are some helpful tips for structuring a sizable Vue.js project. |
👉🏻 This article goes over creating a complex form that can be progressively enhanced using some Vue features like the v-for and the v-model.
www.smashingmagazine.com👉🏻 This article discusses the top security vulnerabilities in Vue applications and provides recommendations for identifying and mitigating the risks.
medium.com👉🏻 Leigh demonstrates a Vue component that can load any number of external scripts into our Vue app without blocking the smooth execution and rendering of our code.
leighola.hashnode.dev| 👉🏻 Maya Shavin (Senior Software Engineer Microsoft) unpacks the importance of testing. |
| 👉🏻 Explore how you can develop a reliable and efficient strategy for component development and testing with Vitest. |
| 👉🏻 Pinia is a state management library for Vue.js. |
| 👉🏻 It is an easy and lightweight way to manage state and is the successor to Vuex. |
👉🏻 Pixel perfect mobile UI components built with Tailwind CSS with iOS and Material Design components for React, Vue & Svelte.
github.com| 👉🏻 Are you afraid that AI will replace your job? |
| 👉🏻 Josh is “optimistic about what these AI advancements mean for the future of software development”. |
👉🏻 Zod adds a nice layer to TypeScript when dealing with data you can’t control.
scastiel.dev👉🏻 Push messages are notifications that are sent to a user's web browser from a website or application that the user has previously granted permission to send notifications.
web.dev👉🏻 Instead of writing out long file paths, you can use a short alias to reference a specific directory or module.
hsblhsn.me👉🏻 In this article, Bill Gates discusses the potential for AI to make the world a more equitable place in the next five to ten years.
www.gatesnotes.comUntil next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany
