https://github.com/4sllan/six-dropzone
🖼️ 6 Dropzone for Nuxt.js 3 applications.
https://github.com/4sllan/six-dropzone
dropzone module nuxt nuxt-dropzone nuxt-module nuxt3 six-dropzone
Last synced: 4 months ago
JSON representation
🖼️ 6 Dropzone for Nuxt.js 3 applications.
- Host: GitHub
- URL: https://github.com/4sllan/six-dropzone
- Owner: 4sllan
- License: mit
- Created: 2024-02-15T17:53:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-11-06T23:30:48.000Z (8 months ago)
- Last Synced: 2025-11-07T01:14:50.379Z (8 months ago)
- Topics: dropzone, module, nuxt, nuxt-dropzone, nuxt-module, nuxt3, six-dropzone
- Language: Vue
- Homepage:
- Size: 644 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
6 Dropzone support for Nuxt 3
[](https://www.npmjs.com/package/six-dropzone)
![GitHub License][license]
[](https://www.npmjs.com/package/six-dropzone)
[![Nuxt][nuxt-src]][nuxt-href]
[](https://github.com/sponsors/4sllan)
[Demo online](https://codesandbox.io/p/devbox/jgrd5q)
---
#### Table of Content
- [Features](#features)
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
* [Props](#props)
* [Events](#events)
* [Slots](#slots)
## Features
## Demo
[](https://codesandbox.io/p/devbox/jgrd5q)
## Setup
## Installation
> six-dropzone for Nuxt3 applications.
```sh
npx nuxi@latest module add six-dropzone
```
### Config
***nuxt.config.js***
``` js
{
modules: [
'six-dropzone',
]
},
```
## Usage
```html
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')
}
```
## 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` | | |
| `clearFile` | | |
### Slots
| Name | Description |
|-----------|-----------------------|
| `Default` | The default Vue slot. |
| `Icon` | change or close icons |
## ⚖️ License
Released under [MIT](/LICENSE) by [@4slan](https://github.com/4sllan).
[license]: https://img.shields.io/github/license/4sllan/six-dropzone?style=flat-square&colorA=18181B&colorB=28CF8D
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com