https://github.com/peterroe/vue-img-lazy-tiny

A Tiny img lazy load vue directive
https://github.com/peterroe/vue-img-lazy-tiny

lazy-load-img vue-directive vue3

Last synced: 9 months ago
JSON representation

A Tiny img lazy load vue directive

• Host: GitHub
• URL: https://github.com/peterroe/vue-img-lazy-tiny
• Owner: peterroe
• Created: 2022-03-30T13:57:35.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T05:22:41.000Z (over 2 years ago)
• Last Synced: 2024-04-12T17:17:51.365Z (about 2 years ago)
• Topics: lazy-load-img, vue-directive, vue3
• Language: TypeScript
• Homepage:
• Size: 254 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-vue - vue-img-lazy-tiny - A vue3 directive that provide a shield while loading. (Components & Libraries / UI Components)

README

          
## vue-img-lazy-tiny

A Tiny img lazy load `vue directive`



    



## Usage

Install it with `npm` or other package manager

```shell

$ npm install vue-img-lazy-tiny

```

Register vue directive

```ts

import vilt from 'vue-img-lazy-tiny'

createApp(App)

  .use(vilt)     // install vilt

  .mount('#app')

```

Use it in your template, your image will be lazy loaded.

```html

  


    

  


```

## Preview

The directive will provide a sheild element to cover the original image, and a loading spinner.