@amir94rp/vue3-file-input v3.0.1

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

Events

Demo

Click here to see the demo

License

MIT