Vuemoji-picker is a simple Vue 2 and 3 wrapper component for emoji-picker-element. It is a lightweight emoji picker made with vue-js that you can easily utilize in your projects.

Installation

You can install vuemoji-picker by running this command via npm:

npm install vuemoji-picker

Usage

1: Options API

<template>
  <div id="app">
    <VuemojiPicker @emojiClick="handleEmojiClick" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'

export default Vue.extend({
  components: {
    VuemojiPicker
  },
  methods: {
    handleEmojiClick(detail: EmojiClickEventDetail) {}
  }
});
</script>

2: Composition API

<template>
    <VuemojiPicker @emojiClick="handleEmojiClick" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'

export default defineComponent({
    components: { VuemojiPicker },
    setup() {
        const handleEmojiClick = (detail: EmojiClickEventDetail) => {}

        return {
            handleEmojiClick
        }
    }
})
</script>

Events

Database API Composable

Use the Database API as a composable.

import { defineComponent } from 'vue' // @vue/composition-api for Vue 2
import { useDatabase } from 'vuemoji-picker'

export default defineComponent({
    setup() {
        const database = useDatabase()
        
        const searchEmoji = async () => {
            const result = await database.getEmojiBySearchQuery('elephant')
            // [{unicode: "?", ...}]
        }

        return {
            searchEmoji
        }
    }
})

If you want to know more about available styling and offline config options, you can read emoji-picker-element’s docs.
It is also available on Github.