カラーピッカーにvue3-swatchesを試してみる

Nuxt3へのリプレイスというか作り替えを進めているけど、
カラーピッカーとして使っていたvue-swatchesが、
メンテナンスされておらず、Vue2で止まってるようだった。。

www.memory-lovers.blog

いろいろ見ていると、別の人がVue3版を公開してくれてたので、
試してみたときの備忘録(*´ω｀*)

• vue3-swatches

Though not a fork, this package is a complete copy of vue-swatches made to work with Vue 3.

と書いてあり、「フォークじゃないけど、完全なコピーだよ。」らしい。

使い方

まずはインストール

$ pnpm add vue3-swatches

Nuxtモジュールが用意されているので、 それを利用するようにnuxt.configを変更。

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue3-swatches/nuxt']
})

あとは、従来どおり<VSwatches>を使えばOK。

<script setup>
  import { ref } from 'vue'
  import { VSwatches } from 'vue3-swatches'
  import 'vue3-swatches/dist/style.css'

  const color = ref("#1FBC9C")
</script>

<template>
  <VSwatches v-model="color" />
</template>

ドキュメントはオリジナルのvue-swatchesのリンクが示されていた。

• Vue Swatches

---

以上!! vue3版があってよかった。。ありがたい。。(*´ω｀*)