form wizard (original) (raw)

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 vue-router@4.1.6

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:

Content for step 1 Content for step 2 Content for step 3

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:

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 ✅