Highly-customizable emoji picker for Vue 2

Highly-customizable emoji picker for Vue 2
Highly-customizable emoji picker for Vue 2 Very simple, yet powerful, vue emoji picker

Highly-customizable emoji picker for Vue 2


The live demos are available here:


With npm

npm i vue-emoji-picker --save

With a CDN

<script src="https://unpkg.com/vue-emoji-picker/dist/vue-emoji-picker.js"></script>


With an ES6 bundler (via npm)

Use per component

import EmojiPicker from 'vue-emoji-picker'

export default {
  // ...
  components: {
  // ...

Use globally

import { EmojiPickerPlugin } from 'vue-emoji-picker'

Using a CDN


  new Vue({
    // ...


vue-emoji-picker is a slot-based component, to provide maximum flexibility. Since every ounce of html is created by a consumer (ie. you), you can customize every piece of the component as you wish.

Very simple usage, without any CSS defined

You will need two things. A textarea (or an input), where emojis will be injected, and a component declaration. A simple example is provided below.

<textarea v-model="input"></textarea>

<emoji-picker @emoji="insert" :search="search">
  <div slot="emoji-invoker" slot-scope="{ events: { click: clickEvent } }" @click.stop="clickEvent">
    <button type="button">open</button>
  <div slot="emoji-picker" slot-scope="{ emojis, insert, display }">
        <input type="text" v-model="search">
        <div v-for="(emojiGroup, category) in emojis" :key="category">
          <h5>{{ category }}</h5>
              v-for="(emoji, emojiName) in emojiGroup"
            >{{ emoji }}</span>
  data() {
    return {
      input: '',
      search: '',
  methods: {
    insert(emoji) {
      this.input += emoji

As you may see, you have to declare some things yourself. Namely:

  • input - a model for your input/textarea,
  • search - a model for the search box inside the component (optional),
  • insert(emoji) - a method responsible to put emojis into your input/textarea. Provided emoji is a string representation of the emoji to be inserted.

CSS-styled example

To see what is possible with the component, you can simply have a look at a demo available here.

Available props

  • search optional - If you are not using the search functionality, you can omit this one. It should be a model of the search passed from your data.
  • emojiTable optional - You can overwrite the default emoji table by providing your own.


  • emoji-invoker
    • events - delares the v-on:click toggle of the picker box,
  • emoji-picker
    • emojis - object of unicode emojis,
    • insert() - method to be invoked when an emoji is clicked,
    • display - object containting x, y and visible properties.

Download Details:

Author: DCzajkowski

Live Demo: https://codepen.io/DCzajkowski/pen/JLypqP

GitHub: https://github.com/DCzajkowski/vue-emoji-picker


JavaScript Programming Tutorial Full Course for Beginners

Learn JavaScript - Become a Zero to Hero

Top 10 JavaScript Questions

E-Commerce JavaScript Tutorial - Shopping Cart from Scratch

JavaScript Substring Method in 5 Minutes

Javascript Project Tutorial: Budget App