vue-wp/vue-theme/src/pages/single.vue

<template lang="pug">
.page--single.f-row.between
    article.f-grow.shadow
        header
            h1 {{ type }}:{{ $route.params.slug }} single

        section
            h4 {{ posts[$route.params.slug].title }}
            .block-wrapper(v-for="block in posts[$route.params.slug].blocks" v-html="block")
    
    sidebar(v-if="sidebar" :type="`${type}`")
        .shadow
            h1.t-up single slot
            div
                p body whatever
</template>

<script>
import { mapGetters } from 'vuex'
import sidebar from '@/components/sidebars/sidebar'

export default {
    props: {
        sidebar: {
            type: Boolean
        }
    },
    components: {
        sidebar: sidebar
    },
    computed: {
        ...mapGetters({
            allPages: 'allPages',
            allPagesLoaded: 'allPagesLoaded',

            allPosts: 'allPosts',
            allPostsLoaded: 'allPostsLoaded',

            allArtists: 'allArtists',
            allArtistsLoaded: 'allArtistsLoaded',

            allEpisodes: 'allEpisodes',
            allEpisodesLoaded: 'allEpisodesLoaded',
        }),
        type() { // Checks for type and fixes Episodes route edge case 
            return this.$route.params.type ? this.$route.params.type : this.$route.fullPath.slice(1)
        },
        posts() {
            let type = this.type.charAt(0).toUpperCase() + this.type.slice(1)

            // Return list keyed by slug
            return Object.values(this[`all${type}`]).reduce((postsMap, post) => { 
                postsMap[post.slug] = post
                return postsMap
            }, {})
        },
    },
    mounted() {
        // TODO: this should be conditional after checking vuex state
        let type = this.$route.params.type
        type = type.charAt(0).toUpperCase() + type.slice(1)
        this.$store.dispatch(`getAll${type}`)
    }
}
</script>