Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #87 - Refresh Data in Nuxt 3 by Watching Sources Using useAsyncData #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #87

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:

Nuxt Tip: Refresh Data by Watching Sources Using useAsyncData

Nuxt 3's useAsyncData() composable can be used within your pages, components, and plugins to get access to data that resolves asynchronously.

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 official docs.

Example refreshing data using the refresh method

Let's take a look at a simple code example using refresh:

1<script setup lang="ts">
2const page = ref(1)
4const { data: posts, refresh } = await useAsyncData('posts',
5 () => $fetch('', {
6 params: {
7 page: page.value,
8 },
9 })
12function previous() {
13 page.value--
14 refresh()
17function next() {
18 page.value++
19 refresh()

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 watch option.

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">
2const page = ref(1)
4const { data: posts } = await useAsyncData(
5 'posts',
6 () =>
7 $fetch('', {
8 params: {
9 page: page.value,
10 },
11 }),
12 { watch: [page] }
15function previous() {
16 page.value--
19function next() {
20 page.value++
Curated Vue ContentπŸ“• Good Ways To Organize Large Vue.js Project
πŸ‘‰πŸ» 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.
πŸ“• Building Complex Forms In Vue

πŸ‘‰πŸ» 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.
πŸ“• Fortifying Vue.js Applications: Common Security Risks and Solutions

πŸ‘‰πŸ» This article discusses the top security vulnerabilities in Vue applications and provides recommendations for identifying and mitigating the risks.
πŸ“• Vue Mastery: The smart way to add external scripts to your Vue app

πŸ‘‰πŸ» 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.
πŸ“Ή Component testing with Vitest
πŸ‘‰πŸ» 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 - Crash Course for Beginners
πŸ‘‰πŸ» 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.
πŸ› οΈ Konsta UI

πŸ‘‰πŸ» Pixel perfect mobile UI components built with Tailwind CSS with iOS and Material Design components for React, Vue & Svelte.
Quote of the weekCurated Web Development ContentπŸ“• The End of Front-End Development
πŸ‘‰πŸ» Are you afraid that AI will replace your job?
πŸ‘‰πŸ» Josh is β€œoptimistic about what these AI advancements mean for the future of software development”.
πŸ“• Using Zod & TypeScript for more than user input validation

πŸ‘‰πŸ» Zod adds a nice layer to TypeScript when dealing with data you can’t control.
πŸ“• Push notifications are now supported cross-browser

πŸ‘‰πŸ» 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.
πŸ“• How to create and use path alias in TypeScript imports with Vite

πŸ‘‰πŸ» Instead of writing out long file paths, you can use a short alias to reference a specific directory or module.
πŸ“• The Age of AI has begun

πŸ‘‰πŸ» 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.
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
Β© 2023 All rights reserved.