# vue-form-wizard

> A vue based tab/form wizard

Latest version **0.8.4** (published 2018-02-21) · 0 weekly downloads

## Install

```sh
npm install vue-form-wizard
pnpm add vue-form-wizard
yarn add vue-form-wizard
bun add vue-form-wizard
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.4 |
| Published | 2018-02-21 |
| First published | 2017-04-17 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 0 |
| Unpacked size | 272.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cristij |
| Keywords | vue, vuejs, form, wizard, tab |

## Links

- npm: https://www.npmjs.com/package/vue-form-wizard
- Repository: https://github.com/cristijora/vue-form-wizard
- Issues: https://github.com/cristijora/vue-form-wizard/issues
- npm.io page: https://npm.io/package/vue-form-wizard

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.8.4 (latest) — 2018-02-21
- 0.8.2 — 2017-12-29
- 0.8.1 — 2017-11-28
- 0.8.0 — 2017-11-22
- 0.7.1 — 2017-11-15
- 0.7.0 — 2017-10-01
- 0.6.6 — 2017-09-11
- 0.6.5 — 2017-09-05
- 0.6.4 — 2017-08-28
- 0.6.3 — 2017-08-06
- 0.6.2 — 2017-07-31
- 0.6.1 — 2017-07-12
- 0.5.0 — 2017-07-03
- 0.4.2 — 2017-06-04
- 0.4.0 — 2017-05-28
- … 11 more at https://npm.io/package/vue-form-wizard/versions

## README

<h1 align="center">Vue form wizard</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/vue-form-wizard"><img src="https://img.shields.io/npm/v/vue-form-wizard.svg"></a>
  <a href="https://www.npmjs.com/package/vue-form-wizard"><img src="https://img.shields.io/npm/dt/vue-form-wizard.svg"></a>
<a href='https://coveralls.io/github/cristijora/vue-form-wizard?branch=master'><img src='https://coveralls.io/repos/github/cristijora/vue-form-wizard/badge.svg?branch=master' alt='Coverage Status' /></a>
  <a href="https://github.com/cristijora/vue-form-wizard/blob/master/LICENCE.md"><img src="https://img.shields.io/badge/license-MIT-blue.svg"></a>
  <a href="http://img.badgesize.io/cristijora/vue-form-wizard/master/dist/vue-form-wizard.js.svg?compression=gzip&style=flat-square">
    <img src="http://img.badgesize.io/cristijora/vue-form-wizard/master/dist/vue-form-wizard.js.svg?compression=gzip&style=flat-square">
  </a>
</p>

A dynamic wizard to split your forms easier

Vue-form-wizard is a vue based component with no external depenendcies which simplifies tab wizard management.

## Demos:
Basic [demo](https://jsfiddle.net/bt5dhqtf/97/)

Other demos:
* [Squared steps](https://jsfiddle.net/bt5dhqtf/98/)
* [Tabbed steps](https://jsfiddle.net/bt5dhqtf/99/)
* [Sizing](https://jsfiddle.net/CristiJ/bt5dhqtf/924/)
* [Step index](https://jsfiddle.net/bt5dhqtf/100/) Start at any step. Note: start-index is zero-based and the count starts at 0
* [Custom button and title text](https://jsfiddle.net/bt5dhqtf/101/)
* [Custom title slot](https://jsfiddle.net/bt5dhqtf/102/)
* [Customized buttons with slots](https://jsfiddle.net/bt5dhqtf/103/) Replace stuff you don't like
* [Call a function before tab switch](https://jsfiddle.net/bt5dhqtf/105/)
* [Complete form example](https://jsfiddle.net/CristiJ/bt5dhqtf/286/) integrated with [vue-form-generator](https://github.com/icebob/vue-form-generator)
* [Element UI form integration](https://codesandbox.io/s/l9mz5zn7yz)
* [Vuelidate integration](https://jsfiddle.net/CristiJ/bt5dhqtf/1119/)
* [Dynamic components for tabs](https://jsfiddle.net/bt5dhqtf/973/)
* [Vue router integration](https://jsfiddle.net/bt5dhqtf/267/) You can place a `router-view` inside the wizard and have a separate page per tab. A `route` prop must be passed to the tabs you want to handle certain tabs
* [Async validation with error message](https://jsfiddle.net/CristiJ/bt5dhqtf/298/) `before-change` `beforeChange (): boolean | Promise<boolean>` can accept a promise that resolves with a boolean. Resolving with a truthy value, will trigger the navigation to next step. Rejecting with a message, will set an internal message that can be handled and displayed if needed.
* [Animations with animate.css](https://jsfiddle.net/bt5dhqtf/1478/)
* [Fancy step animations with lottie](https://codesandbox.io/s/3y0voo2oxp)

In browser [playground](https://cristijora.github.io/vue-form-wizard/#/?id=playground)

# [Documentation](https://cristijora.github.io/vue-form-wizard/#/)

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