Modern Emoji & GIF Picker For Vue 3 - discord-picker

Install & Download:

# NPM
$ npm i vue3-discordpicker

Description:

discord-picker is a modern emoji & GIF image picker for Vue.js 3.

How to use it:

1. Import and register.

import DiscordPicker from 'vue3-discordpicker'

Vue.use(DiscordPicker)
// or
export default {
  components: { DiscordPicker }
}

2. Add the component to the template.

<discord-picker
  input
  :value="value"
  gif-format="md"
  @update:value="value = $event"
  @emoji="setEmoji"
  @gif="setGif"
/>

xport default {
  components: { DiscordPicker },
  data () {
    return {
      value: ''
    }
  },
  methods: {
    setEmoji (emoji) {
      console.log(emoji)
    },
    setGif (gif) {
      console.log(gif)
    }
  }
}

3. Available props.

// custom categories
categories: {
  type: Array,
  default () {
    return ['people','animals','foods','travel','activities','objects','symbols','flags']
  }
},
// placeholder text
placeholder: {
  type: String,
  default: 'Type your message'
},
// load input with autocomplete
input: {
  type: Boolean,
  default: false
},
// input value
value: {
  type: [String, Number],
  default: null,
},
// return gif link with markdown format or html format
gifFormat: {
  type: String
},
// tenor.com API KEY 
key: {
  type: String
}