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

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
}

Preview:

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

Changelog:

v1.1.0 (08/09/2021)

  • refactor: add multiple pick emoji + changes sources + add icon upload

Download Details:

Author: enzostvs

Live Demo: https://en-zo.dev/vue3-discordpicker

Download Link: https://github.com/enzostvs/vue3-discordpicker/archive/refs/heads/master.zip

Official Website: https://github.com/enzostvs/vue3-discordpicker

Install & Download:

# NPM
$ npm i vue3-discordpicker

You Might Be Interested In:

Add Comment