v-image 📷
Demo
Features
💪 Built with TypeScript🌠 Built with Vue 3⚡ Zero dependencies.
Table of Contents
Installation
npm i v-imageBuild Setup
# install dependencies
$ npm install
# package lib
$ npm run buildUsage
Global component:
// main.ts
import { VImage } from 'v-image';
import { createApp } from 'vue';
const app = createApp({});
app.component('VImage', VImage);Or use locally
// component.vue
<script lang="ts">
import { VImage } from 'v-image';
export default defineComponent({
components: {
VImage,
},
})
</script>For Nuxt 3, create a file in plugins/v-image.ts
import { VImage } from 'v-image';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('VImage', VImage);
});then import the file in nuxt.config.{j|t}s:
export default {
// ...
plugins: [
// ...
{ src: '~/plugins/v-image', mode: 'client' },
// ...
],
// ...
};Example
<template>
<v-image
wrapper="flex justify-center items-center content-center w-full h-full"
:placeholder="placeholder"
:form="form"
:uploaded="uploaded"
@image-loaded="onImageLoad"
@image-removed="onImageRemove"
/>
</template><script lang="ts">
import { defineComponent, ref } from 'vue';
import type { Ref } from 'vue';
import { VImage } from 'v-image';
export default defineComponent({
components: { VImage },
setup() {
const image: Ref<null | string> = ref(null);
const placeholder = ref({
image: 'https://picsum.photos/1000/1000',
alt: 'Placeholder Image',
imgClass: 'block rounded object-contain min-h-0 w-72',
btnClass:
'cursor-pointer inline-flex items-center justify-center mt-4 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 w-72',
wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',
});
const form = ref({
name: 'myImage',
label: 'Select Image',
accept: 'image/jpg',
});
const uploaded = ref({
wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',
alt: 'User uploaded dope image',
imgClass: 'block rounded object-contain min-h-0 w-72',
btnClass:
'cursor-pointer inline-flex items-center justify-center mt-4 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 w-72',
removeBtnText: 'Remove image',
});
const onImageLoad = (img: string) => {
image.value = img;
};
const onImageRemove = (deleted: boolean) => {
if (deleted) {
image.value = null;
}
};
return {
placeholder,
form,
uploaded,
onImageLoad,
onImageRemove,
};
},
});
</script>API
Props
| Name | Type | Required? | Default | Description |
|---|---|---|---|---|
wrapper |
String | No | '' | The wrapper classes for the top level <div> |
placeholder |
Object | No | - | The placeholder image & input related code |
placeholder.wrapper |
String | No | '' | Any wrapper classes for the placeholder <div> |
placeholder.image |
String | No | 'https://picsum.photos/200x200' | The placeholder image |
placeholder.alt |
String | No | 'Placeholder Image' | The placeholder image alt attribute |
placeholder.imgClass |
String | No | '' | Any placeholder image classes |
placeholder.btnClass |
String | No | '' | Select Image button classes |
form |
Object | No | - | The placeholder input form |
form.name |
String | No | 'v-image' | Enable the label to interact with the <input /> |
form.label |
String | No | 'Select Image' | The label/button text |
form.accept |
String | No | 'image/*' | Abilty to accept file types |
uploaded |
Object | No | - | The user uploaded image related Object |
uploaded.wrapper |
String | No | '' | Any wrapper classes for the uploaded image <div> |
uploaded.alt |
String | No | 'Very Interesting Image' | The actual uploaded image alt attribute |
uploaded.imgClass |
String | No | '' | Uploaded image classes |
uploaded.btnClass |
String | No | '' | Remove Image button classes |
uploaded.removeBtnText |
String | No | 'Remove Image' | Remove Image button text |
Events
| Name | Returns | Description |
|---|---|---|
@image-loaded |
String | Sends the image in base64 format |
@image-removed |
Boolean | Emits true if image is removed |
Contributing
- Fork it (https://github.com/vinayakkulkarni/v-image/fork)
- Create your feature branch (
git checkout -b feat/new-feature) - Commit your changes (
git commit -Sam 'feat: add feature') - Push to the branch (
git push origin feat/new-feature) - Create a new Pull Request
Note:
- Please contribute using GitHub Flow
- Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
- PS. Ensure your commits are signed. Read why
Author
v-image © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).
vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k