Level 80
@alexmamun085 OK?
1 like
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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:
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>
Please or to participate in this conversation.