https://github.com/advplyr/vue-tailwind-color-picker
Vue Color Picker using Tailwind@2
https://github.com/advplyr/vue-tailwind-color-picker
Last synced: 3 months ago
JSON representation
Vue Color Picker using Tailwind@2
- Host: GitHub
- URL: https://github.com/advplyr/vue-tailwind-color-picker
- Owner: advplyr
- Created: 2021-02-17T00:25:47.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-30T14:21:14.000Z (almost 4 years ago)
- Last Synced: 2025-02-23T02:44:25.139Z (3 months ago)
- Language: Vue
- Homepage:
- Size: 907 KB
- Stars: 23
- Watchers: 2
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Tailwind Color Picker
Color picker for vue using Tailwind v2.
**Requires Tailwind**
## [Live demo](https://advplyr.github.io/vue-tailwind-color-picker/)
## Installation
```bash
$ npm install vue-tailwind-color-picker
```
```bash
$ yarn add vue-tailwind-color-picker
```
## Installation Nuxt
Global add plugins
plugins/vue-tailwind-color-picker.js
```
import Vue from 'vue'
import VueTailwindColorPicker from 'vue-tailwind-color-picker'
Vue.use(VueTailwindColorPicker)
```
add nuxt.config.js
```
plugins: [
'~/plugins/vue-tailwind-color-picker',
],
```
## Installation Nuxt Typescript
Global add plugins
plugins/vue-tailwind-color-picker.ts
```
import Vue from 'vue'
// @ts-ignore
import VueTailwindColorPicker from 'vue-tailwind-color-picker'
Vue.use(VueTailwindColorPicker)
```
add nuxt.config.ts
```
plugins: [
'~/plugins/vue-tailwind-color-picker',
],
```
## Usage
```js
import VueTailwindColorPicker from 'vue-tailwind-color-picker.vue'
export default {
components: {
VueTailwindColorPicker
},
data() {
return {
color: '#00FF00FF',
swatches: [
'#f94144',
'#f3722c',
'#f8961e',
'#f9c74f',
'#90be6d',
'#43aa8b',
'#577590',
'#22223b',
'#4a4e69',
'#c9ada7'
]
}
},
methods: {
changedColor(color) {
console.warn('Changed Color', color)
},
swatchAdded(color) {
console.log('Swatch Added', color)
},
swatchDeleted(color) {
console.log('Swatch Deleted', color)
}
}
}
```
## License
[MIT](https://choosealicense.com/licenses/mit/)