Demo | Source

Installation

npm install vhue

Run the app

If you clone the repository you can run a local web server to test the component

git clone git@github.com:rtransat/vhue.git
npm install
npm run serve

Usage

<template>
  <div id="app">
    <Hue
      icon="living"
      name="Living room"
      color="#ffc457"
      :is-on="false"
      @change="onChange"
    />

    <Hue
      icon="living"
      name="Living room"
      :color="['#4a2cb6', '#c66cd8']"
      :is-on="true"
      @change="onChange"
    />
  </div>
</template>

<script>
import Hue from "vhue";

export default {
  name: "app",
  components: {
    Hue
  },
  methods: {
    onChange(isOn) {
      console.log(isOn);
    }
  }
};
</script>

Documentation

Props

icon: String
Icon to display

• attic
• balcony
• bathroom
• bedroom
• carpot
• closet
• computer
• dining
• driveway
• frontdoor
• garage
• guestroom
• gym
• hallway
• kidsbedroom
• kitchen
• laundryroom
• living
• lounge
• mancave
• nursery
• office
• other
• outdoor
• outdoor-socialtime
• pool
• porch
• recreation
• socialtime
• staircase
• storage
• studio
• terrace
• toilet

name: String
ID of the light

name: String
Name of the light

color: String or Array
Background color of the component when the light is on. If array the background will be a gradient

intensity: Number
Percentage value of intensity of the light

:is-on: Boolean
default: false
Indicates if the light is on or off

Event

toggle: Function
params: id, isOn
Trigger when the switch button is checked

change: Function
params: id, value
Trigger when the slider value change

Credit

Icons come from the official Philips Hue icon pack