@medelm/vue-image-selector

2.0.1 • Public • Published

Vue Image Selector

Vue Yup

vue-image-selector-logo

Vue Image Selector is a flexible Vue 3 component and composable for handling image selection, preview, and validation within Vue applications.

Installation

Install the package using npm or yarn:

npm install @medelm/vue-image-selector
# or
yarn add @medelm/vue-image-selector

Usage

1. Setup Plugin in Your Vue App

Import and use the plugin in your main application file (main.js or main.ts):

import { createApp } from 'vue';
import App from './App.vue';
import imageSelectorPlugin from '@medelm/vue-image-selector';
import '@medelm/vue-image-selector/style.css';

createApp(App)
  .use(imageSelectorPlugin)
  .mount('#app');

2. Use the Component

Use the ImageSelector component in your Vue components:

<template>
  <ImageSelector v-bind="imageSelector" />
</template>

<script setup>
  import { useImageSelector } from '@medelm/vue-image-selector';

  const imageSelector = useImageSelector();

  // Optional: Handle callbacks or additional logic
</script>

<style scoped>
  /* Your scoped styles here */
</style>

3. Customization

  • Styling: Customize the appearance using scoped CSS or by overriding classes in your project's stylesheets.
  • Callbacks: Implement onSelect and onReset callbacks to handle image selection and reset events.

4. Composable API

The composable useImageSelector provides the following methods and reactive state:

  • select(event): Handles file input change and drag-and-drop events.
  • reset(): Resets the image selection state.
  • onSelect(callback): Sets a callback function for when an image is selected.
  • onReset(callback): Sets a callback function for when the image selection is reset.
  • hasError(): Checks if there is an error in image selection.
  • getError(): Retrieves the error message, if any.
  • setError(errorMessage): Sets a custom error message.

Contributing

Contributions are welcome! If you have any suggestions, bug reports, or want to contribute code, please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License

Package Sidebar

Install

npm i @medelm/vue-image-selector

Weekly Downloads

3

Version

2.0.1

License

MIT

Unpacked Size

16.6 kB

Total Files

5

Last publish

Collaborators

  • medelm