@morr/vue3-head
Version:
Manipulating the meta information of the head tag, a simple and easy way
186 lines (173 loc) • 4.54 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using vue-head</title>
<meta name="description" id="desc" content="My initial description">
<link rel="canonical" id="canonical" href="http://myblog.com/">
<style>
.item {
display: inline;
margin-right: 8px;
}
</style>
</head>
<body>
<div id="app">
<header>
<router-link :to="{name: 'example'}">HOME</router-link>
<nav>
<ul>
<li class="item">
<router-link :to="{name: 'example.about'}">ABOUT</router-link>
</li>
<li class="item">
<router-link :to="{name: 'example.blog'}">BLOG</router-link>
</li>
<li class="item">
<router-link :to="{name: 'example.contact'}">CONTACT</router-link>
</li>
</ul>
</nav>
</header>
<hr>
<main class="content">
<router-view></router-view>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.min.js"></script>
<script src="../vue-head.js"></script>
<script>
// Component HOME
var home = Vue.extend({
'template': '<router-view></router-view> '
})
// Component ABOUT
var about = Vue.extend({
'template': '<h1>ABOUT</h1>',
data: function () {
return {
infoPage: {
title: 'About me'
}
}
},
head: {
// To use "this" in the component, it is necessary to return the object through a function
title: function () {
return {
inner: this.infoPage.title,
separator: ':)'
}
},
meta: [
{ name: 'description', c: 'About me', id: 'desc' }
],
style: [
{ type: 'text/css', inner: 'body { background-color: #000; color: #fff}' }
],
link: [
{ rel: 'canonical', h: 'http://example.com/#!/about/', id: 'canonical'},
{ rel: 'icon', href: '/static/assets/favicon-16.png', sizes: '16x16', type: 'image/png' },
/* shorthand property */
{ r: 'icon', h: '/static/assets/favicon-32.png', sz: '32x32', t: 'image/png' }
]
}
})
// Component BLOG
var blog = Vue.extend({
data: function () {
return {
params: {
title: 'website name',
description: 'website description',
image: false,
app: 'app name',
}
}
},
mounted: function(){
var self = this
window.setTimeout(function () {
self.params.title = 'new website name'
self.$emit('updateHead')
}, 3000)
},
'template': '<h1>BLOG</h1>',
head: {
title: function () {
return {
inner: this.params.title,
separator: ' ',
complement: ' '
}
},
meta: function () {
return [
{ name: 'application-name', content: this.params.app },
{ name: 'description', content: this.params.description },
{ name: 'twitter:title', content: this.params.title },
{ n: 'twitter:description', c: this.params.description},
{ p: 'og:image', c: this.params.image },
]
}
}
})
// Component CONTACT
var contact = Vue.extend({
'template': '<h1>CONTACT</h1>',
head: {
title: {
inner: 'It will be a pleasure',
separator: ' ', // Leave empty separator
complement: ' ' // Leave empty complement
},
meta: [
{ name: 'description', c: 'Happy for your contact', id: 'desc' }
],
link: [
{ rel: 'canonical', h: 'http://example.com/#!/contact/', id: 'canonical'}
]
}
})
// CONFIGURATION
Vue.use(VueHead)
Vue.use(VueRouter)
var router = new VueRouter({
mode: 'history',
routes: [
{
path: '/example',
name: 'example',
component: home,
children: [
{
path: 'about',
name: 'example.about',
component: about
},
{
path: 'blog',
name: 'example.blog',
component: blog
},
{
path: 'contact',
name: 'example.contact',
component: contact
}
]
},
{
path: '*',
component: home
}
]
})
var App = new Vue({
router: router
}).$mount('#app')
</script>
</body>
</html>