title: How to fix error [Vue warn]: Unknown custom element?
body: <ol>
  <li>Help to fix error:</li>
  </ol>
  <blockquote>
  <p>[Vue warn]: Unknown custom element: <code>&lt;app-page-test&gt;</code> - did you register
  the component correctly? For recursive components, make sure to
  provide the &quot;name&quot; option.</p>
  <p>(found in <code>&lt;Root&gt;</code>)</p>
  </blockquote>
  <ol start="2">
  <li>Why I dont see this component <strong>app-page-test</strong> in vue tools?</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/Mjc5b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mjc5b.png" alt="enter image description here" /></a></p>
  <p><strong>Information.</strong></p>
  <p>I added component to a custom page in the laravel project.</p>
  <p><em>test.blade.php</em></p>
  <pre><code>@extends('layouts.app')
  
  @push('scripts')
      &lt;script src=&quot;{{ asset('js/base/page/test/app.js') }}&quot; defer&gt;&lt;/script&gt;
  @endpush
  
  @section('content')
      &lt;div id=&quot;pageTest&quot;&gt;
          &lt;app-page-test&gt;&lt;/app-page-test&gt;
      &lt;/div&gt;
  @endsection
  </code></pre>
  <p><em>resources/js/base/page/test/app.js</em></p>
  <pre><code>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
  });
  </code></pre>
  <p><em>resources/js/base/page/test/components/main.vue</em></p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;app-page-test&quot;&gt;
          &lt;p&gt;test&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      name: &quot;app-page-test&quot;,
      mounted() {
          console.log('Component mounted.')
      }
  }
  &lt;/script&gt;
  </code></pre>