|
1 | 1 | # lazy-vue |
2 | | -A small lazy image loader for Vue |
| 2 | + |
| 3 | +<a href="https://gocanto.github.io/google-autocomplete/"><img src="https://img.shields.io/badge/online-demo-green.svg" alt="Demo"></a> |
| 4 | +<a href="https://www.npmjs.com/package/google-autocomplete-vue"><img src="https://img.shields.io/npm/v/google-autocomplete-vue.svg" alt="Version"></a> |
| 5 | +<a href="https://www.npmjs.com/package/google-autocomplete-vue"><img src="https://img.shields.io/npm/dt/google-autocomplete-vue.svg" alt="Downloads"></a> |
| 6 | +<a href="https://github.com/gocanto/google-autocomplete/blob/master/LICENSE.md"><img src="https://img.shields.io/npm/l/easiest-js-validator.svg" alt="License"></a> |
| 7 | +<a href="https://github.com/gocanto/google-autocomplete/tree/vue-1"><img src="https://img.shields.io/badge/Vue%201.*-passed-orange.svg" alt="Vue1.*"></a> |
| 8 | + |
| 9 | + |
| 10 | +lazy-vue is the easiest way to get a lazy image loader working within your vue projects. It is meant to be as simplest as possible, |
| 11 | +so you do not have to be pulling complicated libraries to accomplish such a task. |
| 12 | + |
| 13 | + |
| 14 | + |
| 15 | + |
| 16 | + |
| 17 | +# Requirements |
| 18 | +You will have to install vue |
| 19 | + |
| 20 | +```js |
| 21 | +npm install vue |
| 22 | +``` |
| 23 | +# Installation |
| 24 | +To install this package you just need to open your console line and type ```npm install lazy-vue --save```. If there is a problem during the installation, you can try again using the ```force param```, as so ```npm i -f lazy-vue``` |
| 25 | + |
| 26 | + |
| 27 | +# Gettings started |
| 28 | + |
| 29 | +You will have to import the component in your application entry point, so you will be able to call it as global when need it. Example: |
| 30 | + |
| 31 | +```js |
| 32 | +require('lazy-vue'); |
| 33 | +``` |
| 34 | + |
| 35 | +Take a look at the <a href="https://github.com/gocanto/lazy-vue/blob/master/src/js/demo/main.js" target="_blank">example</a> published. |
| 36 | + |
| 37 | +# Implementing the directive in my HTML code |
| 38 | + |
| 39 | +```HTML |
| 40 | +<div v-for="avatar in images"> |
| 41 | + <img src="demo/images/nopic.png" v-lazy = "avatar"> |
| 42 | +</div> |
| 43 | +``` |
| 44 | + |
| 45 | +See the example <a href="https://github.com/gocanto/lazy-vue/blob/master/demo/index.html#L58-L66" target="_blank">here</a> |
| 46 | + |
| 47 | + |
| 48 | +# Contributing |
| 49 | + |
| 50 | +Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities. |
| 51 | + |
| 52 | + |
| 53 | +# License |
| 54 | + |
| 55 | +The MIT License (MIT). Please see [License File](LICENSE.md) for more information. |
| 56 | + |
| 57 | + |
| 58 | +# How can I thank you? |
| 59 | +Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter? Spread the word! |
| 60 | + |
| 61 | + |
| 62 | +Don't forget to [follow me on twitter](https://twitter.com/gocanto)! |
| 63 | + |
| 64 | +Thanks! |
| 65 | + |
| 66 | +Gustavo Ocanto. |
| 67 | +gustavoocanto@gmail.com |
| 68 | + |
0 commit comments