Lightweight Vue Emoji Picker Component

This repository is a fork of serebrov/emoji-mart-vue with the following changes:

• complete rewrite in TypeScript
• used Vue 3 <script setup> with Composition API and TypeScript
• used composables and objects instead of classes
• used Vite for development
• removed unnecessary dependencies. The single dependency is vue.
• optimized for bundle size (from 47 KB to 33 KB)
• optimized JSON files (e.g. twitter.json is now 480 KB instead of 754 KB)
• included only one emoji set (twemoji), which is the most popular. To reduce the total bundle size. You can easily download other sets from data folder.
• improved keyboard navigation

live demo

Installation

npm install @mergehez/vue-emoji-picker

bun install @mergehez/vue-emoji-picker

Simple Usage

<script setup>
  import EmojiPicker, {useEmojiIndex} from '@mergehez/vue-emoji-picker';
  import emojiSet from '@mergehez/vue-emoji-picker/emoji-set.json';
  import '@mergehez/vue-emoji-picker/styles.css';

  const emojiIndex = useEmojiIndex(emojiSet);
  const emoji = ref('😀');
</script>

<template>
  <EmojiPicker v-model="emoji" :data="emojiIndex" />
</template>