DCzajkowski / vue-emoji-picker

Very simple, yet powerful, vue emoji picker 🎉🔥🚀
MIT License
331 stars 49 forks source link

Vue3 #38

Closed fred-snapstream closed 2 years ago

fred-snapstream commented 2 years ago

This is the best emoji picker I have found for Vue.. but unfortunately I use Vue3. Plans to migrate it?

DCzajkowski commented 2 years ago

Hello, @fred-snapstream! I moved from using Vue to React, so I will be not writing any new features for this project anymore. However, I will gladly accept a PR.

hedgehed commented 2 years ago

It works for me in Vue3


import EmojiPickerComponent from 'vue-emoji-picker/src/Components/EmojiPicker.vue';

export default {
    components: {
        EmojiPickerComponent,
    },
.........
        <EmojiPickerComponent :search="search" @emoji="insert">
            <template #emoji-invoker="{ events: { click: clickEvent } }">
                <button type="button" @click.stop="clickEvent">open</button>
            </template>
            <template #emoji-picker="{ emojis }">
                <div>
                    <div>
                        <input v-model="search" type="text">
                    </div>
                    <div>
                        <div v-for="(emojiGroup, category) in emojis" :key="category">
                            <h5>{{ category }}</h5>
                            <div>
                                <span
                                    v-for="(emoji, emojiName) in emojiGroup"
                                    :key="emojiName"
                                    :title="emojiName"
                                    @click="insert(emoji)"
                                >{{ emoji }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </EmojiPickerComponent>
DCzajkowski commented 2 years ago

Closing, since it seems to work.