{"id":12476,"library":"vue-form-wizard","title":"Vue Form Wizard","description":"Vue Form Wizard is a Vue.js component designed to simplify the creation and management of multi-step forms or tabbed interfaces, often referred to as 'wizards'. It provides a flexible, dependency-free solution for splitting complex forms into manageable steps, improving user experience by guiding them through a process. The current stable version is 0.8.4. While its release cadence isn't strictly defined, patches and minor updates have been released intermittently, suggesting an active maintenance approach. Key differentiators include its complete lack of external dependencies (beyond Vue itself), built-in support for features like keyboard navigation (WAI-ARIA), scoped slots for extensive customization, integration with validation libraries like Vuelidate, and handling of asynchronous step changes and validations. It supports both horizontal and vertical layouts and offers various event hooks for controlling step transitions.","status":"active","version":"0.8.4","language":"javascript","source_language":"en","source_url":"https://github.com/cristijora/vue-form-wizard","tags":["javascript","vue","vuejs","form","wizard","tab","typescript"],"install":[{"cmd":"npm install vue-form-wizard","lang":"bash","label":"npm"},{"cmd":"yarn add vue-form-wizard","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-form-wizard","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for a Vue component library.","package":"vue","optional":false}],"imports":[{"note":"The component is typically imported as a default export, and its CSS must be explicitly imported for styling.","wrong":"const FormWizard = require('vue-form-wizard')","symbol":"FormWizard","correct":"import FormWizard from 'vue-form-wizard'\nimport 'vue-form-wizard/dist/vue-form-wizard.min.css'"},{"note":"TabContent is a named export that should be imported alongside FormWizard if used explicitly, though it's often implicitly handled by the wizard component.","wrong":"import TabContent from 'vue-form-wizard/TabContent'","symbol":"TabContent","correct":"import { FormWizard, TabContent } from 'vue-form-wizard'"},{"note":"Vue Form Wizard is a component, not a plugin. It should be registered globally or locally as a component, not installed with `Vue.use()`.","wrong":"Vue.use(FormWizard)","symbol":"VueFormWizard","correct":"import FormWizard from 'vue-form-wizard';\nimport 'vue-form-wizard/dist/vue-form-wizard.min.css';\nVue.component('form-wizard', FormWizard);"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport FormWizard from 'vue-form-wizard';\nimport 'vue-form-wizard/dist/vue-form-wizard.min.css';\n\nconst app = createApp({\n  template: `\n    <div id=\"app\">\n      <form-wizard @on-complete=\"onComplete\" :start-index=\"0\">\n        <tab-content title=\"Personal details\" icon=\"ti-user\">\n          <p>Step 1: Enter your personal information.</p>\n          <input type=\"text\" placeholder=\"Name\" v-model=\"formData.name\" />\n        </tab-content>\n        <tab-content title=\"Payment details\" icon=\"ti-credit-card\">\n          <p>Step 2: Provide payment information.</p>\n          <input type=\"text\" placeholder=\"Card Number\" v-model=\"formData.cardNumber\" />\n        </tab-content>\n        <tab-content title=\"Last step\" icon=\"ti-check\">\n          <p>Step 3: Review and submit.</p>\n          <pre>{{ JSON.stringify(formData, null, 2) }}</pre>\n        </tab-content>\n      </form-wizard>\n    </div>\n  `,\n  components: {\n    FormWizard,\n    TabContent: FormWizard.TabContent // Access TabContent via FormWizard\n  },\n  data() {\n    return {\n      formData: {\n        name: '',\n        cardNumber: ''\n      }\n    };\n  },\n  methods: {\n    onComplete() {\n      alert('Yay. Done!');\n      console.log('Form completed with data:', this.formData);\n    }\n  }\n});\n\napp.mount('#app');","lang":"typescript","description":"Demonstrates a basic multi-step form using `vue-form-wizard` with three tabs and data binding."},"warnings":[{"fix":"Access `TabContent` as `FormWizard.TabContent` when registering locally: `components: { FormWizard, TabContent: FormWizard.TabContent }`.","message":"The `TabContent` component is exposed as a property of the default `FormWizard` component (`FormWizard.TabContent`) rather than a direct named export. This can lead to incorrect import statements.","severity":"gotcha","affected_versions":">=0.8.0"},{"fix":"Consult the official documentation for the correct scoped slot syntax for your specific `vue-form-wizard` version. Ensure you are using `v-slot` or `slot-scope` as appropriate for your Vue version and the library's expectations.","message":"The way scoped slots for `tab-content` were handled changed. Older versions might have different syntax or expectations for slot usage, requiring updates to templates.","severity":"breaking","affected_versions":">=0.7.1"},{"fix":"Always include `import 'vue-form-wizard/dist/vue-form-wizard.min.css'` in your main application entry point or component where the wizard is used.","message":"Styling for `vue-form-wizard` requires a separate CSS import. Neglecting this will result in unstyled components.","severity":"gotcha","affected_versions":">=0.6.0"},{"fix":"For router-managed tabs, ensure `route` prop is present and correctly configured on `tab-content` components.","message":"When integrating with Vue Router, a `route` prop must be passed to tabs that are handled by the router. Incorrect or missing `route` props will prevent proper routing behavior within the wizard.","severity":"gotcha","affected_versions":">=0.6.0"},{"fix":"Ensure your `beforeChange` function returns a `Promise<boolean>` for async operations, resolving `true` to proceed or `false` (or rejecting with a message) to prevent navigation.","message":"Asynchronous validation using `beforeChange` expects a promise that resolves with a boolean for success or rejects with a message for failure. Misinterpreting the return type (e.g., returning only a boolean from an async function) can lead to unexpected navigation behavior.","severity":"gotcha","affected_versions":">=0.6.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Globally: `import FormWizard from 'vue-form-wizard'; app.component('form-wizard', FormWizard);`. Locally: `components: { FormWizard }`.","cause":"The `FormWizard` component has not been registered with Vue either globally or locally within the parent component.","error":"[Vue warn]: Unknown custom element: <form-wizard> - did you register the component correctly?"},{"fix":"Ensure `FormWizard` is correctly imported as a default import: `import FormWizard from 'vue-form-wizard';`.","cause":"Attempting to access `FormWizard.TabContent` when `FormWizard` is undefined or not correctly imported.","error":"TypeError: Cannot read properties of undefined (reading 'TabContent')"},{"fix":"Add `import 'vue-form-wizard/dist/vue-form-wizard.min.css'` to your application's entry file or the component where the wizard is used.","cause":"The necessary CSS file for `vue-form-wizard` has not been imported.","error":"Form wizard appears unstyled or with incorrect layout."}],"ecosystem":"npm"}