vue-stickers

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ń.

View Demo View Github

Setup

# pnpm
pnpm add vue-stickers

# npm
npm i vue-stickers

Usage

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

<template>
  <Sticker>
    <!-- Use any text or emoji you want -->
    <span>?</span>
  </Sticker>
</template>

Configuration

Props

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

`type="normal"`

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

`type="shiny"`

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

`type="holographic"`

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

? Development

Clone this repository
Enable Corepack using corepack enable
Install dependencies using pnpm install
Start development server using pnpm run dev inside playground

The library provides a Vue component to display stickers on your website