1

I use this vue-multiselect plugin: https://vue-multiselect.js.org/
Since I'm going to use it many times, I want to set some defaults props.

For example I want the selectLabel prop to be an empty string, and maybe to sets some <slot>s.

In a typical jQuery plugin I could use $.plugin.defaults to set the defaults. How to do the same with vue plugins?

user3599803
  • 6,435
  • 17
  • 69
  • 130

1 Answers1

5

You can use extends to subclass your component. Pass it a spec just like you would use when defining a component, but only supply the things you want to provide defaults for.

<script>
  import Multiselect from 'vue-multiselect';

  export default {
    extends: Multiselect,
    props: {
      selectLabel: {
        type: String,
        default: ''
      }
    }
  }
</script>
tony19
  • 125,647
  • 18
  • 229
  • 307
Roy J
  • 42,522
  • 10
  • 78
  • 102
  • An example how to use with component? – user3599803 May 31 '18 at 11:12
  • Works great. And how can I provide the default slots? – user3599803 May 31 '18 at 21:12
  • I'm not sure you can do that with `extends`. I think you would have to make a [wrapper component](https://vuejs.org/v2/examples/select2.html) to specify a template that includes your base component and its slots. – Roy J Jun 01 '18 at 13:19
  • Can you explain how this will go with `extends` ? it seems to me that I need to override the component template, which I obviously don't want to. And I can't see any convenient way – user3599803 Jun 01 '18 at 14:21
  • That is why I don't think you can do it with `extends`. You need to make a wrapper component. – Roy J Jun 01 '18 at 16:50