Lightweight Vue component to hide text until the user clicks or hovers, inspired by Reddit spoiler tag.
-
🕶 Seamless migration: Works for both Vue 3 and 2
-
🦾 Type Strong: Written in TypeScript
-
🔋 SSR Friendly: Nuxt, Vitepress are supported
-
🔩 Easy to use: Just import the component, pass in the content you want to hide and voila, you are good to go!
npm i vue-spoiler<script setup lang="ts">
import { Spoiler } from "vue-spoiler";
</script>
<template>
// Hide your text content
<Spoiler>Your text to hide</Spoiler>
// Hide your elements/ component
<Spoiler>
<YourComponent />
</Spoiler>
</template>| Props | Type | Default | Required | Description |
|---|---|---|---|---|
| tagBackgroundColor | string |
#131313 | no | Background color of hidden state |
| tagTextColor | string |
transparent | no | Text color of hidden state |
| tooltipText | string |
Click to reveal | no | Tooltip shown on hover |
| hoverMode | boolean |
false | no | Change to hover to show content mode |
###Events
| Events | Descriptions |
|---|---|
| (reveal) | Fired when content is clicked (hoverMode false) or when content is hovered/unhovered |
MIT © trungnd19