An all-in-one emoji picker component that supports native, Google, Apple, Twitter, and Facebook emoji. Works with Vue 3.
How to use it:
1. Import the emoji mart component and emoji data.
import data from "emoji-mart-vue-fast/data/all.json"; import "emoji-mart-vue-fast/css/emoji-mart.css"; import { Picker, EmojiIndex } from "emoji-mart-vue-fast";
2. Add the emoji picker to the template.
<template> <Picker :data="emojiIndex" set="twitter" @select="showEmoji" /> <div> {{ emojisOutput }} </div> </template>
3. Register the emoji picker and output the selected emoji.
let emojiIndex = new EmojiIndex(data); export default { name: "App", components: { Picker }, data() { return { emojiIndex: emojiIndex, emojisOutput: "" }; }, methods: { showEmoji(emoji) { this.emojisOutput = this.emojisOutput + emoji.native; } } };
4. Available picker components.
perLine: { type: Number, default: 9, }, maxSearchResults: { type: Number, default: 75, }, emojiSize: { type: Number, default: 24, }, title: { type: String, default: 'Emoji Martâ„¢', }, emoji: { type: String, default: 'department_store', }, color: { type: String, default: '#ae65c5', }, set: { type: String, default: 'apple', }, skin: { type: Number, default: null, }, defaultSkin: { type: Number, default: 1, }, native: { type: Boolean, default: false, }, emojiTooltip: { type: Boolean, default: false, }, autoFocus: { type: Boolean, default: false, }, i18n: { type: Object, default() { return {} }, }, showPreview: { type: Boolean, default: true, }, showSearch: { type: Boolean, default: true, }, showCategories: { type: Boolean, default: true, }, showSkinTones: { type: Boolean, default: true, }, infiniteScroll: { type: Boolean, default: true, }, pickerStyles: { type: Object, default() { return {} }, },
5. Available emoji props.
native: { type: Boolean, default: false, }, tooltip: { type: Boolean, default: false, }, fallback: { type: Function, }, skin: { type: Number, default: 1, }, set: { type: String, default: 'apple', }, emoji: { type: [String, Object], required: true, }, size: { type: Number, default: null, }, tag: { type: String, default: 'span', },
Preview:
Changelog:
v12.0.5 (06/11/2023)
- Update
v12.0.4 (05/06/2023)
- Update
v12.0.2 (04/30/2023)
- Update
v12.0.1 (11/13/2022)
- Bugfix
v11.1.1 (07/12/2022)
- Bugfix
v10.2.1 (01/08/2022)
- Fix the issue with duplicate emoji.
v10.2.0 (11/21/2021)
- Update version to 10.2.0, fix dependency issues.
Download Details:
Author: serebrov
Live Demo: https://serebrov.github.io/emoji-mart-vue/
Download Link: https://github.com/serebrov/emoji-mart-vue/archive/refs/heads/master.zip
Official Website: https://github.com/serebrov/emoji-mart-vue
Install & Download:
# NPM
$ npm i emoji-mart-vue-fast