Emoji Picker In VueJS

What Are Emojis, and Why Do We Need Them?

“An emoji is a pictogram, logogram, ideogram, or smiley embedded in the text and used in electronic messages and web pages. The primary function of emoji is to fill in emotional cues otherwise missing from the typed conversation.” —Wikipedia.

A visual depiction of an item, a symbol, or an emotion is called an emoji. It is beneficial to illustrate your points using graphics instead of words. Emoji are a highly helpful tool for internet communication because of their deep emotional value.

Emojis are used by individuals nowadays to add individuality to their messages. Emojis are used often in daily conversations in the present period on devices like smartphones and other social media platforms like Facebook, Instagram, Snapchat, etc

Get Started.

Step 1: Create a new Angular project.

vue create emoji-picker

Step 2: Install vue-emoji-picker

With npm

npm i vue-emoji-picker --save

With CDN

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

Step 3: Import the emoji-picker.

In your component

import { EmojiPicker } from "vue-emoji-picker";

components: {
    EmojiPicker,
},

In your main.js file

import EmojiPickerPlugin from 'vue-emoji-picker'
//
//
//
Vue.use(EmojiPickerPlugin)

Step 4: Add the HTML in <template>

<div class="hello">
  <textarea v-model="input"></textarea>

  <emoji-picker @emoji="insert" :search="search">
    <div
      slot="emoji-invoker"
      slot-scope="{ events: { click: clickEvent } }"
      @click.stop="clickEvent"
    >
      <button type="button">open</button>
    </div>
    <div slot="emoji-picker" slot-scope="{ emojis, insert }">
      <div>
        <div>
          <input type="text" v-model="search" />
        </div>
        <div>
          <div v-for="(emojiGroup, category) in emojis" :key="category">
            <h5>{{ category }}</h5>
            <div>
              <span
                v-for="(emoji, emojiName) in emojiGroup"
                :key="emojiName"
                @click="insert(emoji)"
                :title="emojiName"
                >{{ emoji }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </emoji-picker>
</div>

Step 5: Add method and variables.

data() {
  return {
    input: "",
    search: "",
  };
},
methods: {
  insert(emoji) {
    this.input += emoji;
  },
},

Finally, run the project by,

npm run serve