Added page title function for Composition API components.

assets/js/main.js

@@ -8,6 +8,7 @@ import router from './router';
 import initStore from './store';
 import initUiObservers from './ui/observers';
 import initAuthObservers from './auth/observers';
+import setPageTitle from './set-page-title';
 
 import { formatDate, formatDuration } from './format';
 
@@ -101,12 +102,7 @@ async function init() {
 		},
 		watch: {
 			pageTitle(title) {
-				if (title) {
-					document.title = `traxxx - ${title}`;
-					return;
-				}
-
-				document.title = 'traxxx';
+				setPageTitle(title); // for Options API components
 			},
 		},
 		beforeCreate() {

assets/js/router.js

@@ -1,5 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 
+import setPageTitle from './set-page-title';
+
 import Home from '../components/home/home.vue';
 import Login from '../components/auth/login.vue';
 import Signup from '../components/auth/signup.vue';
@@ -257,11 +259,17 @@ const routes = [
 		path: '/stats',
 		component: Stats,
 		name: 'stats',
+		meta: {
+			title: 'Stats',
+		},
 	},
 	{
 		path: '/not-found',
 		name: 'not-found',
 		component: NotFound,
+		meta: {
+			title: 'Not Found',
+		},
 	},
 	{
 		path: '/:catchAll(.*)',
@@ -276,4 +284,6 @@ const router = createRouter({
 	routes,
 });
 
+router.beforeEach((to) => setPageTitle(to.meta.title));
+
 export default router;

assets/js/set-page-title.js

@@ -0,0 +1,10 @@
+function setPageTitle(name) {
+	if (name) {
+		document.title = `traxxx - ${name}`;
+		return;
+	}
+
+	document.title = 'traxxx';
+}
+
+export default setPageTitle;