traxxx/assets/components/actors/actors.vue

<template>
    <div class="actors">
        <Actor
            v-for="actor in actors"
            :key="`actor-${actor.id}`"
            :actor="actor"
        />
    </div>
</template>

<script>
import Actor from '../tile/actor.vue';

async function mounted() {
    this.pageTitle = 'Actors';
    this.actors = await this.$store.dispatch('fetchActors', { limit: 1000 });
}

export default {
    components: {
        Actor,
    },
    data() {
        return {
            actors: [],
            pageTitle: null,
        };
    },
    mounted,
};
</script>

<style lang="scss" scoped>
@import 'theme';

.actors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, .5fr));
    grid-gap: 0 .5rem;
    padding: 1rem;
}

@media(max-width: $breakpoint) {
    .actors {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }
}
</style>