Cleaner way to require multiple Vue components?
Solution 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 :)
Solution 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>
Related videos on Youtube
stevendesu
I like to code. That's about it. I prefer web-based applications. PHP, MySQL, HTML, CSS, JavaScript... I can also code in Perl or Python for shell automation and C++ when I need something to run fast. I'm learning ASM. I'm a Computer Engineering graduate with a Masters in Business Administration. Math and algorithms come easily for me. Art and graphics do not. I'm also a certified Mac Genius. Summer jobs. Whee. I don't own a Macintosh, but I can tear them apart, rebuild them, and fix just about any problem with them.
Updated on June 04, 2022Comments
-
stevendesu almost 2 years
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.