Home Temp - Experts Store - Code Experts - Link: https://codeexperts.com.br/curso/laravel-api-rest-e-vuejs

home.html

<div class="max-w-7xl mx-auto">
    <h2>Front Loja Experts Store</h2>

    <div class="grid grid-cols-4 gap-4">
      <a href="#" class="w-[290px] mb-10 shadow hover:shadow-xl">
        <img
          src="assets/no-photo.jpg"
          alt="Imagem Produto Sem Foto"
          class="w-[290px] h-[170px] rounded-xl"
        />
        <div class="w-full p-4">
          <h2 class="text-xl font-thin my-4 capitalize">Produto Nome</h2>
          <h3 class="text-3xl font-bold my-2 p-2 w-full">
            <small class="text-sm">R$</small>
            1.99
          </h3>

          <a class="text-xl font-extralight hover:underline">Compre Agora</a>
        </div>
      </a>
    </div>
  </div>

home.js

import { defineStore } from "pinia";
import httpClient from "@/services/http-client";

export const useHome = defineStore("home", {
  state: () => ({ products: null }),
  getters: {
    getProducts(state) {
      return state.products;
    },
  },
  actions: {
    getHomeProducts() {
      httpClient
        .get("/home")
        .then((response) => (this.products = response.data));
    },
  },
  persist: false,
});