Skip to content

Commit 6592b1d

Browse files
author
Declan de Wet
authored
Merge pull request #15 from declandewet/fix/taglist-duplicate-overrides
Favor function syntax over per-attribute function syntax
2 parents 7c58dfc + beda704 commit 6592b1d

File tree

13 files changed

+102
-83
lines changed

13 files changed

+102
-83
lines changed

‎README.md‎

Lines changed: 28 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,7 @@
7575
- [Performance](#performance)
7676
- [How to prevent the update on the initial page render](#how-to-prevent-the-update-on-the-initial-page-render)
7777
- [FAQ](#faq)
78-
- [How do I use component data in `metaInfo`?](#how-do-i-use-component-data-in-metainfo)
79-
- [How do I use component props in `metaInfo`?](#how-do-i-use-component-props-in-metainfo)
78+
- [How do I use component props and/or component data in `metaInfo`?](#how-do-i-use-component-props-andor-component-data-in-metainfo)
8079
- [How do I populate `metaInfo` from the result of an asynchronous action?](#how-do-i-populate-metainfo-from-the-result-of-an-asynchronous-action)
8180
- [Examples](#examples)
8281

@@ -610,71 +609,56 @@ Add the `data-vue-meta-server-rendered` attribute to the `<html>` tag on the ser
610609

611610
Here are some answers to some frequently asked questions.
612611

613-
## How do I use component data in `metaInfo`?
614-
Specify a function instead of an object. It will need to return the same type as its definition.
612+
## How do I use component props and/or component data in `metaInfo`?
615613

616-
**BlogPost.vue:**
614+
Easy. Instead of defining `metaInfo` as an object, define it as a function and access `this` as usual:
615+
616+
**Post.vue:**
617617
```html
618618
<template>
619-
<div id="page">
619+
<div>
620620
<h1>{{ title }}</h1>
621621
</div>
622622
</template>
623623

624624
<script>
625625
export default {
626-
name: 'BlogPost',
627-
data: () => ({
628-
title: 'Sample blog post'
629-
}),
630-
metaInfo: {
631-
title () {
632-
return this.title
626+
name: 'post',
627+
props: ['title'],
628+
data () {
629+
return {
630+
description: 'A blog post about some stuff'
631+
}
632+
},
633+
metaInfo ()
634+
return {
635+
title: this.title,
636+
meta: [
637+
{ vmid: 'description', name: 'description', content: this.description }
638+
]
633639
}
634640
}
635641
}
636642
</script>
637643
```
638644

639-
## How do I use component props in `metaInfo`?
640-
The same way you use data - specify a function instead of an object. It will need to return the same type as its definition.
641-
642-
**BlogPostWrapper.vue**
645+
**PostContainer.vue:**
643646
```html
644647
<template>
645-
<div id="page">
646-
<blog-post :title="title"></blog-post>
648+
<div>
649+
<post :title="title"></post>
647650
</div>
648651
</template>
649652

650653
<script>
651-
import BlogPost from './BlogPost.vue'
654+
import Post from './Post.vue'
652655
653656
export default {
654-
name: 'BlogPostWrapper',
655-
components: { BlogPost },
656-
data: () => ({
657-
title: 'Example blog post'
658-
})
659-
}
660-
</script>
661-
```
662-
663-
**BlogPost.vue**
664-
```html
665-
<template>
666-
<div id="page">
667-
<h1>{{ title }}</h1>
668-
</div>
669-
</template>
670-
671-
<script>
672-
export default {
673-
name: 'BlogPost',
674-
props: ['title'],
675-
metaInfo: {
676-
title () {
677-
return this.title
657+
name: 'post-container',
658+
components: { Post },
659+
data () {
660+
return {
661+
title: 'Example blog post'
678662
}
679663
}
680664
}

‎examples/basic-render/app.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ Vue.component('child', {
99
render (h) {
1010
return h('h3', null, this.page)
1111
},
12-
metaInfo: {
13-
title () {
14-
return this.page
12+
metaInfo () {
13+
return {
14+
title: this.page
1515
}
1616
}
1717
})

‎examples/basic/app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ new Vue({
1010
<p>Inspect Element to see the meta info</p>
1111
</div>
1212
`,
13-
metaInfo: {
13+
metaInfo: () => ({
1414
title: 'Basic',
1515
titleTemplate: '%s | Vue Meta Examples',
1616
htmlAttrs: {
1717
lang: 'en',
1818
amp: undefined
1919
}
20-
}
20+
})
2121
}).$mount('#app')

‎examples/vue-router/app.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ const ChildComponent = {
1010
name: `child-component`,
1111
props: ['page'],
1212
template: `<h3>You're looking at the <strong>{{ page }}</strong> page</h3>`,
13-
metaInfo: {
14-
title () {
15-
return this.page
13+
metaInfo () {
14+
return {
15+
title: this.page
1616
}
1717
}
1818
}

‎examples/vuex-async/App.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,13 @@
55
<p>Inspect Element to see the meta info</p>
66
</div>
77
</template>
8+
9+
<script>
10+
export default {
11+
metaInfo: {
12+
meta: [
13+
{ vmid: 'charset', charset: 'utf-8' }
14+
]
15+
}
16+
}
17+
</script>

‎examples/vuex-async/views/Home.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@
2020
postsCount: 'publishedPostsCount'
2121
}),
2222
metaInfo: {
23-
title: 'Home'
23+
title: 'Home',
24+
meta: [
25+
{ vmid: 'description', name: 'description', content: 'The home page' }
26+
]
2427
}
2528
}
2629
</script>

‎examples/vuex-async/views/Post.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,12 @@
2828
'isLoading',
2929
'post'
3030
]),
31-
metaInfo: {
32-
title () {
33-
return this.isLoading ? 'Loading...' : this.post.title
31+
metaInfo () {
32+
return {
33+
title: this.isLoading ? 'Loading...' : this.post.title,
34+
meta: [
35+
{ vmid: 'description', name: 'description', content: this.post.title }
36+
]
3437
}
3538
}
3639
}

‎examples/vuex/App.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,13 @@
55
<p>Inspect Element to see the meta info</p>
66
</div>
77
</template>
8+
9+
<script>
10+
export default {
11+
metaInfo: {
12+
meta: [
13+
{ vmid: 'charset', charset: 'utf-8' }
14+
]
15+
}
16+
}
17+
</script>

‎examples/vuex/views/Home.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@
2020
postsCount: 'publishedPostsCount'
2121
}),
2222
metaInfo: {
23-
title: 'Home'
23+
title: 'Home',
24+
meta: [
25+
{ vmid: 'description', name: 'description', content: 'The home page' }
26+
]
2427
}
2528
}
2629
</script>

‎examples/vuex/views/Post.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,12 @@
1818
computed: mapGetters([
1919
'post'
2020
]),
21-
metaInfo: {
22-
title () {
23-
return this.post.title
21+
metaInfo () {
22+
return {
23+
title: this.post.title,
24+
meta: [
25+
{ vmid: 'description', name: 'description', content: this.post.title }
26+
]
2427
}
2528
}
2629
}

0 commit comments

Comments
 (0)