Add dynamic page title

src/App.vue

@@ -302,6 +302,8 @@
 				.then(res => {
 					this.$store.commit('setForumName', res.data.forumName)
 					this.$store.commit('setForumDescription', res.data.forumDescription)
+
+					this.$store.dispatch('setTitle', this.$store.meta.title)
 				}).catch(err => {
 					if(err.response.data.errors[0].name === 'noSettings') {
 						this.$router.push('/start')
@@ -311,7 +313,20 @@
 				})
 
 			this.axios.get('/api/v1/category')
-				.then(res => this.$store.commit('addCategories', res.data))
+				.then(res => {
+					this.$store.commit('addCategories', res.data)
+					
+					//Need categories to have loaded to set
+					//the title of the index page
+					//but if we're on another page (i.e. title is not set)
+					//don't overwrite the title
+					if(!this.$store.state.meta.title.length) {
+						let selectedCategory = this.$route.params.category.toUpperCase()
+						let category = this.categories.find(c => c.value === selectedCategory)
+
+						this.$store.dispatch('setTitle', category.name)
+					}
+				})
 				.catch(this.ajaxErrorHandler)
 		}
 	}

src/components/routes/Index.vue

@@ -126,6 +126,9 @@
 			},
 			selectedCategory: {
 				set (val) {
+					let name = this.categories.find(c => c.value === val)
+
+					this.$store.dispatch('setTitle', name ? name.name : '')
 					this.$store.commit('setSelectedCategory', val)
 				},
 				get () {

src/components/routes/SettingsAccount.vue

@@ -123,6 +123,9 @@
 						AjaxErrorHandler(this.$store)(e)
 					})
 			}
+		},
+		mounted () {
+			this.$store.dispatch('setTitle', 'account settings')
 		}
 	}
 </script>

src/components/routes/SettingsGeneral.vue

@@ -67,6 +67,8 @@
 			}
 		},
 		created () {
+			this.$store.dispatch('setTitle', 'general settings')
+
 			this.$nextTick(() => {
 				this.axios
 					.get('/api/v1/user/' + this.$store.state.username)

src/components/routes/Start.vue

@@ -231,6 +231,9 @@
 			finish () {
 				if(this.categories.length) this.$router.push('/')
 			}
+		},
+		mounted () {
+			this.$store.dispatch('setTitle', 'start')
 		}
 	}
 </script>

src/components/routes/ThreadNew.vue

@@ -127,6 +127,9 @@
 				}
 			}
 		},
+		mounted () {
+			this.$store.dispatch('setTitle', 'new thread')
+		},
 		beforeRouteEnter (to, from, next) {
 			next(vm => {
 				if(!vm.$store.state.username) {

src/components/routes/UserPosts.vue

@@ -71,6 +71,8 @@
 			}
 		},
 		created () {
+			this.$store.dispatch('setTitle', this.$route.params.username + ' | posts')
+
 			this.axios
 				.get(`/api/v1/user/${this.$route.params.username}?posts=true`)
 				.then(res => {

src/components/routes/UserThreads.vue

@@ -64,6 +64,8 @@
 			}
 		},
 		created () {
+			this.$store.dispatch('setTitle', this.$route.params.username + ' | threads')
+
 			this.axios
 				.get(`/api/v1/user/${this.$route.params.username}?threads=true`)
 				.then(res => {

src/store/index.js

@@ -10,6 +10,7 @@ export default new Vuex.Store({
 	state: {
 		meta: {
 			name: '',
+			title: '',
 			categories: [
 				{ name: 'All', value: 'ALL', color: '#1565C0' }
 			]
@@ -34,6 +35,13 @@ export default new Vuex.Store({
 
 			return categories.filter(category => category.value !== 'ALL' )
 		},
+		title (state) {
+			if(state.meta.title.trim().length) {
+				return state.meta.name + ' | ' + state.meta.title
+			} else {
+				return state.meta.name
+			}
+		},
 		alphabetizedCategories (state) {
 			return state.meta.categories.sort((a, b) => {
 				if(a.name === 'All') return -1
@@ -48,6 +56,12 @@ export default new Vuex.Store({
 			})
 		}
 	},
+	actions: {
+		setTitle ({ state, getters }, value) {
+			state.meta.title = value
+			document.title = getters.title
+		}
+	},
 	mutations: {
 		setAccountTabs (state, index) {
 			state.accountTabs = index;

src/store/modules/thread.js

@@ -70,7 +70,7 @@ const actions = {
 				AjaxErrorHandler(vue.$store)(e)
 			})
 	},
-	loadInitialPostsAsync ({ state, commit, rootState }, vue) {
+	loadInitialPostsAsync ({ state, commit, dispatch, rootState }, vue) {
 		let postNumber = vue.$route.params.post_number
 		let apiURL = '/api/v1/thread/' + vue.$route.params.id
 
@@ -81,7 +81,9 @@ const actions = {
 		vue.axios
 			.get(apiURL)
 			.then(res => {
+
 				commit('setThread', res.data)
+				dispatch('setTitle', res.data.name)
 				commit('setNextURL', res.data.meta.nextURL)
 				commit('setPreviousURL', res.data.meta.previousURL)
 				commit('setNextURL', res.data.meta.nextURL)