Vue 3 Image Input Component

This package is a simple complementary component for Laravel Image Manager that adds the following options

• Get and display the list of images as a variable
• Add selected images to the variable
• Remove image from the variable

Installation

First, install Laravel Image Manager package then install ImageInput Vue3 component

1npm i @amir94rp/vue3-file-input --save-dev

Import the following style file to display adding and removing image transitions

1import '@amir94rp/vue3-file-input/dist/components/transitions.css';

If you are using Tailwind V.2, add the module path to the Tailwind settings file (tailwind.config.js). In this module, we use aspect ratio and forms plugins, and you should add these to the plugins array.

1module.exports = [
2    //...
3    purge: {
4        //...
5        content: [
6            './node_modules/@amir94rp/vue3-file-input/dist/components/*.js',
7        ],
8        //...
9    //...
10    },
11
12    corePlugins: {
13        aspectRatio: false,
14    },
15
16    plugins: [
17        require('@tailwindcss/forms'),
18        require('@tailwindcss/aspect-ratio')
19    ],
20]

If you are not interested in the above method or do not use Tailwind V.2, you can import the style file.

1import '@amir94rp/vue3-file-input/dist/components/style.css';

Usage/Examples

1<template>
2    <ImageManager v-model:open="open" 
3                  @output="triggerOutput"
4                  :alt="alt" 
5                  :quality="quality" 
6                  :multiple="multiple" 
7                  :select="select"/>
8
9    <ImageInput v-model:elements="elements"
10                v-model:selection="output"
11                @open="open = true"
12                :multiple="multiple"/>
13</template>
14
15<script>
16    import ImageManager from "@amir94rp/vue3-file-manager";
17    import ImageInput from "@amir94rp/vue3-file-input";
18
19    export default {
20      data(){
21        return{
22          open:false,
23          multiple:false,
24          select:false,
25          quality:'xl',
26          alt:false,
27            
28          elements:null,
29          output:null,
30        }
31      },
32
33      components:{
34        ImageManager,
35        ImageInput
36      },
37
38      methods:{
39        triggerOutput:function (value){
40          this.output = value;
41        }
42      },
43    }
44</script>

Available Props

Prop	Default	Description
multiple	false	active multiple image selecting
elements	String , Array , Object	images list initial value
selection	String , Array , Object	Image Manager output. type of Image Manager output and Image Input initial value should be the same.

Events

Event	Description
open	This event fires on Image Input open button clicking

Demo

Click here to see the demo

License

MIT