// import picker compopnent
import EmojiPicker from 'vue3-emoji-picker'
// import css
import 'vue3-emoji-picker/css'
// or import directly:
// import'node_modules/vue3-emoji-picker/dist/style.css'

// event callback
function onSelectEmoji(emoji) {
  console.log(emoji)
    // result
        i: "😚", 
        n: ["kissing face"], 
        r: "1f61a", // with skin tone
        t: "neutral", // skin tone
        u: "1f61a" // without tone
Options (props)
Default Value
Description
Object
Add additional customized groups, keys are the group names translated from snake_case
group-order
Array
Override ordering of groups
group-icons
Object
Override group icons by passing svg's on keys
display-recent
Boolean
false
Display Recently used emojis
theme
String
'light'
Available options, 'light', 'dark', and 'auto'
Static text option (props['static-texts'])
Default Value
Description
@select
This event fires when an emoji gets selected/clicked.

Event callback will receive selected emoji in the first argument.
<EmojiPicker @select="onSelectEmoji" />
function onSelectEmoji(emoji) { /* do something */ }
@update:text
This event fires when input text gets changed.

Event callback will receive the text in the first argument.
<EmojiPicker @update:text="onChangeText" />
function onChangeText(text) { /* do something */ }
Available groups
  "smileys_people",
  "animals_nature",
  "food_drink",
  "activities",
  "travel_places",
  "objects",
  "symbols",
  "flags"
Default group names
  "smileys_people": "Smiles & People",
  "animals_nature": "Animals & Nature",
  "food_drink": "Food & Drink",
  "activities": "Activities",
  "travel_places": "Travel places",
  "objects": "Objects",
  "symbols": "Symbols",
  "flags": "Flags"
Overriding group names
<picker :group-names="{ smileys_people: 'My customized group name' }" />
Overriding group icons
<template>
  <picker :group-icons="{ smileys_people: customSVG }" />
</template>
<script setup>
import customSVG from './path/to/svg'
</script>
Override group order
This will make it so flags is first and then any other non-defined group will follow.
<picker :group-order="['flags']" />
Add additional groups
To see any existing emoji's see src/data/emojis.json
<picker
  :additional-groups="{
    my_custom_group: [
      { n: ['grinning face', 'grinning'], u: '1f600' },
      { n: ['grinning face with smiling eyes', 'grin'], u: '1f601' },
  :group-names="{ my_custom_group: 'Frequently used' }"