From 6f99fe1b017cad0a60b3571678951b6d7224697a Mon Sep 17 00:00:00 2001
From: Damilola Emmanuel Ogunmoye <dammyammy@gmail.com>
Date: Sun, 22 Dec 2019 09:56:16 +0100
Subject: [PATCH 1/4] Automatically Set Page using VueRouter

Automatically Set Page using VueRouter Lifecycle Hook. Instead of having to call analytics.page on every single page, it becomes tiring a the number of pages grows,  a more streamlined approach would be to call page automatically as the original javascript embed does use the afterEach Hook in VueRouter, and then doing the necessary track, identify etc calls within each Page component.
---
 src/router/index.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index afbd728..4359304 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,7 @@ import About from '@/components/About'
 
 Vue.use(Router)
 
-export default new Router({
+const router = new Router({
   routes: [
     {
       path: '/',
@@ -19,3 +19,9 @@ export default new Router({
     }
   ]
 })
+
+router.afterEach((to) => {
+  window.analytics.page(to.fullPath)
+});
+
+export default router;

From 9d8c2dc2993f9852301f56aaa9755f2f9fb717d9 Mon Sep 17 00:00:00 2001
From: Damilola Emmanuel Ogunmoye <dammyammy@gmail.com>
Date: Sun, 22 Dec 2019 09:59:39 +0100
Subject: [PATCH 2/4] Remove Mounted Hook on Home.vue

This Call is redundant as the page is being set by VueRouter.
---
 src/components/Home.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 4ccac0f..2101330 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -7,9 +7,6 @@
 
 <script>
 export default {
-  name: 'Home',
-  mounted () {
-    window.analytics.page('Home')
-  }
+  name: 'Home'
 }
 </script>

From 0405c0fd0238966b4473ae9fecbfc0f97dc3f3f9 Mon Sep 17 00:00:00 2001
From: Damilola Emmanuel Ogunmoye <dammyammy@gmail.com>
Date: Sun, 22 Dec 2019 10:00:47 +0100
Subject: [PATCH 3/4] Remove Mounted Hook on About.vue

This Call is redundant as the page is being set by VueRouter.
---
 src/components/About.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/About.vue b/src/components/About.vue
index cec60bc..b8141d1 100644
--- a/src/components/About.vue
+++ b/src/components/About.vue
@@ -9,10 +9,7 @@
 
 <script>
 export default {
-  name: 'About',
-  mounted () {
-    window.analytics.page('About')
-  }
+  name: 'About'
 }
 </script>
 

From 55f30432c6336ec5f89e77e9051c3159748663a0 Mon Sep 17 00:00:00 2001
From: Damilola Emmanuel Ogunmoye <dammyammy@gmail.com>
Date: Sun, 22 Dec 2019 10:11:37 +0100
Subject: [PATCH 4/4] Update README to Reflect Update

---
 README.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/README.md b/README.md
index a02d36b..be8a17c 100644
--- a/README.md
+++ b/README.md
@@ -105,6 +105,41 @@ export default {
 </script>
 ```
 
+Or betterstill just hook into VueRouter afterEach Lifecycle, and negate the need to set the page on each component
+
+
+```js
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import Dashboard from '@/Dashboard.vue';
+import About from '@/About.vue';
+
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+ routes: [
+    {
+      path: '/dashboard',
+      name: 'Dashboard',
+      component: Dashboard
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: About
+    }
+  ]
+});
+
+router.afterEach((to) => {
+  //window.analytics.page(to.name) // if you prefer Name
+  window.analytics.page(to.fullPath)
+});
+
+export default router;
+```
+
 ## 🔍 Step 3: Identify Users
 The `identify` method is how you tell Segment who the current user is. It includes a unique User ID and any optional traits you can pass on about them. You can read more about this in the [identify reference](https://segment.com/docs/sources/website/analytics.js/#identify?utm_source=github&utm_medium=click&utm_campaign=protos_vue).