Dynamic Form Wizard For Vue.js
Vue-form-wizard is a Vue component with no external dependencies which simplifies tab wizard management and allows you to focus on the functional part of your app rather than wasting time on details.
Below you will find multiple links to different implementations of this wizard:
- Squared steps
- Tabbed steps
- Step index Start at any step. Note: start-index is zero-based and the count starts at 0
- Custom button and title text
- Custom title slot
- Customized buttons with slots Replace stuff you don't like
- Call a function before tab switch
- Complete form example integrated with vue-form-generator
- Element UI form integration
- Vue router integration You can place a
router-viewinside the wizard and have a separate page per tab. A
routeprop must be passed to the tabs you want to handle certain tabs
- Async validation with error message
before-changeprop can accept a promise that is resolved with
truewhich will execute the promise before switching to another step/tab (NOTE: This feature is not present in the npm package yet)
You can use these as a playground before implementing it into your projects.
To start working with vue-form-wizard use the following command to install it.
$ yarn add vue-form-wizard
Import it in your project along with its CSS
import VueFormWizard from 'vue-form-wizard' import 'vue-form-wizard/dist/vue-form-wizard.min.css' Vue.use(VueFormWizard)
<form-wizard> <tab-content title="First Stage"> <button>Show info</button> </tab-content> <tab-content title="Search additional Info"> <input type="text" placeholder="Search GitHub users" /> </tab-content> <tab-content title="Last step"> You got what you wanted? </tab-content> </form-wizard>
For your convenience, there are additional props listed in the documentation as well as slots & other options.