A Lightweight Modern Emoji Picker Component For Vue | vuemoji-picker

vuemoji-picker is a simple Vue 2 and 3 emoji picker element plugin. It is a modern web component for the web emoji picker.

Must Read: Easy and Simple Emoji Picker with Using JavaScript | fgEmojiPicker.js

How to make use of it:

1. Import the cover component.

import { defineComponent, ref } from 'vue'
import { VuemojiPicker, EmojiClickEventDetail, VuemojiPickerStyle } from 'vuemoji-picker';
  <VuemojiPicker :picker-style="style" @emojiClick="handleEmojiClick" />

2. Create an emoji picker.

  <VuemojiPicker :picker-style="style" @emojiClick="handleEmojiClick" />
export default defineComponent({
  components: { VuemojiPicker },
  setup() {
    const handleEmojiClick = (detail: EmojiClickEventDetail) => {
      // do something
    const style = ref<VuemojiPickerStyle>({
      borderSize: '2px',
      buttonActiveBackground: '#e6e6e6'
    return {

3. Props are available.

isDark: {
  type: Boolean,
  required: false,
  default: isDarkMode()
skinToneEmoji: String,
customEmoji: Array as PropType<PickerConstructorOptions['customEmoji']>,
dataSource: String,
locale: String,
customCategorySorting: Function as PropType<(a: string, b: string) => number>,
i18n: Object as PropType<PickerConstructorOptions['i18n']>,
pickerStyle: Object as PropType<VuemojiPickerStyle>

See Demo And Download

Official Website(wobsoriano): Click Here

This superior jQuery/javascript plugin is developed by wobsoriano. For extra advanced usage, please go to the official website.

Related Posts


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…