VueJS component called 2 times in nested route using Laravel

Question

I have a Laravel App and I'm trying to add a vuejs form. The form has 3 differents steps so I want to use vuejs nested routes.

Problem is the parent component is called 2 times.

OnboardingForm.vue : parent view, calling child components.

<template>
    <div class="steps-container">
        <div class="container">
            <div class="step-progress">
            Current step x {{ current_step }}
            </div>

            <router-view v-on:setStep="setStep"></router-view>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            current_step: null
        }
    },
    methods: {
        setStep(step) {
            this.current_step = step;
        },
    }
}
</script>

The router view is working fine but the <div class="steps-container"> is rendered 2 times :

<div class="steps-container">
  <div class="container">
    <div class="step-progress">
      Current step
    </div>
    <div class="steps-container">
      <div class="container">
        <div class="step-progress">
          Current step from-component-1
        </div>
        <!-- Then the child component is successfully rendered -->
        <div class="content-of-component">Component 1</div>
      </div>
    </div>
  </div>
</div>

Associated files

Laravel route calling Controller web.php

Route::get('/onboarding/{any?}', [App\Http\Controllers\FormController::class, 'onboarding']);

Note this controller is only returning the blade file view('onboarding'). Also onboarding.blade.php is calling my main component <OnboardingForm>

VueJS Routes

const router = new VueRouter({
mode: 'history',
routes: [
    {
        path: '/onboarding',
        component: OnboardingForm,
        children: [
            {
                path: 'step1',
                component: Component1
            },
            {
                path: 'step2',
                component: Component2
            }
        ]
    },
],
});

I am maybe wrong using both VueJS and Laravel routing system together.

Have you researched about "maybe (being) wrong using both VueJS and Laravel routing system together"? — Dexygen, Jan 18 '21 at 10:23
@KamleshPaul Thank you for your answer. I put the complete OnboardingForm.vue, although the `setStep` method doesn't seems to be part of the problem — lbrs, Jan 18 '21 at 11:45

lbrs · Accepted Answer · 2021-01-19T13:46:36.297

0

The problem is coming from the blade file : I was directly calling the parent component <onboarding-form> instead of the <router-view>.

So the component was loaded once, then the route system tried to load it again.

mybladefile.php

<div class="container" id="steps">
    <onboarding-form></onboarding-form>
</div>

become

<div class="container" id="steps">
    <router-view></router-view>
</div>

edited Jan 19 '21 at 13:46

answered Jan 19 '21 at 13:41

lbrs

76
6

VueJS component called 2 times in nested route using Laravel

Associated files

1 Answers1