title: How to correctly use Laravel and Vue?
body: <p>Please am new in using Laravel + Vue. I have registered a component but it is failing to display content in my blade template. Please i need assistance on how to properly do that in Laravel and Vue?</p>
  <p>Code below
  <em><strong>layout.app</strong></em></p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;{{ str_replace('_', '-', app()-&gt;getLocale()) }}&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  
      &lt;!-- CSRF Token --&gt;
      &lt;meta name=&quot;csrf-token&quot; content=&quot;{{ csrf_token() }}&quot;&gt;
  
      &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
  
      &lt;!-- Scripts --&gt;
      &lt;script src=&quot;{{ asset('js/app.js') }}&quot; defer&gt;&lt;/script&gt;
  
      &lt;!-- Fonts --&gt;
      &lt;link rel=&quot;dns-prefetch&quot; href=&quot;//fonts.gstatic.com&quot;&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css?family=Nunito&quot; rel=&quot;stylesheet&quot;&gt;
  
      &lt;!-- Styles --&gt;
      &lt;link href=&quot;{{ asset('css/app.css') }}&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;app&quot;&gt;
          &lt;nav class=&quot;navbar navbar-expand-md navbar-light bg-white shadow-sm&quot;&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;a class=&quot;navbar-brand&quot; href=&quot;{{ url('/') }}&quot;&gt;
                      {{ config('app.name', 'Laravel') }}
                  &lt;/a&gt;
                  &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;{{ __('Toggle navigation') }}&quot;&gt;
                      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
  
                  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
                      &lt;!-- Left Side Of Navbar --&gt;
                      &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
  
                      &lt;/ul&gt;
  
                      &lt;!-- Right Side Of Navbar --&gt;
                      &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
                          &lt;!-- Authentication Links --&gt;
                          @guest
                              &lt;li class=&quot;nav-item&quot;&gt;
                                  &lt;a class=&quot;nav-link&quot; href=&quot;{{ route('login') }}&quot;&gt;{{ __('Login') }}&lt;/a&gt;
                              &lt;/li&gt;
                              @if (Route::has('register'))
                                  &lt;li class=&quot;nav-item&quot;&gt;
                                      &lt;a class=&quot;nav-link&quot; href=&quot;{{ route('register') }}&quot;&gt;{{ __('Register') }}&lt;/a&gt;
                                  &lt;/li&gt;
                              @endif
                          @else
                              &lt;li class=&quot;nav-item dropdown&quot;&gt;
                                  &lt;a id=&quot;navbarDropdown&quot; class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; v-pre&gt;
                                      {{ Auth::user()-&gt;name }}
                                  &lt;/a&gt;
  
                                  &lt;div class=&quot;dropdown-menu dropdown-menu-right&quot; aria-labelledby=&quot;navbarDropdown&quot;&gt;
                                      &lt;a class=&quot;dropdown-item&quot; href=&quot;{{ route('logout') }}&quot;
                                         onclick=&quot;event.preventDefault();
                                                       document.getElementById('logout-form').submit();&quot;&gt;
                                          {{ __('Logout') }}
                                      &lt;/a&gt;
  
                                      &lt;form id=&quot;logout-form&quot; action=&quot;{{ route('logout') }}&quot; method=&quot;POST&quot; class=&quot;d-none&quot;&gt;
                                          @csrf
                                      &lt;/form&gt;
                                  &lt;/div&gt;
                              &lt;/li&gt;
                          @endguest
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
          &lt;main class=&quot;py-4&quot;&gt;
              @yield('content')
          &lt;/main&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p><em><strong>welcome.blade.php</strong></em></p>
  <pre><code>@extends('layouts.app')
  @section('content')
  
  &lt;div&gt;Vue Js Todo App&lt;/div&gt;
  &lt;articles&gt;&lt;/articles&gt;
  
  @endsection
  </code></pre>
  <p><em><strong>app.js</strong></em></p>
  <pre><code>/**
   * First we will load all of this project's JavaScript dependencies which
   * includes Vue and other libraries. It is a great starting point when
   * building robust, powerful web applications using Vue and Laravel.
   */
  
  import Vue from 'vue';
  require('./bootstrap');
  
  window.Vue = require('vue');
  
  /**
   * The following block of code may be used to automatically register your
   * Vue components. It will recursively scan this directory for the Vue
   * components and automatically register them with their &quot;basename&quot;.
   *
   * Eg. ./components/ExampleComponent.vue -&gt; &lt;example-component&gt;&lt;/example-component&gt;
   */
  
  // const files = require.context('./', true, /\.vue$/i)
  // files.keys().map(key =&gt; Vue.component(key.split('/').pop().split('.')[0], files(key).default))
  
  Vue.component('example-component', require('./components/ExampleComponent.vue').default);
  Vue.component('articles', require('./components/Articles.vue').default);
  
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the page. Then, you may begin adding components to this application
   * or customize the JavaScript scaffolding to fit your unique needs.
   */
  
  const app = new Vue({
      el: '#app',
  });
  </code></pre>
  <p>Content in my <em><strong>Articles.Vue</strong></em></p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;form&gt;
              &lt;div class=&quot;input-group mb-3&quot;&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Recipient's username&quot; aria-label=&quot;Recipient's username&quot; aria-describedby=&quot;button-addon2&quot;&gt;
              &lt;div class=&quot;input-group-append&quot;&gt;
                  &lt;button class=&quot;btn btn-outline-secondary&quot; type=&quot;button&quot; id=&quot;button-addon2&quot;&gt;Button&lt;/button&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Please i need assistance..Its not working for me.</p>