Skip to content

Instantly share code, notes, and snippets.

@tuarrep
Last active December 27, 2023 15:52
Show Gist options
  • Save tuarrep/ba7ac0d86e9cd194afc4faa27ca5b068 to your computer and use it in GitHub Desktop.
Save tuarrep/ba7ac0d86e9cd194afc4faa27ca5b068 to your computer and use it in GitHub Desktop.
Validation installation VueJs
<template>
<div class="p-12">
<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<li v-for="product in products" :key="product.id"
class="col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
<div class="flex w-full items-center justify-between space-x-6 p-6">
<div class="flex-1 truncate">
<div class="flex items-center space-x-3">
<h3 class="truncate text-sm font-medium text-gray-900">{{ product.title }}</h3>
<span
class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
{{ product.category }}
</span>
</div>
<p class="mt-1 truncate text-sm text-gray-500">{{ product.description }}</p>
</div>
<img class="h-10 w-10 flex-shrink-0 rounded-full bg-gray-300" :src="product.image" alt="" />
</div>
<div>
<div class="-mt-px flex divide-x divide-gray-200">
<div class="flex w-0 flex-1">
<p
class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900">
{{ product.price }}
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</template>
<script setup>
import { useFetch } from '@vueuse/core'
const { data: products } = useFetch('https://fakestoreapi.com/products?limit=21').json()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment