add basic render example + fix a bug where missing root metInfo prevented fetching metaInfo from deeper in the component heirarchy

2026-06-16 07:20:34 +03:00 · 2016-11-06 21:59:12 +02:00
parent 1f64d1ea7f
commit 2f6c27b750
4 changed files with 47 additions and 15 deletions
@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import VueMeta from 'vue-meta'
+
+Vue.use(VueMeta)
+
+Vue.component('child', {
+  name: 'Child',
+  props: ['page'],
+  render (h) {
+    return h('h3', null, this.page)
+  },
+  metaInfo: {
+    title () {
+      return this.page
+    }
+  }
+})
+
+new Vue({
+  template: `
+    <div id="app">
+      <h1>Basic Render</h1>
+      <p>Inspect Element to see the meta info</p>
+      <child page="This is a prop"></child>
+    </div>
+  `
+}).$mount('#app')
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/basic-render.js"></script>
@@ -8,6 +8,7 @@
  <h1>Vue Meta Examples</h1>
  <ul>
    <li><a href="basic">Basic</a></li>
+    <li><a href="basic-render">Basic Render</a></li>
  </ul>
 </body>
 </html>
@@ -34,22 +34,21 @@ export default function getComponentOption (opts, result = {}) {
        clone: true,
        arrayMerge
      })
-
-      // collect & aggregate child options if deep = true
-      if (deep && component.$children.length) {
-        component.$children.forEach((childComponent) => {
-          result = getComponentOption({
-            component: childComponent,
-            option,
-            deep,
-            arrayMerge
-          }, result)
-        })
-      }
-
-      return result
+    } else {
+      result = data
    }
-    result = data
+  }
+
+  // collect & aggregate child options if deep = true
+  if (deep && component.$children.length) {
+    component.$children.forEach((childComponent) => {
+      result = getComponentOption({
+        component: childComponent,
+        option,
+        deep,
+        arrayMerge
+      }, result)
+    })
  }

  return result