Explicação Técnica

Esta página apresenta uma listagem dinâmica das 10 principais criptomoedas por capitalização de mercado, utilizando Vue.js 3 e Nuxt.js 3. Aqui está uma breve explicação de como ela funciona:

• Componente Vue: A página é construída como um componente Vue de arquivo único (SFC), combinando template, script e estilo em um único arquivo.
• Composition API: Utilizamos a Composition API do Vue 3 com o <script setup>, que simplifica a lógica do componente e melhora a reutilização do código.
• Estado Reativo: Os dados das criptomoedas são armazenados em um ref reativo (cryptoList), permitindo atualizações automáticas da UI quando os dados mudam.
• Fetch de Dados: A função fetchCryptoData usa a API Fetch para buscar dados da API CoinGecko, atualizando o estado do componente com os dados mais recentes.
• Atualização Automática: Um intervalo é configurado para atualizar os dados a cada 5 minutos, mantendo as informações atualizadas.
• Formatação de Moeda: Uma função formatCurrency é usada para formatar os valores monetários de acordo com o padrão brasileiro.
• Estilização Responsiva: Utilizamos classes do Tailwind CSS para criar um layout responsivo e uma tabela com rolagem horizontal em dispositivos menores.
• Tema Escuro: O componente suporta um tema escuro, utilizando classes condicionais do Tailwind para alternar entre modos claro e escuro.

Este componente demonstra a integração eficiente de tecnologias modernas de front-end para criar uma interface de usuário dinâmica e responsiva, fornecendo informações atualizadas sobre o mercado de criptomoedas.