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

  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

License

MIT License © 2023-present Johann Schopplich

MIT License © 2023 Artur Bień