Listagem de produtos

Agora que temos o Axios instalado, vamos criar uma listagem de produtos. Para isso, crie um novo arquivo chamado ListagemProdutos.vue na pasta src/components e adicione o seguinte conteúdo:

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const produtos = ref([]);

onMounted(async () => {
  const response = await axios.get('https://fakestoreapi.com/products');
  produtos.value = response.data;
});
</script>

<template>
  <div>
    <h1>Produtos</h1>
    <div v-for="produto in produtos" :key="produto.id">
      <h2>{{ produto.title }}</h2>
      <p>{{ produto.description }}</p>
      <p>{{ produto.price }}</p>
      <img :src="produto.image" :alt="produto.title" />
    </div>
  </div>
</template>

Alterando a view principal

Agora que temos a listagem de produtos, vamos alterar a view principal para exibir a listagem. Abra o arquivo src/App.vue e altere o conteúdo para o seguinte:

<script setup>
import ListagemProdutos from '@/components/ListagemProdutos.vue';
</script>

<template>
  <ListagemProdutos />
</template>

Testando a aplicação

Agora que fizemos todas as alterações, vamos testar a aplicação. Execute o comando npm run dev e acesse a URL http://localhost:5173/ ou o endereço que você está rodando o seu ambiente de desenvolvimento. Você deverá ver a listagem de produtos da API Fake Store.

Você também pode visualizar em um dispositivo móvel, ou fazer o deploy para a web, para ver como a aplicação se comporta em diferentes dispositivos. Para fazer o deploy, você pode seguir os passos já estudados nas aulas anteriores.

Note que a listagem de produtos é bem simples e não possui nenhuma estilização. Isso é proposital, pois o foco desta etapa é mostrar como fazer requisições HTTP e exibir os dados na tela. A estilização e a responsividade da aplicação serão feitas a seguir.

< Início Estilização básica >