vue-good-wizard
An easy and clean VueJS 2.x wizard plugin
Live Demo
Follow the project progress live
Getting Started
Installing
Install with npm:
npm install --save vue-good-wizard
import into project:
;; Vue;
or
import into component:
// within your component script tag; // in your componentscomponents: 'vue-good-wizard': GoodWizard
Example Usage
Step 1 This is step 1 Step 2 This is step 2 Step 3 This is step 3 Step 4 This is step 4
This should result in the screenshot seen above
Component Options
Option | Description | Type, Example |
---|---|---|
steps (required) | Array of objects that specify step titles and page id |
[ { label: 'Add Constraints', // title for wizard step page: 'page2', //id for div to show for this step }, //... ] |
onNext (optional) | function called before next page is shown. This is a good place to do validation etc. Return true to proceed, or false to stay on the same page. |
function ex:
function(currentPage){ console.log(currentPage); return true; } |
onBack (optional) | function called before previous page is shown. Return true to proceed, or false to stay on the same page. |
function ex:
function(currentPage){ console.log(currentPage); return true; } |
Label options | ||
previousStepLabel | label for previous step | default: 'Back' |
nextStepLabel | label for next step | default: 'Next' |
finalStepLabel | label for final step | default: 'Save' |
Useful internal functions | ||
goNext() | for async usecase, you'd want to go next only after your async function is done. See [advanced usecase](https://github.com/xaksis/vue-good-wizard#advanced-usecase---call-next-or-back-asynchronously) | `this.$refs['my-wizard'].goNext(true)` |
goTo(step) | if you want to go to a step programmatically, you can use this method | `this.$refs['my-wizard'].goTo(2)` // go to 3rd step. |
Advanced usecase - Call next or back asynchronously
In some cases, you might want to change step programmatically. The most common usecase for this is if you want to call an asynchronous action on next/back click and then in the callback want to either go to the next step or stay on the same step.
Following is an example of how this can be done using vue-good-wizard
Step 1 This is step 1 Step 2 <!-- lets say, this is where my form is that needs to be validated --> Step 3 This is step 3
Authors
- Akshay Anand - xaksis
License
This project is licensed under the MIT License - see the LICENSE.md file for details