A simple, customization star rating component for your vue3 projects

Related tags

vue3-star-ratings
Overview

vue3-star-ratings


A simple, customizable component for star ratings

Documentation


Features

  • Uses svg for the stars, so it can scale without quality loss
  • Customizable number of stars/ratings
  • Customizable step for the rating eg 0.5 0r 0.2
  • Customizable colors

Installation and usage


npm install vue3-star-ratings --save

You can use register it globally like this:

import { createApp } from "vue";
import App from "./App.vue";
import vue3StarRatings from "vue3-star-ratings";

const app = createApp(App);

app.component("vue3-star-ratings", vue3StarRatings);

then use it this in your component:

Alternatively, you can use it directly:

">


<template>
  <vue3-star-ratings v-model="rating" />
template>

<script>
import { defineComponent } from "vue";
import vue3starRatings from "vue3-star-ratings";

export default defineComponent({
  components: {
    vue3starRatings,
  },
});
script>

Browser with CDN

">
<script src="https://unpkg.com/[email protected]">script>
<script src="https://unpkg.com/vue3-star-ratings/dist/vue3-star-ratings.min.js">script>
const { createApp } = Vue;
const App = {
  //Component code...
};
const app = createApp(App);
app.component("vue3StarRatings", Vue3StarRatings);
app.mount("#app");

Vue3StarRatings uses v-model to sync the rating between the components and its parent :

.

You can customize the component by taking a look at the props table below.

Props

Prop Description Type Default
starSize This is the height and width of the stars in pixels String Or Number 32
starColor This is the color of the stars when active String #ff9800
inactiveColor This is the color of the stars when inactive String #333
numberOfStars This is the number of stars shown and also the totalRating rating possible Number 5
step This is the increment or decrement when the control buttons are clicked Number 0.5
controlBg This is the background of the control buttons String #2e5090
controlColor This is the color of the color buttons String #fff
controlSize This is the size of the the control buttons String Or Number 24
showControl This is the option to choose if the control buttons are being shown Boolean true
disableClick This is the option to disabled click on the stars, use in conjunction with the showControl Prop Boolean false
v-model Sync the rating between the component and its parent ('Where it is been used')
GitHub buttons component for Vue.

Vue GitHub Buttons GitHub buttons component for Vue. Vue GitHub Buttons Installation Demo Usage Using with Nuxt Module options css useCache Using with

Saran Tanpituckpong ✔️ 33 Apr 24, 2021
Vue3 component for Telegram login

Vue3 Telegram Login Base on vue-telegram-login, thanks @vchaptsev Installation Install with yarn: $ yarn add vue3-telegram-login Install with npm: $ n

Cinob 3 Jul 10, 2021
vue 可视化页面拖拽编辑 small demo

可视化页面编辑器 在线地址 可视化页面编辑器,听起来可望不可即是吧,先来张动图观摩观摩一番! 实现这功能之前,在网上参考了很多资料,最终一无所获,五花八门的文章,都在述说着曾经的自己! 那么,这时候就需要自己去琢磨了,如何实现? 需要考虑到: 拖拽的实现 数据结构的定义 组件的划分 可维护性、扩展性

Libai 71 Jul 22, 2021
:clipboard: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

VueJS Generators 2.8k Jul 24, 2021
⚡️ The easiest way to build forms with Vue.

Documentation Website What is Vue Formulate? Vue Formulate is the easiest way to build forms with Vue. Please read the comprehensive documentation for

Braid 1.7k Jul 21, 2021
Simplest custom checkbox possible.

Simplest custom checkbox possible.

Eliamar Tani 0 Jul 3, 2021
Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

EMPLA GROUP, LLP 6 May 13, 2021
A configurable & lightweight Vue wrapper component that enables

vue-email-autocomplete A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elemen

James Wylie 22 Jun 25, 2021
Create conversational conditional-logic forms with Vue.js.

Create conversational conditional-logic forms with Vue.js.

DITDOT 392 Jul 22, 2021
A phone number input made with Vue JS (format & valid phone number)

vue-phone-number-input A beautiful text field to format phone numbers made with VueJS NEW VERSION ON MY NEW LIBRARY: MAZ-UI The new version of VuePhon

Mazel 441 Jul 18, 2021
International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/

vue-tel-input International Telephone Input with Vue. Documentation and live demo Visit the website Getting started Install the plugin: npm install vu

EducationLink 463 Jul 22, 2021
a vue form component just like json-editor

vue-awesome-form a vue form component just like json-editor Install # npm/yarn npm install vue-awesome-form yarn add vue-awesome-form Use register th

null 46 Feb 7, 2021
Great pincode input component

vue-pincode-input Great pincode input component for Vue.js applications. Demo on GitHub Pages Features configurable length (symbols count) override-fr

Maxim Noverin 80 Jul 19, 2021
JavaScript powered forms for Vue.js

Vue Formly Looking for maintainers It's been many years since I first created Vue Formly and it's been a great project. However, it was a project that

FormlyJS 230 Jul 19, 2021