Skip to content

An Emoji picker component for your Nuxt 3 project ๐Ÿ˜ƒ

Notifications You must be signed in to change notification settings

timb-103/nuxt-emoji

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

7 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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.

Nuxt Emoji

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

About

An Emoji picker component for your Nuxt 3 project ๐Ÿ˜ƒ

Resources

Stars

Watchers

Forks

Packages

No packages published