Display Visually Appealing Stickers with Vue Stickers Component

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

Clone this repository
Enable Corepack using corepack enable
Install dependencies using pnpm install
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