Blog Detail

3

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

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.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project