vuejstips.

Write better Vue and Nuxt code.

A highly curated collection of practical tips, advanced patterns, and performance tweaks for Vue & Nuxt.

useTip.ts
const { tip } = useAsyncData(
Β Β 'awesome-trick',
Β Β () => queryContent().findOne()
)

Popular Topics
vue
nuxt
vite
previousnext

Overusing this data fetching pattern in many components in Vue? Thanks to Tanstack Query for Vue, you can reduce the boilerplate and take advantage of some useful features like auto-caching, auto-refetching and much more. βœ… It's a fantastic and powerful library! πŸ’ͺ🏻

// overusing this data fetching pattern in many components?c
const posts = ref([]);
const isLoading = ref(false);
const isError = ref(false);

async function fetchPosts() {
  isLoading.value = true;
  isError.value = false;
  try {
    const response = await fetch('someurl');
    posts.value = await response.json();
  } catch(error) {
    isError.value = true;
  } finally {
    isLoading.value = false;
  }
}

onMounted(() => {
  fetchPosts();
})

// you can replace it with a few lines of code thanks to Tanstack Query (Vue Query) βœ…
const {data: posts, isLoading, isError} = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts
})

async function fetchPosts() {
  const response = await fetch('someurl');
  const data = await response.json();
  return data;
}