Vue.js Examples (Page 104)

UI

Build full featured iOS & Android apps using Framework7 & Vue

Framework7 Vue Framework7 Vue combines power and simplicity of great Vue.js framework with flexibility and UI of Framework7 mobile framework to build mobile apps in even more easy and quick way. Kitchen

24 August 2017

UI

Mobile app development framework and SDK using HTML5 and JavaScript

Onsen UI - Cross-Platform HTML5 Hybrid App Framework Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for

24 August 2017

UI

Vue UI components based on Bulma

Vue + Bulma = Vulma This is a Vue UI component library based on Bulma. Prerequisites Install vue-cli $ npm i -g vue-cli Create project Using webpack template $ vue init webpack my-project $ cd my-project $ npm i

24 August 2017

Drag

A vuejs grid with draggable and resizable boxes

dnd-grid A vuejs grid with draggable and resizable boxes. The demo requires Vue >= 2.3.0 because of the ":layout.sync" feature The components require Vue >= 2.0.0

24 August 2017

Scroll

Smooth scroll with any amount of data

vue-virtual-scroller Smooth scroll with any amount of data. Live Demo https://akryum.github.io/vue-virtual-scroller/ GitHub

24 August 2017

UI

Vue.js directive for masonry blocks layouting

vue-masonry Vue.js directive for masonry blocks layouting. Original masonry library. Install & Usage Get from npm: npm install vue-masonry --save or from bower bower install vue-masonry Make sure that the masonry library

24 August 2017

Scroll

Big data and infinite loading by using virtual scroll list

vue-virtual-scroll-list A vue (2.x) component that supports big data and infinite loading by using virtual scroll list. Tiny and very easy to use. Big data list and infinite loading with high performance.

24 August 2017

$Flexbox based responsive fraction grid system for Vue.js$

UI

Flexbox based responsive fraction grid system for Vue.js

vue-fraction-grid Flexbox based responsive fraction grid system for Vue.js <container> <grid vertical="middle" :rwd="{compact: 'stack'}"> <grid-item size="1/6" :rwd=

24 August 2017

Drag

Drag Zone component for Vue2

Vue-Drag-Zone Drag Zone component for Vue2. Use Setup Install vue-drag-zone npm install vue-drag-zone --save // import with ES6 import Vue from 'vue' import VueDragZone from 'vue-drag-zone' // require with Webpack const Vue = require('vue') const

19 August 2017

Wizard

A dynamic form wizard to split your forms easier

vue-form-wizard A dynamic form wizard to split your forms easier Vue-form-wizard is a vue based component with no external depenendcies which simplifies tab wizard management and allows you to focus on the functional

19 August 2017

Autocomplete

A Vuetify ready Vue.js autosuggest component for the Google Places API

Vuetify Google Autocomplete A Vuetify ready Vue.js (2.x) autosuggest component for the Google Maps Places API. Latest Version: 1.0.4 Installation This component uses Google Maps Places API to get

19 August 2017

Rating

Rate component for Vue

