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