eiru_purchases/src/App.vue

<template lang="pug">
    .purchases
        form-wizard(title='' subtitle='' finishButtonText='Finalizar' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver')
            tab-content(title='Cuál es su proveedor?')
                h2 Proveedor
            tab-content(title='Qué productos adquirirás?')
                h2 Productos
            tab-content(title='Cómo quieres pagar?')
                h2 Pago
</template>

<script>
    import { FormWizard, TabContent } from 'vue-form-wizard'
    import { mapActions } from 'vuex'

    export default {
        components: {
            FormWizard,
            TabContent
        },
        methods: mapActions([
            'initPurchase'
        ]),
        mounted() {
            this.initPurchase()
        }
    }
</script>

<style lang="sass">
    .purchases
        width: 100%
        height: 100%
        position: absolute
        .vue-form-wizard
            width: 100%
            height: 100%
            padding-bottom: 0
            .wizard-header
                display: none
            .wizard-navigation
                width: 100%
                height: 100%
                .wizard-progress-with-circle
                    top: 35px
                .wizard-icon-circle
                    width: 60px
                    height: 60px
                .wizard-tab-content
                    width: 100%
                    height: calc(100% - 82px)
                    padding: 0
                    overflow: hidden
                    .wizard-tab-container
                        width: calc(100% - 20px)
                        height: calc(100% - 20px)
                        margin: 10px
            .wizard-card-footer
                width: 100%
                height: 50px
                position: absolute
                bottom: 0
                .wizard-btn
                    width: 160px
                    height: 40px
                    border-radius: 0
                    box-shadow: none
                    border: none
                    &:hover, &:focus
                        background: #7c7bad
</style>