v-image 📷
- 💪 Built with TypeScript.
- 🌠Built with Vue 2 w/ Composition API
- âš¡ Zero dependencies.
npm i v-image // or yarn add v-image# install dependencies $ npm install # package lib $ npm run buildYou can import the typings by including
v-imageincompilerOptions.typessection of yourtsconfig.jsonfile.
Browser: CDN: UNPKG | jsDelivr (available as window.VImage)
Module Bundler:
import { VImage } from 'v-image'; Vue.component('VImage', VImage);Or use locally
import { VImage } from 'v-image';Or use it as a plugin:
import VImage from 'v-image'; import Vue from 'vue'; Vue.use(VImage);For Nuxt, create a file in plugins/v-image.ts
import VImage from 'v-image'; import Vue from 'vue'; Vue.use(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="saveImage" @image-removed="deleteImage" /> </template>/* Used Tailwind Utility classes, checkout the example dir */ import { VImage } from 'v-image'; export default { components: { VImage }, data() { return { placeholder: { image: 'https://picsum.photos/1000/1000', alt: 'Placeholder Image', imgClass: 'block rounded object-contain object-center max-w-xs', btnClass: 'block btn cursor-pointer text-center', wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted', }, form: { name: 'myImage', label: 'Select dope Image', accept: 'image/jpg', }, uploaded: { wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted', alt: 'User uploaded dope image', imgClass: 'block rounded object-contain object-center max-w-xs', btnClass: 'block btn cursor-pointer text-center w-full', removeBtnText: 'Remove image', }, image: '' as string | null, }; }, methods: { saveImage(image: string) { this.image = image; }, deleteImage(deleted: boolean) { if (deleted) { this.image = null; } }, }, };| 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
MIT © Vinayak Kulkarni
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