{"id":15063126,"url":"https://github.com/yizack/nuxt-twemoji","last_synced_at":"2026-01-29T03:13:15.591Z","repository":{"id":167983301,"uuid":"643607230","full_name":"Yizack/nuxt-twemoji","owner":"Yizack","description":"Twemoji module for Nuxt. Render emojis as SVG elements or PNG images.","archived":false,"fork":false,"pushed_at":"2025-03-13T04:28:51.000Z","size":1498,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T09:21:30.562Z","etag":null,"topics":["emoji","icons","nuxt","nuxt-module","nuxt3","nuxtjs","twemoji","twitter-emoji"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yizack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-21T17:41:48.000Z","updated_at":"2025-03-13T04:28:54.000Z","dependencies_parsed_at":"2024-03-12T04:31:39.172Z","dependency_job_id":"3498b6a5-15fd-414f-8599-b5a8c44c95b1","html_url":"https://github.com/Yizack/nuxt-twemoji","commit_stats":{"total_commits":171,"total_committers":3,"mean_commits":57.0,"dds":0.01754385964912286,"last_synced_commit":"d1b6655d4680f1c6d93f334188805e3e95247eb6"},"previous_names":["yizack/nuxt-twemoji"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yizack%2Fnuxt-twemoji","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yizack%2Fnuxt-twemoji/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yizack%2Fnuxt-twemoji/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yizack%2Fnuxt-twemoji/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yizack","download_url":"https://codeload.github.com/Yizack/nuxt-twemoji/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248199245,"owners_count":21063641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emoji","icons","nuxt","nuxt-module","nuxt3","nuxtjs","twemoji","twitter-emoji"],"created_at":"2024-09-24T23:51:44.170Z","updated_at":"2026-01-29T03:13:15.578Z","avatar_url":"https://github.com/Yizack.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![nuxt-twemoji](https://github.com/Yizack/nuxt-twemoji/assets/16264115/1b53512c-6ac6-412a-8ff2-3b111ffd33d5)\n\n# nuxt-twemoji\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Tests][tests-src]][tests-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n[![Modules][modules-src]][modules-href]\n\nTwemoji module for Nuxt. Render emojis as SVG elements or PNG images\n\n- [✨ Release Notes](https://github.com/Yizack/nuxt-twemoji/blob/main/CHANGELOG.md)\n- [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-twemoji?file=playground%2Fapp.vue)\n\n## Table of Contents\n- [Features](#features)\n- [Quick Setup](#quick-setup)\n- [Module configs](#module-configs)\n- [Components](#components)\n- [Usage (Twemoji)](#usage-twemoji)\n  - [Twemoji properties](#twemoji-properties)\n  - [Rendering](#rendering)\n  - [Definitions](#definitions)\n  - [More examples](#more-examples)\n  - [Twemoji Default CSS](#twemoji-default-css)\n- [Usage (Twemojify)](#usage-twemojify)\n  - [Twemojify properties](#twemojify-properties)\n  - [Parser](#parser)\n  - [Twemojify Default CSS](#twemojify-default-css)\n- [Usage (TwemojiParse)](#usage-twemojiparse)\n  - [TwemojiParse properties](#twemojiparse-properties)\n  - [DOM parser](#dom-parser)\n  - [TwemojiParse Default CSS](#twemojiparse-default-css)\n- [Credits](#credits)\n- [Development](#development)\n\n## Features\n- Nuxt 4 ready\n- Emoji 17.0 support\n- Render emoji by character\n- Render emoji by codepoint\n- Render emoji by definition object\n- SVG rendering by default\n- SVG caching with localStorage\n- PNG image render option\n- Twitter Emoji assets from ex-Twitter author ([jdecked/twemoji](https://github.com/jdecked/twemoji)) fork repository\n- Assets from the [jsDelivr](https://www.jsdelivr.com/) CDN\n- Multiples ways of use\n\n## Quick Setup\n\n1. Add `nuxt-twemoji` dependency to your project\n\n```bash\nnpx nuxi@latest module add twemoji\n```\n\n2. Add `nuxt-twemoji` to the `modules` section of `nuxt.config.ts`\n\n```js\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-twemoji'\n  ]\n})\n```\n\nThat's it! You can now use `nuxt-twemoji` in your Nuxt app ✨\n\n## Module configs\n\nYou can configure the module by adding the `twemoji` property to the `nuxt.config.ts` file. The following are the default configurations:\n\n```js\nexport default defineNuxtConfig({\n  twemoji: {\n    expiresIn: 3.154e+7 // SVG cache expiration time in seconds (1 year)\n  }\n})\n\n```\n\n## Components\n\nYou can make use of any of these available components according to your Nuxt app needs.\n\n| Name |  Description | SSR |\n| -----|---------|----------|\n| `Twemoji`      | Renders Twemojis by emoji characters, codepoint or definition. | ✔️ |\n| `Twemojify`    | Parses a text and replaces all emoji characters with Twemoji svg elements or png images. | ✔️ |\n| `TwemojiParse` | Wrap elements with the component and it will parse all emoji characters found with Twemoji svg or png image elements. | ❌\n\n## Usage (`Twemoji`)\n\n1. Find emojis from [emojipedia](https://emojipedia.org/), [getemoji](https://getemoji.com/) or [unicode emoji list](https://unicode.org/emoji/charts-17.0/full-emoji-list.html)\n2. In your project, use the component `\u003cTwemoji emoji=\"\" /\u003e`, where `emoji` is the emoji character or codepoint.\n3. If you employ SSR (Server Side Rendering) in your Nuxt application, this module will inject the emoji `\u003csvg\u003e` or `\u003cimg\u003e` 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.\n\n### `Twemoji` properties\n| Property | Required | Default | Type                          |\n|----------|----------|---------|-------------------------------|\n| `emoji`  | Yes      |         | `string` or `EmojiDefinition` |\n| `size`   | No       | `1em`   | `string`                      |\n| `png`    | No       | `false` | `boolean`                     |\n\n### Rendering\n\nUse the emoji property to render an emoji by character.\n\n```html\n\u003c!-- Render SVG element --\u003e\n\u003cTwemoji emoji=\"🚀\" /\u003e\n\n\u003c!-- Resize --\u003e\n\u003cTwemoji emoji=\"🚀\" size=\"2em\" /\u003e\n\n\u003c!-- Render PNG \u003cimg\u003e element --\u003e\n\u003cTwemoji emoji=\"🚀\" png /\u003e\n```\n\nUse the emoji property to render an emoji by codepoint.\n\n```html\n\u003cTwemoji emoji=\"1F60A\" /\u003e\n```\n\nor\n\n```html\n\u003cTwemoji emoji=\"U+1F60A\" /\u003e\n```\n\nUse the emoji property to render an emoji by [definition](https://github.com/Yizack/nuxt-twemoji/blob/main/src/runtime/assets/emojis.ts).\n```html\n\u003cscript setup\u003e\nimport { twSmilingFaceWithSmilingEyes } from 'nuxt-twemoji/emojis'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cTwemoji :emoji=\"twSmilingFaceWithSmilingEyes\" /\u003e\n\u003c/template\u003e\n```\n\nThe emojis file has been generated using the self made [`generateEmojis.js`](https://github.com/Yizack/nuxt-twemoji/blob/main/scripts/generateEmojis.js) script, which fetches emojis data from the [Unicode](https://home.unicode.org/) public Emoji 17.0 file available at https://unicode.org/Public/17.0.0/emoji/emoji-test.txt\n\n### Definitions\nThe `EmojiDefinition` type represents objects that have these specific three string properties:\n\n- `code` represents the code associated with the emoji.\n- `emoji` represents the actual emoji.\n- `name` represents the name of the emoji.\n\n```ts\ntype EmojiDefinition = {\n  code: string,\n  emoji: string,\n  name: string\n}\n```\n\n### More examples\nCheck out the [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-twemoji?file=playground%2Fapp.vue) for more examples.\n\n### `Twemoji` Default CSS\n\nBoth the `\u003csvg\u003e` and `\u003cimg\u003e` 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.\n\n```css\n.twemoji {\n  display: inline-block;\n  vertical-align: middle;\n}\n```\n\n## Usage (`Twemojify`)\n\nThis component parses a string text and replaces all emoji characters with Twemoji svg elements or png images.\n\n1. In the project, use the component `\u003cTwemojify text=\"\" /\u003e`, where `text` is a string.\n2. If you employ SSR (Server Side Rendering) in your Nuxt application, this module will inject the emoji `\u003csvg\u003e` or `\u003cimg\u003e` 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.\n\n### `Twemojify` properties\n\n| Property | Required | Default | Type      |\n|----------|----------|---------|-----------|\n| `text`   | Yes      |         | `string`  |\n| `png`    | No       | `false` | `boolean` |\n\n### Parser\n\nThis component uses the `@twemoji/parser` package by [jdecked](https://github.com/jdecked) for identifying emoji entities within a string.\n\nUse the text property to parse all the emoji characters inside a string\n\n```html\n\u003c!-- Replaces ❤️ and 🚀 with SVG elements --\u003e\n\u003cTwemojify text=\"I ❤️ Nuxt 🚀\" /\u003e\n\n\u003c!-- Replaces ❤️ and 🚀 with PNG images --\u003e\n\u003cTwemojify text=\"I ❤️ Nuxt 🚀\" png /\u003e\n```\n\n### `Twemojify` Default CSS\n\nBoth the `\u003csvg\u003e` and `\u003cimg\u003e` 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.\n\nThese style rules make sure that parsed emojis will have the same size as the wrapper element.\n\n```css\n.twemojify {\n  height: 1em;\n  width: 1em;\n  margin: 0 .05em 0 .1em;\n  vertical-align: -0.1em;\n}\n```\n\n## Usage (`TwemojiParse`)\n\nThis component will parse all emoji characters found.\n\n1. Wrap elements inside the `\u003cTwemojiParse\u003e \u003c/TwemojiParse\u003e` component\n2. If you want to parse emojis with png images, use the `png` property with the component, otherwise it will parse svg images by default.\n\nNote: 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.\n\n### `TwemojiParse` properties\n\n| Property | Required | Default | Type      |\n|----------|----------|---------|-----------|\n| `png`    | No       | `false` | `boolean` |\n\n### DOM parser\n\nThis component uses the `@twemoji/api` package by [jdecked](https://github.com/jdecked) and its DOM parser api.\n\n```html\n\u003c!-- Replaces 🚀 with SVG image --\u003e\n\u003cTwemojiParse\u003e\n  \u003cp\u003eNuxt Twemoji 🚀\u003c/p\u003e\n\u003c/TwemojiParse\u003e\n\n\u003c!-- Replaces 🚀 with PNG image --\u003e\n\u003cTwemojiParse png\u003e\n  \u003cp\u003eNuxt Twemoji 🚀\u003c/p\u003e\n\u003c/TwemojiParse\u003e\n\n\u003c!-- You can wrap any amount of emojis inside the component --\u003e\n\u003cTwemojiParse\u003e\n  \u003cp\u003eNuxt Twemoji 🚀\u003c/p\u003e\n  \u003cdiv\u003e\n    \u003cp\u003eI ❤️ Nuxt 🚀\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/TwemojiParse\u003e\n```\n\n### `TwemojiParse` Default CSS\n\nThe `\u003cimg\u003e` 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.\n\nThese style rules make sure that parsed emojis will have the same size as the wrapper element.\n\n```css\nimg.twemojiParse {\n  height: 1em;\n  width: 1em;\n  margin: 0 .05em 0 .1em;\n  vertical-align: -0.1em;\n}\n```\n\n## Credits\n\n- Twitter Emoji assets from [jdecked/twemoji](https://github.com/jdecked/twemoji)\n- Default CDN [jsDelivr](https://www.jsdelivr.com/)\n- [Unicode](https://home.unicode.org/) public [Emoji 17.0](https://unicode.org/Public/17.0.0/emoji) files\n- [Nuxt](https://github.com/nuxt/nuxt), the JavaScript framework for creating SSR Vue applications and its [Module Author Guide](https://nuxt.com/docs/guide/going-further/modules)\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Generate type stubs\npnpm dev:prepare\n\n# Develop with the playground\npnpm dev\n\n# Build the playground\npnpm dev:build\n\n# Run ESLint\npnpm lint\n\n# Run Vitest\npnpm test\npnpm test:watch\n\n# Run typecheck\npnpm test:types\n\n# Release new version\npnpm release\n```\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-twemoji/latest.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-version-href]: https://npmjs.com/package/nuxt-twemoji\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-twemoji.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-downloads-href]: https://npmjs.com/package/nuxt-twemoji\n\n[license-src]: https://img.shields.io/npm/l/nuxt-twemoji.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[license-href]: LICENSE\n\n[tests-src]: https://img.shields.io/github/actions/workflow/status/Yizack/nuxt-twemoji/ci.yml?style=flat\u0026colorA=020420\u0026colorB=00DC82\u0026label=tests\n[tests-href]: https://github.com/Yizack/nuxt-twemoji/actions/workflows/ci.yml\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt\n[nuxt-href]: https://nuxt.com\n\n[modules-src]: https://img.shields.io/badge/Modules-020420?logo=nuxt\n[modules-href]: https://nuxt.com/modules/twemoji\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyizack%2Fnuxt-twemoji","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyizack%2Fnuxt-twemoji","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyizack%2Fnuxt-twemoji/lists"}