Simple And Powerful Emoji Picker For Vue 3

Install & Download:

# Yarn
$ yarn add vue3-emoji-picker
# NPM
$ npm i vue3-emoji-picker

Description:

A simple, flexible, and powerful Vue component that lets you pick emojis easily.

It makes your application more user-friendly and enjoyable, especially for mobile devices.

How to use it:

1. Import the emoji picker.

import { ref } from "vue";
import EmojiPicker from 'vue3-emoji-picker'
// stylesheet
import 'node_modules/vue3-emoji-picker/dist/style.css'

2. Register the component.

// app.vue
export default {
  name: "App",
  components: {
    EmojiPicker: EmojiPicker,
  },
};

3. Add the emoji picker to the template and bind it to text fields like input field and textarea.

<template>
  <h3>Default</h3>
  <EmojiPicker @select="showEmoji" />
  <h3>With Input</h3>
  <EmojiPicker picker-type="input" @select="onSelectEmoji" />
  <h3>With Textarea</h3>
  <EmojiPicker picker-type="textarea" @select="onSelectEmoji" />
</template>

// app.vue
export default {
  name: "App",
  components: {
    EmojiPicker: EmojiPicker,
  },
  setup() {
    const input = ref("");
    function onSelectEmoji(emoji) {
      console.log(emoji);
      input.value += emoji.i;
    }
    function showEmoji(emoji) {
      alert(`emoji ${emoji.i} selected, check console for details`);
      console.log(emoji);
    }
    return {
      input,
      onSelectEmoji,
      showEmoji,
    };
  },
};

4. Available component props.

native: {
  type: Boolean,
  default: false,
},
hideSearch: {
  type: Boolean,
  default: false,
},
hideGroupIcons: {
  type: Boolean,
  default: false,
},
hideGroupNames: {
  type: Boolean,
  default: false,
},
staticTexts: {
  type: Object,
  default: () => ({}),
},
disableStickyGroupNames: {
  type: Boolean,
  default: false,
},
disabledGroups: {
  type: Array,
  default: () => [],
},
groupNames: {
  type: Object,
  default: () => ({}),
},
disableSkinTones: {
  type: Boolean,
  default: false,
},
text: {
  type: String,
  default: '',
},
mode: {
  type: String,
  default: 'insert', // or append, prepend
},
offset: {
  type: Number,
  default: 6,
},
pickerType: {
  type: String,
  default: '',
},