Загрузить Таблицу БД в компоненте Vue проекта Laravel

Получение данных из Базы Данных

прописывание нового url адреса в routes\web.php

отслеживание перешёл ли пользователь на страницу /contact/all и вызов функции allData в контроллере NameController и присваивание название url адресу contact-data
Route::get('/contact/all','NameController@allData')->name('contact-data');

добавление ссылки (переход к сообщениям) в шаблоне (пример header)

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Заголовок</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="{{route('contact-data')}}">Сообщения</a>
</nav>
</div>

функция allData в контроллере app\Http\Controllers\NameController.php

для обращения к табличке в базе данных нам необходимо работать с моделью, которая прикреплена к контроллеру (пример модель Contact)

...
use App\Models\Name;
class NameController extends Controller{
public function allData(){
$contact=new Contact;
получаем все записи которые находятся в определённой табличке данных (пример табличка Contact)
dd($contact->all());
упрощённый вариант кода
$contact=Contact::all();
dd($contact);
передача данных (пример всех записей) в шаблон (пример message) через параметр data
return view('message',['data'=>Contact::all()]);
}
}

Создание шаблона messages.blade.php и привязывание к главному файлу layouts\app.blade.php

@extends('layouts.app')
@section('title-block')Все сообщения@endsection
@section('content')
<h1>Все сообщения</h1>

@foreach($data as $el)
<div class="alert alert-info">
<h3>{{$el->subject}}</h3>
<p>{{$el->email}}</p>
<p><small>{{$el->create_at}}</small></p>
<a href="#"><button class="btn btn-warning">Детальнее</button></a>
</div>
@endforeach

@endsection