📖 Vue Documentation

TikTok Emojis Vue Components

The complete TikTok emoji component library for Vue. 46 secret emojis with TypeScript support, optimized for performance and ready for production.

46
Vue Components
100%
TypeScript Support
0
Dependencies
<3KB
Gzipped Per Component

Why Choose Our Vue Components?

The ultimate library for bringing TikTok's secret emojis to your Vue applications.

Complete Collection

Get all 46 exclusive hidden TikTok emojis in one comprehensive library.

High-Quality SVGs

Crisp, scalable SVG components ensure perfect quality at any size.

Tree-Shakable

Import only the emojis you need, keeping your app's bundle size optimized.

Expressive & Fun

Easily bring the unique fun and expressiveness of TikTok to your web projects.

✨ Key Features

  • 🎨  

    Complete TikTok Emoji Collection

    : All 46 hidden TikTok emojis included.
  • ⚡️  

    Lightweight & Tree-shakable

    : Only bundle the components you use.
  • 🔧  

    Fully Typed

    : Built with TypeScript for excellent developer experience.
  • 🌐  

    SSR Compatible

    : Works seamlessly with Nuxt 3 and other SSR frameworks.
  • 📱  

    Responsive

    : Customizable size with `width`, `height`, and `size` props.
  • 🎯  

    Vue 3 Only

    : Designed specifically for Vue 3 with Composition API support.
  • 🚀  

    Zero Dependencies

    : No external dependencies beyond Vue 3.

📦 Installation

npm install @tiktok-emojis/vue


yarn add @tiktok-emojis/vue


pnpm add @tiktok-emojis/vue

🚀 Quick Start

<script lang="ts">

import { defineComponent } from "vue";

import { Angel, Happy, Cry, Laugh } from "@tiktok-emojis/vue";


export default defineComponent({

  components: { Angel, Happy, Cry, Laugh }

});

</script>


<template>

  <div>

    <Angel :size="32" />

    <Happy :size="48" />

    <Cry :width="24" :height="24" />

    <Laugh size="6rem" />

  </div>

</template>

📚 Usage Examples

Basic Usage

<script lang="ts">

import { defineComponent } from "vue";

import { Smile, Angry, Wow } from "@tiktok-emojis/vue";


export default defineComponent({

  components: { Smile, Angry, Wow }

});

</script>


<template>

  <div>

    <!-- Default size (24px) -->

    <Smile />


    <!-- Custom size -->

    <Angry :size="48" />


    <!-- Custom width and height -->

    <Wow :width="32" :height="32" />

  </div>

</template>

Individual Component Import

For optimal bundle size, import components individually:

<script lang="ts">

import { defineComponent } from "vue";

import { Angel } from "@tiktok-emojis/vue/angel";

import { Happy } from "@tiktok-emojis/vue/happy";

import { Cry } from "@tiktok-emojis/vue/cry";


export default defineComponent({

  components: { Angel, Happy, Cry }

});

</script>


<template>

  <div>

    <Angel :size="32" />

    <Happy :size="48" />

    <Cry :size="24" />

  </div>

</template>

Dynamic Component Loading

<script lang="ts">

import { defineComponent, ref, computed } from "vue";

import * as TikTokEmojis from "@tiktok-emojis/vue";


type ValueOf<T> = T[keyof T];

type Component = ValueOf<typeof TikTokEmojis>;


function resolve(record: Record<string, Component>, code: string) {

  const key = code.charAt(0).toUpperCase() + code.slice(1);

  const result = record[key];

  return result;

}


export default defineComponent({

  setup() {

    const selected = ref("Smile");

    const element = computed(() => resolve(TikTokEmojis, selected.value));

    return { resolve, selected, element };

  }

});

</script>


<template>

  <div style="display: flex; justify-content: center; align-items: center;">

    <select v-model="selected">

      <option value="Smile">Smile</option>

      <option value="Happy">Happy</option>

      <option value="Angry">Angry</option>

    </select>

    <div style="margin-left: 50px;">

      <component :is="element" :size="64" />

    </div>

  </div>

</template>

🎨 Available Components

All 46 TikTok hidden emojis are available as Vue 3 components:

