title: [Vue warn]: Invalid Component definition
body: <p>I am just starting a Vue site on GoDaddy, here is the link: <a href="http://picmymenu.com/" rel="nofollow noreferrer">http://picmymenu.com/</a>
  I keep getting a warning/error by simply importing a component. Here is my <strong>app.js</strong>:</p>
  
  <pre><code>Vue.component('nav-bar', 'navbar.vue')
  Vue.component('todo-item', {
      template: '&lt;li&gt;This is a todo&lt;/li&gt;'
  })
  var app = new Vue({1
      el: '#app',
      data: {
          message: 'Pic-My-Menu!'
      }
  });
  </code></pre>
  
  <p>Here is what I get:</p>
  
  <pre><code>You are running Vue in development mode.
  Make sure to turn on production mode when deploying for production.
  See more tips at https://vuejs.org/guide/deployment.html
  vue.js:597 [Vue warn]: Invalid Component definition: navbar.vue
  
  (found in &lt;Root&gt;)
  warn @ vue.js:597
  createComponent @ vue.js:4204
  _createElement @ vue.js:4414
  createElement @ vue.js:4351
  vm._c @ vue.js:4483
  (anonymous) @ VM4739:3
  Vue._render @ vue.js:4535
  updateComponent @ vue.js:2788
  get @ vue.js:3140
  Watcher @ vue.js:3129
  mountComponent @ vue.js:2795
  Vue.$mount @ vue.js:8527
  Vue.$mount @ vue.js:10926
  Vue._init @ vue.js:4627
  Vue @ vue.js:4716
  (anonymous) @ app.js:6
  backend.js:1  vue-devtools  Detected Vue v2.5.17 
  </code></pre>
  
  <p>in my app.js I defined a component called "todo-item" simply for testing purposes and it works just fine, however, inserting that same code in a file cases this warning/error.
  Here is my component content "navbar.vue":</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;nav&gt;
              &lt;div class="container"&gt;
                  &lt;a href="#" class="navbar-brand"&gt;PiCMyMenu&lt;/a&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Any ideas?
  <strong>Thanks</strong></p>