Category: 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.

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.

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.

Radio Button

We can add radio buttons to let users select options from a set.

For example, we can write:

<template>  
  <section>  
    <div class="block">  
      <b-radio v-model="fruit" name="fruit" native-value="apple">apple</b-radio>  
      <b-radio v-model="fruit" name="fruit" native-value="orange">orange</b-radio>  
      <b-radio v-model="fruit" name="fruit" native-value="grape">grape</b-radio>  
    </div>  
    <p>{{fruit}}</p>  
  </section>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      fruit: ""  
    };  
  }  
};  
</script>

to add the b-radio components to add the radio buttons.

name and v-model should be the same so we can only select one of them.

native-value has the value we set as the model value.

v-model binds the selected value to the model.

Sizes

We can change the size with the size prop:

<template>  
  <section>  
    <div class="block">  
      <b-radio size="is-large" v-model="fruit" name="fruit" native-value="apple">apple</b-radio>  
      <b-radio size="is-large" v-model="fruit" name="fruit" native-value="orange">orange</b-radio>  
      <b-radio size="is-large" v-model="fruit" name="fruit" native-value="grape">grape</b-radio>  
    </div>  
    <p>{{fruit}}</p>  
  </section>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      fruit: ""  
    };  
  }  
};  
</script>

is-large made them large.

Type

We can change the styles with the type prop:

<template>  
  <section>  
    <div class="block">  
      <b-radio type="is-success" v-model="fruit" name="fruit" native-value="apple">apple</b-radio>  
      <b-radio type="is-success" v-model="fruit" name="fruit" native-value="orange">orange</b-radio>  
      <b-radio type="is-success" v-model="fruit" name="fruit" native-value="grape">grape</b-radio>  
    </div>  
    <p>{{fruit}}</p>  
  </section>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      fruit: ""  
    };  
  }  
};  
</script>

is-success make the radio buttons green.

Radio Button

We can style the radio buttons as buttons.

For example, we can write:

<template>  
  <section>  
    <b-field>  
      <b-radio-button v-model="radioButton" native-value="foo" type="is-danger">  
        <span>foo</span>  
      </b-radio-button>  
      <b-radio-button v-model="radioButton" native-value="bar" type="is-success">  
        <span>bar</span>  
      </b-radio-button>  
      <b-radio-button v-model="radioButton" native-value="baz">baz</b-radio-button>  
      <b-radio-button v-model="radioButton" native-value="disabled" disabled>disabled</b-radio-button>  
    </b-field>  
    <p>{{fruit}}</p>  
  </section>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      radioButton: ""  
    };  
  }  
};  
</script>

The type sets the styles.

b-radio-button render as buttons, but we can only choose one of them between the choices.

Rating Component

We can add a star rating input with the b-rate component.

For example, we can write:

<template>  
  <section>  
    <b-rate custom-text="rating" icon-pack="fa" icon="star"></b-rate>  
  </section>  
</template>  
<script>  
export default {};  
</script>

We set the icon-pack and icon to see the start icon.

It emits the change event:

<template>  
  <section>  
    <b-rate custom-text="rating" @change="success" icon-pack="fa" icon="star"></b-rate>  
  </section>  
</template>  
<script>  
export default {  
  methods: {  
    success() {  
      this.$buefy.toast.open({  
        message: "success",  
        type: "is-success"  
      });  
    }  
  }  
};  
</script>

We can bind the selected value with v-model :

<template>  
  <section>  
    <b-rate custom-text="rating" v-model="rating" icon-pack="fa" icon="star"></b-rate>  
  </section>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      rating: 0  
    };  
  }  
};  
</script>

Conclusion

We can add a star rating and radio buttons 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.

Number Input

We can add a number input with the b-numberipnut component.

For example, we can write:

<template>  
  <div>  
    <b-field>  
      <b-numberinput v-model="number"></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      number: 0  
    };  
  }  
};  
</script>

to add it.

The disabled prop disables it.

rounded prop makes the input box rounded.

loading adds a loading indicator.

The type and message props styles the number input:

<template>  
  <div>  
    <b-field type="is-success" message="Rate is valid">  
      <b-numberinput v-model="number"></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      number: 0  
    };  
  }  
};  
</script>

type has the style name and message has the message.

Min and Max

The min and max props restrict the values that we can set:

<template>  
  <div>  
    <b-field>  
      <b-numberinput v-model="number" min="0" max="10"></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      number: 0  
    };  
  }  
};  
</script>

The buttons will be grayed out when we hit the limits.

Steps

The increment quantity can be changed with the step prop:

<template>  
  <div>  
    <b-field>  
      <b-numberinput v-model="number" step="5"></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      number: 0  
    };  
  }  
};  
</script>

Sizes

The size can be changed with the size prop:

<template>  
  <div>  
    <b-field>  
      <b-numberinput v-model="number" size="is-large"></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      number: 0  
    };  
  }  
};  
</script>

We make it large with the size prop set to 'is-large' .

We can customize it in various ways.

For example, we can write:

<template>  
  <div>  
    <b-field label="Compact and rounded">  
      <b-numberinput controls-position="compact" controls-rounded></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {};  
  }  
};  
</script>

to make the buttons rounded.

We can put it into a group with the grouped prop:

<template>  
  <div>  
    <b-field label="Grouped">  
      <b-field grouped>  
        <p class="control">  
          <button class="button">Button</button>  
        </p>  
        <b-numberinput/>  
      </b-field>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {};  
  }  
};  
</script>

