Importing Vue Components with Webpack
<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>