Overview

Blottie is a sleek and efficient component designed for Vue 3 and Nuxt 3 to make the integration of Lottie animations a breeze. The name itself is derived from the French verb "blottir" meaning "to snuggle," reflecting its purpose of seamlessly wrapping Lottie animations into Vue applications. With the growing demand for visually engaging interfaces, Blottie serves as a valuable tool for developers looking to enhance their web projects with stunning animations.

Whether you're a seasoned Vue developer or just beginning, Blottie simplifies the process of loading and controlling Lottie animations, providing flexibility and customization options. Its integration with Vue 3 allows for a lightweight approach that optimally balances performance and visual appeal, making it an excellent choice for modern web applications.

Features

Integrated with VueJS: Blottie supports all Lottie loadAnimations options and events, making it a powerful add-on for Vue applications.
Flexible Loading Options: Use Blottie as a component or access it through the useBlottie composable for more control and customization.
Automatic Renderer Selection: The best renderer is automatically loaded based on your settings, ensuring an optimized performance for your animations.
Fully Typed: Built with TypeScript, Blottie provides full type definitions for enhanced development experience and error reduction.
Custom Lottie Control: Exposes lottie player and animation controls, allowing for detailed manipulation and interaction with your animations.
Asynchronous Support: Offers a before-init prop to address issues specific to browsers like Safari, enhancing compatibility.
Slot Support: The slot loading feature allows you to insert fallback content while animations load, maintaining a smooth user experience.
Migration Friendly: The component has transitioned from version 1.0 to 2.0 with ease, moving Lottie options into a single lottie attribute for better organization and management.

Applelo

Blottie