Vue3 form wizard

A dynamic wizard to split your forms easier

Vue3-form-wizard is a vue based component with no external depenendcies which simplifies tab wizard management.

📚Document ・ 🔎 Demos ・ 🔬 Playground

Dependencies

• required: Vuejs >= 3.x

Installation

npm install vue3-form-wizard --save

yarn add vue3-form-wizard

🚀 Features

• 🎪 Interactive docs & demos
• 🦾 Type Strong: Written in Typescript, with TS Docs
• 🌎 No bundler required: Usable via CDN
• 🔩 Flexible: Configurable event filters and targets

🔧 Document

• ➡️ Usagae
• ➡️ Props
• ➡️ Slots
• ➡️ Methods
• ➡️ Scoped-slots
• ➡️ Demos

🔗 Router Integration

Vue3 Form Wizard now supports automatic route synchronization with Vue Router!

Setup

First, install Vue Router:

npm install [email protected]

Configure your Vue app with Vue Router:

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // Your routes
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

Usage

Add route prop to your tab-content components:

<template>
  <form-wizard @on-complete="onComplete" color="#9b59b6">
    <tab-content title="Step 1" route="/step1">
      Content for step 1
    </tab-content>
    <tab-content title="Step 2" route="/step2">
      Content for step 2
    </tab-content>
    <tab-content title="Step 3" route="/step3">
      Content for step 3
    </tab-content>
  </form-wizard>
</template>

Features

• ✅ Automatic Navigation: Tab changes update the URL
• ✅ URL Sync: Direct URL access navigates to the correct tab
• ✅ Browser History: Back/forward buttons work correctly
• ✅ Deep Linking: Shareable URLs for specific wizard steps

Route Types

The route prop accepts:

• String: route="/step1" - Direct path
• Object: route="{ name: 'step1', params: { id: 1 } }" - Named routes with params

Testing Router Functionality

A router test script is included to verify your setup:

# Run the router test
node test-router.js

The test will check:

• ✅ Vue Router installation
• ✅ Router configuration
• ✅ Route definitions
• ✅ Component integration

Demo

The project includes a complete demo with router integration. Run:

npm run dev

Then visit http://localhost:5173 to see:

• RouterTest component showing current route
• Navigation buttons for testing
• Route history tracking
• Automatic URL updates when switching tabs

Until the version is completely stable

• Updated To Vue3 ✅
• Setup with Vite ✅
• Add declaration type(Typescript Support)✅
• Fix All Issue on vue-form-wizard 🚧
• Rewrite With Setup Function and ts ✅
• Setup New Features🚧
• Setup New Documentation ✅

This is a cloned package from vue-form-wizard.Updated to vue 3 with new features and bug fixes

Old Documentation