#ComponentTikTok EmojiTikTok CodeMeaning
1<Smile />Smile TikTok Emoji[smile]A subtle pink smiley face that conveys gentle happiness and friendliness.
2<Happy />Happy TikTok Emoji[happy]An exuberant peach-colored face showing pure joy and extreme excitement.
3<Angry />Angry TikTok Emoji[angry]A red-faced emoji expressing frustration, anger, or strong displeasure.
4<Cry />Cry TikTok Emoji[cry]A blue face with streaming tears showing deep sadness or emotional overwhelm.
5<Embarrassed />Embarrassed TikTok Emoji[embarrassed]A blushing face with rosy cheeks showing embarrassment or bashfulness.
6<Surprised />Surprised TikTok Emoji[surprised]Wide-eyed face with open mouth showing shock, surprise, or amazement.
7<Wronged />Wronged TikTok Emoji[wronged]A yellow face with sad eyes and finger-pointing gesture showing feeling wronged or unfairly treated.
8<Shout />Shout TikTok Emoji[shout]An open-mouthed face expressing loud excitement, cheering, or shouting.
9<Flushed />Flushed TikTok Emoji[flushed]A red-cheeked face showing embarrassment, shyness, or being flustered.
10<Yummy />Yummy TikTok Emoji[yummy]A face with tongue out licking lips, showing something is delicious or desirable.
11<Complacent />Complacent TikTok Emoji[complacent]A self-satisfied face with a smug expression showing complacency or smugness.
12<Drool />Drool TikTok Emoji[drool]A face with drool showing intense desire, hunger, or craving.
13<Scream />Scream TikTok Emoji[scream]A face with wide eyes and open mouth showing fear, shock, or distress.
14<Weep />Weep TikTok Emoji[weep]A tearful face showing deep sadness, grief, or emotional pain.
15<Speechless />Speechless TikTok Emoji[speechless]A face with hand covering mouth showing shock, disbelief, or being at a loss for words.
16<Funnyface />Funnyface TikTok Emoji[funnyface]A goofy face with exaggerated features showing silliness and humor.
17<Laughwithtears />Laughwithtears TikTok Emoji[laughwithtears]A face crying tears of laughter showing something is hilariously funny.
18<Wicked />Wicked TikTok Emoji[wicked]A mischievous face with a sly smile showing playful wickedness or scheming.
19<Facewithrollingeyes />Facewithrollingeyes TikTok Emoji[facewithrollingeyes]A face with rolling eyes showing annoyance, sarcasm, or exasperation.
20<Sulk />Sulk TikTok Emoji[sulk]A pouting face showing sulking, disappointment, or being upset.
21<Thinking />Thinking TikTok Emoji[thinking]A thoughtful face with hand on chin showing contemplation or consideration.
22<Lovely />Lovely TikTok Emoji[lovely]A face with heart-shaped eyes showing love, admiration, or being smitten.
23<Greedy />Greedy TikTok Emoji[greedy]A face with a greedy expression showing desire for more or being materialistic.
24<Wow />Wow TikTok Emoji[wow]An amazed face with wide eyes and open mouth showing wonder or awe.
25<Joyful />Joyful TikTok Emoji[joyful]A radiant face with sparkling eyes showing pure joy and happiness.
26<Hehe />Hehe TikTok Emoji[hehe]A face with a mischievous grin showing playful humor or light teasing.
27<Slap />Slap TikTok Emoji[slap]A face with raised hand showing frustration or the urge to slap something.
28<Tears />Tears TikTok Emoji[tears]A face with tears showing sadness, emotional release, or being moved.
29<Stun />Stun TikTok Emoji[stun]A stunned face showing shock, disbelief, or being completely taken aback.
30<Cute />Cute TikTok Emoji[cute]A sweet face with an adorable smile showing cuteness or endearment.
31<Blink />Blink TikTok Emoji[blink]A winking face with one eye closed showing playfulness or shared understanding.
32<Disdain />Disdain TikTok Emoji[disdain]A face with raised eyebrow showing disdain, disapproval, or skepticism.
33<Astonish />Astonish TikTok Emoji[astonish]A face with wide eyes and raised eyebrows showing astonishment or amazement.
34<Rage />Rage TikTok Emoji[rage]A face with an extremely angry expression showing intense rage or fury.
35<Cool />Cool TikTok Emoji[cool]A face wearing sunglasses showing coolness, confidence, or being unfazed.
36<Excited />Excited TikTok Emoji[excited]A face with sparkling eyes and big smile showing excitement and anticipation.
37<Proud />Proud TikTok Emoji[proud]A face with a proud expression showing satisfaction with an achievement.
38<Smileface />Smileface TikTok Emoji[smileface]A face with a big, warm smile showing happiness and friendliness.
39<Evil />Evil TikTok Emoji[evil]A face with a devilish grin showing mischief, plotting, or playful evil.
40<Angel />Angel TikTok Emoji[angel]A face with a halo showing innocence, purity, or pretending to be good.
41<Laugh />Laugh TikTok Emoji[laugh]A face laughing heartily showing joy, amusement, or finding something funny.
42<Pride />Pride TikTok Emoji[pride]A face showing pride and self-satisfaction with achievements or qualities.
43<Nap />Nap TikTok Emoji[nap]A sleepy face with closed eyes showing tiredness or desire to sleep.
44<Loveface />Loveface TikTok Emoji[loveface]A face with heart-shaped eyes showing love, infatuation, or being smitten.
45<Awkward />Awkward TikTok Emoji[awkward]A face with a nervous smile showing awkwardness, discomfort, or social unease.
46<Shock />Shock TikTok Emoji[shock]A face with a shocked expression showing surprise, disbelief, or being stunned.

