DEV Community

Cover image for nuxt-twemoji
Yizack Rangel
Yizack Rangel

Posted on

nuxt-twemoji

#nuxt #javascript

npm version

Twemoji module for Nuxt. Render emojis as SVG elements or PNG images

Index

Features

  • Nuxt 3 ready
  • Emoji 14.0 support
  • Render emoji by character
  • Render emoji by codepoint
  • Render emoji by definition object
  • SVG rendering by default
  • PNG image render option
  • Twitter Emoji assets from the original ex-Twitter authors (jdecked/twemoji) fork repository
  • Assets from the jsDelivr CDN
  • Multiples ways of use

Quick Setup

  1. Add nuxt-twemoji dependency to your project 
# Using pnpm
pnpm add -D nuxt-twemoji

# Using yarn
yarn add --dev nuxt-twemoji

# Using npm
npm install --save-dev nuxt-twemoji
Enter fullscreen mode Exit fullscreen mode
  1. Add nuxt-twemoji to the modules section of nuxt.config.ts 
export default defineNuxtConfig({
  modules: [
    'nuxt-twemoji'
  ]
})
Enter fullscreen mode Exit fullscreen mode

That's it! You can now use nuxt-twemoji in your Nuxt app ✨

Components

You can make use of any of these available components according to your Nuxt app needs.

Name Description SSR
Twemoji Renders Twemojis by emoji characters, codepoint or definition. ✔️
Twemojify Parses a text and replaces all emoji characters with Twemoji svg elements or png images. ✔️
TwemojiParse Wrap elements with the component and it will parse all emoji characters found with Twemoji svg or png image elements. ❌

Usage (Twemoji)

  1. Find emojis from the recommended unicode emoji list: https://unicode.org/emoji/charts-14.0/full-emoji-list.html

  2. In the project, use the component <Twemoji emoji="" />, where emoji is the emoji character or codepoint.

  3. If you employ SSR (Server Side Rendering) in your Nuxt application, this module will inject the emoji <svg> or <img> element into the output code during your project's build/generate process. Alternatively, if SSR is not used, the emojis will dynamically render during client runtime.

Twemoji properties

Property Required Default Type
emoji Yes string or EmojiDefinition
size No 1em string
png No false boolean

Rendering

Use the emoji property to render an emoji by character.

<!-- Render SVG element -->
<Twemoji emoji="🚀" />

<!-- Resize -->
<Twemoji emoji="🚀" size="2em" />

<!-- Render PNG <img> element -->
<Twemoji emoji="🚀" png />
Enter fullscreen mode Exit fullscreen mode

Use the emoji property to render an emoji by codepoint.

<Twemoji emoji="1F60A" />
Enter fullscreen mode Exit fullscreen mode

or

<Twemoji emoji="U+1F60A" />
Enter fullscreen mode Exit fullscreen mode

Use the emoji property to render an emoji by definition.

<script setup>
import { twSmilingFaceWithSmilingEyes } from 'nuxt-twemoji/emojis'
</script>

<template>
  <Twemoji :emoji="twSmilingFaceWithSmilingEyes" />
</template>
Enter fullscreen mode Exit fullscreen mode

The emojis file has been generated using the self made generateEmojis.js script, which fetches emojis data from the Unicode public Emoji 14.0 file available at https://unicode.org/Public/emoji/14.0/emoji-test.txt

Definitions

The EmojiDefinition type represents objects that have these specific three string properties:

  • code represents the code associated with the emoji.
  • emoji represents the actual emoji.
  • name represents the name of the emoji. 
type EmojiDefinition = {
  code: string,
  emoji: string,
  name: string
}
Enter fullscreen mode Exit fullscreen mode

More examples

Check out the 🏀 Online playground for more examples.

Twemoji Default CSS

Both the <svg> and <img> tags will have the .twemoji class assigned to them. These are the default styles, but you can add your own styles by using the class name.

.twemoji {
  display: inline-block;
  vertical-align: middle;
}
Enter fullscreen mode Exit fullscreen mode

Usage (Twemojify)

This component parses a string text and replaces all emoji characters with Twemoji svg elements or png images.

  1. In the project, use the component <Twemojify text="" />, where text is a string.
  2. If you employ SSR (Server Side Rendering) in your Nuxt application, this module will inject the emoji <svg> or <img> element into the output code during your project's build/generate process. Alternatively, if SSR is not used, the emojis will dynamically render during client runtime.

Twemojify properties

Property Required Default Type
text Yes string
png No false boolean

Parser

This component uses the @twemoji/parser package by jdecked for identifying emoji entities within a string.

Use the text property to parse all the emoji characters inside a string

<!-- Replaces ❤️ and 🚀 with SVG elements -->
<Twemojify text="I ❤️ Nuxt 🚀" />

<!-- Replaces ❤️ and 🚀 with PNG images -->
<Twemojify text="I ❤️ Nuxt 🚀" png />
Enter fullscreen mode Exit fullscreen mode

Twemojify Default CSS

Both the <svg> and <img> tags will have the .twemojify class assigned to them. These are the default styles, but you can add your own styles by using the class name.

These style rules make sure that parsed emojis will have the same size as the wrapper element.

.twemojify {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}
Enter fullscreen mode Exit fullscreen mode

Usage (TwemojiParse)

This component will parse all emoji characters found.

  1. Wrap elements inside the <TwemojiParse> </TwemojiParse> component
  2. If you want to parse emojis with png images, use the png property with the component, otherwise it will parse svg images by default.

Note: This component has a drawback as it does not support SSR (Server-Side Rendering) because it is executed during the mounted Vue lifecycle, functioning solely on the client-side.

TwemojiParse properties

Property Required Default Type
png No false boolean

DOM parser

This component uses the @twemoji/api package by jdecked and its DOM parser api.

<!-- Replaces 🚀 with SVG image -->
<TwemojiParse>
  <p>Nuxt Twemoji 🚀</p>
</TwemojiParse>

<!-- Replaces 🚀 with PNG image -->
<TwemojiParse png>
  <p>Nuxt Twemoji 🚀</p>
</TwemojiParse>

<!-- You can wrap any amount of emojis inside the component -->
<TwemojiParse>
  <p>Nuxt Twemoji 🚀</p>
  <div>
    <p>I ❤️ Nuxt 🚀</p>
  </div>
</TwemojiParse>
Enter fullscreen mode Exit fullscreen mode

TwemojiParse Default CSS

The <img> tags will have the .twemojiParse class assigned to them. These are the default styles, but you can add your own styles by using the class name.

These style rules make sure that parsed emojis will have the same size as the wrapper element.

img.twemojiParse {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}
Enter fullscreen mode Exit fullscreen mode

Credits

Top comments (0)

Read next

juniourrau profile image

🦸 Supercharge your debugging skills with the console.trace

Ravin Rau -

websilvercraft profile image

How to use Promise.race to add timeout to fetch calls

websilvercraft -

paalaman45 profile image

Mastering Modern JavaScript: A Deep Dive into ES6 Function Creation and Best Practices

Kissel James Paalaman -

garciadiazjaime profile image

React: LinkedIn Access Token in 10 Steps

Jaime -