Skip to content
A like button with delightful star animation powered by Vue.js
CSS JavaScript Vue HTML
Branch: master
Clone or download
Latest commit 9a059f4 Feb 8, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo V0.0.4 Feb 1, 2017
dist V0.0.4 Feb 1, 2017
src V0.0.4 Feb 1, 2017
.eslintrc.js V0.0.4 Feb 1, 2017
.gitattributes init Jan 28, 2017
.gitignore init Jan 28, 2017
.npmignore init Jan 28, 2017
LICENSE init Jan 28, 2017
README-ZH.MD add demo url Feb 8, 2017
README.MD add demo url Feb 8, 2017
index.html V0.0.4 Feb 1, 2017
package.json V0.0.4 Feb 1, 2017
webpack.config.js V0.0.4 Feb 1, 2017



查看中文文档,请移步至 这里


For a better demonstration, please use the phone scan the following two-dimensional code view demo,or click this link



Option Type Description
animate String To activate the animation of the like button
color String Activate the like button, the color of the button. (note to must be hex or RGB color code)


SlotName Description
icon Set up the like button

Detailed instructions



animateSpecify the like button animation, the default is no animation, you can add animation CSS class, of course, can also introduce CSS animation library, such as animate.css


colorActivate the button when the button color changes, the default is not. Note: The value of this parameter must be filled in hex or rgb color code, rather than the css class



iconTo the slot inside fill in any content you want, it is the carrier of the like button

abuout event

Events should be bound in the slot

  <vue-star animate="animated rubberBand" color="#F05654">
    <a slot="icon" class="fa fa-heart" @click="handleClick"></a>

export default {
  methods: {
    handleClick () {
      //do something

Simple example

  <vue-star animate="yourAnimateCssClass" color="rgb(152, 138, 222)">
    <img slot="icon" src="./yourImgPlace/yourImg.png" />
  <!--use animate.css and font-awesome -->
  <vue-star animate="animated bounceIn" color="#F05654">
    <i slot="icon" class="fa fa-heart"></i>

Installation and use

npm install vue-star
  • If used as a global component
//In the project entry file
import Vue from 'vue'
import VueStar from 'vue-star'
Vue.component('VueStar', VueStar)
  • If as a local component
//In a component
import VueStar from 'vue-star'
export default {
  components: {

Bug and suggestions

If you encounter problems or suggestions in the use, welcome to issues



You can’t perform that action at this time.