vuemoji-picker

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

Install

yarn add vuemoji-picker

Usage

Options API

<template>
<div id=”app”>
<VuemojiPicker @emojiClick=”handleEmojiClick” />
</div>
</template>

<script lang=”ts”>
import Vue from ‘vue’
import { VuemojiPicker, EmojiClickEventDetail } from ‘vuemoji-picker’

export default Vue.extend({
components: {
VuemojiPicker
},
methods: {
handleEmojiClick(detail: EmojiClickEventDetail) {}
}
});
</script>

Composition API

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

<script lang=”ts”>
import { defineComponent } from ‘vue’
import { VuemojiPicker, EmojiClickEventDetail } from ‘vuemoji-picker’

export default defineComponent({
components: { VuemojiPicker },
setup() {
const handleEmojiClick = (detail: EmojiClickEventDetail) => {}

return {
handleEmojiClick
}
}
})
</script>

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

Database API Composable

Use the Database API as a composable.

import { defineComponent } from ‘vue’ // @vue/composition-api for Vue 2
import { useDatabase } from ‘vuemoji-picker’

export default defineComponent({
setup() {
const database = useDatabase()

const searchEmoji = async () => {
const result = await database.getEmojiBySearchQuery(‘elephant’)
// [{unicode: “🐘”, …}]
}

return {
searchEmoji
}
}
})

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