Vue Skeletor

Overview

Vue Skeletor is a powerful Skeleton Loading component designed for Vue 3 that automatically adapts to your existing component styles. This innovative solution helps developers create skeletons that closely resemble the intended UI elements without the need for tedious manual adjustments. By seamlessly integrating with your VUE components, Vue Skeletor elevates the user experience during content loading by providing a visually coherent placeholder that stands in for the real content.

Gone are the days of creating separate skeleton components; with Vue Skeletor, you can easily inject skeletons directly into your components, allowing them to match your typography and layout effortlessly. This increases efficiency and significantly reduces the hassle of maintaining skeletons as your UI evolves.

Features

• Adaptive Layout: Automatically adjusts to your existing component’s layout, saving the effort of manually creating skeletons.
• Easy Integration: Inject skeletons directly into your components with minimal setup, streamlining development.
• Global Configuration: Utilize the useSkeletor composable for runtime access to global config settings, including enabling or disabling shimmer animations.
• Custom Shape Options: Define circular or rounded skeletons with simple boolean properties, making it easy to create various shapes.
• Shimmer Animation Control: Customize shimmer effects for individual skeletons to enhance user experience, based on your global settings.
• Styling Flexibility: Override default styles with BEM classes, giving you full control over the appearance and animation of your skeletons.
• Versatile Dimensions: Set width and height as numbers or CSS strings to create placeholders for different types of content, ensuring they fit your design needs.