vue-easy-wizard

🚀 Welcome to vue-easy-wizard!

Obs: Have bootstrap support 😁

Install Package

npm i -S vue-easy-wizard

Install Plugin Vue

import Wizard from 'vue-easy-wizard';
import 'vue-easy-wizard/dist/Wizard.css';
 
Vue.use(Wizard);

Basic Usage

    <Wizard>
        <WizardItem :back-button="false" title="Wizard" subtitle="Step 1">
            <h1> You are on the step One </h1>
            <button @click="$emit('wizard:next');">
                Next
            </button>
        </WizardItem>
        <WizardItem title="Wizard" subtitle="Step 2">
            <h1> You are on the step Two </h1>
            <button @click="$emit('wizard:next');">
                Next
            </button>
        </WizardItem>
        <WizardItem title="Wizard" subtitle="Step 3">
            <h1> You are on the step Three </h1>
            <button @click="$emit('wizard:next');">
                Next
            </button>
        </WizardItem>
        <WizardItem :back-button="false" subtitle="Step 4">
            <h1> You are on the step Four </h1>
            <h5> But now let's go back to the previous step </h5>
            <button @click="$emit('wizard:prev');">
                prev
            </button>
        </WizardItem>
    </Wizard>

Events

1. To next Step:

$emit('wizard:next');

1. To prev Step:

$emit('wizard:prev');

WizardItem Options

1. title (required)

    <WizardItem title="Wizard">
    </WizardItem>

1. subtitle

    <WizardItem subtitle="step 1">
    </WizardItem>

1. Enable/Disable Back Button (true/false)

    <WizardItem :back-button="false">
    </WizardItem>