Form Wizard (Stepper) Component For Vue 3

A simple yet customizable form wizard (stepper) component for Vue 3 applications.

How to use it:

1. Import and register the component.

import Wizard from 'form-wizard-vue3'

export default {
  install(app) {
    app.component('Wizard', Wizard)
  }
}

2. Create a basic form wizard.

<Wizard
  squared-tabs
  card-background
  navigable-tabs
  scrollable-tabs
  :nextButton="{
    text: 'test',
    icon: 'back',
    hideIcon: false, // default false but selected for sample
    hideText: false, // default false but selected for sample
  }"
  :custom-tabs="[
    {
      title: 'Step 1',
    },
    {
      title: 'Step 2',
    },
    {
      title: 'Step 3',
    },
    {
      title: 'Step 4',
    },
  ]"
  :beforeChange="onTabBeforeChange"
  @change="onChangeCurrentTab"
  @complete:wizard="wizardCompleted"
>
  <h5 v-if="currentTabIndex === 0">Tab 0</h5>
  <h5 v-if="currentTabIndex === 1">Tab 1</h5>
  <h5 v-if="currentTabIndex === 2">Tab 2</h5>
  <h5 v-if="currentTabIndex === 3">Tab 3</h5>
</Wizard>

export default {
  name: 'App',
  components: {
    Wizard,
  },
  data() {
    return {
      currentTabIndex: 0,
    };
  },
  methods: {
    onChangeCurrentTab(index, oldIndex) {
      console.log(index, oldIndex);
      this.currentTabIndex = index;
    },
    onTabBeforeChange() {
      if (this.currentTabIndex === 0) {
        console.log('First Tab');
      }
      console.log('All Tabs');
    },
    wizardCompleted() {
      console.log('Wizard Completed');
    },
  },
};

3. Available props.

id: {
  type: String,
  default: 'fw-' + new Date().valueOf()
},
customTabs: {
  type: Array,
  default: () => [
    {
      id: 0,
      title: 'Step 1',
      icon: 'map'
    },
    {
      id: 1,
      title: 'Step 2',
      icon: 'check'
    },
    {
      id: 2,
      title: 'Step 3',
      icon: 'pen'
    }
  ]
},
nextButton: {
  type: Object,
  default: function () {
    return {}
  }
},
backButton: {
  type: Object,
  default: function () {
    return {}
  }
},
doneButton: {
  type: Object,
  default: function () {
    return {}
  }
},
hideButtons: {
  type: Boolean,
  default: false
},
startIndex: {
  type: Number,
  default: 0,
  validator: (value: number) => {
    return value >= 0
  }
},
verticalTabs: {
  type: Boolean,
  default: false
},
beforeChange: {
  type: Function,
  default: () => {}
},
beforeMount: {
  type: Function,
  default: () => {}
},
navigableTabs: {
  type: Boolean,
  default: false
},
scrollableTabs: {
  type: Boolean,
  default: false
},
cardBackground: {
  type: Boolean,
  default: false
},
squaredTabs:{
  type:Boolean,
  default:false
}

4. Available props for the steps.

tab: {
  type: Object,
  default: () => {}
},
index: {
  type: Number,
  default: 0
},
currentIndex: {
  type: Number,
  default: 0
},
squaredTab:{
  type:Boolean,
  default:false
}

Preview:

Changelog:

v1.1.0 (01/22/2023)

• Slots improvements
• ChangeTab method expose

v1.0.0 (11/13/2022)

• showProgress prop added for control progress lines displaying.
• Disabled feature added for all buttons. Now button options can change dynamically.
• Some packages updated.

v0.3.2 (08/28/2022)

• Documentation first version published
• Bootstrap icons removed
• Prime icons added

Download Details:

Author: bahadirsofuoglu

Live Demo: https://stackblitz.com/edit/vue-1bngkw?file=src%2FApp.vue

Download Link: https://github.com/bahadirsofuoglu/form-wizard-vue3/archive/refs/heads/master.zip

Official Website: https://github.com/bahadirsofuoglu/form-wizard-vue3

Install & Download:

# Yarn
$ yarn add form-wizard-vue3

# NPM
$ npm i form-wizard-vue3