# @dominate-color-js/vue

> ```sh npm install @dominate-color-js/vue ```

Latest version **2.1.4** (published 2023-06-18) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @dominate-color-js/vue
pnpm add @dominate-color-js/vue
yarn add @dominate-color-js/vue
bun add @dominate-color-js/vue
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.1.4 |
| Published | 2023-06-18 |
| First published | 2023-03-31 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Maintainers | trysquaddf |

## Links

- npm: https://www.npmjs.com/package/@dominate-color-js/vue
- Repository: https://github.com/Dominate-color/dominate-color-js
- Homepage: https://github.com/Dominate-color/dominate-color-js#readme
- Issues: https://github.com/Dominate-color/dominate-color-js/issues
- npm.io page: https://npm.io/package/@dominate-color-js/vue

## Dependencies (1)

- [@dominate-color-js/core](https://npm.io/package/@dominate-color-js/core.md) 2.1.4

## Recent versions

- 2.1.4 (latest) — 2023-06-18
- 1.1.4 — 2023-04-04
- 1.1.3 — 2023-04-03
- 1.1.2 — 2023-03-31

## README

## Installation

```sh
npm install @dominate-color-js/vue
```

```sh
yarn add @dominate-color-js/vue
```

```sh
pnpm add @dominate-color-js/vue
```


### Basic Example

```js
<template>
    <div>
      <input type="file" @change="handleFileInput" />
      <ul>
        <li v-for="(color, index) in colors" :key="index">{{ color }}</li>
      </ul>
      <div v-if="loading">Loading...</div>
      <div v-if="error">{{ error.message }}</div>
    </div>
</template>

<script lang="ts">
   import { useColorDetection } from '@dominate-color-js/vue';

   export default {  
        setup() { 
            const { handler, colors, loading, error } = useColorDetection();

            const handleFileInput = (event: any) => {
                const file = event.target.files[0];
                handler(file);
            };

            return { colors, loading, error, handleFileInput };
            }   
        }
</script>
```

a more detailed [version](https://github.com/Dominate-color/dominate-color-js/tree/master/examples/with-vue)

---
_Source: https://npm.io/package/@dominate-color-js/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._