Displaying 1 to 20 from 30 results

intro-to-vue - Workshop Materials for my Introduction to Vue.js Workshop

  •    Vue

This repo houses the materials and resources for the Introduction to Vue.js. Most of the materials for the course are outlined below, but there are also directories housed here of very basic examples of some of the techniques we will cover so that students don't have to spend a lot of time researching in order to get started. It is recommended that students use CodePen to create work for the duration of the course, as we'll use preprocessors like SCSS as well as Babel for ES6, and resources like Vue.js, both prod and dev versions, codepen makes it easy to do so without time devoted to setup. If you like, you can also scroll to the CodePen collection section and fork one of the existing pens in those collections, they are comprehensive. There are more true-to-life build process examples, in the VueCLI, Nuxt, and Vuex Resource Sections. It's encouraged to watch the lecture to learn how to set up the builds yourself, though. For sections covering Nuxt, we will be using the directories listed in the Nuxt section below as well as their directories, prefixed with nuxt- here.

vue-lazyload - A Vue.js plugin for lazyload your Image or Component in your application.

  •    Javascript

You can configure which events you want vue-lazyload by passing in an array of listener names.




vue-clickaway - Reusable clickaway directive for reusable Vue.js components

  •    Javascript

Sometimes you need to detect clicks outside of the element (to close a modal window or hide a dropdown select). There is no native event for that, and Vue.js does not cover you either. This is why vue-clickaway exists. Please check out the demo before reading further. If you need a version for Vue 1, try vue-clickaway@1.0.

vue-chat-scroll - Automatic scroll-to-bottom directive for vue.

  •    Javascript

A plugin for Vue.js 2 that scrolls to the bottom of an element when new content is added within said element. Check out our lovely demo. Just include ./dist/vue-chat-scroll.js after Vue itself.

vue-focus - A reusable focus directive for reusable Vue.js components

  •    Javascript

It can be tricky to manage input focus. You always have to fall back to accessing DOM elements and calling .focus or .blur on them. Well not anymore. vue-focus lets you manage focus from the safety of your view model.


v-lazy-img - simplistic vue.js directive for image lazy loading

  •    Javascript

v-lazy-img adds the directives v-lazy-load and v-lazy-load-bg. The latter changes the background image (css background-image) instead of the src-attribute.

vue-outside-events - Vue 2

  •    Javascript

Vue 2.x directive to react on events outside of an element without stopping the event's propagation. Works well for handling clicks outside of menus and popups. Can handle any DOM event or CustomEvent. Also able to capture jQuery events.

vue-click-outside - Vue Directive to make a click outside event

  •    Javascript

Include the vue-click-outside.js to your HTML or web page file after Vue.Js. or import it to your Javscript / Vue File. Hopefully this can be useful for your next projects.

vue-ripple-directive - Material Ripple Effect as Vue Directive.

  •    Javascript

Material Ripple Effect as Vue Directive. This directive it's meant to be used in any element in which you like to achieve such ripple effect.

Vue.resize - Vue directive to detect resize events with deboucing and throttling capacity.

  •    Javascript

Vue directive to detect HTML resize events based on CSS Element Queries with debouncing and throttling capacity. Use this option when you need to receive all the resize events.

vue-clampy - Vue

  •    Javascript

Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. It uses @clampy-js/clampy library (a fork of Clamp.js) behind the scene to apply the ellipsis.

Vue-Responsive - A plugin for responsive handling with vue.js

  •    Javascript

Is a directive to use responsive breakpoints on html elements. Because sometimes it's nice to have a chance to let the view do resolution specific things.

v-img-fallback - Fallback image directive for VueJs

  •    Javascript

Vue imge placeholder directive for broken images. This directive can receive string or object value.