v-image 📷

⚠️ Docs are for Vue 3, for Vue 2 docs, check this tree

Demo

Features

• 💪 Built with TypeScript
• 🌠 Built with Vue 3
• ⚡ Zero dependencies.

Table of Contents

• v-image 📷
  • Demo
  • Features
  • Table of Contents
    • Installation
    • Build Setup
    • Usage
    • Example
    • API
      • Props
      • Events
  • Contributing
  • Author

Installation

pnpm add v-image

Build Setup

# install dependencies
$ pnpm install

# package lib
$ pnpm run build

Usage

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

1. Fork it (https://github.com/vinayakkulkarni/v-image/fork)
2. Create your feature branch (git checkout -b feat/new-feature)
3. Commit your changes (git commit -Sam 'feat: add feature')
4. Push to the branch (git push origin feat/new-feature)
5. Create a new Pull Request

Note:

1. Please contribute using GitHub Flow
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
3. 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