feat: add afterNavigation callback (fix: #259)

Author: pimlie

README.md

@@ -657,6 +657,24 @@ Will be called when the client `metaInfo` updates/changes. Receives the followin
 
 Default `false`. If set to `true` then vue-meta will pause updating `metaInfo` during page navigation and only refresh once when navigation has finished. It does this by adding a global beforeEach and afterEach navigation guard on the vue-router instance.
 
+#### `afterNavigation` (Function)
+
+Will be called when the client `metaInfo` has changed after navigation occured. Receives the following parameters:
+- `newInfo` (Object) - The new state of the `metaInfo` object.
+
+> :warning: This option only works when `refreshOnceOnNavigation: true`. Please see the [vue-router example](./examples/vue-router)
+
+`this` context is the component instance `afterNavigation` is defined on.
+
+```js
+{
+  metaInfo: {
+    afterNavigation (newInfo) {
+      console.log('Meta info update finished after navigation!')
+    }
+  }
+}
+```
 
 ### How `metaInfo` is Resolved
 

examples/vue-router/app.js

@@ -7,18 +7,26 @@ Vue.use(VueMeta, {
   refreshOnceOnNavigation: true
 })
 
+let metaUpdated = 'no'
 const ChildComponent = {
   name: `child-component`,
   props: ['page'],
-  template: `<h3>You're looking at the <strong>{{ page }}</strong> page</h3>`,
+  template: `<div>
+<h3>You're looking at the <strong>{{ page }}</strong> page</h3>
+<p>Has metaInfo been updated? {{ metaUpdated }}</p>
+</div>`,
   metaInfo () {
     return {
-      title: `${this.page} - ${this.date && this.date.toTimeString()}`
+      title: `${this.page} - ${this.date && this.date.toTimeString()}`,
+      afterNavigation() {
+        metaUpdated = 'yes'
+      }
     }
   },
   data() {
     return {
-      date: null
+      date: null,
+      metaUpdated
     };
   },
   mounted() {

src/client/refresh.js

@@ -30,6 +30,6 @@ export default function _refresh(options = {}) {
       metaInfo.changed.call(this, metaInfo, tags.addedTags, tags.removedTags)
     }
 
-    return metaInfo
+    return { vm: this, metaInfo, tags }
   }
 }

src/shared/mixin.js

@@ -81,7 +81,12 @@ export default function createMixin(Vue, options) {
                 next()
               })
 
-              $router.afterEach(() => $rootMeta.resume())
+              $router.afterEach(() => {
+                const { vm, metaInfo } = $rootMeta.resume()
+                if (metaInfo && metaInfo.afterNavigation && isFunction(metaInfo.afterNavigation)) {
+                  metaInfo.afterNavigation.call(vm, metaInfo)
+                }
+              })
             }
           }
         }

src/shared/options.js

@@ -1,4 +1,4 @@
-import { isObject } from './typeof'
+import { isObject, isFunction } from './typeof'
 
 import {
   keyName,
@@ -29,5 +29,15 @@ export default function setOptions(options) {
     }
   }
 
+  if (options.afterNavigation && !isFunction(options.afterNavigation)) {
+    console.warn(`afterNavigation should be a function, received ${typeof options.afterNavigation} instead`) // eslint-disable-line no-console
+    options.afterNavigation = void 0
+    return options
+  }
+
+  if (options.afterNavigation && !options.refreshOnceOnNavigation) {
+    options.refreshOnceOnNavigation = true
+  }
+
   return options
 }

test/plugin-browser.test.js

@@ -100,7 +100,7 @@ describe('plugin', () => {
     expect(batchUpdateSpy).not.toHaveBeenCalled()
     jest.clearAllMocks()
 
-    const metaInfo = wrapper.vm.$meta().resume()
+    const { metaInfo } = wrapper.vm.$meta().resume()
     expect(metaInfo.title).toBe(title)
   })
 })