Vue3 Emoji Picker. Live preview
npm install vue3-emoji-picker // or yarn add vue3-emoji-picker Important note: If you're using TypeScript, don't forget to add declare module 'vue3-emoji-picker' in your .d.ts file
// 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'// use picker component <EmojiPicker :native="true" @select="onSelectEmoji" />// 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 } */ }| Prop | Type | Default Value | Description |
|---|---|---|---|
| native | Boolean | false | Load native emoji instead of image. |
| hide-search | Boolean | false | Show/hide search input. |
| hide-group-icons | Boolean | false | Show/hide header group icons. |
| hide-group-names | Boolean | false | Show/hide group names. |
| disable-sticky-group-names | Boolean | false | Disable sticky for group names |
| disable-skin-tones | Boolean | false | Disable skin tones. |
| disabled-groups | Array | [] | Disable any group/category. See Available groups |
| group-names | Object | {} | Change any group name. See Default group names |
| static-texts | Object | Object | See static-texts table |
| pickerType | string | '' | Choose picker type, possible options: input, textarea (Popup with input/textarea), '' |
| mode | string | 'insert' | Choose insert mode, possible options: prepend, insert, append |
| offset | Number | '6' | Choose emoji popup offset |
| additional-groups | 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' |
| Prop | Type | Default Value | Description |
|---|---|---|---|
| placeholder | String | Search emoji | Update search input placeholder text. |
| skinTone | String | Skin tone | Footer skin tone button text. |
Example: :static-texts="{ placeholder: 'Search emoji'}"
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 */ } 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 */ } [ "smileys_people", "animals_nature", "food_drink", "activities", "travel_places", "objects", "symbols", "flags" ]{ "smileys_people": "Smiles & People", "animals_nature": "Animals & Nature", "food_drink": "Food & Drink", "activities": "Activities", "travel_places": "Travel places", "objects": "Objects", "symbols": "Symbols", "flags": "Flags", "recent": "Recently used" }<picker :group-names="{ smileys_people: 'My customized group name' }" /><template> <picker :group-icons="{ smileys_people: customSVG }" /> </template> <script setup> import customSVG from './path/to/svg' </script>This will make it so flags is first and then any other non-defined group will follow.
<picker :group-order="['flags']" />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' }" />
