v-image 📷
- 💪 Built with TypeScript
- 🌠 Built with Vue 3
- ⚡ Zero dependencies.
npm i v-image# install dependencies $ npm install # package lib $ npm run buildGlobal 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' }, // ... ], // ... };<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>| 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 |
| Name | Returns | Description |
|---|---|---|
@image-loaded | String | Sends the image in base64 format |
@image-removed | Boolean | Emits true if image is removed |
- 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
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