Powerful Vue Emoji Picker

A simple yet highly-customizable emoji picker for Vue 2.

How to use it:

1. Install and import the emoji picker.

// locally
import { EmojiPicker } from 'vue-emoji-picker'
export default {
  components: {
    EmojiPicker
  },
}
// globally
import EmojiPickerPlugin from 'vue-emoji-picker'
Vue.use(EmojiPickerPlugin)

2. Attach the emoji picker to a text field.

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

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

export default {
  components: {
    EmojiPicker,
  },
  data() {
    return {
      input: '',
      search: '',
    }
  },
  methods: {
    insert(emoji) {
      this.input += emoji
    },
  },
}

Preview:

Changelog:

v1.0.3 (10/27/2021)

• Added a new, modern, TS setup

Download Details:

Author: DCzajkowski

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

Download Link: https://github.com/DCzajkowski/vue-emoji-picker/archive/master.zip

Official Website: https://github.com/DCzajkowski/vue-emoji-picker

Install & Download:

# NPM
$ npm install vue-emoji-picker --save