[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>
)
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>
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,
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.