Vue3 Star Ratings | Installation Guide

# Basic

If you want to use the package with a CDN, you need to include the CDN link inside a <script> tag and then insert this tag into your HTML file:

<script src="https://unpkg.com/vue"></script>
<script src='https://unpkg.com/vue3-star-ratings/dist/vue3-star-ratings.min.js'></script>
xml

Next, you need to register the component.

<script>
const { createApp } = Vue;
const App = {
  //Component code...
  data() {
    return {
      rating: 3
    }
  }
};
const app = createApp(App);
app.component("vue3StarRatings", Vue3StarRatings);
app.mount("#app");
</script>
xml

After completing the steps to include the component in your project, you will be able to use it immediately. Here is an example of how to use it:

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

# Module System

To install the Vue3-star-ratings package in your Vue.js project, you can use the following command:

npm install vue3-star-ratings --savebash

This will download and install the package and save it to your package.json file as a dependency.

Global Registration

Once the package is installed, you can register it globally in your Vue.js application by importing it and registering it as a component globally

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);
js

After registering the component globally, you can use it in any component template in your application by referencing it with its tag name.

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

Local Registration

Alternatively, you can register the component locally in a specific component by importing it and defining it in the components components property of the component definition object.

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

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

js

After registering the component locally, you can use it in the template of that component by referencing it with its tag name.

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

Introduction Options