# Get started

Plugin for Vue that lazyload images out of the box and helps give immediate feedback to the user while content is loading.

### Install

{% hint style="warning" %}
Requires Vue 3 installed
{% endhint %}

{% hint style="info" %}
ESM-only package
{% endhint %}

```
npm add vue-progressive-image
```

### Add plugin locally

```javascript
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import "vue-progressive-image/dist/style.css"; // <--- very important!

createApp(App).mount("#app");
```

```html
<script setup>
import { ProgressiveImage } from "vue-progressive-image";
</script>

<template>
  <ProgressiveImage src="https://picsum.photos/id/1080/1980/1080" />
</template>
```

### Add plugin globally

```javascript
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import "vue-progressive-image/dist/style.css"; // <--- very important!
import VueProgressiveImage from 'vue-progressive-image'

createApp(App).use(VueProgressiveImage).mount("#app");
```

```html
<template>
  <ProgressiveImage src="https://picsum.photos/id/1080/1980/1080" />
</template>
```