New store module for setting the document title. Each route changes the document title to its name

src/modules/documentTitle.js

@@ -0,0 +1,37 @@
+const capitalize = (string) => {
+  return string.includes(' ') ? 
+    string.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).replace('_', ' ')).join(' ')
+    : string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+const setDocumentTitle = (state) => {
+  document.title = `${state.emoji} ${state.titlePrefix} | ${capitalize(state.title)}`
+}
+
+export default {
+  namespaced: true,
+  state: {
+    emoji: '🍕',
+    titlePrefix: 'request',
+    title: undefined
+  },
+  getters: {},
+  mutations: {
+    SET_EMOJI: (state, emoji) => {
+      state.emoji = emoji
+      setDocumentTitle(state)
+    },
+    SET_TITLE: (state, title) => {
+      state.title = title
+      setDocumentTitle(state)
+    }
+  },
+  actions: {
+    updateEmoji({ commit }, emoji) {
+      commit('SET_EMOJI', emoji)
+    },
+    updateTitle({ commit }, title) {
+      commit('SET_TITLE', title)
+    }
+  }
+}

src/routes.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router';
+import store from '@/store'
 
 Vue.use(VueRouter)
 
@@ -18,19 +19,19 @@ let routes = [
   {
     name: 'list',
     path: '/list/:name',
-    component: (resolve) => require(['./components/MoviesList.vue'], resolve)
+    component: (resolve) => require(['./components/ListPage.vue'], resolve)
   },
   {
     name: 'request',
     path: '/request/all',
     components: {
-      'request-router-view': require('./components/MoviesList.vue')
+      'request-router-view': require('./components/ListPage.vue')
     }
   },
   {
     name: 'search',
     path: '/search',
-    component: (resolve) => require(['./components/MoviesList.vue'], resolve)
+    component: (resolve) => require(['./components/Search.vue'], resolve)
   },
   {
     name: 'register',
@@ -47,13 +48,6 @@ let routes = [
     path: '/signin',
     component: (resolve) => require(['./components/Signin.vue'], resolve)
   },
-  {
-    name: 'settings',
-    path: '/profile/settings',
-    components: {
-      'search-router-view': require('./components/Settings.vue')
-    }
-  },
   // {
   //   name: 'user-requests',
   //   path: '/profile/requests',
@@ -84,6 +78,8 @@ const router =  new VueRouter({
 });
 
 router.beforeEach((to, from, next) => {
+  store.dispatch('documentTitle/updateTitle', to.name)
+
   // Toggle mobile nav
   if(document.querySelector('.nav__hamburger--active')){
     document.querySelector('.nav__hamburger').classList.remove('nav__hamburger--active');

src/store.js

@@ -3,13 +3,15 @@ import Vuex from 'vuex'
 
 import torrentModule from './modules/torrentModule.js'
 import darkmodeModule from './modules/darkmodeModule.js'
+import documentTitle from './modules/documentTitle.js'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
     torrentModule,
-    darkmodeModule
+    darkmodeModule,
+    documentTitle
   }
 })