# vue-webp-image

> A vue directive help check browser webp support and use the appropriate image format.

Latest version **1.0.2** (published 2021-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-webp-image
pnpm add vue-webp-image
yarn add vue-webp-image
bun add vue-webp-image
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-11-29 |
| First published | 2021-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Fuxy526 |
| Maintainers | fuxy526 |
| Keywords | vue, webp, directive |

## Links

- npm: https://www.npmjs.com/package/vue-webp-image
- Repository: https://github.com/Fuxy526/vue-webp-image
- Homepage: https://github.com/Fuxy526/vue-webp-image#readme
- Issues: https://github.com/Fuxy526/vue-webp-image/issues
- npm.io page: https://npm.io/package/vue-webp-image

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2021-11-29
- 1.0.1 — 2021-11-28
- 1.0.0 — 2021-11-28

## README

# vue-webp-image

<p>
  <a href="https://www.npmjs.com/package/vue-webp-image"><img src="https://img.shields.io/npm/v/vue-webp-image.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/vue-webp-image"><img src="https://img.shields.io/npm/dt/vue-webp-image.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/vue-webp-image"><img src="https://img.shields.io/npm/l/vue-webp-image.svg" alt="License"></a>
</p>

A vue directive help check browser webp support and use the appropriate image format.

- Compatible with Vue3 and Vue2
- Lightweight (700b)

## Installation

```sh
npm install vue-webp-image --save
```

## Usage

#### main.js

- Vue3

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import VueWebpImage from 'vue-webp-image';

const app = createApp(App);
app.use(VueWebpImage);
app.mount('#app');
```

- Vue2

```javascript
import Vue from 'vue';
import VueWebpImage from 'vue-webp-image';

Vue.use(VueWebpImage);
```

#### Component

- `v-webp:src` - use with `img` tag

```html
<!-- local image -->
<img
  v-webp:src="require('./assets/image.webp')"
  :src="require('./assets/image.jpg')"
/>
<!-- online image -->
<img
  v-webp:src="'https://www.xxx.com/image.webp'"
  :src="'https://www.xxx.com/image.jpg'"
/>
```

- `v-webp:bg` - use css `background-image` property

```html
<div
  class="bg-container"
  v-webp:bg="require('./assets/image.webp')"
></div>

<style>
.bg-container {
  background-image: url('./assets/image.jpg');
}
</style>
```

- `v-webp:bgs` - use css `background-image` property (put webp source and original source in an array)

```html
<div
  v-webp:bgs="[require('./assets/image.webp'), require('./assets/image.jpg')]"
></div>
```

---
_Source: https://npm.io/package/vue-webp-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._