Skip to content

Instantly share code, notes, and snippets.

@ktquez
Last active August 7, 2016 05:05
Show Gist options
  • Save ktquez/6f7d31e554cc3b62cbf30c4d17c89e8e to your computer and use it in GitHub Desktop.
Save ktquez/6f7d31e554cc3b62cbf30c4d17c89e8e to your computer and use it in GitHub Desktop.
Vue-head in ES6 to use in component scope
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'}
]
}
}
}
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