Registry / web-framework / vue-form-wizard

vue-form-wizard

library0.8.4jsnpmunverified

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.

web-framework

npm install vue-form-wizard

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-FORM-WIZARD

vue-form-wizard

web-frameworkjavascriptv0.8.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FormWizard

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

✗ const FormWizard = require('vue-form-wizard')

The component is typically imported as a default export, and its CSS must be explicitly imported for styling.

TabContent

✓ import { FormWizard, TabContent } from 'vue-form-wizard'

✗ import TabContent from 'vue-form-wizard/TabContent'

TabContent is a named export that should be imported alongside FormWizard if used explicitly, though it's often implicitly handled by the wizard component.

VueFormWizard

✓ import FormWizard from 'vue-form-wizard'; import 'vue-form-wizard/dist/vue-form-wizard.min.css'; Vue.component('form-wizard', FormWizard);

✗ Vue.use(FormWizard)

Vue Form Wizard is a component, not a plugin. It should be registered globally or locally as a component, not installed with `Vue.use()`.

Demonstrates a basic multi-step form using `vue-form-wizard` with three tabs and data binding.

import { createApp } from 'vue'; import FormWizard from 'vue-form-wizard'; import 'vue-form-wizard/dist/vue-form-wizard.min.css'; const app = createApp({ template: ` <div id="app"> <form-wizard @on-complete="onComplete" :start-index="0"> <tab-content title="Personal details" icon="ti-user"> <p>Step 1: Enter your personal information.</p> <input type="text" placeholder="Name" v-model="formData.name" /> </tab-content> <tab-content title="Payment details" icon="ti-credit-card"> <p>Step 2: Provide payment information.</p> <input type="text" placeholder="Card Number" v-model="formData.cardNumber" /> </tab-content> <tab-content title="Last step" icon="ti-check"> <p>Step 3: Review and submit.</p> <pre>{{ JSON.stringify(formData, null, 2) }}</pre> </tab-content> </form-wizard> </div> `, components: { FormWizard, TabContent: FormWizard.TabContent // Access TabContent via FormWizard }, data() { return { formData: { name: '', cardNumber: '' } }; }, methods: { onComplete() { alert('Yay. Done!'); console.log('Form completed with data:', this.formData); } } }); app.mount('#app');

Debug

Known issues

gotchaThe `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.

fix

Access `TabContent` as `FormWizard.TabContent` when registering locally: `components: { FormWizard, TabContent: FormWizard.TabContent }`.

affects: >=0.8.0

breakingThe way scoped slots for `tab-content` were handled changed. Older versions might have different syntax or expectations for slot usage, requiring updates to templates.

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.

affects: >=0.7.1

gotchaStyling for `vue-form-wizard` requires a separate CSS import. Neglecting this will result in unstyled components.

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.

affects: >=0.6.0

gotchaWhen 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.

fix

For router-managed tabs, ensure `route` prop is present and correctly configured on `tab-content` components.

affects: >=0.6.0

gotchaAsynchronous 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.

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.

affects: >=0.6.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <form-wizard> - did you register the component correctly?

The `FormWizard` component has not been registered with Vue either globally or locally within the parent component.

fix

Globally: `import FormWizard from 'vue-form-wizard'; app.component('form-wizard', FormWizard);`. Locally: `components: { FormWizard }`.

TypeError: Cannot read properties of undefined (reading 'TabContent')

Attempting to access `FormWizard.TabContent` when `FormWizard` is undefined or not correctly imported.

fix

Ensure `FormWizard` is correctly imported as a default import: `import FormWizard from 'vue-form-wizard';`.

Form wizard appears unstyled or with incorrect layout.

The necessary CSS file for `vue-form-wizard` has not been imported.

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.

Upgrade

Version history

0.8.4latest on npm

Audit

Dependencies

vuerequiredCore dependency for a Vue component library.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/cristijora/vue-form-wizard ↗

packagehttps://www.npmjs.com/package/vue-form-wizard ↗