UramiVue
Optimized image component for Vue.
Install
sh
$ npm add @urami/vue$ npm add @urami/vuesh
$ pnpm add @urami/vue$ pnpm add @urami/vuesh
$ yarn add @urami/vue$ yarn add @urami/vuesh
$ bun add @urami/vue$ bun add @urami/vueUsage
vue
<script>
import Image from "@urami/vue";
</script>
<template>
<Image
src="https://httpmemes.netlify.app/200.jpg"
width="801"
height="801"
alt="Tom Scott"
class="rounded-xl shadow-md"
/>
</template><script>
import Image from "@urami/vue";
</script>
<template>
<Image
src="https://httpmemes.netlify.app/200.jpg"
width="801"
height="801"
alt="Tom Scott"
class="rounded-xl shadow-md"
/>
</template>Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
src | string | - | ✅ | Source of the image |
width | number | - | ✅ | Width of the image |
height | number | - | ❌ | Height of the image (Specify this will results in less layout shift) |
quality | number | 75 | ❌ | Quality of the image |
loader | fn | defaultLoader | ❌ | Loader function, please refer to Loader |
formats | string[] | ['webp', 'jpg'] | ❌ | Formats to generate for the <picture> element |