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 Composition API with TSX render functions 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 (46 KB min+gzip)
• ships a built-in compact unicode emoji set
• legacy image sets (apple, google, twitter, facebook) remain available for download from the data folder, but are not included in the package
• improved keyboard navigation

live demo

Installation

npm install @mergehez/vue-emoji-picker

bun install @mergehez/vue-emoji-picker

Simple Usage

The picker ships with a built-in compact unicode set, so data is optional:

<script setup>
  import EmojiPicker from '@mergehez/vue-emoji-picker';
  import '@mergehez/vue-emoji-picker/styles.css';

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

<template>
  <EmojiPicker v-model="emoji" />
</template>

Index options

Use useDefaultEmojiIndex to configure the built-in set without importing any data file:

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

  const emojiIndex = useDefaultEmojiIndex({
    include: ['smileys', 'people'],
    recentLength: 10,
  });
  const emoji = ref('😀');
</script>

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

useDefaultEmojiIndex accepts the same options as useEmojiIndex: include, exclude, custom, recent, recentLength and emojisToShowFilter.

Custom data

To use your own dataset, build an index with useEmojiIndex:

<script setup>
  import EmojiPicker, {useEmojiIndex} from '@mergehez/vue-emoji-picker';
  import emojiSet from './your-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>

Unicode data

The built-in default is already the compact unicode format with search keywords embedded, so the Simple Usage above needs no extra setup. Those keywords also serve as the display name in the preview. Unicode-only data always renders native emoji, even when the native prop is false.

If you keep the display set and search map in separate files, use:

import { useUnicodeEmojiIndex } from '@mergehez/vue-emoji-picker'
import unicodeSet from './unicode.json'
import unicodeKeywords from './unicode-keywords.json'

const emojiIndex = useUnicodeEmojiIndex(unicodeSet, unicodeKeywords)

The lower-level form is:

const emojiIndex = useEmojiIndex(unicodeSet, { keywords: unicodeKeywords })

You can also embed the keywords in the set itself:

{
  "categories": [["smileys", "😀😃…"]],
  "keywords": { "😀": "grinning face smile" }
}

const emojiIndex = useEmojiIndex(emojiSetWithKeywords)

Theming

Pass theme="dark" to render the picker with the dark palette:

<EmojiPicker theme="dark" />

Use scale to resize the whole picker, including text, emoji, icons, and spacing:

<EmojiPicker :scale="1.15" />

Use emojiScale to resize only the emoji cells (default 1, based on a 24px emoji):

<EmojiPicker :emoji-scale="1.25" />

Development

bun install
bun run dev

Build the publishable package (JS, CSS and types) into dist/:

bun run build

Build the demo site into dist-demo/:

bun run build:demo

npm publish / bun publish run prepack, which rebuilds dist/ first.

Testing

The project uses Vitest with @vue/test-utils and a happy-dom environment.

bun run test          # watch mode
bun run test:run      # single run
bun run test:coverage # single run with a coverage report

Specs live in tests/ and are split between composables (tests/utils), components (tests/components) and shared fixtures (tests/fixtures).