Draggable Resizable Rotatable Component For Vue – yoyoo-ddr
A touch-enabled draggable, resizable, and rotatable component for Vue.js applications.
A touch-enabled draggable, resizable, and rotatable component for Vue.js applications.
A Vue.js component that makes it easy to embed your Tweet into applications.
A simple and lightweight data table component for Vue.js 3. Features sorting, paging, row check, dynamic data rendering, and more.
A highly customizable one-time password input (also called pincode input) component for Vue 3 applications.
An inline button-style toggle switch component for Vue.js.
A Vue 3/2 component to create a swipeable inspired by the mobile bottom sheet as you’ve seen on iOS and Android.
A Vue.js 3 plugin that has the ability to progressively load images with a blur effect just as you have seen on Medium.com. How to use it: 1. Import and register the plugin. // locally import “vue-progressive-image/dist/style.css”; import { ProgressiveImage } from “vue-progressive-image”; // globally import “vue-progressive-image/dist/style.css”; import VueProgressiveImage from ‘vue-progressive-image’ createApp(App).use(VueProgressiveImage).mount(“#app”); 2. Add the VueProgressiveImage to the template and specify the path to your image as follows: <template> <ProgressiveImage src=”1.jpg” /> </template> 3. Default props. src: String, placeholderSrc: String, fallbackSrc: String, alt: String, title: String, customClass: String, blur: , lazyPlaceholder: { type: Boolean, default: false, }, delay: {
VPhoneInput is a user-friendly international telephone (E.164) input field component for Vuetify and Vue JS. How to use it: 1. Import the VPhoneInput component and country flags. import Vue from ‘vue’; import VPhoneInputPlugin from ‘v-phone-input’; import ‘flag-icons/css/flag-icons.min.css’; Vue.use(VPhoneInputPlugin, { // options }); 2. Add the VPhoneInput component to the template. <template> <v-phone-input v-model=”phone” /> </template> 3. Available props for the VPhoneInput component. label: { type: as PropType<MessageResolver>, default: () => getOption(‘label’), }, ariaLabel: { type: as PropType<MessageResolver>, default: () => getOption(‘ariaLabel’), }, countryLabel: { type: as PropType<MessageResolver>, default: () => getOption(‘countryLabel’), }, countryAriaLabel: {
A tiny animated sparkline chart component that also supports curve chart, bar/column chart, pie chart, dynamic data rendering, tooltip & reference line, and much more.
The GChart component is a Vue.js wrapper for the original Google Charts that features reactive data binding.
A configurable, feature-rich multiple select component for Vue.js 3 and 2.
An easy and accessible color picker component that supports ‘hex’, ‘hsl’, ‘hwb’, and ‘rgb’ foramts.
A Bootstrap 5 based Material Design ui kit for Vue.js 3.
A Vue component that makes it easier to generate social share buttons on the app.