Vue Image Selector is a flexible Vue 3 component and composable for handling image selection, preview, and validation within Vue applications.
Install the package using npm or yarn:
npm install @medelm/vue-image-selector
# or
yarn add @medelm/vue-image-selector
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
: ImplementonSelect
andonReset
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.
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.
This project is licensed under the MIT License