title: How to import a component in Vuejs 2
body: <p>I'm really confused about importing a VueJs component.</p>
  
  <p>I'm using Vuejs 2.2.4, and I need to import a Vuejs component. Here is my <code>app.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>Vue.component('Test', require('./Test.vue'));
  
  const app = new Vue({
      el: '#vue-app',
  });
  </code></pre>
  
  <p><em>Assume <code>app.js</code> is located in <code>MyProject/js/app.js</code></em></p>
  
  <p>And here is my component <code>SimpleCompnent.vue</code> :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-8 col-md-offset-2"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;Simple Component&lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          I'm an Simple component!
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          mounted() {
              console.log('Simple Component mounted.')
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><em>Assume <code>SimpleCompnent.vue</code> is located in <code>MyProject/js/SimpleCompnent.vue</code></em></p>
  
  <p>Seems like Vue can't load the component! It throws this error in the browser console:</p>
  
  <pre class="lang-none prettyprint-override"><code>Uncaught ReferenceError: require is not defined
  </code></pre>