Wizards

<vuestic-wizard 
     :steps="vrSteps" 
     wizard-layout="vertical" 
     wizard-type="rich">

     <div slot="page1" class="form-wizard-tab-content">
          <p>Add Page 1 content here!</p>    
     </div>
     <div slot="page2" class="form-wizard-tab-content">
          <p>Add Page 2 content here!</p>    
     </div>
     <div slot="wizardCompleted" class="form-wizard-tab-content">
          <h4>Add slot="wizardCompleted" to your wizard's last step, to show this step after wizard completed!</h4>
     </div>
</vuestic-wizard>

data () {
   return {
      // how your steps shoul looks like!
      vrSteps: [
          {
            label: 'Step 1. Name',
            slot: 'page1', // the same name as in attribute "slot" of wizard's step
            onNext: () => {
              // method is called when moving to the next step
            },
            isValid: () => {
              // condition for moving to the next step
              return true;
            }
          },
          {
            label: 'Step 2. Country',
            slot: 'page2', // the same name as in attribute "slot" of wizard's step
            onNext: () => {
              // method is called when moving to the next step
            },
            isValid: () => {
              // condition for moving to the next step
              return true;
            },
            onBack: () => {
              // method is called when moving to the previous step
            },
          }
        ]
   }
}

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