🔧 Component Props

All TikTok emoji components accept the following props:

interface TikTokEmojiProps {

  width?: string | number;   // Custom width

  height?: string | number;  // Custom height

  size?: string | number;    // Sets both width and height

}

Examples

<script lang="ts">

import { defineComponent } from "vue";

import { Smile, Happy, Cry, Laugh, Angel } from "@tiktok-emojis/vue";


export default defineComponent({

  components: { Smile, Happy, Cry, Laugh, Angel }

});

</script>


<template>

  <div>

    <!-- Using size prop (recommended) -->

    <Smile :size="32" />

    <Happy size="2rem" />


    <!-- Using width and height individually -->

    <Cry :width="24" :height="24" />

    <Laugh width="1.5em" height="1.5em" />


    <!-- Default size (24px) if no props provided -->

    <Angel />

  </div>

</template>

🔧 TypeScript Support

This library is built with TypeScript and provides full type safety:

<script lang="ts">

import { defineComponent } from "vue";

import { Angel, Happy } from "@tiktok-emojis/vue";


export default defineComponent({

  components: { Angel, Happy }

});

</script>


<template>

  <div>

    <Angel :size="32" />      <!-- ✅ Valid -->

    <Happy size="2rem" />     <!-- ✅ Valid -->

    <Angel size="invalid" />  <!-- ❌ Error -->

  </div>

</template>

🌐 SSR Support

`@tiktok-emojis/vue` is fully compatible with Server-Side Rendering frameworks:

Nuxt 3

<script lang="ts">

import { defineComponent } from "vue";

import { Angel, Happy } from "@tiktok-emojis/vue";


export default defineComponent({

  components: { Angel, Happy }

});

</script>


<template>

  <div>

    <h1>Welcome to my app!</h1>

    <Angel :size="48" />

    <Happy :size="32" />

  </div>

</template>

🎯 Best Practices

Performance Optimization

1. Use individual imports for better tree-shaking:

<script lang="ts">

// ✅ Good: only imports what you need

import { Smile } from "@tiktok-emojis/vue/smile";


// ❌ Avoid: imports the entire library

import { Smile } from "@tiktok-emojis/vue";

</script>

2. Lazy load components for better performance:

<script lang="ts">

import { defineComponent, defineAsyncComponent } from "vue";


const Smile = defineAsyncComponent(() => import("@tiktok-emojis/vue/smile"));


export default defineComponent({

  components: { Smile }

});

</script>


<template>

  <Suspense>

    <template #default>

      <Smile :size="32" />

    </template>

    <template #fallback>

      Loading...

    </template>

  </Suspense>

</template>

📋 Requirements

  • 💡 Vue >=3.0.0.
  • 💡 TypeScript 4.0+ (optional, but recommended).

📖 Documentation & Resources

Need React Support? Visit the TikTok Emojis Docs Hub

Jump back to our complete documentation or explore the React component guide for TypeScript-ready TikTok emoji integration.