Favor function syntax over per-attribute function syntax

examples/basic-render/app.js

@@ -9,9 +9,9 @@ Vue.component('child', {
   render (h) {
     return h('h3', null, this.page)
   },
-  metaInfo: {
-    title () {
-      return this.page
+  metaInfo () {
+    return {
+      title: this.page
     }
   }
 })

examples/basic/app.js

@@ -10,12 +10,12 @@ new Vue({
       <p>Inspect Element to see the meta info</p>
     </div>
   `,
-  metaInfo: {
+  metaInfo: () => ({
     title: 'Basic',
     titleTemplate: '%s | Vue Meta Examples',
     htmlAttrs: {
       lang: 'en',
       amp: undefined
     }
-  }
+  })
 }).$mount('#app')

examples/vue-router/app.js

@@ -10,9 +10,9 @@ const ChildComponent = {
   name: `child-component`,
   props: ['page'],
   template: `<h3>You're looking at the <strong>{{ page }}</strong> page</h3>`,
-  metaInfo: {
-    title () {
-      return this.page
+  metaInfo () {
+    return {
+      title: this.page
     }
   }
 }

examples/vuex-async/App.vue

@@ -5,3 +5,13 @@
     <p>Inspect Element to see the meta info</p>
   </div>
 </template>
+
+<script>
+  export default {
+    metaInfo: {
+      meta: [
+        { vmid: 'charset', charset: 'utf-8' }
+      ]
+    }
+  }
+</script>

examples/vuex-async/views/Home.vue

@@ -20,7 +20,10 @@
       postsCount: 'publishedPostsCount'
     }),
     metaInfo: {
-      title: 'Home'
+      title: 'Home',
+      meta: [
+        { vmid: 'description', name: 'description', content: 'The home page' }
+      ]
     }
   }
 </script>

examples/vuex-async/views/Post.vue

@@ -28,9 +28,12 @@
       'isLoading',
       'post'
     ]),
-    metaInfo: {
-      title () {
-        return this.isLoading ? 'Loading...' : this.post.title
+    metaInfo () {
+      return {
+        title: this.isLoading ? 'Loading...' : this.post.title,
+        meta: [
+          { vmid: 'description', name: 'description', content: this.post.title }
+        ]
       }
     }
   }

examples/vuex/App.vue

@@ -5,3 +5,13 @@
     <p>Inspect Element to see the meta info</p>
   </div>
 </template>
+
+<script>
+  export default {
+    metaInfo: {
+      meta: [
+        { vmid: 'charset', charset: 'utf-8' }
+      ]
+    }
+  }
+</script>

examples/vuex/views/Home.vue

@@ -20,7 +20,10 @@
       postsCount: 'publishedPostsCount'
     }),
     metaInfo: {
-      title: 'Home'
+      title: 'Home',
+      meta: [
+        { vmid: 'description', name: 'description', content: 'The home page' }
+      ]
     }
   }
 </script>

examples/vuex/views/Post.vue

@@ -18,9 +18,12 @@
     computed: mapGetters([
       'post'
     ]),
-    metaInfo: {
-      title () {
-        return this.post.title
+    metaInfo () {
+      return {
+        title: this.post.title,
+        meta: [
+          { vmid: 'description', name: 'description', content: this.post.title }
+        ]
       }
     }
   }