Awesome

vuemoji-picker

A simple Vue 2 and 3 wrapper component for emoji-picker-element.

Demo of vuemoji-picker

Install

npm install vuemoji-picker

Usage

<script setup lang="ts">
import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'

const handleEmojiClick = (detail: EmojiClickEventDetail) => {}
</script>

<template>
    <VuemojiPicker @emojiClick="handleEmojiClick" />
</template>

Props

Name	Type	Default	Description
`isDark`	`Boolean`	system	Set picker theme
`customCategorySorting`	`Function`	-	Function to sort custom category strings (sorted alphabetically by default)
`customEmoji`	`CustomEmoji[]`	-	Array of custom emoji
`dataSource`	`String`	"https://cdn.jsdelivr.net/npm/emoji-picker-element-data@^1/en/emojibase/data.json"	URL to fetch the emoji data from
`i18n`	`I18n`	-	i18n object (see details)
`locale`	`String`	"en"	Locale string
`skinToneEmoji`	`String`	"🖐️"	The emoji to use for the skin tone picker
`pickerStyle`	`VuemojiPickerStyle`	-	style object (see available options)

Events

Name	Type	Default	Description
`emojiClick`	`Function`	-	Fired when an emoji is selected
`skinToneChange`	`Function`	-	Fired when a new skin tone is selected

Composables

Set of composables that wraps Database API methods.

<script setup>
import { ref } from 'vue'
import {
  useEmojiByGroup,
  useEmojiBySearchQuery,
  useEmojiByShortcode,
  useEmojiByUnicodeOrName
} from 'vuemoji-picker'

const query = ref('elephant')
const { result, loading } = useEmojiBySearchQuery(query)
</script>

For more information about available styling and offline config, please read emoji-picker-element's docs.