vue-multiselect does not load CSS

Question

I am using vue-multiselect component (b15) with vue-cli (webpack template) but the component's CSS is not loaded and the component renders wrong. Any idea?

My code:

<template>
  <div>
      <div class="select2-container select2-container-multi full-width">
        <multiselect
          class="form-control form-control-select textarea" 
          :class="{ 'has-error': showError }"
          :options="localOptions"
          :label="labelKey"
          track-by="id"
          :multiple="multiple"
          :selected="value"
          :searchable="true"
          :placeholder="placeholder" 
          :loading="loading"
          :custom-label="formatLabel"
          :disabled="disabled"
          :readonly="readonly"
          @input="updateSelected"
          @close="blur">
        </multiselect>
      </div>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  mixins: [inputMixin],

  components: {
    Multiselect
  }
}
</script>

Multiselect is rendered and everything just no style is applied.

Answer 1

You need to add css seperately at the end, so you file looks like that:

<template>
  <div>
      <div class="select2-container select2-container-multi full-width">
        <multiselect
          class="form-control form-control-select textarea" 
          :class="{ 'has-error': showError }"
          @input="updateSelected"
          @close="blur">
        </multiselect>
      </div>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  mixins: [inputMixin],
      components: {
    Multiselect
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>