_slug.vue

<template>
    <DefaultLayout>
        <AppSection
            :class="{
                '!pb-0': !featured.length
            }"
        >
            <AppSectionHeader
                :title="subject.title"
                :subtitle="subject.description"
            />

            <div
                class="flex flex-wrap -ml-4 -mr-4"
                v-if="featured.length"
            >
                <div
                    class="w-full flex md:w-full lg:w-1/3 p-4"
                    v-for="course in featured"
                    :key="course.id"
                >
                    <AppLibraryFeatureCard
                        :course="course"
                    />
                </div>
            </div>
        </AppSection>

        <AppSection id="list">
            <AppListHeader :title="`All ${subject.title} content`" />

            <AppPaginationMeta :pagination="pagination" />

            <AppCourseList class="mb-6">
                <AppCourseListItem
                    v-for="course in courses"
                    :key="course.id"
                    :course="course"
                />
            </AppCourseList>

            <AppPagination
                :pagination="pagination"
                @change="paginationChanged"
            />
        </AppSection>
    </DefaultLayout>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import pluralize from 'pluralize'
    import VueScrollTo from 'vue-scrollto'

    import DefaultLayout from '@/layouts/DefaultLayout'
    import AppSection from '@/components/elements/sections/AppSection'
    import AppSidebarSection from '@/components/elements/sections/AppSidebarSection'
    import AppSectionHeader from '@/components/elements/headers/AppSectionHeader'
    import AppLibraryFeatureCard from '@/components/elements/library/AppLibraryFeatureCard'
    import AppCourseList from '@/components/collections/courses/AppCourseList'
    import AppCourseListItem from '@/components/collections/courses/AppCourseListItem'
    import AppListHeader from '@/components/elements/headers/AppListHeader'
    import AppPagination from '@/components/elements/pagination/AppPagination'
    import AppPaginationMeta from '@/components/elements/pagination/AppPaginationMeta'

    export default {
        head () {
            return {
                title: `${this.subject.title} - Subjects`
            }
        },

        components: {
            DefaultLayout,
            AppSection,
            AppSectionHeader,
            AppLibraryFeatureCard,
            AppCourseList,
            AppCourseListItem,
            AppSidebarSection,
            AppListHeader,
            AppPagination,
            AppPaginationMeta
        },

        data () {
            return {
                featured: []
            }
        },

        computed: {
            ...mapGetters({
                subject: 'subject/subject',
                courses: 'subject/courses',
                pagination: 'subject/pagination'
            })
        },

        methods: {
            pluralize,

            ...mapActions({
                getCourses: 'subject/getCourses'
            }),

            paginationChanged (page) {
                this.getCourses({
                    slug: this.subject.slug,
                    page
                })

                VueScrollTo.scrollTo('#list')
            }
        },

        async asyncData ({ app, store, params, error }) {
            try {
                await store.dispatch('subject/getSubject', params.slug)

                await store.dispatch('subject/getCourses', {
                    slug: params.slug
                })

                const featured = await app.$axios.$get(`/courses?limit=3&subjects[]=${params.slug}&featured=true&featured_key=subject-index`)

                return {
                    featured: featured.data
                }
            } catch (e) {
                if (e.response) {
                    error({ statusCode: e.response.status })
                }
            }
        }
    }
</script>