vue3-effect-directive

A library inspired by clickEffect and easily used as a vue directive

Documentation

Installation

pnpm add vue3-effect-directive

Prerequisites

import style bundle

import 'vue3-effect-directive/dist/assets/animations/index.css'

import each style

import { vSanja } from 'vue3-effect-directive'
import 'vue3-effect-directive/dist/assets/animations/sanja.css'

Easily usage

<script setup>
import { vSanja } from 'vue3-effect-directive'
</script>
<template>
  <button v-sanja>click!</button>
</template>

with options

<script setup>
import { vSanja, Options } from 'vue3-effect-directive'
const options: Options = { ... }
</script>
<template>
  <button v-sanja="options">click!</button>
</template>

Global option

const app = createApp(App);
app.use(effectDirective, {
  color: 'red',
})

With Nuxt 3

You just only to do is to add full css assets.

export default defineNuxtConfig({
  css: [
    'vue3-effect-directive/dist/assets/animations/index.css',
  ],
});