Blog Detail

03

Aug
A lightweight emoji picker Component made with Vue js cover image

arrow_back A lightweight emoji picker Component made with Vue js

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

Name Type Description
emojiClick Function Fired when an emoji is selected
skinToneChange Function Fired when a new skin tone is selected

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.

Published at : 03-08-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project