vue-rate

library2.5.0jsnpmunverified

vue-rate is a lightweight and customizable rating component for Vue.js applications. The current stable version is v3.1.0, which supports Vue 3. It provides features like customizable length, initial value, read-only mode, and the ability to define custom icons via slots or `iconref` property. Before v3.0.0, it supported Vue 2. The package has a moderate release cadence, with significant updates for Vue major version compatibility and minor feature enhancements. Key differentiators include its simplicity and direct integration into Vue projects without heavy external dependencies, allowing for both basic star ratings and highly customized visual feedback mechanisms for user input. The component also ships with TypeScript types.

web-framework

npm install vue-rate

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-RATE

vue-rate

web-frameworkjavascriptv2.5.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

rate

✓ import rate from 'vue-rate'

✗ const rate = require('vue-rate')

For Vue 3 (v3.0.0+), use the default export and `app.use()`. For Vue 2 (pre-v3.0.0), also use the default export and `Vue.use()`.

CSS

✓ import 'vue-rate/dist/vue-rate.css'

✗ import 'vue-rate/vue-rate.css'

The component's styles were separated into their own file in v2.4.0. Always import the CSS for proper styling.

CustomIconSlot

✓ <rate><svg>...</svg></rate>

✗ <rate iconref="#icon-heart"></rate> (for simple SVGs)

Since v3.1.0, custom icons are more easily used via the default slot. Previously, `iconref` was used for SVG symbol IDs (v2.3.0+).

This quickstart demonstrates how to install and integrate `vue-rate` into a Vue 3 application, including basic usage with `v-model` and advanced customization using a custom SVG icon via the default slot.

import { createApp, ref } from 'vue'; import rate from 'vue-rate'; import 'vue-rate/dist/vue-rate.css'; const App = { setup() { const myRate = ref(3); return { myRate }; }, template: ` <div> <h1>My Rating</h1> <rate :length="5" v-model="myRate" /> <p>Current rating: {{ myRate }}</p> <h2>Custom Icon Example (v3.1.0+)</h2> <rate :length="5" :value="4" class="viaSlot"> <svg class="icon" width="20" height="19" viewBox="0 0 20 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.034 7.074H19.416L13.445 11.448L15.726 18.524L9.75201 14.151L3.77901 18.524L6.06101 11.448L0.0880127 7.075H7.47001L9.75201 0.002V0L12.034 7.075V7.074Z"/> </svg> </rate> </div> ` }; createApp(App) .use(rate) .mount('#app');

Debug

Known issues

breakingVersion 3.0.0 introduces support for Vue 3. Projects using Vue 2 must remain on `vue-rate` v2.x. Attempting to use v3.x with Vue 2 will result in runtime errors.

fix

For Vue 2 projects, install `vue-rate@^2.0.0` (e.g., `npm install vue-rate@2`). For Vue 3 projects, install `vue-rate@latest` or `vue-rate@next`.

affects: >=3.0.0

breakingPrior to v2.4.0, the component's styles were bundled with the component itself. From v2.4.0 onwards, the CSS must be explicitly imported, typically in your main application entry file.

fix

Add `import 'vue-rate/dist/vue-rate.css'` to your application's entry point (e.g., `main.js` or `main.ts`).

affects: >=2.4.0

gotchaCustom icon implementation changed in v3.1.0. While `iconref` (for SVG `symbol` IDs) is still mentioned in older docs and might still work, the recommended and easier approach for Vue 3 is to use the default slot.

fix

Prefer using the default slot to pass in your custom SVG icon markup directly within the `<rate>` component. For example: `<rate><svg>...</svg></rate>`.

affects: >=3.1.0

gotchaThe `value` prop (for initial value) and `v-model` (for two-way binding) expect Number or String types. Ensure values passed are correctly typed.

fix

Ensure that the `v-model` bound variable or the `value` prop is a `Number` or `String`. Example: `const myRating = ref(0);` or `<rate :value="'3'">`.

affects: >=1.3.1

Errors

Common errors & fixes

Failed to resolve component: rate

The `rate` component was not correctly registered with your Vue application.

fix

Ensure you have imported the component and registered it globally: `import rate from 'vue-rate'; createApp(App).use(rate).mount('#app')` for Vue 3, or `Vue.use(rate)` for Vue 2.

Module not found: Error: Can't resolve 'vue-rate/dist/vue-rate.css'

The CSS file for `vue-rate` is not found, or the import path is incorrect.

fix

Verify that `vue-rate` is installed correctly and that the CSS import path is `import 'vue-rate/dist/vue-rate.css'` (since v2.4.0).

TypeError: Cannot read properties of undefined (reading 'install')

You are likely trying to use `vue-rate` v3.x (Vue 3 compatible) with a Vue 2 project or vice-versa, or the component is not exported as expected for `app.use()`.

fix

Check your `vue-rate` version. If using Vue 3, ensure `vue-rate` is v3.0.0 or higher. If using Vue 2, ensure `vue-rate` is v2.x. Reinstall with the correct version constraint (e.g., `npm install vue-rate@2` or `npm install vue-rate@latest`).

Upgrade

Version history

2.5.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

10 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/SinanMtl/vue-rate ↗

packagehttps://www.npmjs.com/package/vue-rate ↗