Author: John Au-Yeung

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.

Customize Tag Input

We can customize our tag input in various ways.

We can limit the number of tags we can add and the number of characters each can have.

The maxlength prop limits the number of characters in a tag.

The maxtags prop limits the number of tags we can enter.

For example, we can write:

<template>
  <section>
    <div class="field">
      <b-taginput v-model="tags" maxlength="10" placeholder="Add a tag"></b-taginput>
      {{tags}}
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [] };
  }
};
</script>

to limit the number of characters of each tag to 10 max.

And we can write:

<template>
  <section>
    <div class="field">
      <b-taginput v-model="tags" maxtags="5" placeholder="Add a tag"></b-taginput>
      {{tags}}
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [] };
  }
};
</script>

to limit the max number of tags to 5.

We can change the outline color with the type prop on the b-field:

<template>
  <section>
    <b-field type="is-success">
      <b-taginput v-model="tags" placeholder="Add a tag"></b-taginput>
      {{tags}}
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [] };
  }
};
</script>

Now the outline is green.

The type prop can be added to the b-taginput to change the background color of the tags:

<template>
  <section>
    <b-field>
      <b-taginput type="is-dark" v-model="tags" placeholder="Add a tag"></b-taginput>
      {{tags}}
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [] };
  }
};
</script>

The size prop changes the size of the tag input:

<template>
  <section>
    <b-field>
      <b-taginput size="is-large" v-model="tags" placeholder="Add a tag"></b-taginput>
      {{tags}}
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [] };
  }
};
</script>

The rounded prop makes the tag input round:

<template>
  <section>
    <b-field>
      <b-taginput rounded v-model="tags" placeholder="Add a tag"></b-taginput>
      {{tags}}
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [] };
  }
};
</script>

The attched prop makes the tags rectangular:

<template>
  <section>
    <b-field>
      <b-taginput attached v-model="tags" placeholder="Add a tag"></b-taginput>
      {{tags}}
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [] };
  }
};
</script>

We can add validation with the before-adding prop:

<template>
  <section>
    <b-field>
      <b-taginput :before-adding="beforeAdding" v-model="tags" placeholder="Add a tag"></b-taginput>
      {{tags}}
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [] };
  },
  methods: {
    beforeAdding(tag) {
      return tag.length === 3;
    }
  }
};
</script>

The beforeAdding method will be run before the tag is added.

The tag will only be added if it returns true .

tag has the entered value.

Conclusion

We can customize tag inputs the way we like with Buefy’s tag input.

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.

Switch

Buefy provides a switch component for us to use.

For example, we can write:

<template>
  <section>
    <div class="field">
      <b-switch>Default</b-switch>
    </div>
  </section>
</template>

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

We can bind the value withv-model :

<template>
  <section>
    <div class="field">
      <b-switch v-model="isSwitched">{{ isSwitched }}</b-switch>
    </div>
  </section>
</template>

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

the type prop lets us change the style:

<template>
  <section>
    <div class="field">
      <b-switch v-model="isSwitched" type="is-success">{{ isSwitched }}</b-switch>
    </div>
  </section>
</template>

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

The size prop changes the size:

<template>
  <section>
    <div class="field">
      <b-switch v-model="isSwitched" size="is-large">{{ isSwitched }}</b-switch>
    </div>
  </section>
</template>

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

Also, we can set the rounded prop to false to make it square:

<template>
  <section>
    <div class="field">
      <b-switch v-model="isSwitched" :rounded="false">{{ isSwitched }}</b-switch>
    </div>
  </section>
</template>

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

The outlined prop makes it outlined:

<template>
  <section>
    <div class="field">
      <b-switch v-model="isSwitched" outlined>{{ isSwitched }}</b-switch>
    </div>
  </section>
</template>

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

Tag Input

We can add tag input with the b-taginput component.

For example, we can write:

<template>
  <section>
    <div class="field">
      <b-taginput v-model="tags" ellipsis placeholder="Add a tag"></b-taginput>
      {{tags}}
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [] };
  }
};
</script>

We bind the entered tags to an array of strings with v-model .

