vue-fetcher-loader

📦 vue-fetcher-loader

Componente utilitário para exibir um spinner, mensagens de erro e tentativas automáticas ao consumir dados com vue-use-fetcher ou outra lógica de fetch. Permite personalização completa das mensagens e estilos via options. 🚀 Instalação

Você pode instalar o vue-fetcher-loader como diretiva global:

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import createVload from '@/directives/v-load'

const vLoadOptions = {
  maxRetries: 2,
  retryMessage: 'Tente novamente',
  textErrorClassName: 'text-danger',
  textListClassName: 'text-muted',
  defaultEmptyListMessage: 'Nenhum dado disponível.',
  retryTextTemplate: (retry, total) => `⚠️ Tentativa ${retry} de ${total}`
}

const app = createApp(App)
app.use(createVload, vLoadOptions)
app.mount('#app')

✅ Como usar

No componente Vue, aplique a diretiva v-load em qualquer elemento onde os dados estão sendo exibidos:

<template>
  <div
    v-load="{
      retry: state.retry,
      totalRetries: 3,
      errorMessage: state.errorMessage,
      retryCallback: retryFetch
    }"
  >
    <ul v-if="state.data">
      <li v-for="item in state.data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useFetcher } from 'vue-use-fetcher'

const { state, retryFetch } = useFetcher(async () => {
  const res = await fetch('/api/v1/exemplo')
  if (!res.ok) throw new Error('Erro na API')
  return await res.json()
}, { retryDelay: 2000, maxRetries: 3 })
</script>

🧩 Opções disponíveis (app.use(createVload, options))

Opção Tipo Descrição

Opção	Tipo	Descrição
maxRetries	number	Número máximo de tentativas antes de exibir erro permanente.
errorMessage	string	Mensagem padrão de erro a ser exibida.
defaultEmptyListMessage	string	Mensagem a exibir caso não haja conteúdo inicial.
textErrorClassName	string	Classe CSS para estilizar mensagens de erro (default: text-error).
textListClassName	string	Classe CSS para listas vazias ou mensagens suaves (default: text-muted).
retryMessage	string	Texto do link de "Tentar novamente".
retryTextTemplate	(retry: number, total: number) => string	Função que retorna o texto exibido durante as tentativas.

🧪 Exemplo com todos os recursos

const vLoadOptions = {
  maxRetries: 3,
  errorMessage: 'Erro ao buscar dados do servidor.',
  defaultEmptyListMessage: 'Nenhum resultado encontrado.',
  textErrorClassName: 'text-danger',
  textListClassName: 'text-secondary',
  retryMessage: 'Repetir tentativa',
  retryTextTemplate: (retry, total) => `🔄 Tentando ${retry}/${total}`