How to fix error [Vue warn]: Unknown custom element?

Question

Help to fix error:

[Vue warn]: Unknown custom element: <app-page-test> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

Why I dont see this component app-page-test in vue tools?

Information.

I added component to a custom page in the laravel project.

test.blade.php

@extends('layouts.app')

@push('scripts')
    <script src="{{ asset('js/base/page/test/app.js') }}" defer></script>
@endpush

@section('content')
    <div id="pageTest">
        <app-page-test></app-page-test>
    </div>
@endsection

resources/js/base/page/test/app.js

import Vue from 'vue';
import App from './components/main';
import store from './store/index';

Vue.component(
    'app-page-test',
    App
);

new Vue({
    el: '#pageTest',
    store
});

resources/js/base/page/test/components/main.vue

<template>
    <div class="app-page-test">
        <p>test</p>
    </div>
</template>
<script>
export default {
    name: "app-page-test",
    mounted() {
        console.log('Component mounted.')
    }
}
</script>

Kamlesh Paul · Accepted Answer · 2020-09-15 09:15:05Z

1

try this way

import Vue from 'vue';
import App from './components/main';
import store from './store/index';
Vue.component('app-page-test', require('./components/AppPageTest.vue').default);

new Vue({
    el: '#pageTest',
    store, 
});

edited Sep 15, 2020 at 9:15

answered Sep 15, 2020 at 7:21

Kamlesh Paul

12.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

d-velop Over a year ago

Yes thank you. i deleted and re-created the whole project. The reason was never found, but now there are no errors.

Kamlesh Paul Over a year ago

@d-velop that' great so make sure you mark this answer so other will not spend time one this thanks

d-velop Over a year ago

Hmm... the reason was never found. Even the source code works correctly in the new project. But thanks for trying to help.

Collectives™ on Stack Overflow

How to fix error [Vue warn]: Unknown custom element?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related