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

npm i v-image

Build Setup

# install dependencies
$ npm install

# package lib
$ npm 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