Vue Chat Emoji

A simple chat emoji for vuejs.

Installation

npm install vue-chat-emoji

Usage

using inside component

<template>
  <div id="app">
    <Emoji />
  </div>
</template>

<script>
import { VueChatEmoji, emojis } from 'vue-chat-emoji'
require("vue-chat-emoji/dist/vue-chat-emoji.css");
export default {
  components: {
    Emoji: VueChatEmoji
  }
}
</script>

using globally

import Vue from "vue";
import App from "./App.vue";
 
import { VueChatEmoji } from 'vue-chat-emoji';
Vue.component("Emoji", VueChatEmoji);
require("vue-chat-emoji/dist/vue-chat-emoji.css");

Vue.config.productionTip = false;
Vue.use(Emoji);
 
new Vue({
  render: h => h(App)
}).$mount("#app");

Events

Name Description
click Emitted when emoji is clicked.
<template>
  <div id="app">
    <Emoji @click="selectedEmoji"/>
  </div>
</template>

<script>
import { VueChatEmoji, emojis } from 'vue-chat-emoji'
export default {
  components: {
    Emoji: VueChatEmoji
  },
  methods: {
    selectedEmoji(args) {
      console.log(args); /* return {...}*/
    }
  }
}
</script>

Methods

List of methods in emojis
Usage Description
get() List all emojis. Return [{...}].
all() List all emojis. Return [{...}]
encodeEmoji() Convert emoji character to string. e.g ":birthday_cake:" => "?"
decodeEmoji() Convert valid emoji key to character. e.g "?" => ":birthday_cake:"
getRandomEmoji() Return random emoji. Return {...}
findEmojiByKey() Return {...} if found and undefined if not found.
findEmojiByName() Return {...} if found and undefined if not found.
searchEmojiByName() Return [{...}] if found and [] if search not found.
findEmojiByGroup() Return [{...}] if found and [] if search not found.
<template>
  <div id="app">
    <Emoji />
  </div>
</template>

<script>
import { VueChatEmoji, emojis } from 'vue-chat-emoji'
export default {
  components: {
    Emoji: VueChatEmoji
  },
  methods: {
    getAllEmojis() {
      console.log(emojis.all()); // [{...}]
      this.emojifyString("Here is your ?.") /* => Here is your :birthday_cake:.*/
      this.unEmojifyString("Here is your :birthday_cake:.") /* Here is your ?.*/
    },
    unEmojifyString(str) {
      console.log(emojis.decodeEmoji(str)) 
    },
    emojifyString(str) {
      console.log(emojis.encodeEmoji(str));
    }
  },
  mounted() {
    this.getAllEmojis();
  }
}
</script>

Props

Name Type Description
backgroundColor String (Style property) set the emoji container background color. Default: #f5f5f5 or whitesmoke
radius String or Number (Style property) Set the emoji container border radius. Default: 8
selectedCategory String Set default emoji category. Default: "Smileys & Emotion"
color String Set emoji container color. Default: "#000"
icon String Set emoji icon. Default: "f118"
open Boolean Hide or show emoji container. Default: false
v-on:close Event Emit $event true or false

GitHub