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 star rating inputs and adding dropdowns.

Clear Button

The show-clear prop lets us add a clear button to reset the selected ratings.

For instance, we can write:

<template>
  <div id="app">
    <b-form-rating id="rating-inline"  show-clear show-value  value="4"></b-form-rating>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      value: 4
    };
  }
};
</script>

Then there’s an ‘x’ button on the left that we can click to clear the ratings.

Icons

The icons in the rating can be changed.

Therefore, we can display something other than a star.

We’ve to register the IconsPlugin to change the icons.

So we’ve to write:

import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

in main.js .

Then in our component, we write:

<template>
  <div id="app">
    <b-form-rating
      icon-empty="heart"
      icon-half="heart-half"
      icon-full="heart-fill"
      icon-clear="x-square"
      precision="2"
      show-clear
      show-value
      v-model='value'
    ></b-form-rating>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      value: 3.5
    };
  }
};
</script>

We set the icon-empty , icon-half , icon-full , and icon-clear props. to change the icons.

icon-empty is for icons that aren’t filled.

icon-half is for the half-filled icons.

icon-full is for the icons that are fully filled.

icon-clear is the icon for the clear button.****

#javascript