6 Dropzone support for Vue 3 / Nuxt 3

Demo online

---

Table of Content

• Features
• Demo
• Installation
• Usage
• API
  • Props
  • Events
  • Slots

Features

Demo

Setup

Installation

six-dropzone for Nuxt3 applications.

npx nuxi@latest module add six-dropzone

Config

nuxt.config.js

{
     modules: [
        'six-dropzone',
    ]
},

Usage

<script setup>
    const photo = ref()
    const drop = (e) => {
        console.log(e.dataTransfer.files[0], 'drop')
    }
    const selectedFile = (e) => {
        console.log(e, 'change')
    };
    const modelValue = (e) => {
        console.log(e, 'model-value')
    }
</script>
<template>
    <SixDropzone
            v-model="photo"
            @drop.prevent="drop"
            @change="selectedFile"
            @update:model-value="modelValue"
            :accept="['image/png', 'image/jpeg']"
            :drop-mounted="url"
    ></SixDropzone>
</template>

API

Props

Name	Type	Default Value	Description
dropMounted	String	undefined	The image URL.
label	String	Select File	Sets the button text
error-messages	String/String[]	[]	Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation.
accept	String/String[]	" "	Defines the types of files that are allowed. You can pass a single string (e.g., 'image/*') or an array of strings (e.g., ['image/png', 'image/jpeg']).
multiple	Boolean	false	Allows uploading multiple files if set to true.

Events

Name	Type	Description
drop	[File]	drop value of the component.
change	[File]	value of the component.
update:modelValue	[File]	Event that is emitted when the component’s model changes.
addFile

Slots

Name	Description
Default	The default Vue slot.
Icon	change or close icons

⚖️ License

Released under MIT by @4slan.