Picking emoticons with the Emoji Mart Vue component

emoji-mart-vue

Today almost every way of written communication has emoticons, and if you are looking for a way to include them in your Vue project, take a look at the Emoji Mart (Vue).

An emoticon is a pictorial representation of a facial expression using punctuation marks, numbers and letters, usually written to express a person's feelings or mood.

The Emoji Mart (Vue) is a Slack-like customizable emoji picker component for Vue.js. This project has been forked from emoji-mart which was written for React. This component can offer the emoji picker with many options for customization. As you can see at the demo page, you can choose a different size for the emojis, skin color, how many per line, sheet sizes for different sets and more.

Demo Here

Features

  • Powerful search Returns emojis when searching for emoticons.
  • Fully customizable
  • Emojis sizes and length
  • Default skin color
  • Multiple sets supported (Apple / Google / Twitter / EmojiOne)

Example

Installation

Start by adding the component to your Vue project:

yarn add emoji-mart-vue

You can import the whole picker or single emojis:

import {Picker, Emoji} from 'emoji-mart-vue'

Vue.component('picker', Picker)
Vue.component('emoji', Emoji)

Use them in your templates as you see fit

picker:

<picker set="twitter"></picker>
<picker 
    title="Pick your emoji…" 
    emoji="point_up" 
    autoFocus="true"
    >
    </picker>

single emojis

<emoji emoji=":santa::skin-tone-3:"></emoji>
<emoji emoji="dog" set="emojione"></emoji>

Two pickers

There is a detailed table regarding the props you can use to customize your emoji & pickers, available on GitHub. There you will find everything to get you started along with details for internationalization (I18n).