Vue.js Emoji Picker Popup Modal Window Using v-emoji-picker Library in Javascript Full Project For Beginners

Vue.js Emoji Picker Popup Modal Window Using v-emoji-picker Library in Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be integrating emoji picker popup modal window in vue.js using v-emoji-picker library in javascript. All the full source code of the application is shown below.

 

 

Installation

 

 

In order to get started you need to create a brand new vue.js project and then install the below library using the npm command as shown below

 

npm i v-emoji-picker

 

For all the images and javascript files you can download the full github repository as shown below

 

DOWNLOAD SOURCE CODE

 

After downloading it the directory structure will look something like this

 

 

 

 

<template>
  <div id="exampleInputEmoji">
    <div class="your-input-box">
      <input type="text" v-model="valueInput">
      <button @click="toogleDialogEmoji">😃</button>
    </div>
    <VEmojiPicker
      v-show="showDialog"
      :pack="emojisNative"
      labelSearch="Search"
      style="{ width: 4px }"
      @select="onSelectEmoji"
    />
  </div>
</template>

<script>
import VEmojiPicker from "v-emoji-picker";
import packEmoji from "v-emoji-picker/data/emojis.js";

export default {
  name: "exampleInputEmoji",
  components: {
    VEmojiPicker
  },
  data: () => ({
    valueInput: "Someting text ",
    showDialog: false
  }),
  mounted() {},
  methods: {
    toogleDialogEmoji() {
      this.showDialog = !this.showDialog;
    },
    onSelectEmoji(dataEmoji) {
      this.valueInput += dataEmoji.emoji;
      // Optional
      // this.toogleDialogEmoji();
    }
  },
  computed: {
    emojisNative() {
      return packEmoji;
    }
  }
};
</script>

<style lang="css" scoped>
/* THIS IS OPTIONAL */
/* @font-face {
  font-family: NotomojiColor;
  font-weight: 400;
  src: url(
      https://cdn.glitch.com/61908de1-dd0a-4359-a54b-6cb6d41bb5fd%2FNotoColorEmoji.ttf?1513108808150
    )format("truetype");
} */

#exampleInputEmoji {
  position: relative;
}

.your-input-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

input {
  padding: 8px;
  font-size: 16px;
  margin-right: 2px;
  border-radius: 4px;
  border: 1px solid #848484;
}

button {
  background: #ececec;
  border-radius: 4px;
  padding: 5px;
  font-size: 22px;
  border: 1px solid #848484;
}
</style>

 

See also  Vue.js Digital Clock With Current Time Using Moment.js and CSS Bulma Framework in Browser Using Javascript Full Project For Beginners

 

After you execute the vue.js app you will see the below emoji picker popup modal window

 

 

 

Live Demo

 

 

Vue.js Emoji Picker

See also  Build Anonymous Random P2P WebRTC Zoom Clone Video Chat in Mobile Using Node.js Socket.io & Vue.js in Javascript Full Project For Beginners

 

Leave a Reply