[Vuejs]-Anyone have step by step using vue-twemoji-picker?

by

3👍

✅

Just saw your question… I’m the author of vue-twemoji-picker. The documentation for v^4.0.0 was a little… mess haha.

Recently I’ve updated the component to a major version (v^5.0.0) which includes a new documentation website way more detailed and visually pleasing than the another one, and maybe it will fits your needs way better than before: https://kevinf*guiar.github.io/vue-twemoji-picker/docs/getting-started/#using-twemojipicker

Also, if you don’t want to use the documentation website, this Vue snippet should work as expected:

<template>
  <twemoji-textarea 
    :emojiData="emojiDataAll" 
    :emojiGroups="emojiGroups" 
    @enterKey="onEnterKey">
  </twemoji-textarea>
</template>

<script>
  import {
    TwemojiTextarea
  } from '@kevinf*guiar/vue-twemoji-picker';
  import EmojiAllData from '@kevinf*guiar/vue-twemoji-picker/emoji-data/en/emoji-all-groups.json';
  import EmojiGroups from '@kevinf*guiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
  export default {
    name: 'App',
    components: {
      'twemoji-textarea': TwemojiTextarea
    },
    computed: {
      emojiDataAll() {
          return EmojiAllData;
      },
      emojiGroups() {
          return EmojiGroups;
      }
    },
    methods: {
      onEnterKey(e) {
        console.log("ClickedEnter", e);
      }
    }
  }
</script>

If you feel the documentation is lacking something please don’t hesitate in opening an Issue at the Github repo: https://github.com/kevinf*guiar/vue-twemoji-picker/issues

It is very exciting to know that people are using my projects and to receive feedback from the community 😃

1👍

Install it with npm install --save vue-twemoji-picker.
Then add and edit this code to your component .vue file:

<template>
<div>
    <coolpicker
        :emojiData="emojiDataAll"
        :emojiGroups="emojiGroups"
        :skinsSelection="true"
        @emojiUnicodeAdded="yourMethodToCatchEmojiUnicode"
        @emojiImgAdded="yourMethodToCatchEmojiImg"
    ></coolpicker>
    <coolpicker
        :emojiData="emojiDataTwoCollections"
        :emojiGroups="emojiGroups"
        :skinsSelection="true"
        @emojiUnicodeAdded="yourMethodToCatchEmojiUnicode"
        @emojiImgAdded="yourMethodToCatchEmojiImg"
    ></coolpicker>
    <cooltextarea
        :content.sync="content"
        :emojiData="emojiDataAll"
        :emojiGroups="emojiGroups"
        @enterKey="onEnterKey"
        ref="cooltextareaRef"
    ></cooltextarea>
</div>
</template>

<script>
import { CoolPicker } from 'cool-emoji-picker'
import { CoolTextArea } from 'cool-emoji-picker'
import EmojiData from '../emoji-data/{LANG}/emoji-all-groups.json'
import EmojiDataAnimalsNature from '../emoji-data/{LANG}/emoji-group-animals-nature.json'
import EmojiDataFoodDrink from '../emoji-data/{LANG}/emoji-group-food-drink.json'
import EmojiGroups from '../emoji-data/emoji-groups.json'
export default {
    name: 'App',
    data: () => ({ content }),
    components: {
        'coolpicker': CoolPicker,
        'cooltextarea': CoolTextArea
    },
    computed: {
        emojiDataAll() { return EmojiData },
        emojiDataTwoCollections() {
            const emojiData = []
            emojiData.push(EmojiDataAnimalsNature)
            emojiData.push(EmojiDataFoodDrink)
            return emojiData
        },
        emojiGroups() { return EmojiGroups }
    },
    methods: {
        onEnterKey() {},
        yourMethodToCatchEmojiUnicode() {},
        yourMethodToCatchEmojiImg() {}
    }
}
</script>

Leave a comment