Piped/src/components/TrendingPage.vue

<template>
    <h1 class="uk-text-bold uk-text-center">Trending</h1>

    <hr />

    <div class="uk-grid-collapse" style="width: 100%" uk-grid="parallax: 0">
        <div
            class="uk-tile-default"
            style="width: 300px; background: #0b0e0f"
            v-bind:key="video.url"
            v-for="video in videos"
        >
            <div
                class="uk-card uk-card-default uk-card-body uk-grid-match uk-text-secondary"
                style="background: #0b0e0f"
            >
                <router-link
                    class="uk-text-emphasis"
                    v-bind:to="video.url || '/'"
                >
                    <p>{{ video.title }}</p>
                    <img style="width: 100%" v-bind:src="video.thumbnail" />
                </router-link>
                <router-link
                    class="uk-link-muted"
                    v-bind:to="video.uploaderUrl || '/'"
                >
                    <p>{{ video.uploaderName }}</p>
                </router-link>
                <font-awesome-icon icon="eye"></font-awesome-icon>
                {{ video.views }} views
            </div>
        </div>
    </div>
</template>

<script>
import Constants from "@/Constants.js";

export default {
    data() {
        return {
            videos: []
        };
    },
    mounted() {
        document.title = "Trending - Piped";

        this.fetchTrending().then(videos => (this.videos = videos));
    },
    methods: {
        async fetchTrending() {
            return await (await fetch(Constants.BASE_URL + "/trending")).json();
        }
    }
};
</script>