vue-step-wizard

!alt text

Documentation

Forked from https://github.com/tushargugnani/vue-step-wizard

You can find documentation here: https://tushargugnani.github.io/vue-step-wizard/#/

Installing Plugin

``
npm install --save vue-step-wizard
`

$3

`
import VueStepWizard from 'vue-step-wizard'
import 'vue-step-wizard/dist/vue-step-wizard.css'
Vue.use(VueStepWizard);
`

$3

`
//local registration
import {FormWizard, TabContent} from 'vue-step-wizard'
import 'vue-step-wizard/dist/vue-step-wizard.css'
//component code
components: {
FormWizard,
TabContent
}
`

$3

$3

You can two ways to customize this plugin. You can pass classes prop to override default classes
or you can define your own layout for header and footer sections. You also can combine then.

To customize using classes prop you should pass classes prop to WizardComponent:

`json
{
"previous_button": "step-button step-button-previous",
"next_button": "step-button step-button-next",
"submit_button": "step-button step-button-submit",
"reset_button": "step-button step-button-reset",

"tabs": "nav nav-pills bg-light nav-justified form-wizard-header mb-3",
"tab_single": "nav-item",

"wizard_container": "",
"wizard_content": "tab-content b-0 mb-0 pt-0",
"wizard_header": "wizard-header",

"wizard_progress": "progress mb-3",
"progress_bar": "bar progress-bar progress-bar-striped progress-bar-animated bg-success"
}
`

In other way, you can override header and footer sections by defining slots. For example, if you want override tab layout:

`html

`

You also can enable or disable progress bar.

Importantly that you can only modify default Wizard - FormWizard, You can't add any changes to Bootstrap
version, so if you need them - you need create your own wizard on top of FormWizard.

When you overriding layout through slots, you will have next contexts:

#### Tab layout

| Variable | Description |
|----------|---------------------|
| tab | TabContent instance |
| index | Tab's index |

#### Footer

| Variable | Description |
|-------------------|----------------------------------------------------------------|
| submitSuccess | When form successfully sent, this variable will equal true |
| previousEnabled | true if previous button enabled and can be clicked |
| nextEnabled | true if next button enabled and can be clicked |
| submitEnabled | true if submit button enabled and can be clicked |
| previousTab | function, shows previous tab |
| nextTab | function, shows next tab |
| onSubmit | function, sends the form |
| reset | function, resets the form |




$3

If you do not need progress bar, you can hide it by setting this properties:

| Property | Description |
|----------------------------|--------------------------------------------------------------|
| progressBeforeTabs | Show progress bar before tabs |
| progressAfterTabs | Show progress bar after tabs inside tabs content block |

$3

We use vuelidate package for validation. You should define validation rules by wizard steps.
All validation rules should be under validationRules data field:

`json
{
"formData": {
"firstName": null
},
"validationRules": [
{ "firstName": { / validation rules / } }
]
}
`

By default validation works on formData nested object, so you should use formData to store your data.
However, you can change it by setting up $formName field. When $formName field is present, then we'll use
nested object with this name. Example:

`json
{
"$formName": "userDetails",
"userDetails": {
"firstName": null
},
"validationRules": [
{ "firstName": { / validation rules / } }
]
}
``

$3

You have an option to buy me a pizza if you found this plugin useful

https://www.buymeacoffee.com/wLrF3Z0tE