Cleaner way to require multiple Vue components?

Question

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:

+ js
|--+ components
|  |-- parent.vue
|  |-- child.vue
|-- main.js

Then in my main.js I have the following:

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" });

(I'm not actually certain what vue-resource is, but this was set up for me by a fresh install of Laravel 5.3)

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?)

Is there a way to either have a Vue component list its dependencies (for Browserify / Webpack to bundle) or recursively run a javascript statement on every file in a directory (so Browserify / Webpack just packs up the whole thing)?

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.

Answer 1

The Vue.component syntax is for global components only, if you have a component that is being used inside another component use this:

import Parent from './components/Parent.vue';
import Child from './components/Child.vue';

new Vue({ 
  el: "#app", 
  components: { Parent, Child } 
});

Than inside this components you can use the other components.

The only advantage of using Vue.component(Parent) is that you can use this <parent></parent> component globaly in all your other components without declaring them implicitly.

Good Luck :)

Answer 2

You don't need to import everything at the top level.

In your main.js you can import the Parent component

import Parent from './components/Parent.vue'

new Vue({
  el: "#app",
  components: {
    Parent
  }
})

With your Parent.vue

<template>
  <div>
    <p>I am the parent</p>
    <child></child>
  </div>
</template>

<script>
  import Child from './Child.vue'

  export default {
    mounted() {
      console.log('mounted parent')
    }
  }
</script>

<style scoped>
  // ...
</style>

Then in your Child.vue

<template>
  <p>I am the child</p>
</template>

<script>
  export default {
    mounted() {
      console.log('mounted child')
    }
  }
</script>

<style scoped>
  // ...
</style>

And you should end up with

<div>
  <p>I am the parent</p>
  <p>I am the child</p>
</div>

Answer 3

I found a way, not sure if it's the best in terms of performance and webpack chunk size. I created an index.js file in the components root:

export const HelloWorld = require('./HelloWorld.vue').default

So, inside the components I would use:

const { HelloWorld } = require('@/components')

Due to babel issues I need to make a mix of require and export, also the use of default attribute after require — as I read in some babel use discussions.