Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

alexmamun085's avatar

Vue component taking few time to load in blade Laravel

I'm using Vue component to Laravel blade page. The problem is while loading the page the Vue component not immediately rendered. It's taking 0.5/1/1.5 seconds later(Like eye blink).

Please check my screenshots:

  1. While loading - https://prnt.sc/F5-AlfAVtwYt
  2. After loading - https://prnt.sc/SGpnkV8l-atP

Blade Code

@extends('frontend.layouts.master')

@section('content')
    <section class="ic-login-heads ic-employer-signup-main-design ic-section-space-top-60 ic-section-space-bottom-60">
        <div class="container">
            <div class="row justify-content-center g-0">
                <div class="col-lg-5 col-xxl-4 col-md-7">
                    <div class="create-employer-account">
                        <div class="logo text-center">
                            <a href="/"><img src="{{ asset('frontend/v2/images/logo-icon.svg') }}" alt="logo"></a>
                        </div>
                        <employer-register>
                        </employer-register>
                    </div>
                </div>

Component


<template>
    <form-wizard title="" subtitle="" ref="wizard" @on-complete="submitRegistration" @on-loading="setLoading">
        <tab-content :before-change="()=>validateStep('step1')">
            <EmployerRegisterStep1
                ref="step1"
                @on-validate="mergePartialModels"
            ></EmployerRegisterStep1>
        </tab-content>
        <tab-content :before-change="()=>validateStep('step2')">
            <EmployerRegisterStep2
                v-cloak
                ref="step2"
                @on-validate="mergePartialModels"
            ></EmployerRegisterStep2>
        </tab-content>

        <template slot="footer" slot-scope="props">
            <div class="step-form-btn text-center">
                <button v-if="!props.isLastStep" @click="props.nextTab()" type="button" class="ic-btn"
                        :disabled="loadingWizard">
                    <span v-if="loadingWizard" class="spinner-border spinner-border-sm me-1" role="status"
                          aria-hidden="true"></span>
                    Create Employer Account
                </button>
                <button v-else @click="props.nextTab()" type="button" class="ic-btn" :disabled="loadingWizard">
                    <span v-if="loadingWizard" class="spinner-border spinner-border-sm me-1" role="status"
                          aria-hidden="true"></span>
                    Finish Creating Account
                </button>
            </div>
        </template>
    </form-wizard>
</template>

<script>
import {FormWizard, TabContent} from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
import EmployerRegisterStep1 from "./partials/EmployerRegisterStep1";
import EmployerRegisterStep2 from "./partials/EmployerRegisterStep2";

export default {
    name: "RegisterComponent",
    components: {
        FormWizard,
        TabContent,
        EmployerRegisterStep1,
        EmployerRegisterStep2
    },
    props: ["user_type"],
    data() {
        return {
            form_data: {},
            loadingWizard: false,
        };
    },
    methods: {
        async validateStep(name) {
            let refToValidate = this.$refs[name];
            return await refToValidate.validate();
        },
        mergePartialModels(model, isValid) {
            if (isValid) {
                // merging each step model into the final model
                this.form_data = Object.assign({}, this.form_data, model.form_data)
            }
        },
        submitRegistration() {
            this.loadingWizard = true

            axios.post('/employer/register', this.form_data)
                .then((res) => {
                    location.replace('/employer/dashboard')
                })
                .catch(err => {
                    if (err.response.status == 422) {
                        this.showToastMessageByPosition(err.response.data.message ?? 'Something went wrong')
                    } else {
                        this.showToastMessageByPosition('Something went wrong')
                    }
                })
        },
        setLoading(value) {
            this.loadingWizard = value
        }
    },
};
</script>
0 likes
3 replies

Please or to participate in this conversation.