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

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>

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']
  }
})

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ń