title: Cleaner way to require multiple Vue components?
body: <p>I've just started working with Vue.JS and there's one small issue that's bugging me. My file structure similar to the following:</p>
  
  <pre><code>+ js
  |--+ components
  |  |-- parent.vue
  |  |-- child.vue
  |-- main.js
  </code></pre>
  
  <p>Then in my main.js I have the following:</p>
  
  <pre><code>window.Vue = require('vue');
  require('vue-resource');
  Vue.component('parent', require('./Components/parent'));
  Vue.component('child', require('./Components/child'));
  var app = new Vue({ el: "#app" });
  </code></pre>
  
  <p>(I'm not actually certain what <code>vue-resource</code> is, but this was set up for me by a fresh install of Laravel 5.3)</p>
  
  <p>At a glance I immediately noticed that my main.js file was going to get unmanageable if I added too many components. I don't have this issue when working with ReactJS because main.js only needs to include the "parent" component, and the parent component includes the child component. I figured Vue.JS would have a similar trick to help me organize my components - but reading through the docs I didn't find one (maybe I missed it?)</p>
  
  <p>Is there a way to <strong>either</strong> have a Vue component list its dependencies (for Browserify / Webpack to bundle) <strong>or</strong> recursively run a javascript statement on every file in a directory (so Browserify / Webpack just packs up the whole thing)?</p>
  
  <p>I'm not concerned with async components at the moment - so if the solution breaks that functionality it will be okay. One day I would like to play around with using Webpack to create async components and only loading them as I need them, but today I'm more interested in just getting this up and running so I can play way Vuex.</p>