ellipsis truncates long tag text and adds an ellipsis after it.

Autocomplete

We can add the autocomplete prop to add the autocomplete values:

<template>
  <section>
    <div class="field">
      <b-taginput v-model="tags" :data="filteredTags" autocomplete placeholder="Add a tag"></b-taginput>
      {{tags}}
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [], filteredTags: ["foo", "bar", "baz"] };
  }
};
</script>

data has an array of strings with the choices we can choose from.

autocomplete enables the autocomplete dropdown.

Templated Autocomplete

We can populate the default slot to change the template for the autocomplete control:

<template>
  <section>
    <div class="field">
      <b-taginput v-model="tags" :data="filteredTags" autocomplete placeholder="Add a tag">
        <template slot-scope="props">
          <strong>{{props.option}}</strong>
        </template>
        <template slot="empty">There are no items</template>
      </b-taginput>
      {{tags}}
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [], filteredTags: ["foo", "bar", "baz"] };
  }
};
</script>

props.option has the item that we can select.

Customize Selected Item

We can customize the selected item by populating the selected slot:

<template>
  <section>
    <div class="field">
      <b-taginput
        ref="tagInput"
        v-model="tags"
        :data="filteredTags"
        autocomplete
        placeholder="Add a tag"
      >
        <template slot="selected" slot-scope="props">
          <b-tag
            v-for="(tag, index) in props.tags"
            :key="index"
            type="is-success"
            rounded
            :tabstop="false"
            ellipsis
            closable
            @close="$refs.tagInput.removeTag(index, $event)"
          >{{tag}}</b-tag>
        </template>
      </b-taginput>
      {{tags}}
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return { tags: [], filteredTags: ["foo", "bar", "baz"] };
  }
};
</script>

We set the type to change the style.

is-success makes the tags green.

closable shows the close button so we can remove it.

The b-tag emits the close event so we can remove the entry when we click the close button.

Conclusion

We can add switches and tag inputs with Buefy.

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.

Numeric Slider

We can add a slider to set a numeric value with the b-slider component.

For example, we can write:

<template>
  <section>
    <b-field label="number">
      <b-slider v-model="value"></b-slider>
    </b-field>
  </section>
</template>

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

We add v-model to bind the value to a state.

We can disable it with the disabled prop.

The size can be changed with the size prop:

<template>
  <section>
    <b-field label="number">
      <b-slider size="is-large" :value="20"></b-slider>
    </b-field>
  </section>
</template>

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

The style can be changed with the type prop:

<template>
  <section>
    <b-field label="number">
      <b-slider type="is-success" :value="20"></b-slider>
    </b-field>
  </section>
</template>

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

We can customize the label with the custom-formatter prop:

<template>
  <section>
    <b-field label="number">
      <b-slider type="is-success" :custom-formatter="val => `${val}%`"></b-slider>
    </b-field>
  </section>
</template>

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

now the tooltip shows the % symbol after the number since we set the custom-formatter prop to our own function.

Tick and Label

We can add ticks by populating the default slot with the b-slider-tick component:

<template>
  <section>
    <b-field label="Custom tick and label">
      <b-slider size="is-medium" :min="0" :max="10">
        <template v-for="val in [2,4,6,8]">
          <b-slider-tick :value="val" :key="val">{{ val }}</b-slider-tick>
        </template>
      </b-slider>
    </b-field>
  </section>
</template>

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

Range Slider

We can add a range slider with the min and max props to restrict the range that we can select.

Then the value we bound to v-model would be an array with the min and max values:

<template>
  <section>
    <b-field>
      <b-slider v-model="numbers" :min="0" :max="15" :step="0.5"></b-slider>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {
      numbers: [1, 5]
    };
  }
};
</script>

Lazy Update

We can add the lazy prop to update the v-model value only when dragging is done:

<template>
  <section>
    <b-field>
      <b-slider v-model="value" lazy></b-slider>
    </b-field>
    {{value}}
  </section>
</template>

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

Conclusion

Buefy’s b-slider component is a useful slider component for Vue.

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.