Vue Coloris

Appearance

On this page

Getting Started ​

WARNING

This plugin only support Vue 3 since Vue 2 will reach End of Life (EOL) on December 31st, 2023.

Installation ​

Install vue-coloris with your favorite package manager:

sh
$ npm install vue-coloris
sh
$ yarn add vue-coloris

Initialize the plugin and pass it to your app instance:

js
import { createApp } from 'vue'
import { createColoris } from 'vue-coloris'
import 'vue-coloris/style.css' // Coloris styles
import App from './App.vue'

const coloris = createColoris()
const app = createApp(App)

app.use(coloris)
app.mount('#app')

TIP

Don't forget to import plugin styles.

TIP

Once the plugin is loaded, the VueColoris component will be globally registered.

Usage ​

Use the VueColoris component:

vue
<template>
  <VueColoris :value="'gold'" />
</template>