Vue2Wizard

Vue Component for Vue 2.x

Install

    npm install vue2-wizard --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2Wizard from 'vue2-wizard';

2.1 Use it globally

Vue.use(Vue2Wizard);

// OR with options

Vue.use(Vue2Wizard, {baseURL: 'https://jsonplaceholder.typicode.com/', headers: {'X-API-KEY': 1234}});

*3. Access it locally

<template>
    <vue2-wizard ref="http" v-model="data" :error-fn="onError"></vue2-wizard>
</template>

components: {
    'vue2-wizard': Vue2Wizard
},

Properties

Wizard.vue (Example)

<template>
    <div>
        <vue2-wizard :start-index="1" @help="alert">
            <vue2-step route="foo"></vue2-step>
            <vue2-step :validate="() => true" icon="fa-file">This is Step #1</vue2-step>
            <vue2-step :validate="test" title="Keyword">Nothing</vue2-step>
            <vue2-step route="bar"></vue2-step>
            <vue2-step>Last step</vue2-step>
        </vue2-wizard>
    </div>
</template>

<script>
    import {Vue2Wizard, Vue2Step} from '../src/index'

    export default {
        props: {},
        components: {Vue2Wizard, Vue2Step},
        created() {
        },
        methods: {
            alert() {
                alert('help!');
            },
            test() {
                return new Promise((resolve, reject) => {
                    setTimeout(() => resolve(true), 2000);
                });
            }
        }
    }
</script>

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build