Buefy — Dropdowns

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Select Dropdown

We can add a select dropdown with the b-select component.

For example, we can write:

<template>
  <section>
    <b-field label="Simple">
      <b-select placeholder="Select a fruit">
        <option v-for="option in data" :value="option.id" :key="option.id">{{ option.name }}</option>
      </b-select>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: "apple" },
        { id: 2, name: "orange" },
        { id: 3, name: "grape" }
      ]
    };
  }
};
</script>

to add it.

We can use v-model to bind the selected value to a state:

<template>
  <section>
    <b-field label="Simple">
      <b-select placeholder="Select a fruit" v-model="val">
        <option v-for="option in data" :value="option.id" :key="option.id">{{ option.name }}</option>
      </b-select>
      {{val}}
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {
      val: 0,
      data: [
        { id: 1, name: "apple" },
        { id: 2, name: "orange" },
        { id: 3, name: "grape" }
      ]
    };
  }
};
</script>

Also, we can set the type and message props to set the style and add a message:

<template>
  <section>
    <b-field label="Simple" type="is-danger" message="error">
      <b-select placeholder="Select a fruit" v-model="val">
        <option v-for="option in data" :value="option.id" :key="option.id">{{ option.name }}</option>
      </b-select>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {
      val: 0,
      data: [
        { id: 1, name: "apple" },
        { id: 2, name: "orange" },
        { id: 3, name: "grape" }
      ]
    };
  }
};
</script>

type is the type, and message is displayed below the dropdown.

The loading prop shows a loading indicator.

And disabled prop disables the dropdown.

We add them both to the b-select component.

Multiple Selection

Also, we can enable multiple selection with the multiple prop:

<template>
  <section>
    <b-field>
      <b-select multiple placeholder="Select fruits" v-model="fruits">
        <option v-for="option in data" :value="option.id" :key="option.id">{{ option.name }}</option>
      </b-select>
    </b-field>
    {{fruits}}
  </section>
</template>

<script>
export default {
  data() {
    return {
      fruits: 0,
      data: [
        { id: 1, name: "apple" },
        { id: 2, name: "orange" },
        { id: 3, name: "grape" }
      ]
    };
  }
};
</script>

We see the selected values in an array.

Icons

We can add an icon on the left side of the dropdown by wrting:

<template>
  <section>
    <b-field>
      <b-select placeholder="Country" icon="address-book" icon-pack="fa">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </b-select>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

The icon-pack prop sets the icon library to use.

fa stands for Font Awesome.

icon has the name of the icon from the library we want to add.

To add Font Awesome 4.7.0, we add:

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />

in the head tag of public/index.html .

Sizes

We can change the size with the size prop:

<template>
  <section>
    <b-field>
      <b-select placeholder="Country" size="is-large">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </b-select>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

Conclusion

We add the dropdowns with Buefy into our Vue app.