vue-eye-dropper

Vue 3 Eye Dropper
634 1
Install
npm install vue-eye-dropper
Latest Version:0.0.12
Vue:3
Last Updated:May 10, 2025
Links: GitHub  ·  npm
Maintainer: fanreza

vue-eye-dropper

Vue wrapper for EyeDropper instance

Install

npm i vue-eye-dropper

Import and register component

Global

import { createApp } from 'vue'
import App from './App.vue'

import { EyeDropper } from 'vue-eye-dropper'

const app = createApp(App)
app.component('EyeDropper', EyeDropper)

Local

<script setup lang="ts">
import { EyeDropper } from 'vue-eye-dropper'

const handleColorPicked = (color: string) => {
  console.log('Color picked:', color)
}
</script>

<template>
  <EyeDropper default-color="#fff" :height="25" :width="25" @colorPicked="handleColorPicked" />
</template>

Browser Support

caniuse

Browser Version
Chrome 95-125
Edge 121
Opera 81-106

Props

Name Value Default
defaultColor srgbHex String #fff
width number 25
height number 25

Events

Name Value
colorPicked srgbHex String

Related Packages

@orshot/colorshot

Color and gradient picker for React and Vue. Solid, linear, radial and conic gra...

4,934 15
vue

The progressive JavaScript framework for building modern web UI.

588,019,132 54,801
vue
@vueuse/shared
372,738,348 22,398
@vueuse/core

Collection of essential Vue Composition Utilities

367,188,523 22,398
@vitejs/plugin-vue

The official plugin for Vue SFC support in Vite.

333,357,380 686

Version History

Version Released Vue License
0.0.12 ^3.4.15
0.0.11 ^3.4.15
0.0.10 ^3.4.15
0.0.9 ^3.4.15
0.0.8 ^3.4.15