Horizontal list
bulbasaur
#1
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png)
grass
poison
ivysaur
#2
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png)
grass
poison
venusaur
#3
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/3.png)
grass
poison
<script setup lang="ts">import { ref } from "vue";import { useDragAndDrop } from "vue-fluid-dnd";import type { Pokemon } from "./Pokemon";import PokemonComponent from "./PokemonComponent.vue";import { fetchPokemons } from "@/server/pokemonServer";
const pokemons = ref([] as Pokemon[]);pokemons.value = await fetchPokemons(3);const { parent } = useDragAndDrop(pokemons, { direction: "horizontal", draggingClass: "dragging-pokemon",});</script><template> <div class="flex max-sm:justify-center items-start"> <div ref="parent" class="bg-gray-200/60 border-solid border-black/40 rounded-2xl border-4 p-4 max-sm:p-2 flex flex-row overflow-auto gap-2 max-sm:gap-1" > <PokemonComponent class="min-w-44 max-sm:min-w-32" v-for="(pokemon, index) in pokemons" :key="pokemon.name" :index="index" :pokemon="pokemon" /> </div> </div></template>