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 should look 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
            },
          }
        ]
   }
}

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

Find DEMOs here!