inertia-vue-form-wizard
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
Other demos:
- Squared steps
- Tabbed steps
- Sizing
- 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
- Vuelidate integration
- Dynamic components for tabs
- Vue router integration You can place a
router-view
inside the wizard and have a separate page per tab. Aroute
prop must be passed to the tabs you want to handle certain tabs - Async validation with error message
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
- Fancy step animations with lottie
In browser playground
Documentation
Dependencies
autoprefixer: ^7.2.2babel-core: ^6.22.1babel-eslint: ^8.0.3babel-loader: ^7.1.2babel-plugin-istanbul: ^4.1.5babel-plugin-transform-runtime: ^6.22.0babel-preset-env: ^1.6.1babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0bootstrap: ^3.3.7chai: ^4.1.2chalk: ^1.1.3chromedriver: ^2.35.0connect-history-api-fallback: ^1.5.0copy-webpack-plugin: ^4.3.1coveralls: ^3.0.0cross-env: ^5.1.1cross-spawn: ^6.0.3css-loader: ^0.28.8eslint: ^3.14.1eslint-config-standard: ^6.2.1eslint-friendly-formatter: ^3.0.0eslint-loader: ^1.6.1eslint-plugin-html: ^2.0.0eslint-plugin-promise: ^3.6.0eslint-plugin-standard: ^3.0.1eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^3.0.2file-loader: ^1.1.6friendly-errors-webpack-plugin: ^1.1.3html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.17.3inject-loader: ^3.0.1karma: ^1.4.1karma-coverage: ^1.1.1karma-mocha: ^1.3.0karma-phantomjs-launcher: ^1.0.2karma-phantomjs-shim: ^1.5.0karma-polyfill: ^1.0.0karma-sinon-chai: ^1.3.3karma-sourcemap-loader: ^0.3.7karma-spec-reporter: 0.0.32karma-webpack: ^2.0.9lolex: ^2.3.1mocha: ^4.0.1nightwatch: ^0.9.19node-sass: ^4.7.2opn: ^5.2.0optimize-css-assets-webpack-plugin: ^3.2.0ora: ^1.1.0phantomjs-polyfill: ^0.0.2phantomjs-polyfill-find: ^0.0.1phantomjs-polyfill-find-index: ^1.0.1phantomjs-prebuilt: ^2.1.16rimraf: ^2.6.0sass-loader: ^6.0.3selenium-server: ^3.8.1semver: ^5.3.0shelljs: ^0.8.0sinon: ^4.2.2sinon-chai: ^2.14.0stats-webpack-plugin: ^0.6.0url-loader: ^0.6.2vue: ^2.5.9vue-form-generator: ^2.2.0vue-loader: ^13.6.2vue-router: ^3.0.1vue-style-loader: ^3.0.3vue-template-compiler: ^2.5.9vue-test-utils: ^1.0.0-beta.1webpack: ^3.10.0webpack-bundle-analyzer: ^2.9.1webpack-dev-middleware: ^2.0.4webpack-hot-middleware: ^2.21.0webpack-merge: ^4.1.1