Skip to content

A checkmark animation wrapped in a Vue component based on a codepen by Simon Wuyts.

License

Notifications You must be signed in to change notification settings

Crystal-Creations-GbR/animated-checkmark

Repository files navigation

@crystal-creations/animated-checkmark

GitHub release (latest SemVer) GitHub Build and publish npm package npm npm

A checkmark animation wrapped in a Vue component based on a codepen by Simon Wuyts.

Usage in nuxt 3

  1. Install with

    npm install @crystal-creations/animated-checkmark

  2. Add the following to your nuxt.config.ts.

    export default defineNuxtConfig({
      app: {
        // ...
        modules: [
          // ...
          "@crystal-creations/animated-checkmark/nuxt",
        ],
      },
    });
  3. Add the component to your Vue component.

    <template>
      <AnimatedCheckmark></AnimatedCheckmark>
    </template>

Usage in vue 3

  1. Install with

    npm install @crystal-creations/animated-checkmark

  2. Add the following to your Vue main.ts.

    import { AnimatedCheckmark } from "@crystal-creations/animated-checkmark";
    import "@crystal-creations/animated-checkmark/styles";
    
    // ...
    
    const app = createApp(App)
    
    app.component("AnimatedCheckmark", AnimatedCheckmark);
  3. Add the component to your Vue component.

    <template>
      <AnimatedCheckmark></AnimatedCheckmark>
    </template>