From ec3bcb64f51a67557e5cd40e1a086423df07ed16 Mon Sep 17 00:00:00 2001
From: John Langone <johnlangone@gmail.com>
Date: Wed, 18 Jul 2018 14:45:46 -0400
Subject: [PATCH] added titlePrefix and titleSuffix properties inline with
 title.

---
 src/index.js  | 33 +++++++++++++++++++++++++++++----
 src/mixin.js  | 18 ++++++++++++++++--
 src/router.js | 21 +++++++++++++++++----
 3 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/src/index.js b/src/index.js
index 77adf8d..fe32941 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import mixin from './mixin'
 import { setPageTitle } from './page-title'
 import { setup as setupRouter } from './router'
+import {safeString} from './utils'
 
 const install = (Vue, options = {}) => {
   // prevent double install
@@ -10,7 +11,9 @@ const install = (Vue, options = {}) => {
 
   // title state
   const $page = {
-    title: ''
+    title: '',
+    prefix: safeString(options.prefix),
+    suffix: safeString(options.suffix)
   }
 
   const setTitle = value => {
@@ -18,18 +21,40 @@ const install = (Vue, options = {}) => {
     $page.title = value
   }
 
-  // make reactive title
+  const setPrefix = value => {
+    options.prefix = value
+    setTitle($page.title)
+  }
+
+  const setSuffix = value => {
+    options.suffix = value
+    setTitle($page.title)
+  }
+
+  // make reactive title properties
   Vue.util.defineReactive($page, 'title', '')
+  Vue.util.defineReactive($page, 'prefix', '')
+  Vue.util.defineReactive($page, 'suffix', '')
 
-  // add title to component context
+  // add title elements to component context
   Object.defineProperty(Vue.prototype, '$title', {
     get: () => $page.title,
     set: value => setTitle(value)
   })
 
+  Object.defineProperty(Vue.prototype, '$titlePrefix', {
+    get: () => $page.prefix,
+    set: value => setPrefix(value)
+  })
+
+  Object.defineProperty(Vue.prototype, '$titleSuffix', {
+    get: () => $page.suffix,
+    set: value => setSuffix(value)
+  })
+
   // vue router support
   if (options.router) {
-    setupRouter(setTitle, options)
+    setupRouter(setTitle, setPrefix, setSuffix, options)
   }
 
   // add global mixin
diff --git a/src/mixin.js b/src/mixin.js
index 0f344b5..c2642a7 100644
--- a/src/mixin.js
+++ b/src/mixin.js
@@ -2,14 +2,28 @@ import { isFunction } from './utils'
 
 const pageTitleMixin = {
   created () {
-    const { title } = this.$options
+    const { title, titlePrefix, titleSuffix } = this.$options
 
     if (title !== undefined) {
-      // allow use dinamic title system
+      // allow use dynamic title system
       this.$title = isFunction(title)
         ? title.call(this, this)
         : title
     }
+
+    if (titlePrefix !== undefined) {
+      // allow use dynamic titlePrefix system
+      this.$titlePrefix = isFunction(titlePrefix)
+        ? titlePrefix.call(this, this)
+        : titlePrefix
+    }
+
+    if (titleSuffix !== undefined) {
+      // allow use dynamic titleSuffix system
+      this.$titleSuffix = isFunction(titleSuffix)
+        ? titleSuffix.call(this, this)
+        : titleSuffix
+    }
   }
 }
 
diff --git a/src/router.js b/src/router.js
index 8668b0b..7900266 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,13 +4,26 @@
  * @param  {Object}     options     { router: RouterInstance }
  * @return {void}
  */
-const setup = (setTitle, { router }) => {
+const setup = (setTitle, setPrefix, setSuffix, { router }) => {
   router.afterEach((to, from) => {
     const { meta } = to
 
-    // if has meta and title
-    if (meta && meta.title) {
-      setTitle(meta.title)
+    // if has meta
+    if (meta) {
+      // if has title
+      if (meta.title) {
+        setTitle(meta.title)
+      }
+
+      // if has titlePrefix
+      if (meta.titlePrefix) {
+        setPrefix(meta.titlePrefix)
+      }
+
+      // if has titleSuffix
+      if (meta.titleSuffix) {
+        setSuffix(meta.titleSuffix)
+      }
     }
   })
 }