Emoji Picker For Vue - Emoji Mart

Install & Download:

# NPM
$ npm i emoji-mart-vue-fast

Description:

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',
},