Emoji picker for Vue 3

Table of contents

• Demo
• Installation
  • With npm
  • With a CDN
• Import
  • With an ES6 bundler (via npm)
    • Use per component
    • Use via <script setup>
• Usage
  • Very simple usage, without any CSS defined
• License

Demo

The live demos are available here:

• Simple,

Installation

With npm

npm i vue-emoticon-picker --save

Import

With an ES6 bundler (via npm)

Use per component

import Emoticon from 'vue-emoticon-picker'

export default {
  // ..
  emits: ['clickEmoticon'],
  components: {
    Emoticon,
  },
  // ...
}

Use via <script setup>

import { ref, defineEmits } from 'vue'
const emit = defineEmits(['clickEmoticon'])

// ...
const input = ref('')
const emoticonRef = ref(null);

const handleClickEmoji = (emoji) => {
  input.value += emoji;
}

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.

<template>
  <textarea v-model="input"></textarea>
  <button type="button" @click="emoticonRef.toggleShow()">:)</button>
  <!-- // .... // -->
  <Emoticon ref="emoticonRef" @click-emoticon="handleClickEmoji" />

  <!-- // .... // -->
</template>

{
  setup() {
    const emoticonRef = ref(null)

    return {
      emoticonRef
    }
  },
  data() {
    return {
      input: '',
    }
  },
  methods: {
    handleClickEmoji(emoji) {
      this.input += emoji
    },
  },
}

License

This work is an open-sourced software licensed under the MIT license.