Vue Frimousse

A Vue 3 emoji picker component library - 1:1 port of the React Frimousse emoji picker

Features

• 🎯 1:1 React Port: Complete feature parity with the React Frimousse emoji picker
• 🚀 Vue 3 Composition API: Built with modern Vue 3 patterns and TypeScript
• ⚡️ Lightweight and fast: Dependency-free, tree-shakable, and virtualized with minimal re-renders
• 🎨 Unstyled and composable: Bring your own styles and compose parts as you want
• 🔄 Always up-to-date: Latest emoji data is fetched when needed and cached locally
• 🔣 No � symbols: Unsupported emojis are automatically hidden
• ♿️ Accessible: Keyboard navigable and screen reader-friendly

Installation

npm install vue-frimousse
# or
pnpm add vue-frimousse
# or
yarn add vue-frimousse

If you are using shadcn/vue, you can also install it as a pre-built component via the shadcn CLI.

npx shadcn-vue@latest add https://vue-frimousse.robertshaw.id/r/emoji-picker.json

Learn more in the shadcn/vue section.

Usage

Import the EmojiPicker parts and create your own component by composing them.

<template>
  <EmojiPicker.Root>
    <EmojiPicker.Search />
    <EmojiPicker.Viewport>
      <EmojiPicker.Loading>Loading…</EmojiPicker.Loading>
      <EmojiPicker.Empty>No emoji found.</EmojiPicker.Empty>
      <EmojiPicker.List />
    </EmojiPicker.Viewport>
  </EmojiPicker.Root>
</template>

<script setup lang="ts">
  import { default as EmojiPicker } from "vue-frimousse";
</script>

Apart from a few sizing and overflow defaults, the parts don’t have any styles out-of-the-box. Being composable, you can bring your own styles and apply them however you want: Tailwind CSS, CSS-in-JS, vanilla CSS via inline styles, classes, or by targeting the [frimousse-*] attributes present on each part.

You might want to use it in a popover rather than on its own. Frimousse only provides the emoji picker itself so if you don’t have a popover component in your app yet, there are several libraries available: Reka UI, Base UI, shadcn/vue, and Nuxt UI, to name a few.

shadcn/vue

If you are using shadcn/vue, you can install a pre-built version which integrates with the existing shadcn/vue variables via the shadcn/vue CLI.

npx shadcn-vue@latest add https://vue-frimousse.robertshaw.id/r/emoji-picker.json

It can be composed and combined with other shadcn/ui components like Popover.

Documentation

Find the full documentation and examples on vue-frimousse.robertshaw.id.

Compatibility

• Vue 3+ or Nuxt 3+
• TypeScript 5.1 and above

Miscellaneous

The name “frimousse” means “little face” in French, and it can also refer to smileys and emoticons.

The emoji picker component was originally created for the Liveblocks Comments default components, within @liveblocks/react-ui.

This project is a Vue port of the frimousse

Credits

The emoji data is based on Emojibase.

Contributing

All contributions are welcome! If you find a bug or have a feature request, feel free to create an issue or a PR.

The project is setup as a monorepo with the vue-frimousse package at the root and vue-frimousse.robertshaw.id in the app directory.

Development

Install dependencies and start development builds from the root.

npm i
npm run dev

Test the Nuxt package

npm run dev:nuxt

Tests

The package has 95%+ test coverage with Vitest.

npm run test:unit

License

MIT @xiaoluoboding