mirror of
https://github.com/tenrok/vue-meta.git
synced 2026-06-23 21:10:34 +03:00
plan for more intuitive api
This commit is contained in:
+1
-1
@@ -6,7 +6,7 @@ indent_size = 2
|
|||||||
end_of_line = lf
|
end_of_line = lf
|
||||||
charset = utf-8
|
charset = utf-8
|
||||||
trim_trailing_whitespace = false
|
trim_trailing_whitespace = false
|
||||||
insert_final_newline = false
|
insert_final_newline = true
|
||||||
|
|
||||||
[*.md]
|
[*.md]
|
||||||
trim_trailing_whitespace = false
|
trim_trailing_whitespace = false
|
||||||
@@ -4,6 +4,9 @@
|
|||||||
// initialize vue-meta
|
// initialize vue-meta
|
||||||
var VueMeta = {}
|
var VueMeta = {}
|
||||||
|
|
||||||
|
// initialize manager
|
||||||
|
var _manager = {}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Registers the plugin with Vue.js
|
* Registers the plugin with Vue.js
|
||||||
* Pass it like so: Vue.use(VueMeta)
|
* Pass it like so: Vue.use(VueMeta)
|
||||||
@@ -19,25 +22,43 @@
|
|||||||
// listen for when components mount - when they do,
|
// listen for when components mount - when they do,
|
||||||
// update the meta info & the DOM
|
// update the meta info & the DOM
|
||||||
Vue.mixin({
|
Vue.mixin({
|
||||||
mounted () {
|
mounted: function mounted () {
|
||||||
this.$root.$updateMeta()
|
this.$root.$vueMeta.updateMetaInfo()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// guard against `$vueMeta` being redefined on new server requests
|
||||||
|
if (!Vue.prototype.hasOwnProperty('$vueMeta')) {
|
||||||
|
// define API methods on the `$vueMeta` instance property
|
||||||
|
Object.defineProperty(Vue.prototype, '$vueMeta', {
|
||||||
|
enumerable: true,
|
||||||
|
/**
|
||||||
|
* Meta info manager API factory
|
||||||
|
* @return {Object} - the API for this plugin
|
||||||
|
*/
|
||||||
|
get: function get () {
|
||||||
|
_manager.getMetaInfo = _manager.getMetaInfo || Vue.util.bind(getMetaInfo, this)
|
||||||
|
_manager.updateMetaInfo = _manager.updateMetaInfo || updateMetaInfo
|
||||||
|
return _manager
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Updates meta info and renders it to the DOM
|
* Updates meta info and renders it to the DOM
|
||||||
*/
|
*/
|
||||||
Vue.prototype.$updateMeta = function $updateMeta () {
|
function updateMetaInfo () {
|
||||||
var newMeta = this.$meta()
|
var newMeta = this.getMetaInfo()
|
||||||
document.title = newMeta.title
|
if (newMeta.title) {
|
||||||
|
updateTitle(newMeta.title)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Does the grunt work of exposing component meta options
|
* Fetches corresponding meta info for the current component state
|
||||||
* to the server-rendered context
|
|
||||||
* @return {Object} - all the meta info for currently matched components
|
* @return {Object} - all the meta info for currently matched components
|
||||||
*/
|
*/
|
||||||
Vue.prototype.$meta = function $meta () {
|
function getMetaInfo () {
|
||||||
return getMetaInfoDefinition(Vue, this)
|
return getMetaInfoDefinition(Vue, this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -59,10 +80,12 @@
|
|||||||
function getMetaInfoDefinition (Vue, $instance, metaInfo) {
|
function getMetaInfoDefinition (Vue, $instance, metaInfo) {
|
||||||
// set default for first run
|
// set default for first run
|
||||||
metaInfo = metaInfo || {}
|
metaInfo = metaInfo || {}
|
||||||
|
|
||||||
// if current instance has a metaInfo option...
|
// if current instance has a metaInfo option...
|
||||||
if ($instance.$options.metaInfo) {
|
if ($instance.$options.metaInfo) {
|
||||||
var componentMetaInfo = $instance.$options.metaInfo
|
var componentMetaInfo = $instance.$options.metaInfo
|
||||||
var key
|
var key
|
||||||
|
|
||||||
// ...convert all function type keys to raw data
|
// ...convert all function type keys to raw data
|
||||||
// (this allows meta info to be inferred from props & data)...
|
// (this allows meta info to be inferred from props & data)...
|
||||||
for (key in componentMetaInfo) {
|
for (key in componentMetaInfo) {
|
||||||
@@ -73,9 +96,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ...then merge the data into metaInfo
|
// ...then merge the data into metaInfo
|
||||||
metaInfo = Vue.util.mergeOptions(metaInfo, componentMetaInfo)
|
metaInfo = Vue.util.mergeOptions(metaInfo, componentMetaInfo)
|
||||||
}
|
}
|
||||||
|
|
||||||
// check if any children also have a metaInfo option, if so, merge
|
// check if any children also have a metaInfo option, if so, merge
|
||||||
// them into existing data
|
// them into existing data
|
||||||
var len = $instance.$children.length
|
var len = $instance.$children.length
|
||||||
@@ -85,9 +110,18 @@
|
|||||||
metaInfo = getMetaInfoDefinition(Vue, $instance.$children[i], metaInfo)
|
metaInfo = getMetaInfoDefinition(Vue, $instance.$children[i], metaInfo)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return metaInfo
|
return metaInfo
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* updates the document title
|
||||||
|
* @param {String} title - the new title of the document
|
||||||
|
*/
|
||||||
|
function updateTitle (title) {
|
||||||
|
document.title = title || document.title
|
||||||
|
}
|
||||||
|
|
||||||
// automatic installation when global context
|
// automatic installation when global context
|
||||||
if (typeof Vue !== 'undefined') {
|
if (typeof Vue !== 'undefined') {
|
||||||
Vue.use(VueMeta)
|
Vue.use(VueMeta)
|
||||||
|
|||||||
Reference in New Issue
Block a user