# vue3-ladda

> A vue 3 component wrapper of Ladda button.

Latest version **1.0.5** (published 2021-08-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue3-ladda
pnpm add vue3-ladda
yarn add vue3-ladda
bun add vue3-ladda
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-08-03 |
| First published | 2021-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 42.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jan Wehner |
| Maintainers | janwehner |
| Keywords | vue, ladda, button, loading, indicator |

## Links

- npm: https://www.npmjs.com/package/vue3-ladda
- Repository: https://github.com/janwehner/vue3-ladda
- Issues: https://github.com/janwehner/vue3-ladda/issues
- npm.io page: https://npm.io/package/vue3-ladda

## Dependencies (1)

- [ladda](https://npm.io/package/ladda.md) ^2.0.1

## Recent versions

- 1.0.5 (latest) — 2021-08-03
- 1.0.3 — 2021-04-26

## README

# vue3-ladda

A vue 3 wrapper for https://github.com/hakimel/Ladda based on https://github.com/zcfan/vue-ladda. 

[Demo source code](docs/index.html)

## Installation

### NPM

```bash
npm install vue3-ladda
```

```javascript
import VueLadda from 'vue3-ladda'

// or import the vue single file component, if you set vue-loader, sass-loader and babel properly.
import VueLadda from 'vue3-ladda/src/vue-ladda.vue'

// then register it globally
Vue.createApp({...}).component('vue-ladda', VueLadda)

// or locally
var Child = {
  template: '<vue-ladda>Click Me!</vue-ladda>'
}

const app = Vue.createApp({
  components: {
    'vue-ladda': VueLadda,
  }
})
```

## How to use

- Use default slot to give button label: (Default label is "Submit")

    ```html
    <vue-ladda>Confirm</vue-ladda>
    ```

- Use `buttonClass` prop to specify your own CSS classes: (Default is "ladda-class")
    ie. you can use Bootstrap button classes

    ```html
    <vue-ladda button-class="btn btn-primary">Yes!</vue-ladda>
    ```

- Use `data-style` prop to specify animation:

    ```html
    <vue-ladda data-style="expand-left|contract|zoom-in|slide-left">
      ...
    </vue-ladda>
    ```

    Visit [http://lab.hakim.se/ladda/](http://lab.hakim.se/ladda/) to get a full options of data-style.

- Use `loading` prop to control button status:

    ```html
    <vue-ladda loading="true|false">...</vue-ladda>
    ```

- Use `progress` prop to control the ladda built-in progress bar. (0 to 1)

    ```html
    <vue-ladda :progress="0-1">...</vue-ladda>
    ```

---
_Source: https://npm.io/package/vue3-ladda · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._