- 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>
解决方法
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, });