Vue Nuxt
Tips & Tricks

A collection of Vue, Nuxt and Vite tips, tricks and good practices.

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(() => {

// 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;