title: Why do I get the error [Unknown custom element: did you register the component correctly?] when I try to nest local components?
body: <p>I'm new to Vue and I'm trying to organize my app a little bit. I originally had 2 components: <code>PageTable</code> and <code>PageRow</code>. When nested, they worked just fine. However, when I use <code>PageTable</code> with a new component <code>Title</code> in <code>AllPages</code>, I get the error: </p>
  
  <pre><code>[Vue warn]: Unknown custom element: &lt;page-title&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option.
  
  found in
  
  ---&gt; &lt;AllPages&gt;
         &lt;Root&gt;
  
  ------------------------
  
  vue.js:634 [Vue warn]: Unknown custom element: &lt;page-table&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option.
  
  found in
  
  ---&gt; &lt;AllPages&gt;
         &lt;Root&gt;
  
  </code></pre>
  
  <p>Any help pointing me in the correct direction would be awesome.</p>
  
  <p><strong>JS File</strong></p>
  
  <pre><code>//Components:
  var AllPages = {
    components: {
      'page-title': Title,
      'page-table': PageTable
    },
    template: `
      &lt;div class="container"&gt;
        &lt;page-title&gt;&lt;/page-title&gt;
        &lt;div class="table-responsive-sm" id="pageChart"&gt;
            &lt;page-table&gt;&lt;/page-table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `
  }
  
  var Title = {
    name: 'page-title',
    props: {
      title: String
    },
    template: `
      &lt;div class="row"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col"&gt;
            &lt;h1&gt;{{ title }}:&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `
  }
  
  var PageTable = {
    data: function() {
      return{
        pages: []
      }
    },
    mounted: function() {
      this.fetchPages();
    },
    methods: {
      fetchPages: function(e) {
          this.pages = [];
          var self = this;
  
          console.log('beginning function');
  
          var xhttp = new XMLHttpRequest();
  
          xhttp.onreadystatechange = function() {
  
            // For a successful response
            if (this.readyState == 4 &amp;&amp; this.status == 200) {
              var response = JSON.parse(this.responseText);
              console.log(response);
              self.pages = response.data;
  
              }
            };
  
          xhttp.open('GET', this.$parent.createReqURL('admin/videos/all/'), true);
          xhttp.send(); //Data needs to be sent in string format (content type set above)
        },
        editPage: function(query){
          console.log(query);
          window.location.href = '../admin/create.html?' + query;
        },
        loadDetails: function(){
  
        }
      },
      components: {
        'page-row': PageRow
      },
      template:`
      &lt;table class="table table-striped table-hover"&gt;
        &lt;thead&gt;
          &lt;tr class="row"&gt;
            &lt;th class="col"&gt;Slug&lt;/th&gt;
            &lt;th class="col"&gt;Artist Name&lt;/th&gt;
            &lt;th class="col"&gt;Tour&lt;/th&gt;
            &lt;th class="col-sm-1 alignCenter"&gt;Edit&lt;/th&gt;
            &lt;th class="col-sm-1 alignCenter"&gt;Details&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;page-row
            v-for="page in pages"
            v-bind:key="page.slug"
            v-bind:page="page"&gt;
          &lt;/page-row&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
      `
  }
  
  var PageRow = {
    props: ['page'],
    template: `
    &lt;tr class="row"&gt;
      &lt;td class="col"&gt;&lt;a href="https://exclusive.livenation.com/" target=_blank&gt;{{ page.slug }}&lt;/a&gt;&lt;/td&gt;
      &lt;td class="col"&gt;{{ page.artist }}&lt;/td&gt;
      &lt;td class="col"&gt;{{ page.tour }}&lt;/td&gt;
      &lt;td class="col-sm-1 alignCenter icon"&gt;&lt;img src="styles/images/icon_edit.svg" alt=""&gt;&lt;/td&gt;
      &lt;td class="col-sm-1 alignCenter icon"&gt;&lt;img src="styles/images/icon_info.svg" alt=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
    `
  }
  
  
  //App
  var app = new Vue({
    el: '#app',
    data: {
      currentComponent: 'all-pages',
    },
    components: {
      'all-pages': AllPages,
    },
    mounted: function(){
    },
    methods: {
      createReqURL: function(path) {
        var baseURL = 'http://localhost:3000/';
        return baseURL + path;
      }
    }
  });
  </code></pre>
  
  <p>Here is my <strong>HTML</strong>:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="app"&gt;
        &lt;universal-header&gt;&lt;/universal-header&gt;
        &lt;component :is="currentComponent"&gt;&lt;/component&gt;
        &lt;universal-footer&gt;&lt;/universal-footer&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>