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 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: {