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

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

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

import '@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.

module.exports = [
    //...
    purge: {
        //...
        content: [
            './node_modules/@amir94rp/vue3-file-input/dist/components/*.js',
        ],
        //...
    //...
    },

    corePlugins: {
        aspectRatio: false,
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio')
    ],
]

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

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

Usage/Examples

<template>
    <ImageManager v-model:open="open" 
                  @output="triggerOutput"
                  :alt="alt" 
                  :quality="quality" 
                  :multiple="multiple" 
                  :select="select"/>

    <ImageInput v-model:elements="elements"
                v-model:selection="output"
                @open="open = true"
                :multiple="multiple"/>
</template>

<script>
    import ImageManager from "@amir94rp/vue3-file-manager";
    import ImageInput from "@amir94rp/vue3-file-input";

    export default {
      data(){
        return{
          open:false,
          multiple:false,
          select:false,
          quality:'xl',
          alt:false,
            
          elements:null,
          output:null,
        }
      },

      components:{
        ImageManager,
        ImageInput
      },

      methods:{
        triggerOutput:function (value){
          this.output = value;
        }
      },
    }
</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