Simple And Powerful Emoji Picker For Vue 3

A simple, flexible, and powerful Vue component that lets you pick emojis easily.

It makes your application more user-friendly and enjoyable, especially for mobile devices.

How to use it:

1. Import the emoji picker.

import { ref } from "vue";
import EmojiPicker from 'vue3-emoji-picker'
// stylesheet
import 'node_modules/vue3-emoji-picker/dist/style.css'

2. Register the component.

// app.vue
export default {
  name: "App",
  components: {
    EmojiPicker: EmojiPicker,
  },
};

3. Add the emoji picker to the template and bind it to text fields like input field and textarea.

<template>
  <h3>Default</h3>
  <EmojiPicker @select="showEmoji" />
  <h3>With Input</h3>
  <EmojiPicker picker-type="input" @select="onSelectEmoji" />
  <h3>With Textarea</h3>
  <EmojiPicker picker-type="textarea" @select="onSelectEmoji" />
</template>

// app.vue
export default {
  name: "App",
  components: {
    EmojiPicker: EmojiPicker,
  },
  setup() {
    const input = ref("");
    function onSelectEmoji(emoji) {
      console.log(emoji);
      input.value += emoji.i;
    }
    function showEmoji(emoji) {
      alert(`emoji ${emoji.i} selected, check console for details`);
      console.log(emoji);
    }
    return {
      input,
      onSelectEmoji,
      showEmoji,
    };
  },
};

4. Available component props.

native: {
  type: Boolean,
  default: false,
},
hideSearch: {
  type: Boolean,
  default: false,
},
hideGroupIcons: {
  type: Boolean,
  default: false,
},
hideGroupNames: {
  type: Boolean,
  default: false,
},
staticTexts: {
  type: Object,
  default: () => ({}),
},
disableStickyGroupNames: {
  type: Boolean,
  default: false,
},
disabledGroups: {
  type: Array,
  default: () => [],
},
groupNames: {
  type: Object,
  default: () => ({}),
},
disableSkinTones: {
  type: Boolean,
  default: false,
},
text: {
  type: String,
  default: '',
},
mode: {
  type: String,
  default: 'insert', // or append, prepend
},
offset: {
  type: Number,
  default: 6,
},
pickerType: {
  type: String,
  default: '',
},

Preview:

Changelog:

v1.1.6 (11/05/2022)

• Feature: Recently Added Emoji Group
• Additional Group Support
• Group Sort Support
• Custom Group Icons Support
• Fix: Store Reactivity Issue

v1.1.5 (10/31/2022)

• remove console.log
• feat: add prop additional-groups

v1.1.4 (08/24/2022)

• Fix: Unexpected whole page scrollC

v1.1.3 (06/16/2022)

• Fix: Unable to change group names

Download Details:

Author: delowardev

Live Demo: https://codesandbox.io/s/heuristic-dewdney-kp971?file=/src/App.vue

Download Link: https://github.com/delowardev/vue3-emoji-picker/archive/refs/heads/main.zip

Official Website: https://github.com/delowardev/vue3-emoji-picker

Install & Download:

# Yarn
$ yarn add vue3-emoji-picker

# NPM
$ npm i vue3-emoji-picker