<script setup lang="ts">
const BASE = "https://api.scryfall.com";
const url = new URL("/cards/random", BASE);
url.searchParams.append("q", `-c:colorless -t:land year>=2010`);
const { pending, data: card } = useLazyFetch(url.toString());
</script>
<template>
<div v-if="pending">Loading....</div>
<div v-else>
<div>
<h1 class="text-3xl font-bold underline">MTG Card guesser</h1>
<pre>{{ JSON.stringify(card, null, 2) }}</pre>
</div>
</div>
</template>
<script setup lang="ts">
const BASE = "https://api.scryfall.com";
const url = new URL("/cards/random", BASE);
url.searchParams.append("q", `-c:colorless -t:land year>=2010`);
const { pending, data: card } = useLazyFetch(url.toString());
</script>
<template>
<div v-if="pending">Loading....</div>
<div v-else>
<div>
<h1 class="text-3xl font-bold underline">MTG Card guesser</h1>
<pre>{{ JSON.stringify(card, null, 2) }}</pre>
</div>
</div>
</template>