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.
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-vueYou 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).
