hjortur17's avatar

Make sure to provide the "name" option.

Hi, I'm trying to register a component with Vue I'm getting error that sound like this: app.js:38568 [Vue warn]: Unknown custom element: < replies > - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> < ThreadView > < Root>

Here is the app.js file:

require('./bootstrap');

window.Vue = require('vue');

import Datepicker from './components/Datepicker.vue';

Vue.component('flash', require('./components/Flash.vue'));

Vue.component('thread-view', require('./pages/Thread.vue'));

const app = new Vue({
    el: '#app',
    components: {Datepicker}
});

Here is the Replies.vue file:

<template>
    <div>
        <div v-for="reply in items">
            <reply :data="reply"></reply>
        </div>
    </div>
</template>

<script>
    import Reply from './Reply.vue';

    export default {
        props: ['data'],

        components: { Reply },

        data() {
            return {
                items: this.data
            }
        }
    }
</script>

And here is the Thread.vue (this file is not stored in components folder this is stored in js/pages)

<script>
    import Replies from '../components/Replies.vue';

    export default {
        components: { Replies }
    }
</script>
0 likes
7 replies
hjortur17's avatar

@FTIERSCH - Here in show.blade.php

@extends ('layouts.master')

@section ('header')
    <header class="h-72" style="background: url('/css/img/school.jpg'); background-size: cover; background-position: center">
        <div class="container mx-auto px-4 py-6">
            @include ('partials.navbar')
        </div>
    </header>
@endsection

@section ('section-1')
    <thread-view inline-template>
        <div class="container mx-auto px-4 lg:px-64">
            <article>
                <div class="flex">
                    <div class="flex-1">
                        <h2 class="text-5xl mb-4 text-blue-darkest">{{ $thread->title }}</h2>
                    </div>
                    @can('update', $thread)
                        <div class="w-auto self-center text-right">
                            <form action="{{ $thread->path() }}" method="POST">
                                @csrf
                                {{ method_field('DELETE') }}

                                <button type="submit">
                                    <svg height="13px" width="13px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z" fill="#ef5753"/></svg>
                                </button>
                            </form>
                        </div>
                    @endcan
                </div>
                
                <div class="flex mb-4">
                    <div class="flex-1 text-left">
                        <p class="mb-4 text-grey-darker"><small>{{ $thread->creator->name }}</small></p>
                    </div>
                    <div class="flex-1 text-right">
                        <p class="mb-4 text-grey-darker"><small>{{ $thread->created_at->diffForHumans() }}</small></p>
                    </div>
                </div>
                
                <p class="leading-normal text-blue-darkest mb-2">
                    {{ $thread->body }}
                </p>
            </article>


            <replies :data="{{ $thread->replies }}"></replies>
            {{-- @include ('partials.reply') --}}
        </div>
    </thread-view>
@endsection
mironmg's avatar

I may be wrong here cause I usually don't use the templates in-line but don't you wanna declare the replies component inside the app.js file? Basically you're not using the component in the Thread file, you're using it in the master layout, which means it does not make much sense to import it in that file...

hjortur17's avatar

@MIRONMG - I'm just following tutorials here on Laracasts and Jeffrey did this way. Do you have any better idea of​ how to do this? :)

mironmg's avatar
mironmg
7 years ago
Best Answer
Level 6

@HJORTUR17 - Did you try to import the replies component in the app.js file and it failed? It should work if you do it like that

hjortur17's avatar

That removed the original error, but now I'm getting this error:

Failed to mount component: template or render function not defined.

found in

---> < Replies >
       < ThreadView >
         < Root >
hjortur17's avatar

I found out to add .default at the end of the component line. But can anyone explain what the .default works?

So the app.js file looks like this:

require('./bootstrap');

window.Vue = require('vue');

Vue.component('flash', require('./components/Flash.vue').default);
Vue.component('replies', require('./components/Replies.vue').default);

Vue.component('thread-view', require('./pages/Thread.vue'));

const app = new Vue({
    el: '#app'
});

Please or to participate in this conversation.