Conclusion

We can add a number input with the Buefyb-numberinput component.

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.

Input

We can add input boxes with the b-input component.

For example, we can write:

<template>  
  <b-field label="Name">  
    <b-input v-model="name"></b-input>  
  </b-field>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      name: ""  
    };  
  }  
};  
</script>

It binds the inputted value with v-model .

We can style it in various ways.

The type sets the border-style:

<template>  
  <b-field label="Name" type="is-danger">  
    <b-input v-model="name"></b-input>  
  </b-field>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      name: ""  
    };  
  }  
};  
</script>

is-danger makes the border red.

rounded makes the input rounded:

<template>  
  <b-field label="Name">  
    <b-input v-model="name" rounded></b-input>  
  </b-field>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      name: ""  
    };  
  }  
};  
</script>

disabled makes it disabled:

<template>  
  <b-field label="Name">  
    <b-input v-model="name" disabled></b-input>  
  </b-field>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      name: ""  
    };  
  }  
};  
</script>

loading makes it display a loading indicator:

<template>  
  <b-field label="Name">  
    <b-input v-model="name" loading></b-input>  
  </b-field>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      name: ""  
    };  
  }  
};  
</script>

Icons

We can add icons to our form fields.

To do that, we set the icon-pack and icon props to add it:

<template>  
  <b-field label="search">  
    <b-input v-model="name" icon-pack="fa" icon="search">></b-input>  
  </b-field>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      name: ""  
    };  
  }  
};  
</script>

fa stands for Font Awesome.

icon has the icon class name.

To make the icon display, we added the icon CSS to the index.html file’s head tag:

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

Validation

We can add form validation.

For example, we write:

<template>  
  <div>  
    <b-field label="Email" type="is-danger" message="This email is invalid">  
      <b-input value="john@" maxlength="30"></b-input>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {};  
  }  
};  
</script>

We set the type and messge to display the styles and messages.

Password

The password-reveal prop to add a button to reveal the password:

<template>  
  <div>  
    <b-field>  
      <b-input type="password" placeholder="Password input" password-reveal></b-input>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {};  
  }  
};  
</script>

Size

The size prop sets the size of the input:

<template>  
  <div>  
    <b-field>  
      <b-input placeholder="Medium" size="is-medium"></b-input>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {};  
  }  
};  
</script>

Conclusion

We can add form input boxes with the b-input component that comes 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.

Form Field

Buefy provides the b-field component to be used as a container for form controls.

It should be a direct parent of:

• Autocomplete
• Checkbox Button
• Datepicker
• Input
• Radio Button
• Select
• Tag input
• Timepicker
• Upload
• .control elements (HTML class)

We can add a label with the label-position and label props:

<template>
  <b-field label="Name" :label-position="labelPosition">
    <b-input value="james"></b-input>
  </b-field>
</template>
<script>
export default {
  data() {
    return {
      labelPosition: "on-border"
    };
  }
};
</script>

label-position lets us change the label position.

on-border will put the label on the top border of the label.

We can set the type and message of a field to display different content.

For example, we can write:

<template>
  <b-field
    label="Username"
    :type="{ 'is-danger': hasError }"
    :message="{ 'name is taken': hasError }"
  >
    <b-input value="james" maxlength="30"></b-input>
  </b-field>
</template>
<script>
export default {
  data() {
    return {
      hasError: true
    };
  }
};
</script>

The type determines the style.

'is-danger' is the style name.

message has the message as the key and the condition to display it as the value.

It’ll be displayed below the field.

Form Field Addons

We can add form field addons to the left or right fo the field.

For example, we can write:

<template>
  <b-field message="search">
    <b-input placeholder="Search..." type="search"></b-input>
    <p class="control">
      <button class="button is-primary">Search</button>
    </p>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

We have the p element with the control class to add the addon to the right of the input box.

Groups

We can group components together with the grouped prop.

For example, we can write:

<template>
  <b-field grouped message="search">
    <b-input placeholder="Search..."></b-input>
    <p class="control">
      <button class="button is-primary">Search</button>
    </p>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

to group the button with the input box.

Nested Groups

Groups can be nested.

For example, we can write:

<template>
  <b-field grouped>
    <b-field label="Name" expanded>
      <b-input></b-input>
    </b-field>
    <b-field label="Email" expanded>
      <b-input></b-input>
    </b-field>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

Then the input boxes are displayed side by side.

Positions

The alignment can be changed with the position prop:

<template>
  <b-field position="is-centered">
    <b-input placeholder="Search..." type="search"></b-input>
    <p class="control">
      <button class="button is-info">Search</button>
    </p>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

We set the position to 'is-centered' to center the group.

Combine Addons and Groups

We can combine addons and groups:

<template>
  <b-field grouped>
    <b-field label="Name" expanded>
      <b-field>
        <b-input placeholder="Name" expanded></b-input>
      </b-field>
    </b-field>
    <b-field label="Email" expanded>
      <b-input placeholder="abc@email.com"></b-input>
    </b-field>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

Labels

We can populate the label slot to populate the label with our own styles:

<template>
  <b-field>
    <template slot="label">
      <span class="is-italic">custom label</span>
    </template>
    <b-input></b-input>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

Conclusion

We can group form controls with the Buefy b-field component.