Category: Vue

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to customize input groups and creating jumbotrons.

Radio Button Addon

We can add a radio button to the input group’s left or right side with BootstrapVue’s b-form-radio component.

For example, we can write:

<template>
  <div id="app">
    <b-input-group>
      <b-input-group-prepend is-text>
        <b-form-radio></b-form-radio>
      </b-input-group-prepend>
      <b-form-input></b-form-input>
    </b-input-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Switches

We can add a switch to the left or right of the input group with the b-form-checkbox component.

For example, we can write:

<template>
  <div id="app">
    <b-input-group>
      <b-input-group-prepend is-text>
        <b-form-checkbox switch></b-form-checkbox>
      </b-input-group-prepend>
      <b-form-input></b-form-input>
    </b-input-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

The switch prop makes the checkbox a switch style checkbox.

Multiple Inputs

We can have multiple inputs in our input groups.

For example, we can write:

<template>
  <div id="app">
    <b-input-group prepend="names">
      <b-form-input placeholder="first name"></b-form-input>
      <b-form-input placeholder="last name"></b-form-input>
    </b-input-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have 2 input boxes side by side along with the ‘names’ text prepended to the 2 input boxes.

Multiple Addons

We can have multiple addons side by side.

All we have to do is to place them where we want to.

For example, we can write:

<template>
  <div id="app">
    <b-input-group>
      <b-input-group-prepend is-text>
        <input type="checkbox">
      </b-input-group-prepend>
      <b-input-group-prepend is-text>
        <b>$</b>
      </b-input-group-prepend>
      <b-form-input placeholder="name"></b-form-input>
    </b-input-group>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We have 2 b-oinput-group-prepend components besides each other.

Dropdown Addons

We can add drop downs as add-ons to an input group.

We just have to put them in the prepend and append slots.

For instance, we can write:

<template>
  <div id="app">
    <b-input-group>
      <template v-slot:prepend>
        <b-dropdown text="fruit" variant="info">
          <b-dropdown-item>apple</b-dropdown-item>
          <b-dropdown-item>orange</b-dropdown-item>
        </b-dropdown>
      </template>

      <b-form-input placeholder="name"></b-form-input>
    </b-input-group>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We have the template tag that populates the prepend slot as indicated by the v-slot:prepend directive.

We placed our b-dropdown inside it.

Now we’ll see the dropdown on the left of the input box.

Likewise, we can change prepend to append if we want to place our dropdown to the right of our input box.

Control Sizing

We can change the sizing of the form group with the size prop.

For example, we can write:

<template>
  <div id="app">
    <b-input-group size="sm" prepend="label">
      <b-form-input placeholder="name"></b-form-input>
    </b-input-group>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

The whole form group is shrunk because the size prop is set to 'sm' .

We can also set it to 'lg' to make it bigger.

Sizing Custom Radio, Checkbox and Switch Addons

The size prop is added to the b-input-group to change the size of everything in the form group.

Validation States

Input groups don’t support validation state displays.

But the input inside it does support this feature.

Jumbotron

A jumbotron is a component that can extend the entire viewport to showcase marketing messages on our site.

We can set the heading and lead text using the header and lead props.

Also, we can use the header and lead named slots if we need to show HTML.

For example, we can write:

<template>
  <div id="app">
    <b-jumbotron header="Hello" lead="Lead">
      <p>World</p>
      <b-button variant="primary" href="#">Go Somewhere</b-button>
    </b-jumbotron>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We have the b-jumbotron component with the header prop set to 'Hello' .

It’s displayed at the top and it’s the largest.

lead is set to 'Lead' and it’s displayed below the header text.

The content inside the tags is displayed inside the box.

Conclusion

We can add items to the input groups we addons.

Also, we can add a jumbotron component to display text that will catch people’s attention.

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to customize dropdowns.

Mixing Options

We can mix various kinds of options together.

For example, we can write:

<template>
  <div id="app">
    <b-form-select v-model="selected" :options="options">
      <template v-slot:first>
        <b-form-select-option :value="null" disabled>choose one</b-form-select-option>
      </template>

<b-form-select-option value="apple">Apple</b-form-select-option>
      <b-form-select-option value="orange">Orange</b-form-select-option>
    </b-form-select>
    <p>{{ selected }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: null
    };
  }
};
</script>

