Color Pickers for Sketch Photoshop, Chrome & more with Vue.js

Complete implementation of Color Pickers for Sketch, Photoshop, Chrome & more with Vue.js Installation NPM $ npm install vue-color CommonJS var Photoshop = require(‘vue-color/src/Photoshop.vue’); new Vue({ components: { ‘Photoshop’: Photoshop } }) ES6 import { Photoshop } from ‘vue-color’ new Vue({ components: { ‘photoshop-picker’: Photoshop } }) Browser globals The dist folder contains vue-color.js and … Read more

A Vue UI component for showing notifications

Complete implementation of a Vue UI component for showing notifications How To Install How to use Inside your vue files: <template> <div id=”your-component”> <notification-bell /> <!– Using Component –> </div> </template> <script> // Importing Component import NotificationBell from ‘vue-notification-bell’ export default { name: ‘YourComponentName’, // … components: { NotificationBell // Registering Component } // … … Read more

Donut chart using Vue CSS

Complete implementation of Lightweight Vue component for drawing pure CSS donut charts Features ◾ No external dependencies. ◾ Vue 2 and Vue 3 support. ◾ Small size footprint. ◾ High test coverage. ◾ Performs automatic font size recalculation as the size of the donut changes. ◾ Supports responsive donut and pie charts. Installation Install via … Read more

Vue component that display loader during image loading

Complete implementation of Vue component that display loader during image loading Vue-load-image Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alternate content when the image fails to load. Installation Via NPM: # for Vue 2.x npm i vue-load-image # for Vue 3.x npm i vue-load-image@next Via CDN: <!– … Read more

Vue.js component to select the time intervals of the day

Complete implementation of Vue.js component to select the time intervals of the day. Vue-time-ranges-picker Vue.js component to select the time intervals of the day Built with SVG and pointer events. Using Props value :arrayOf(object) The array which contains default intervals of time with scale color for each of them. isTwelfthMode :boolean, default: false Set this … Read more

A simple hands-on mobile nested menu UI component with a smooth slide animation

Complete implementation of a simple hands-on mobile nested menu UI component with a smooth slide animation vue-nested-menu A simple hands-on mobile nested menu UI component with a smooth slide animation. Installation Yarn / NPM $ yarn add vue-nested-menu main.js import VueNestedMenu from ‘vue-nested-menu’; Vue.use(VueNestedMenu); Usage Basic index.html <div id=”app”> <vue-nested-menu :source=”menu”></vue-nested-menu> </div> main.js import VueNestedMenu … Read more

A Vue.js slideshow component working with Three.js and GSAP

Complete implementation of a Vue.js slideshow component working with Three.js and GSAP Webgl image displacement transitions made simple. A Vue.js slideshow component working with Three.js and GSAP. It works with Vue3 and older versions (until 3.0.1) work with Vue2 vue-displacement-slideshow Webgl image displacement transitions made simple. A Vue.js slideshow component working with Three.js and GSAP. … Read more

Vue JSON to CSV file

you can impement VueJS component to export Json Data into CSV file and download the resulting file Follow these to implement it VueJS component to export Json Data into CSV file and download the resulting file. Getting started Get the package: yarn add vue-json-csv Register JsonCSV in your app entrypoint: import Vue from ‘vue’ import … Read more

material vue.js date range picker

you can implement material vue.js dater ange picker in your vue.js app Installation npm install v-md-date-range-picker –save # or use yarn yarn add v-md-date-range-picker Quick Start you can use vue-cli to create project 1. npm install -g @vue/cli # or yarn global add @vue/cli 2. vue create hello-world <!– App.js –> <template> <v-md-date-range-picker></v-md-date-range-picker> </template> // … Read more