A Lightweight Modern Emoji Picker Component For Vue

vuemoji-picker is a simple Vue 2 and 3 emoji picker element plugin. It is a modern web component for the web emoji picker.

Must Read: Easy and Simple Emoji Picker with Using JavaScript | fgEmojiPicker.js

How to make use of it:

1. Import the cover component.

import { defineComponent, ref } from 'vue'
import { VuemojiPicker, EmojiClickEventDetail, VuemojiPickerStyle } from 'vuemoji-picker';

<template>
  <VuemojiPicker :picker-style="style" @emojiClick="handleEmojiClick" />
</template>

2. Create an emoji picker.

<template>
  <VuemojiPicker :picker-style="style" @emojiClick="handleEmojiClick" />
</template>

export default defineComponent({
  components: { VuemojiPicker },
  setup() {
    const handleEmojiClick = (detail: EmojiClickEventDetail) => {
      // do something
    }
    const style = ref<VuemojiPickerStyle>({
      borderSize: '2px',
      buttonActiveBackground: '#e6e6e6'
    })
    return {
      handleEmojiClick,
      style
    }
  }
})

3. Props are available.

isDark: {
  type: Boolean,
  required: false,
  default: isDarkMode()
},
skinToneEmoji: String,
customEmoji: Array as PropType<PickerConstructorOptions['customEmoji']>,
dataSource: String,
locale: String,
customCategorySorting: Function as PropType<(a: string, b: string) => number>,
i18n: Object as PropType<PickerConstructorOptions['i18n']>,
pickerStyle: Object as PropType<VuemojiPickerStyle>