v-slot:first means that it’ll end up in the first slot, which means it’ll be displayed above the rest.

We also have other options below it.

Options Properties

We can change the options by adding various properties.

The text property is displayed to the user.

Alternative, we can render HTML with the html prop.

However, if we choose to display HTML, then we’ve to be careful about cross-site scripting attacks since what’s displayed won’t be sanitized.

HTML isn’t rendered by all browsers.

The value property is set as the state.

disabled disables the option.

For instance, we can write:

<template>
  <div id="app">
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <p>{{ selected }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: null,
      options: [
        { value: null, text: "Select a Fruit" },
        { value: "apple", html: "<b>Apple</b>" },
        { value: "orange", text: "Orange" },
        { value: "grape", text: "Grape", disabled: true }
      ]
    };
  }
};
</script>

The value prop can be anything including objects.

The field names can be changed with the value-field and text-field props.

value-field lets us change the value field to something other than value ,

text-field lets us change the text field to something other than text .

For example, we can write:

<template>
  <div id="app">
    <b-form-select v-model="selected" value-field="item" text-field="name" :options="options"></b-form-select>
    <p>{{ selected }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: null,
      options: [
        { item: null, name: "Select a Fruit" },
        { item: "orange", name: "Orange" },
        { item: "grape", name: "Grape" }
      ]
    };
  }
};
</script>

We set text-field to 'name' and value-field to 'item' so we can use the fields in the options like the display text and the value respectively.

Select Sizing

We can use the select-size prop to set the size of the select list box.

For instance, we can write:

<template>
  <div id="app">
    <b-form-select v-model="selected" :select-size="5" :options="options"></b-form-select>
    <p>{{ selected }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: null,
      options: [
        { value: null, text: "Select a Fruit" },
        { value: "orange", text: "Orange" },
        { value: "grape", text: "Grape" }
      ]
    };
  }
};
</script>

Then we see a box that we can select items from instead of a dropdown.

Multiple Select

The multiple prop lets us add a select box where we can select multiple items.

For example, we can write:

<template>
  <div id="app">
    <b-form-select v-model="selected" multiple :select-size="5" :options="options"></b-form-select>
    <p>{{ selected }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: null,
      options: [
        { value: null, text: "Select a Fruit" },
        { value: "orange", text: "Orange" },
        { value: "grape", text: "Grape" },
        { value: "apple", text: "Apple" }
      ]
    };
  }
};
</script>

The selected state’s value will be an array instead of a string.

We need to use multiple with the select-size prop to display the box.

Sizing

The size prop on the b-form-select component can control its size.

'sm' sets is to extra small.

'lg' sets it to be bigger than the default.

Autofocus

The autofocus prop lets us set the focus of the dropdown select.

Value Validation

Like other input controls, we can set the state prop to display the validation status of the dropdown.

For example, we can write:

<template>
  <div id="app">
    <b-form-select v-model="selected" :state="isValid" :options="options"></b-form-select>
    <p>{{ selected }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: null,
      options: [
        { value: null, text: "Select a Fruit" },
        { value: "orange", text: "Orange" },
        { value: "grape", text: "Grape" },
        { value: "apple", text: "Apple" }
      ]
    };
  },
  computed: {
    isValid() {
      return !!(this.selected && this.selected.length > 0);
    }
  }
};
</script>

We have the isValid computed property to check the this.selected state for the choice.

And we set that to the value of the state prop.

Then we’ll see everything green when a choice is picked and red otherwise.

Conclusion

There are many things we can do with dropdowns.

We can add a validation state display.

Also, we can change the size and the field options.

We can also allow users to pick multiple items at once.

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add navigation components.

Navs

BootstrapVue comes with a b-nav component to let us add a navigation bar to our app.

For example, we can write:

<template>
  <div id="app">
    <b-nav>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-item disabled>baz</b-nav-item>
    </b-nav>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the b-nav component, which has b-nav-item components inside.

The active prop makes a nav item active.

disabled makes it grayed out and not clickable.

Tab Style

We can add the tabs prop to make the navbar look like tabs.

For instance, we can write:

<template>
  <div id="app">
    <b-nav tabs>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-item disabled>baz</b-nav-item>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Now the active tab has lines surrounding it.

The rest is the same.

