I am making Vue Components out of the Semantic UI CSS framework. What I would like to do is to create a semantic.js (or perhaps a semantic.vue) file that imports all of the components and then import that semantic.js file in my main.js file.
In other words, something like the following:
src/components/semantic.js
import Label from ./elements/Label.vue
import Icon from ./elements/Icon.vue
import Divider from ./elements/Divider.vue
// Am I supposed to export these? If so, how?
src/main.js
import Semantic from ./components/semantic.js
new Vue({
el: '#app',
components: {
Label,
// Icon,
Divider
}
})
My goal is to be able to decide from the main.js file which components I want to include and which ones not without cluttering up the file with all the import statements.
Any idea/suggestion on how to do this?
Thanks.
I would have done that, registering the components globally:
['Label', 'Icon', 'Divider']
.map(c => Vue.component(c, require(`./elements/${c}.vue`)));
If you are a ninja and don't like having to create and maintain register files (as proposed by the other answer), that could be okay.
More advanced, you can also do some dancing around this code to actually register components on the Vue instance level. Everybody will love it:
new Vue({
el: '#app',
components: {
Object.assign({},
...['Label', 'Icon', 'Divider']
.map(c => { return { [c]: require(`./elements/${c}.vue`) }; }))
}
});
ADDENDUM: Added a solution for multiple folders because you asked for it (and because that's fun), but man that's really where it starts to look more like trash than genius. Even Angular users won't want that syntax:
Object.assign({}, ([].concat(...([
['elements', ['Label', 'Icon', 'Divider']],
['otherFolder', ['Bla', 'Blabla', 'Blablabla']],
['otherFolder/whoop', ['OtherThing', 'Foo', 'Bar']]
].map(c => c[1].map(m => { return { [m]: require(`./${c[0]}/${m}.vue`) }; })))
)));
Probably you should think about doing a function, or, do as the other guy said.