1. <vuestic-wizard 
    2.      :steps="vrSteps" 
    3.      wizard-layout="vertical" 
    4.      wizard-type="rich">
    5.  
    6.      <div slot="page1" class="form-wizard-tab-content">
    7.           <p>Add Page 1 content here!</p>    
    8.      </div>
    9.      <div slot="page2" class="form-wizard-tab-content">
    10.           <p>Add Page 2 content here!</p>    
    11.      </div>
    12.      <div slot="wizardCompleted" class="form-wizard-tab-content">
    13.           <h4>Add slot="wizardCompleted" to your wizard's last step,
    14.            to show this step after wizard completed!</h4>
    15.      </div>
    16. </vuestic-wizard>
    17.  
    18. <script>
    19. data () {
    20.    return {
    21.       // how your steps should look like: 
    22.       vrSteps: [
    23.           {
    24.             label: 'Step 1. Name',
    25.             slot: 'page1', // the same name as in attribute "slot" of wizard's step
    26.             onNext: () => {
    27.               // method is called when moving to the next step
    28.             },
    29.             isValid: () => {
    30.               // condition for moving to the next step
    31.               return true;
    32.             }
    33.           },
    34.           {
    35.             label: 'Step 2. Country',
    36.             slot: 'page2', // the same name as in attribute "slot" of wizard's step
    37.             onNext: () => {
    38.               // method is called when moving to the next step
    39.             },
    40.             isValid: () => {
    41.               // condition for moving to the next step
    42.               return true;
    43.             },
    44.             onBack: () => {
    45.               // method is called when moving to the previous step
    46.             },
    47.           }
    48.         ]
    49.    }
    50. }
    51. </script>

    Props

    • steps - Array - array of your steps
    • wizard-layout - String ("vertical" | "horizontal", default: "horizontal") - position of your wizard relatively to container

    • wizard-type - String ("rich" | "simple", default: "simple") - "rich" will enhance beauty of your wizard
      References

    • Validation rules: https://baianat.github.io/vee-validate/guide/rules.html
      Component Examples (with validation)

    1. <vuestic-checkbox
    2.  name="hsCheckbox"
    3.  required
    4.  v-validate="'required'"
    5.  :label="$t('forms.controls.unselected')"
    6.  v-model="checkbox.unselected"
    7. />
    8.  
    9. <vuestic-radio-button
    10.  name="hsRadio"
    11.  required
    12.  v-validate="'included: 1'"
    13.  v-model="radioSelectedOption"
    14.  label="1"
    15. />
    16.  
    17. <vuestic-switch
    18.  v-model="isOk"
    19.  name="hsSwitch"
    20.  required
    21.  v-validate="'required'"
    22. >
    23.  <span slot="trueTitle">Yes</span>
    24.  <span slot="falseTitle">No</span>
    25. </vuestic-switch>

    Find DEMOs here!