Demo

Play with it on Stackblitz

Watch video

https://github.com/selemondev/nuxt-emoji-picker/assets/106826371/32b3ab4f-13cd-4c7e-918b-f2b4daa00cde

Features

• Add emojis to your Nuxt 3 application effortlessly.

Quick Setup

1. Install the module in your Nuxt application with one command:

npx nuxi@latest module add nuxt-emoji-picker

2. Install with your preferred package manager:

# ✨ Auto-detect
npx nypm install nuxt-emoji-picker

# npm
npm install nuxt-emoji-picker

# yarn
yarn add nuxt-emoji-picker

# pnpm
pnpm install nuxt-emoji-picker

# bun
bun install nuxt-emoji-picker

# deno
deno install nuxt-emoji-picker

That's it! You can now use nuxt-emoji-picker in your Nuxt application ✨

Usage

You can use the nuxt-emoji-picker component as shown below:

<template>

  <NuxtEmojiPicker
    :hide-search="false"
    theme="light"
    @select="onSelectEmoji"
  />

</template>

<script setup>
import { ref } from 'vue'

const selectedEmoji = ref()

const onSelectEmoji = (emoji) => {
  selectedEmoji.value = emoji.i
}
</script>

You can check out all the available props and methods here

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release