Display Visually Appealing Stickers with Vue Stickers Component


This library provides a Vue component to display stickers on your website. Choose from three different types of stickers: normal, shiny, and holographic.

Styling is heavily inspired by the sticker CSS experiments by Artur Bień.


# pnpm
pnpm add vue-stickers

# npm
npm i vue-stickers


<script setup lang="ts">
import { Sticker } from 'vue-stickers/components'

    <!-- Use any text or emoji you want -->

Nuxt Support

Nuxt is supported out of the box, but the Sticker Vue component provided by this library needs to be transpiled for the server-side rendering to work. Add the following to your nuxt.config.ts:

export default defineNuxtConfig({
  build: {
    transpile: ['vue-stickers']



The sticker Vue component accepts a type prop to change the sticker type.


<Sticker type="normal">
  <span style="font-size: 10rem;">Sticker</span>


<Sticker type="shiny">
  <span style="font-size: 10rem;">🍦</span>


<Sticker type="holographic">
  <span style="font-size: 10rem;">👻</span>

💻 Development

  1. Clone this repository
  2. Enable Corepack using corepack enable
  3. Install dependencies using pnpm install
  4. Start development server using pnpm run dev inside playground

Download details:

Author: johannschopplich
Source: https://github.com/johannschopplich/vue-stickers

License: MIT license

#vue #vuejs 

Display Visually Appealing Stickers with Vue Stickers Component
1.00 GEEK