Pill Style

The pills prop makes the nav items look like buttons.

For example, we can write:

<template>
  <div id="app">
    <b-nav pills>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-item disabled>baz</b-nav-item>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Small Size

We can make the nav items smaller than the default with the small prop:

<template>
  <div id="app">
    <b-nav small>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-item disabled>baz</b-nav-item>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Fill

The fill prop makes the nav extends to its full width:

<template>
  <div id="app">
    <b-nav fill>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-item disabled>baz</b-nav-item>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Justified

The justified prop lets us make nav items equal width and the nav occur al horizontal space:

<template>
  <div id="app">
    <b-nav justified>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-item disabled>baz</b-nav-item>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Alignment

We can add the align prop to align the nav items the way we like.

The value can be left , center , or right .

For example, we can write:

<template>
  <div id="app">
    <b-nav align="right">
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-item disabled>baz</b-nav-item>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Since we set align to 'right' , we have the nav items on the right.

Vertical Variation

The navbar can be made vertical with the vertical prop:

<template>
  <div id="app">
    <b-nav vertical>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-item disabled>baz</b-nav-item>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Dropdowns

We can add dropdowns into the navbar.

To do that, we use the b-nav-item-dropdown component:

<template>
  <div id="app">
    <b-nav>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-item-dropdown text="fruit" toggle-class="nav-link-custom" right>
        <b-dropdown-item>apple</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item>banana</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We just put the b-nav-item-dropdown component into the b-nav and we get a dropdown displayed.

Text Content

We can add text content to a navbar with the b-nav-text component:

<template>
  <div id="app">
    <b-nav>
      <b-nav-item active>foo</b-nav-item>
      <b-nav-item>bar</b-nav-item>
      <b-nav-text>text</b-nav-text>
    </b-nav>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Conclusion

We can add navbars to an app with the b-nav component.

The b-nav-item is an item that’s shown inside the navbar.

We can also add dropdown and forms inside the navbar.

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add radio button inputs.

Radio Buttons

BootstrapVue comes with the b-form-radio-group component to let us add radio buttons to our forms.

For example, we can write:

<template>
  <div id="app">
    <b-form-radio v-model="selected" name="fruit" value="apple">apple</b-form-radio>
    <b-form-radio v-model="selected" name="fruit" value="orange">orange</b-form-radio>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: ""
    };
  }
};
</script>

We have 2 radio buttons with the same name attribute value and binds to the same state.

Therefore, when we click a button, the selected state will update.

Grouped Radios

We can group them together by using the b-form-radio-group component.

This way, we don’t have to add each radio button individually.

For example, we can write:

<template>
  <div id="app">
    <b-form-radio-group v-model="selected" :options="options" name="fruit"></b-form-radio-group>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { text: "Apple", value: "apple" },
        { text: "Orange", value: "orange" }
      ]
    };
  }
};
</script>

Then we can specify all the radio buttons in one component.

options has the options we want to render.

selected is the state we want to bind the value to.

We can mix and match the options prop and b-form-radio components in b-form-radio-group .

For example, we can write:

<template>
  <div id="app">
    <b-form-radio-group
      id="radio-slots"
      v-model="selected"
      :options="options"
      name="radio-options-slots"
    >
      <template v-slot:first>
        <b-form-radio value="grape">Grape</b-form-radio>
      </template>

      <b-form-radio :value="{ banana: 'banana' }">Banana</b-form-radio>
    </b-form-radio-group>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { text: "Apple", value: "apple" },
        { text: "Orange", value: "orange" }
      ]
    };
  }
};
</script>

We added various kinds of radio buttons.

We have Apple and Orange added by specifying the options prop.

Banana is specified with the value prop.

And we added a template to add the Grape option. We specify that we want to populate the first slot, so it’ll appear first.

Now we’ll see the options when we click the buttons.

We can also add HTML content to the label with the html property.

Instead of the text property, we use the html property.

However, this may make our app vulnerable to cross-site scripting attacks since the text isn’t sanitized.

We can write:

<template>
  <div id="app">
    <b-form-radio-group
      v-model="selected"
      :options="options"
      name="fruits"
    >
    </b-form-radio-group>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { html: "<b>Apple</b>", value: "apple" },
        { text: "Orange", value: "orange" }
      ]
    };
  }
};
</script>

