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

``bash
npm install vue3-form-wizard --save
`
`bash
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!

$3

First, install Vue Router:
`bash
npm install vue-router@4.1.6
`

Configure your Vue app with Vue Router:
`javascript
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')
`

$3

Add route prop to your tab-content components:
`vue

`

$3

- ✅ 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

$3

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

$3

A router test script is included to verify your setup:

`bash


Run the router test


node test-router.js
`

The test will check:
- ✅ Vue Router installation
- ✅ Router configuration
- ✅ Route definitions
- ✅ Component integration

$3

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

`bash
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

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

$3

#### Old Documentation