Vue Rate Rate component for Vue Installation and usage Once, install rate component for your project npm install vue-rate --save Import Vue Rate into your app import Rate from 'vue-rate'; new Vue({ components:

19 August 2017

Button

Simple implementation of Ladda in less than 90 lines of code with no dependencies

'Submit' button with built-in progress indicator Simple implementation of Ladda (1, 2) in less than 90 lines of code with no dependencies. It can use Bootstrap 3 button styles or you can style

19 August 2017

Tooltips

Easy tooltips with Vue 2

v-tooltip Easy tooltips with Tooltip.js Installation Npm npm install --save v-tooltip Install the plugin into Vue: import Vue from 'vue' import VTooltip from 'v-tooltip' Vue.use(VTooltip) Or use the directive directly:

19 August 2017

Autocomplete

A Vue.js autosuggest component for the Google Places API

Vue Google Autocomplete A Vue.js (2.x) autosuggest component for the Google Maps Places API. Benefits I have tried to use different Vue Google Autocomplete components, but did not find any that

19 August 2017

Button

A VueJS button component that requires you to keep pressing

VueLongpress A VueJS (2.x) button component that requires you to keep pressing to confirm a given action. Confirmation button for sensitive action, which requires to be hold for an amount of seconds

19 August 2017

Miscellaneous

Float label pattern for Vue.js Cross-browser compatible and easy to customize with CSS

vue-float-label Float label pattern for Vue.js. Cross-browser compatible and easy to customize with CSS. <float-label> <input type="text" placeholder="Label"> </float-label> Installation

18 August 2017

Miscellaneous

Password strength meter based on zxcvbn in vue.js

vue-password-strength-meter Interactive password strength meter based on zxcvbn for vue.js Live Demo https://apertureless.github.io/vue-password-strength-meter/ GitHub

18 August 2017

Editor

A component for rendering Vue components with live editor and preview

Vuep (vue playground) A component for rendering Vue components with live editor and preview. Live Demo https://cinwell.com/vuep/#/ GitHub

18 August 2017

Music

A right-mouse menu plug-in for vue 2

context-menu A right-mouse menu plug-in for Vue.js 2+ How to Use npm install vue-mouse-menu --save import mouseMenu from 'vue-mouse-menu' import Vue from 'vue' Vue.use(mouseMenu) GitHub

17 August 2017

Upload

A Vue.js component for Dropzone.js - a drag’n’drop file uploads

vue-dropzone A Vue component for file uploads, powered by Dropzone.js. Install // For Vue.js 2.0+ npm install vue2-dropzone@^2.0.0 You'll also need to load either the Material Icon or

16 August 2017

Upload

Drag and drop multiple file uploader with Vue.js v2 and Axios

vue2-multi-uploader A drag and drop multiple file uploader component that uses Vue.js v2 and Axios. Uploader shows file names, sizes and total size of files added. It also allows setting a minimum

16 August 2017

Upload

Simple File upload component for Vue.js

vue-simple-upload An simple file upload component for vue.js. Installation npm install vue-simple-upload Usage vue-simple-upload is a UMD module, which can be used as a module in both CommonJS and AMD modular environments.

16 August 2017

Upload

Simple and hackable file uploader for Vue 2

Vue clip Vue clip is a minimalistic and hackable file uploader for VueJs. I wrote this plugin due to the absence of well written file uploaders with fine-grained controls. Features Written in vanilla

15 August 2017

Crop

A simple picture clipping plugin for vue

vue-crpopper A simple picture clipping plugin for vue. install npm install vue-cropper Live Demo http://xyxiao.cn/vue-cropper/example/ GitHub

15 August 2017

Crop

A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2

vue-croppa A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2.0. Features Straightforward: What you see is what you get Highly customizable: You can almost customize anything except the core functionalities

15 August 2017

Editor

Vue.js component for Trumbowyg WYSIWYG editor

Vue-Trumbowyg Vue.js v2.x component for Trumbowyg WYSIWYG editor Features Reactive v-model value You can change editor value programmatically Play nice with vee-validate validation library GitHub

11 August 2017

Editor

A lightweight WYSIWYG editor for Vue.js

vue wysiwyg A lightweight WYSIWYG editor for Vue.js Usage In your main.js: Vue.use(wysiwyg, {}); // config is optional. more below Also make sure to load the stylesheet. The exact syntax will

11 August 2017

Editor

An autocompletion library to autocomplete for Vue

At.js for Vue. At.js is An autocompletion library to autocomplete mentions, smileys etc. Filter/Scroll/Insert/Delete Keyboard/Mouse events Plain-text based, no jQuery, no extra nodes ContentEditable Avatars, custom templates

11 August 2017

Editor

Vue component for Froala WYSIWYG HTML Rich Text Editor

Vue JS Froala WYSIWYG Editor vue-froala-wyswiyg provides Vue bindings to the Froala WYSIWYG editor VERSION 2. Froala Editor is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities

10 August 2017

Editor

A MediumEditor component for Vue 2

vue2-medium-editor A medium-editor component for Vue2. For Vue1 checkout branch 1.0. Live Demo https://franzskuffka.github.io/vue-medium-editor/ GitHub

10 August 2017

Editor

A mobiledoc editor component toolkit for Vuejs

Vue Mobiledoc Editor A Mobiledoc editor written using Vue and Mobiledoc Kit. Installation npm install vue-mobiledoc-editor The vue-mobiledoc-editor will install the mobiledoc-kit package as a dependency and load its assets. GitHub

10 August 2017

Input

Tiny input/directive mask for currency

v-money Mask for Vue.js Tiny input/directive mask for currency eatures Lightweight (<2KB gzipped) Dependency free Mobile support Component or Directive flavors Accept copy/paste Editable Live Demo https://vuejs-tips.github.

10 August 2017

Input

Input field component to display currency value based on Vue

vue-numeric Input field component to display currency value based on Vue. Live Demo https://kevinongko.github.io/vue-numeric/ GitHub

10 August 2017

Input

An ip input implament by vuejs

vue-ip-input An ip input implement by vue 2.0 Live Demo https://lakb248.github.io/vue-ip-input/ GitHub

10 August 2017

Input

Input mask for React, Angular, Ember, Vue, & plain JavaScript

text-mask Text Mask is an input mask library. It can create input masks for phone, date, currency, zip code, percentage, email, and literally anything! There are convenient wrappers for React, Angular 2, Ember,

10 August 2017

Input

Dead simple masked input component for Vue.js 2

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo https://niksmr.github.io/vue-masked-input/ GitHub

10 August 2017

Switch

Enhanced checkboxes radio input, component for vue 2

vue-enhanced-check Enhanced checkboxes /radio input, component for vue 2+. Based on first enhancedCheck project (CSS/JS) Live Demo https://keiwen.github.io/vue-enhancedCheck/ GitHub

10 August 2017

Switch

A Vue component to easily styling checkbox and radio inputs

vue-checkbox-radio A Vue component to easily styling checkbox and radio inputs. Checkbox and radio component for Vue.js Live Demo https://mariomka.github.io/vue-checkbox-radio/ GitHub

08 August 2017

Switch

A simple nice toggle button with Vue.js 2

vue-js-toggle-button Vue.js 2 toggle / switch button - simple, pretty, customizable. Feel free to ask questions or propose features in the "Issues" section. Live Demo http://vue-js-toggle-button.yev.io/ GitHub

08 August 2017

Switch

An on/off switch component for Vue.js with theme support

Vue Switches A Vue.js component for simple switches with theme support for bulma, bootstrap and custom themes. Installation npm install vue-switches --save Live Demo http://drewjbartlett.com/demos/vue-switches/ GitHub

08 August 2017

Input

An image input preview component in vue 2

Vue-img-preview This is a minimal image preview implementation that does only one thing; give users feedback by showing image chosen from a file input. GitHub

07 August 2017

Input

A graceful, highly customizable img type input for Vue 2

Vue-Img-Inputer A graceful, highly customizable img type input for Vue 2 Features Bind value with v-model Support Pic preview/drop-select/max-size Two themes Convenient custom Live Demo http://waynecz.github.io/VueImgInputer/index.

07 August 2017

Picker

A flexible, highly available district selector for picking provinces

v-distpicker A easy-to-use district selector component. A flexible, highly available district picker for picking provinces, cities and districts of China for Vue.js 2.x. Live Demo https://distpicker.iline.co/ GitHub

07 August 2017

Tag

A Vue.js 2.0 input tag component inspired in react-tagsinput

vue-input-tag Vue.js 2.0 Input Tag Component. A Vue.js 2.0 input tag component inspired in react-tagsinput Live Demo https://tucci.me/vue-input-tag/ GitHub

07 August 2017

Search

Autocomplete component for Vue.js

v-autocomplete Autocomplete component for Vue.js This component is css-free. The idea is to be used with any framework. Live Demo https://paliari.github.io/v-autocomplete/ GitHub

07 August 2017

Search

vue instant allows you to easily create custom search controls

Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Live Demo https://santiblanko.github.io/vue-instant/#/ GitHub

07 August 2017

Drop

Vue2 Component for draggable and resizable elements

VueDraggableResizable Vue2 Component for draggable and resizable elements. Features No dependencies Use draggable, resizable or both Define handles for resizing Restrict size and movement to parent element Snap element to custom grid Restrict

04 August 2017