cineclub-site/front/pages/index.vue

<template>
  <section class="section">
    <h2 class="title">La semaine prochaine</h2>
    <MovieCardFull :film="firstFilm" />
  </section>
  <section v-if="nextFilms.length" class="section">
    <h2 class="title">Et après</h2>
    <swiper class="w-5/6 ml-auto relative" :loadtheme="false">
      <swiper-slide v-for="film of nextFilms" :key="film.id">
        <MovieCardShort :film="film" class="block" />
      </swiper-slide>
    </swiper>
  </section>
</template>

<script setup lang="ts">
import { Film } from "~/composables/types"
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"

const films = ref<Film[]>()
films.value = (await apiGet<Film[]>(`films/`)).data.value
const firstFilm = computed(() => films.value[0])
const nextFilms = computed(() => films.value.slice(1))
</script>