title: Importing Vue Components with Webpack
body: <p>I have a hello world Vue app setup with Webpack and have the initial App component working and mounted to body. Although within that App component I can't figure out how to use more components I made.</p>
  <p><code>main.js</code></p>
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import App from './app.vue'
      
  new Vue({ 
    el: 'body',
    components: { App }
  })
  </code></pre>
  <p><code>app.vue</code></p>
  <pre class="lang-vue prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;message&quot;&gt;{{ message }}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data () {
        return {
          message: 'Hello World'
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>I have tried</p>
  <pre class="lang-js prettyprint-override"><code>import TopBar from './top-bar.vue'
  </code></pre>
  <p>In both main.js and the script section of app.vue then tried using</p>
  <pre class="lang-vue prettyprint-override"><code>&lt;top-bar&gt;&lt;/top-bar&gt;
  </code></pre>
  <p>without luck.</p>
  <p>I think I'm missing how to register the component properly, such as in the Vue docs it does:</p>
  <pre class="lang-js prettyprint-override"><code>Vue.component('top-bar', TopBar)
  </code></pre>
  <p>But I think when using webpack with vue-loader I need to do something different.</p>