Bootstrap Templates & Themes Logo Bootstrap Templates & Themes
Vue Form Wizard screenshot

Vue Form Wizard

Author Avatar Theme by Binarcode
Updated: 22 Sep 2020
1109 Stars

Vue.js 2 wizard

Github Live Preview

Categories

Express Vue Scss

Overview:

Vue-form-wizard is a dynamic wizard component designed to simplify form splitting in Vue.js applications. It is a Vue-based component that does not require external dependencies, making it an efficient solution for tab wizard management.

Features:

  • Squared steps: Customize the appearance of steps in the wizard.
  • Custom button and title text: Easily modify the buttons and title text within the wizard.
  • Customized buttons with slots: Replace default buttons with customized elements.
  • Call a function before tab switch: Execute a function before switching tabs for additional control.
  • Element UI form integration: Seamlessly integrate with Element UI forms in Vue.
  • Vuelidate integration: Integrate Vuelidate for form validation in the wizard.
  • Dynamic components for tabs: Utilize dynamic components for flexible tab content.
  • Vue router integration: Incorporate Vue router to enable separate pages per tab.

Installation:

To install Vue-form-wizard, you can use npm. Run the following command in your project directory:

npm install vue-form-wizard

Alternatively, if you prefer using yarn, you can install it with the following command:

yarn add vue-form-wizard

After successful installation, you can import the component in your Vue file as follows:

import VueFormWizard from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'

Vue.use(VueFormWizard)

Summary:

Vue-form-wizard is a versatile component that offers a wide range of features for managing form wizards in Vue.js applications. With capabilities such as customized styling, integration with popular libraries like Element UI and Vuelidate, dynamic component support, and Vue router integration, it provides a comprehensive solution for handling complex forms efficiently. Additionally, features like pre-tab switch function calls, animations, and async validation enhance the user experience and functionality of the wizard component.