Add emoji keyboard to your vue.js project


In this article, We’ll add emoji keyboard in our vue.js project. First install vue.js in your system and create a new vue.js project with the following command:

$ vue create my-first-vuejs-app

If vue.js is not install in your system read this article: Getting started with vue.js

emoji-vue. A Vue.js project implementing a input field addon allowing to add emojis via dropdown.


Install emoji-vue package in your app with the following command:

npm i emoji-vue --save


import VueEmoji from 'emoji-vue'

//in component def
  methods: {
      onInput(event) {
          // contains the value of the textarea
  components: {

//in template section
<VueEmoji ref="emoji" @input="onInput" :value="myText" />

Event & properties

@input – event generated when content of textarea with emoji selector is changed.

value – property to place initial content of the textarea.

width – sets width of visible textarea in px; defaults to ‘200px’.

height – sets height of visible textarea in px; defaults to ’50px’.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Leave a Reply

Your email address will not be published. Required fields are marked *