Changing Option Field Names

The field property names can change according to our preference.

There’s the text-field prop that takes a property name of the option objecrt to display as the label text.

And the value-field prop lets us set the property name for the value field.

For instance, we can write:

<template>
  <div id="app">
    <b-form-radio-group
      v-model="selected"
      :options="options"
      value-field="item"
      text-field="name"
      name="fruits"
    >
    </b-form-radio-group>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { name: "Apple", item: "apple" },
        { name: "Orange", item: "orange" }
      ]
    };
  }
};
</script>

then we change the field names with the props.

name is displayed and item is set as the value of selected .

Stacked or Inline

We can take our radio button group stacked or line.

By default, it’s inline.

We can add the stacked prop to make them stacked.

For example, we can write:

<template>
  <div id="app">
    <b-form-radio-group
      v-model="selected"
      :options="options"
      stacked
      name="fruits"
    >
    </b-form-radio-group>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { text: "Apple", value: "apple" },
        { text: "Orange", value: "orange" }
      ]
    };
  }
};
</script>

and now they’re stacked.

Conclusion

We can create radio buttons individually or as a group.

As long as the name value of each is the same, we can bind it to the same state field.

There are also many other customization options with labels and text.

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add layouts.

Variable Width Content

We can set a breakpoint prop to 'auto' to make the column variable.

Breakpoints include xs, sm , md , and lg and xl .

xs is smaller than 576px wide.

sm is bigger than or equal to 576px wide.

md is bigger than or equal to 768px wide.

lg is bigger than or equal to 992px wide.

xl is bigger than or equal to 1200px wide.

For instance, we can write:

<template>
  <div id="app">
    <b-container>
      <b-row>
        <b-col col >1</b-col>
        <b-col col sm="auto">2</b-col>
        <b-col col >3</b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

to make the middle column variable width.

We added the col and sm='auto' to make the middle column variable width and the other columns fill the remaining space.

Responsive Classes

We can use the cols prop to adjust the column width proportion.

The value should be between 1 and 12.

For example, we can write:

<template>
  <div id="app">
    <b-container>
      <b-row>
        <b-col cols="8">8</b-col>
        <b-col cols="4">4</b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Then we have the left column taking 8 / 12 or two-thirds of the space.

The right column takes 4 / 12 or a third of the space.

Stacked to Horizontal

We can use the sm prop to create a grid that’s stacked on small devices and becoming horizontal of medium devices.

For example, we can write:

<template>
  <div id="app">
    <b-container>
      <b-row>
        <b-col sm="8">8</b-col>
        <b-col sm="4">4</b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Then on a narrow screen, the 8 is above the 4, while on wider screens they’re side by side.

Alignment

We can use the align-v prop on b-row to vertical-align the content.

For example, we can write:

<template>
  <div id="app">
    <b-container>
      <b-row align-v="center">
        <b-col>1</b-col>
        <b-col>2</b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

<style>
.row {
  height: 200px;
}
</style>

Then the row is centered in the b-row .

Other possible values of align-v can be 'start' to align the rows to the top edge.

Also, we can set it to 'end' to align the rows to the bottom edge.

'baseline' aligns the tallest row to the top edge.

And 'stretch' stretches the height to the height of the container.

Horizontal Alignment

To horizontally align items, we can use the align-h prop to do that.

For example, we can write:

<template>
  <div id="app">
    <b-container>
      <b-row align-h="start">
        <b-col cols="4">1</b-col>
        <b-col cols="4">2</b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We used the align-h prop to align the items to the left with the value 'start'

Other values includes 'center' , which aligns content to the center.

'end' align contents to the right.

'around' spreads the content horizontally.

'between' put the content near the edges.

Ordering Columns

We can use the order-* prop to control the visual order of our content.

These props are responsive.

For instance, we can write:

<template>
  <div id="app">
    <b-container>
      <b-row>
        <b-col order="2">foo</b-col>
        <b-col order="1">bar</b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Because of the order prop, the ‘foo’ div is to the right of the ‘bar’ div.

We can write order-md , order-sm , etc. to change the order only when those breakpoints are hit.

Conclusion

There are many ways to size columns.

We can change the size according to breakpoint so we can have responsive layouts.

We can add spaces wherever we want as well.