Add i18n translation to document titles in the router.

knadh · Feb 24, 2022 · 76a86fa · 76a86fa
1 parent 45878db
commit 76a86fa
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 30 deletions.
diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -19,6 +19,22 @@ Vue.config.productionTip = false;
 Vue.prototype.$utils = new Utils(i18n);
 Vue.prototype.$api = api;
 
+// Setup the router.
+router.beforeEach((to, from, next) => {
+  if (to.matched.length === 0) {
+    next('/404');
+  } else {
+    next();
+  }
+});
+
+router.afterEach((to) => {
+  Vue.nextTick(() => {
+    const t = to.meta.title ? `${i18n.tc(to.meta.title, 0)} /` : '';
+    document.title = `${t} listmonk`;
+  });
+});
+
 new Vue({
   router,
   store,

diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
@@ -14,97 +14,97 @@ const routes = [
   {
     path: '/',
     name: 'dashboard',
-    meta: { title: 'Dashboard' },
+    meta: { title: '' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Dashboard.vue'),
   },
   {
     path: '/lists',
     name: 'lists',
-    meta: { title: 'Lists', group: 'lists' },
+    meta: { title: 'globals.terms.lists', group: 'lists' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Lists.vue'),
   },
   {
     path: '/lists/forms',
     name: 'forms',
-    meta: { title: 'Forms', group: 'lists' },
+    meta: { title: 'forms.title', group: 'lists' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Forms.vue'),
   },
   {
     path: '/lists/:id',
     name: 'lists',
-    meta: { title: 'Lists', group: 'lists' },
+    meta: { title: 'globals.terms.lists', group: 'lists' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Lists.vue'),
   },
   {
     path: '/subscribers',
     name: 'subscribers',
-    meta: { title: 'Subscribers', group: 'subscribers' },
+    meta: { title: 'globals.terms.subscribers', group: 'subscribers' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Subscribers.vue'),
   },
   {
     path: '/subscribers/import',
     name: 'import',
-    meta: { title: 'Import subscribers', group: 'subscribers' },
+    meta: { title: 'import.title', group: 'subscribers' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Import.vue'),
   },
   {
     path: '/subscribers/bounces',
     name: 'bounces',
-    meta: { title: 'Bounces', group: 'subscribers' },
+    meta: { title: 'globals.terms.bounces', group: 'subscribers' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Bounces.vue'),
   },
   {
     path: '/subscribers/lists/:listID',
     name: 'subscribers_list',
-    meta: { title: 'Subscribers', group: 'subscribers' },
+    meta: { title: 'globals.terms.subscribers', group: 'subscribers' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Subscribers.vue'),
   },
   {
     path: '/subscribers/:id',
     name: 'subscriber',
-    meta: { title: 'Subscribers', group: 'subscribers' },
+    meta: { title: 'globals.terms.subscribers', group: 'subscribers' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Subscribers.vue'),
   },
   {
     path: '/campaigns',
     name: 'campaigns',
-    meta: { title: 'Campaigns', group: 'campaigns' },
+    meta: { title: 'globals.terms.campaigns', group: 'campaigns' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Campaigns.vue'),
   },
   {
     path: '/campaigns/media',
     name: 'media',
-    meta: { title: 'Media', group: 'campaigns' },
+    meta: { title: 'globals.terms.media', group: 'campaigns' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Media.vue'),
   },
   {
     path: '/campaigns/templates',
     name: 'templates',
-    meta: { title: 'Templates', group: 'campaigns' },
+    meta: { title: 'globals.terms.templates', group: 'campaigns' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Templates.vue'),
   },
   {
     path: '/campaigns/analytics',
     name: 'campaignAnalytics',
-    meta: { title: 'Campaign analytics', group: 'campaigns' },
+    meta: { title: 'analytics.title', group: 'campaigns' },
     component: () => import(/* webpackChunkName: "main" */ '../views/CampaignAnalytics.vue'),
   },
   {
     path: '/campaigns/:id',
     name: 'campaign',
-    meta: { title: 'Campaign', group: 'campaigns' },
+    meta: { title: 'globals.terms.campaign', group: 'campaigns' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Campaign.vue'),
   },
   {
     path: '/settings',
     name: 'settings',
-    meta: { title: 'Settings', group: 'settings' },
+    meta: { title: 'globals.terms.settings', group: 'settings' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Settings.vue'),
   },
   {
     path: '/settings/logs',
     name: 'logs',
-    meta: { title: 'Logs', group: 'settings' },
+    meta: { title: 'logs.title', group: 'settings' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Logs.vue'),
   },
 ];
@@ -122,18 +122,4 @@ const router = new VueRouter({
   },
 });
 
-router.beforeEach((to, from, next) => {
-  if (to.matched.length === 0) {
-    next('/404');
-  } else {
-    next();
-  }
-});
-
-router.afterEach((to) => {
-  Vue.nextTick(() => {
-    document.title = `${to.meta.title} / listmonk`;
-  });
-});
-
 export default router;