CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-loader
Moshe
Moshe

Reputation: 7007

Vue-Loader - Importing a File that Imports Components

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.

Upvotes: 1

Views: 1418

Answers (2)

FitzFish
FitzFish

Reputation: 8629

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.

Upvotes: 3

Hammerbot
Hammerbot

Reputation: 16364

You should be able to export thoses components by making this: 

import Label from ./elements/Label.vue
import Icon from ./elements/Icon.vue
import Divider from ./elements/Divider.vue

export Label
export Icon
export Divider

And then choose in your .vue which component you wish to import:

import { Label, Divider } from ./components/semantic.js 

new Vue({
  el: '#app',

  components: {
    Label,
    Divider
   }

})

Upvotes: 1

Related Questions