[Vuejs]-How to fix "This relative module was not found " in Laravel + Vue

by

0👍

What you’re asking about here is Recursive Components.

When using recursive components you don’t need to import them as they are the component you want to use. You simply need to make sure it has a name and the element inside your component template matches that name (case-insensitive

<template>
    <div>
        <h1>hello</h1>

        <hello></hello>
    </div>
</template>

<script>
    export default {
        name: 'Hello'
    }
</script>

The above code will actually cause an error because it’s essentially creating an infinite loop so you would need to have some condition(s) in your component to prevent this e.g.

<template>
    <div>
        <h1> hello </h1>

        <hello v-if="showNested" show-nested="false"></hello>
    </div>
</template>

<script>
    export default {

        props: {
            showNested: {
                default() {
                    return true;
                }
            }
        },

        name: 'Hello'
    }
</script>

Obviously, I would imagine that you know why you want to nest the components so you can write the logic accordingly.

As for the error you’re getting, I would imagine this is because of the path you’ve supplied to for your import.

When using require or import the . refers to the current directory so assuming that the path for the Hello component is:

resources/js/component/Hello.vue

you’ve essentially tried to import:

resources/js/component/js/component/Hello

This is very much a non-issue now but I thought I would point it out.

Leave a comment