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'
</script>
<template>
<Sticker>
<!-- Use any text or emoji you want -->
<span>🍦</span>
</Sticker>
</template>
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.
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>
corepack enable
pnpm install
pnpm run dev
inside playground
Author: johannschopplich
Source: https://github.com/johannschopplich/vue-stickers
License: MIT license