Skip to content

Commit bd268eb

Browse files
committed
update docs
1 parent 602c707 commit bd268eb

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed

readme.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,38 @@ A Tiny img lazy load `vue directive`
66
<img src="http://img.badgesize.io/https://unpkg.com/vue-img-lazy-tiny?compression=gzip&label=gzip%20size:%20JS">
77
</a>
88

9+
## Usage
10+
11+
Install it with `npm` or other package manager
12+
13+
```shell
14+
$ npm install vue-img-lazy-tiny
15+
```
16+
17+
Register vue directive
18+
19+
```ts
20+
import vilt from 'vue-img-lazy-tiny'
21+
22+
createApp(App)
23+
.use(vilt) // install vilt
24+
.mount('#app')
25+
```
26+
27+
Use it in your template, your image will be lazy loaded.
28+
29+
```html
30+
<script setup lang="ts">
31+
const url = 'https://avatars.githubusercontent.com/u/59404696?v=4'
32+
</script>
33+
34+
<div>
35+
<img v-lazy="url"/>
36+
</div>
37+
```
38+
939
## Preview
1040

41+
The directive will provide a sheild element to cover the original image, and a loading spinner.
42+
1143
<https://peterroe.github.io/vue-img-lazy-tiny/>

0 commit comments

Comments
 (0)