Draggable Resizable Rotatable Component For Vue – yoyoo-ddr
A touch-enabled draggable, resizable, and rotatable component for Vue.js applications.
June 4, 2022
Other
Easy Twitter Tweet Embed Component For Vue 3
A Vue.js component that makes it easy to embed your Tweet into applications.
June 4, 2022
Social Media
Lite Data Table Component For Vue 3
A simple and lightweight data table component for Vue.js 3. Features sorting, paging, row check, dynamic data rendering, and more.
June 2, 2022
Table
One-time Password Component For Vue 3 – otp-input
A highly customizable one-time password input (also called pincode input) component for Vue 3 applications.
June 2, 2022
Form
Inline Button Toggle Switch For Vue
An inline button-style toggle switch component for Vue.js.
June 2, 2022
Form
Swipeable Bottom Sheet Component – vue-swpie-modal
A Vue 3/2 component to create a swipeable inspired by the mobile bottom sheet as you’ve seen on iOS and Android.
June 1, 2022
Modal & Popup
Vue.js Progressive Image Loading Plugin
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: {
International Phone Input Field With Country Flags – VPhoneInput
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: {
May 30, 2022
Form
Tiny Animated Sparkline Chart Component For Vue.js
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.
May 30, 2022
Chart & Graph
Reactive Vue.js Wrapper For Google Charts – GChart
The GChart component is a Vue.js wrapper for the original Google Charts that features reactive data binding.
May 30, 2022
Chart & Graph
Feature-rich Multiple Select Component For Vue 3/2
A configurable, feature-rich multiple select component for Vue.js 3 and 2.
May 30, 2022
Form
Accessible Color Picker Component For Vue
An easy and accessible color picker component that supports ‘hex’, ‘hsl’, ‘hwb’, and ‘rgb’ foramts.
May 30, 2022
Color
Material Design UI Kit With Vue.js 3 And Bootstrap 5
A Bootstrap 5 based Material Design ui kit for Vue.js 3.
May 30, 2022
Framework
Social Share Button Component For Vue
A Vue component that makes it easier to generate social share buttons on the app.
May 27, 2022
Social Media