VueJS Multiselect change default for all selects

Question

Im using the vue-multiselect.js (https://vue-multiselect.js.org/).

Atm I need to translate all text to german. Atm Im doing it with customs inside the multiselect

<multiselect id="account-selected" @input="selectParent" v-model="account.parent_account" placeholder="Tippen um Suche zu starten" :multiple="false" ... :options="optionsParents">
            <span slot="noResult">Suche ergab keine Treffer</span>
            <span slot="noOptions">Keine Optionen</span>
          </multiselect>

Its working fine, but Im using these multiselects frequently. So its a pain to maintain it. I need to change it at every multiselect in every component. Is there a way to define these "noResult", "noOptions", "placeholder" etc globally? So its the same for every multiselect in every component?

Answer 1

You can make your own Multiselect component based on vue-multiselect

Here is the demonstration I make in codesandbox for your reference:

https://codesandbox.io/s/dazzling-yonath-pjsxt?file=/src/components/CustomMultiSelect.vue

The idea is to make a vue component which only have vue-multiselect and set all fixed settings there, like placeholder, slot. For all dynamic value, it can be retrieved by value/event ($attrs, $listeners) pass though provided by vue.

CustomMutliSelect.vue

<template>
  <multiselect
    v-bind="$attrs"
    v-on="$listeners"
    placeholder="Tippen um Suche zu
      starten"
  >
    <span slot="noResult">Suche ergab keine Treffer</span>
    <span slot="noOptions">Keine Optionen</span>

    <!-- Below template for Testing -->
    <template slot="singleLabel" slot-scope="{ option }"
      ><strong>{{ option }}</strong> is written in<strong>
        {{ option }}</strong
      ></template
    >
  </multiselect>
</template>

App.vue

<CustomMultiSelect
      id="account-selected"
      v-model="value"
      :multiple="false"
      :options="options"
    />

With CustomMultSelect, you can apply it everywhere without duplicating placeholder and slots.