nuxt-emoji
v1.0.2
Published
An Emoji component for your Nuxt 3 project.
Downloads
648
Readme
Nuxt 3 Emoji Picker Component
An Emoji picker component for your Nuxt 3 project.
- ✅ Slot for a custom button
- 🔧 Props for theme, placement etc
- 🍪 Saves recently used into a cookie
- 🗨 Uses Tippy js to display picker (vue-tippy)
Open the playground on StackBlitz.
Usage
Install the layer:
npm i -D nuxt-emoji
Add the layer in the extends
array in nuxt.config.ts
:
export default defineNuxtConfig({
extends: ['nuxt-emoji'],
})
Now you can use the emoji picker component anywhere in your project:
<template>
<!-- Basic Usage -->
<NuxtEmoji @on-select="select" />
<!-- With Props -->
<NuxtEmoji @on-select="select" :theme="light" :placement="bottom" />
<!-- With Custom Button -->
<NuxtEmoji @on-select="select">
<template v-slot:button>
<button>Custom Button 😁</button>
</template>
</NuxtEmoji>
</template>
<script setup>
function select(emoji) {
// do something with your emoji
}
</script>
Events
on-select
When the user clicks an emoji, we fire an on-select event that contains the emoji so you can do something with it.
Slots
button
You can pass in a custom button using a button
named slot. This will be the button that launches the component when clicked.
Props
You can pass props to the component to change the style & placement. We'll continue to add on this as requested.
placement
Where the tippy popup showing the emoji picker will show. Options are:
top-start
top-end
right
right-start
right-end
bottom
bottom-start
bottom-end
left
left-start
left-end
auto
auto-start
auto-end
Theme
The main theme of component. Only options are light
(default) and dark