New-site/resources/views/Schedule/Links.vue

<script>
    import axios from "axios";

    export default {
        name: "Links",
        data: () => ({
            links: [],
            fetching: true,
            windowHeight: document.documentElement.clientHeight,
            windowWidth: document.documentElement.clientWidth,
            isWide: window.innerWidth >= 460
        }),
        mounted() {
            axios
                .get('/api/v1/links')
                .then(response => {
                    this.links = response.data;
                    this.fetching = false;
                });
            this.myEventHandler();
            window.addEventListener("resize", this.myEventHandler, { passive: true });
        },
        created() {
            window.addEventListener("resize", this.myEventHandler);
        },
        methods: {
            myEventHandler(e) {
                this.windowHeight = document.documentElement.clientHeight;
                this.windowWidth = document.documentElement.clientWidth;
                this.isWide = this.windowWidth >= 460;
            }
        }
    }
</script>

<template>
    <div class="w-100 d-flex justify-center">
        <v-list :class="isWide ? 'w-66' : 'w-100'">
            <v-skeleton-loader v-if="fetching" type="list-item"/>
            <v-list-item v-else class="ma-5 bg-gradient-noh" elevation="6" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
                <template v-slot:prepend>
                    <v-avatar :image="link.image" rounded="0"></v-avatar>
                </template>
                <v-list-item-title>{{ link.link_name }}</v-list-item-title>
            </v-list-item>
        </v-list>
    </div>
</template>

<style scoped>
    .bg-gradient-noh {
        background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
        background-size: 200% 200%;
        animation: gradient 15s ease infinite;
    }
</style>