eiru_pos/src/components/Loader.vue

<template lang="pug">
    modal(name="pos-loader" transition="nice-modal-fade" @before-close="beforeClose" :classes="['v--modal', 'pos-loader']")
        simple-spinner(size="large" message="Cargando, espere...")
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import Spinner from 'vue-simple-spinner'

    export default {
        components: {
            'simple-spinner': Spinner
        },
        computed: mapGetters({
            loaded: 'isLoaded'
        }),
        watch: {
            loaded(completed) {
                if (completed) {
                    this.$modal.hide("pos-loader")
                } else {
                    this.$modal.show("pos-loader")
                }
            }
        },
        methods: {
            beforeClose(e) {
                if (!this.loaded) {
                    e.stop()
                }
            },
            ...mapActions([
                'clear'
            ])
        },
        mounted() {
            this.clear()
            this.$modal.show("pos-loader")
        }
    }
</script>

<style lang="sass">
    .pos-loader
        display: flex
        align-items: center
        justify-content: center

</style>