``` ```js { data() { return { input: '', search: '', } }, methods: { insert(emoji) { this.input += emoji }, }, } ``` As you may see, you have to declare some things yourself. Namely: - `input` - a model for your input/textarea, - `search` - a model for the search box inside the component (optional), - `insert(emoji)` - a method responsible to put emojis into your input/textarea. Provided `emoji` is a string representation of the emoji to be inserted. ### CSS-styled example To see what is possible with the component, you can simply have a look at a demo available [here](https://codepen.io/DCzajkowski/pen/jzLzWp). ## Available props - `search` _optional_ - If you are not using the search functionality, you can omit this one. It should be a model of the search passed from your `data`. - `emojiTable` _optional_ - You can overwrite the [default](https://github.com/DCzajkowski/vue-emoji-picker/blob/master/src/emojis.ts) emoji table by providing your own. ## Slots - `emoji-invoker` - `events` - delares the `v-on:click` toggle of the picker box, - `emoji-picker` - `emojis` - object of unicode emojis, - `insert()` - method to be invoked when an emoji is clicked, - `display` - object containting `x`, `y` and `visible` properties. ## License This work is an open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

Highly-customizable emoji picker for Vue 2

Demo
Installation
- With npm
- With a CDN
Import
- With an ES6 bundler (via npm)
  - Use per component
  - Use globally
- Using a CDN
Usage
- Very simple usage, without any CSS defined
- CSS-styled example
Available props
License

Demo

The live demos are available here:

Installation

With npm

npm i vue-emoji-picker --save

With a CDN

<script src="https://unpkg.com/vue-emoji-picker/dist/vue-emoji-picker.js"></script>

Import

With an ES6 bundler (via npm)

import { EmojiPicker } from 'vue-emoji-picker'
export default {
  // ...
  components: {
    EmojiPicker,
  },
  // ...
}

Using a CDN

<script>
  new Vue({
    components: {
      EmojiPicker: window.EmojiPicker,
    },
  })
</script>

Usage

vue-emoji-picker is a slot-based component, to provide maximum flexibility.
Since every ounce of html is created by a consumer (ie. you), you can customize every piece of the component as you wish.

Very simple usage, without any CSS defined

You will need two things. A textarea (or an input), where emojis will be injected, and a component declaration. A simple example is provided below.
```html

{{ category }}