Last active
August 7, 2016 05:05
-
-
Save ktquez/6f7d31e554cc3b62cbf30c4d17c89e8e to your computer and use it in GitHub Desktop.
Vue-head in ES6 to use in component scope
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { vueHead } from '/path/to/plugin/vue-head-es6' | |
export default { | |
// use extends with vue v1.0.22+ | |
extends: vueHead | |
// use mixins with vue v1.0.21- | |
// mixins: [head] | |
data () { | |
return { | |
//... | |
} | |
}, | |
// To use "this" in the component, it is necessary to return the object through a function | |
head: { | |
title: { | |
inner: 'About me' | |
}, | |
meta: [ | |
{ name: 'description', content: 'Conheça um pouco mais sobre mim, sou FullStack Web Developer, focado em PHP e Javascript ...'}, | |
{ itemprop: 'name', content: 'About me' }, | |
{ ip: 'description', c: 'Conheça um pouco mais sobre mim, sou FullStack Web Developer, focado em PHP e Javascript ...' } | |
], | |
link () { | |
return [ | |
{ rel: 'canonical', href: this.$el.baseURI + '/', id: 'canonical'} | |
] | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const opt = { | |
compl: document.title, | |
separator: '|' | |
} | |
const diffTitle = {} | |
let els = [] | |
const util = { | |
// sh = shorthand | |
shorthand: { | |
ch: 'charset', | |
tg: 'target', | |
n: 'name', | |
he: 'http-equiv', | |
ip: 'itemprop', | |
c: 'content', | |
p: 'property', | |
sc: 'scheme', | |
r: 'rel', | |
h: 'href', | |
sz: 'sizes', | |
t: 'type', | |
s: 'src', | |
a: 'async', | |
d: 'defer', | |
i: 'inner' | |
}, | |
getPlace (place) { | |
return document.getElementsByTagName(place)[0] | |
}, | |
undoTitle (state) { | |
if (!state.before) return | |
document.title = state.before | |
}, | |
undo () { | |
if (!els.length) return | |
els.map(el => { | |
el.parentElement.removeChild(el) | |
}) | |
els = [] | |
}, | |
title (val) { | |
if (!val) return | |
diffTitle.before = opt.compl | |
document.title = `${val.inner} ${val.separator || opt.separator} ${val.compl || opt.compl}` | |
}, | |
common (arr, tag, place) { | |
if (!arr) return | |
arr.map(obj => { | |
let parent = this.getPlace(place) | |
let el = document.getElementById(obj.id) || document.createElement(tag) | |
Object.keys(obj).map(prop => { | |
let sh = (this.shorthand[prop] || prop) | |
if (sh.match(/(body|undo)/g)) return | |
if (sh === 'inner') { | |
el.textContent = obj[prop] | |
return | |
} | |
el.setAttribute(sh, obj[prop]) | |
}) | |
if (obj.body) parent = this.getPlace('body') | |
parent.appendChild(el) | |
if (obj.undo !== undefined && !obj.undo) return | |
els.push(el) | |
}) | |
} | |
} | |
export const VueHead = { | |
ready () { | |
let head = this.$options.head | |
if (!head) return | |
Object.keys(head).map(key => { | |
let prop = head[key] | |
if (!prop) return | |
let obj = (typeof prop === 'function') ? head[key].bind(this)() : head[key] | |
if (key === 'title') { | |
util[key](obj) | |
return | |
} | |
util.common(obj, key, 'head') | |
}) | |
}, | |
destroyed () { | |
let head = this.$options.head | |
if (head.title.undo) { | |
util.undoTitle(diffTitle) | |
} | |
util.undo() | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment