diff --git a/index.js b/index.js index efa56e2..9da9ca8 100644 --- a/index.js +++ b/index.js @@ -15,6 +15,22 @@ // set installation inspection flag VueMeta.install.installed = true + + // listen for when components mount - when they do, + // update the meta info & the DOM + Vue.mixin({ + mounted () { + this.$root.$updateMeta() + } + }) + + /** + * Updates meta info and renders it to the DOM + */ + Vue.prototype.$updateMeta = function $updateMeta () { + const newMeta = this.$meta() + document.title = newMeta.title + } /** * Does the grunt work of exposing component meta options @@ -30,6 +46,11 @@ * Recursively traverses each component, checking for a `metaInfo` * option. It then merges all these options into one object, giving * higher priority to deeply nested components. + * + * NOTE: This function uses Vue.prototype.$children, the results of which + * are not gauranted to be in order. For this reason, try to avoid + * using the same `metaInfo` property in sibling components. + * * @param {Function} Vue - the Vue constructor * @param {Object} $instance - the current instance * @param {Object} [metaInfo={}] - the merged options @@ -38,16 +59,12 @@ function getMetaInfoDefinition (Vue, $instance, metaInfo) { // set default for first run metaInfo = metaInfo || {} - // if current instance has a metaInfo option, merge it in if ($instance.$options.metaInfo) { metaInfo = Vue.util.mergeOptions(metaInfo, $instance.$options.metaInfo) } - - // check if any children also have a metaInfo option - // NOTE: since the order of $instance.$children cannot be gauranteed, - // you should be careful about non-unique meta properties in - // sibling components + // check if any children also have a metaInfo option, if so, merge + // them into existing data var len = $instance.$children.length if (len) { var i = 0 @@ -55,7 +72,6 @@ metaInfo = getMetaInfoDefinition(Vue, $instance.$children[i], metaInfo) } } - return metaInfo }