Vue-multiselect: Global configuration support?

[ricardobanegas]

Have an application where I make use of many <multiselect> on different views with forms.

It would be nice with a default configuration object that fits my project so that I don't need to send it like props for every single component.

Is there a proposed way to do this?

Example of what I had in mind:

const multiselectGlobalConfig = {
    placeholder: null,
    tagPlaceholder: null
}

import Multiselect from 'vue-multiselect'

Multiselect.config(multiselectGlobalConfig)

Great library by the way 👍

[shentao]

Interesting idea! For now you can create a functional component wrapper with different configurations that could be used as a default Multiselect.

[ricardobanegas]

Thanks for the quick reply! Do you have an example?

[shentao]

Will add one when I get back home! :)

[shentao]

Hey @ricardobanegas!
Created a fiddle for you. Hope that helps! :)
https://jsfiddle.net/fw462fmg/

Alternatively:
https://jsfiddle.net/fw462fmg/1/

[ricardobanegas]

Thanks @shentao will experiment a bit the fiddles :)

[guilhermeaiolfi]

I don't think that's a viable solution. For me, at least, it breaks data-binding and the component is not usable anymore. Is there a more robust solution or workaround for this?

[bartdominiak]

Is there any workaround for data-binding? (as @guilhermeaiolfi s said, is not usable anymore)

[shentao]

@bartdominiak I’m not sure what do you mean. Could you please provide a reproduction link?

[guilhermeaiolfi]

@shentao none of the other props works in your example. We would need to redefine all props and I don't know how that would work for @search-change and such. For the moment I'm doing:

Vue.component('my-multiselect', {
  mixins: [VueMultiselect],
  props: {
    selectLabel: {
        default: "<enter> to select item"
    },
    selectGroupLabel: {
        default: "<enter> to select group"
    },
    placeholder: { 
        default: "My new palceholder"
    }
  }
})

The only thing missing is the noResult label. It's hardcode in a slot. maybe that slot could still exists but get the text from a prop as well. Hope that it helps others.

[phlegx]

Any solution about this issue?