:sparkles: creating titles for routes

vue-theme/src/pages/index.vue

                 h4.t-cap pages
                 router-link(:to="{ path: `/pages/${Object.values(allPages)[0].slug}` }")
                     p {{ Object.values(allPages)[0].title }}
+        
         .f-row
             section(v-if="allPostsLoaded").shadow
                 router-link(:to="`./posts`")
                     h4.t-cap posts
                 router-link(:to="{ path: `/posts/${Object.values(allPosts)[0].slug}` }")
                     p {{ Object.values(allPosts)[0].title }}
-        .f-row
-            section
-                //- COMPONENT: Looping component
-                .post(v-for="post in allPosts")
-                    h4.post--title {{ post.slug }}
-                    ul.post--content
-                        li.post--content--block(v-for="block in post.blocks" v-html="block")
+     
         .f-row
             footer.f-row
                 p icon
             allEpisodesLoaded: 'allEpisodesLoaded',
         }),
     },
-    data() {
-        return {
-            site: wp.site_name,
-        }
-    },
-    mounted() {
-        console.log('routes: ', wp.routes)
-        console.log('rest url: ', wp.rest)
-        console.log('template: ', wp.template)
+    created() {
+        console.log(wp)
+        console.log(this.$store.state.title)
 
         this.$store.dispatch('getAllPages')
         this.$store.dispatch('getAllPosts')

vue-theme/src/pages/list.vue

             span(v-if="sortBy")
                 h1  sorted by {{ sortBy.replace('-', ' ') }}
 
-        section.shadow
-            h4 {{ type }}
-            p {{ Object.values(posts).length }}
-            p {{ sidebar }}
-        
         .posts(:class="{ 'is-grid': isGrid }")
             section(v-for="post in posts").shadow
                 router-link(:to="`/${type}/${post.slug}`")
                     h4 {{ post.title }} 
                     p(style="font-size: 9px;") {{ post.date }}
 
+        footer
+            p {{ `${type} count: ${Object.values(posts).length}` }}
+            p {{ `show sidebar: ${sidebar}` }}
+        
     sidebar(v-if="sidebar" :type="`${type}`")
         .shadow
             h1.t-up slots stuff
         type() { // Checks for type and fixes Episodes route edge case 
             return typeFromRoute(this.$route)
         },
+        dispatchName() {
+            let type = convertTitleCase(this.type)
+            return this.sortBy ? `getAll${type.split('/')[0]}` : `getAll${type}`
+        },
         posts() {
             let type = convertTitleCase(this.type)
             
             return this.sortBy ? this[`all${type}`] : sortedByRecent
         },
     },
-    watch: {
-        $route(to, from){
-            let type = convertTitleCase(to.path.slice(1))
+    methods: {
+        setHeroAndGetPosts() {
+            let type = convertTitleCase(this.type)
 
-            // Accounts for the sort-by in URL case 
-            let dispatchName = this.sortBy ? `getAll${type.split('/')[0]}` : `getAll${type}`
-            
             // Seperate sorting from post slugs
-            if(Object.values(sortTypes).indexOf(this.sortBy) >= 0) {
-                this.$store.dispatch(dispatchName, this.sortBy)
-            }
-            if(this.$store.state.hero.url !== type) {
-                this.$store.commit('SET_HERO', type)
+            if(!this.sortBy || Object.values(sortTypes).indexOf(this.sortBy) >= 0) { 
+                this.$store.dispatch(this.dispatchName, this.sortBy)
             }
+            if(this.$store.state.hero.url !== type) this.$store.commit('SET_HERO', type)
+        }
+    },
+    watch: {
+        $route(to, from){
+            this.setHeroAndGetPosts()
         }
     },
     created() {
-        let type = convertTitleCase(this.type)
-        
-        this.$store.dispatch(`getAll${type}`, this.sortBy)
-        this.$store.commit('SET_HERO', type)
+        this.setHeroAndGetPosts()
     }
 }
 </script>

vue-theme/src/pages/single.vue

 <template lang="pug">
 .page--single.f-row.between
     gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = -1" :images="images")
+    
     article.f-grow.shadow
         header
             h1 {{ type }}:{{ $route.params.slug }} single
         section(v-if="posts[$route.params.slug]")
             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
             allEpisodes: 'allEpisodes',
             allEpisodesLoaded: 'allEpisodesLoaded',
         }),
-        allLoaded() {
-            const flags = []
-            flags.push(this.allPagesLoaded)
-            flags.push(this.allPostsLoaded)
-            flags.push(this.allArtistsLoaded)
-            flags.push(this.allEpisodesLoaded)
-            return flags.every(Boolean)
-        },
         type() { // Checks for type and fixes Episodes route edge case 
             return typeFromRoute(this.$route)
         },
         if(!this[`all{type}Loaded`]) {
             // console.log('Retrieving...', type)
             this.$store.dispatch(`getAll${type}`)
+            // posts watcher will fire after this
         }
     }
 }

vue-theme/src/router/index.js

 import { createRouter, createWebHistory } from 'vue-router'
 import routes from './routes'
 
+import { convertTitleCase } from '@/utils/helpers'
+
 const router = createRouter({
     history: createWebHistory('/'),
     routes
 })
 
+router.beforeEach((to, from, next) => {
+    document.title = 'Craft in America'
+    // Append list type
+    if(to.path.split('/').length > 1 && to.path.split('/')[1]) {
+        const path = convertTitleCase(to.path.split('/')[1])
+        document.title = `${document.title} - ${path}`
+    }
+    // Append slugs and sort titles
+    if(to.path.split('/')[2]) document.title = `${document.title} - ${to.path.split('/')[2]}`
+
+    next()
+})
+
 export default router

vue-theme/src/store/index.js

 
 // Current page state
 const state = {
-  title: 'Test',
+  title: wp.site_name,
   hero: {
     url: 'http://sample-image-url/',
     text: 'sample hero text',