https://github.com/BinarCode/vue-form-wizard

Vue.js 2 wizard
https://github.com/BinarCode/vue-form-wizard

component form tabs-management vue vuejs vuejs2

Last synced: about 2 months ago
JSON representation

Vue.js 2 wizard

• Host: GitHub
• URL: https://github.com/BinarCode/vue-form-wizard
• Owner: BinarCode
• License: mit
• Archived: true
• Created: 2017-04-15T18:49:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T11:48:25.000Z (almost 2 years ago)
• Last Synced: 2024-04-23T18:39:07.817Z (5 months ago)
• Topics: component, form, tabs-management, vue, vuejs, vuejs2
• Language: Vue
• Homepage: https://binarcode.github.io/vue-form-wizard/#/
• Size: 2.3 MB
• Stars: 1,114
• Watchers: 21
• Forks: 245
• Open Issues: 124
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

Vue form wizard




  

  



  

  

    

  



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` 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://binarcode.github.io/vue-form-wizard/#/)