Vue 2 and 3 Emoji Picker Component using emoji-picker-element

EmojiPicker.vue

<template>
  <emoji-picker ref="picker"></emoji-picker>
</template>

<script>
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
// https://github.com/nolanlawson/emoji-picker-element
import 'emoji-picker-element/picker';

export default defineComponent({
  emits: ['handleSelect'],
  setup(_props, { emit }) {
    const picker = ref();

    const handleEmojiClick = (event) => {
      emit('handleSelect', event.detail);
    };

    onMounted(() => {
      picker.value?.addEventListener('emoji-click', handleEmojiClick, true);
    });

    onUnmounted(() => {
      picker.value?.removeEventListener('emoji-click', handleEmojiClick, true);
    });

    return {
      picker,
    };
  },
});
</script>

For Nuxt:

if (process.browser) {
  require('emoji-picker-element');
}