Recently, I've been immersed in developing a Single Page Application (SPA) using the powerful combination of Vue 3, TypeScript, and integrating The Movie Database (TMDB) API.
One interesting challenge I encountered was with my versatile movie card component (MovieCard.vue) that needed to adapt its behavior based on different contexts.
<template>
<div class="movie card" @click="showDetails(movie.id)">
<div class="thumbnail">
<img
:src="movieCardImage"
:alt="movie.title"
class="img-fluid"
/>
</div>
<div class="card-content">
<h2 class="card-title">{{ movie.title }}</h2>
<p class="card-desc">{{ movie.overview }}</p>
<span :title="`Score: ${movie.vote_average}`" class="score">{{ movie.vote_average}}</span>
</div>
<div class="card-footer">
<p class="m-0 release">
Release date: {{ dateTime(movie.release_date) }}
</p>
<p v-if="movieGenres" class="m-0 pt-1">
<span class="genre" v-for="genre in movieGenres" :key="genre.id">
{{ genre.name }}
</span>
</p>
</div>
</div>
</template>
... additional script and template code ...
In one context, the MoviesList.vue component is where this movie card shines:
<template>
<div class="row list">
<div
v-for="movie in movies"
:key="movie.id"
class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"
>
<MovieCard :movie="movie" :genres="genres" />
</div>
</div>
</template>
... additional script and template code ...
Here's how it looks:
https://i.sstatic.net/2vIjZ.jpg
In another scenario, specifically within the ActorDetails.vue component, I noticed the need for some tweaks. In this case, I wanted to exclude the votes average display:
<div v-if="knownFor" class="movies">
<h2 class="section-title">Known For</h2>
<div class="row list">
<div
v-for="item in knownFor"
:key="item.id"
class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"
>
<MovieCard :movie="item" />
</div>
</div>
</div>
Desired result for ActorDetails:
https://i.sstatic.net/TQleZ.jpg
How to make the movie card component elements optional?
I attempted a straightforward approach by styling it out in the ActorDetails component, but ran into issues due to scoped styles:
.score {
display: none !important;
}
Seeking an effective method to achieve this customization without compromising scoped styling!
Experience it live on Stackblitz
Take a look at the functional implementation on Stackblitz HERE.