https://github.com/johannschopplich/vue-stickers

🍦 One component, multiple fancy sticker variants
https://github.com/johannschopplich/vue-stickers

stickers vue vue-components

Last synced: 27 days ago
JSON representation

🍦 One component, multiple fancy sticker variants

• Host: GitHub
• URL: https://github.com/johannschopplich/vue-stickers
• Owner: johannschopplich
• License: mit
• Created: 2023-06-19T20:01:00.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-19T12:01:00.000Z (almost 1 year ago)
• Last Synced: 2024-10-13T15:01:57.950Z (about 1 month ago)
• Topics: stickers, vue, vue-components
• Language: Vue
• Homepage: https://vue-stickers.netlify.app
• Size: 610 KB
• Stars: 22
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Vue sticker library](./.github/screenshot.png)](https://vue-stickers.netlify.app)

# vue-stickers

[![NPM version](https://img.shields.io/npm/v/vue-stickers?color=a1b858&label=)](https://www.npmjs.com/package/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](https://expensive.toys/toys/stickers) by Artur Bień.

## Setup

```bash

# pnpm

pnpm add vue-stickers

# npm

npm i vue-stickers

```

## Usage

```vue

import { Sticker } from 'vue-stickers/components'

  

    

    🍦

  

```

### 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`:

```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"`

```html

  Sticker

```

#### `type="shiny"`

```html

  🍦

```

#### `type="holographic"`

```html

  👻

```

## 💻 Development

1. Clone this repository

2. Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`

3. Install dependencies using `pnpm install`

4. Start development server using `pnpm run dev` inside `playground`

## License

[MIT](./LICENSE) License © 2023-present [Johann Schopplich](https://github.com/johannschopplich)

[MIT](./LICENSE) License © 2023 [Artur Bień](https://github.com/arturbien)