LaravelとVue.jsを連携させる方法を解説します。
このときLaravelのコントローラーから変数を受け渡し、これをVueファイル内で使えるようにします。
まず最初にLaravelにVueをインストールする必要がありますが、こちらは下記の記事をご覧ください。
【追加】
Laravel11とVue3連携はこちらご覧ください。
LaravelとVueの連携方法を初心者向けに分かりやすく解説
今回は次の流れで連携をさせます。
- Laravelのコントローラーから、ビューファイルを表示する設定をする
- ビューファイルにvue.jsを埋め込んで、vue.jsを表示する
Laravel8を使った動作を解説します。
それでは、各ステップを説明していきます。
① ルート設定を準備しておく
Route::get('/test', [App\Http\Controllers\TestController::class, 'create'])->name('test.create');
TestControllerのcreateに処理を書いていきます。
②モデルとマイグレーションファイルを準備する
モデルとマイグレーションファイルを作っておきます。
php artisan make:model Test -m
作成後、database/migrationsから作成したマイグレーションファイルを開きます。
下記のように編集して保存した後、 php artisan migrate を実行します。
public function up()
{
Schema::create('tests', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->timestamps();
});
}
さらに、データベースにログインします。作成した testsテーブルを確認します。
titleカラムを編集し、何か文字列をいれておいてください。
とりあえず今はテストなので、手動で編集します。
③コントローラーを準備しておく
下記コマンドを実行して、TestControllerを作ります。
php artisan make:controller TestController
作成したTestController.phpを開きます。
一番上にTestモデルを使うためのuse宣言をいれます。
use App\Models\Test;
public function create(){
$tests=Test::all();
return view('test', compact('tests'));
}
④componentsにvueファイルを作る
いよいよvue.jsファイルを作っていきます。
resources/js/componentsの中に、今回用のvueファイルを作ります。
デフォルトでは、ExampleComponent.vueが入っています。
同じ場所に、TestComponents.vueを作ってください。
中身はまだ空っぽでOKです。
⑤app.jsを設定する
Vue.component('test-component', require('./components/TestComponent.vue').default);
これでVueファイルをblade.phpファイルに埋め込めるようになりました。
⑥ビューファイルを編集する
@extends('layouts.app')
@section('content')
<test-component
:tests="{{$tests}}"
></test-component>
@endsection
<test-component></test-component>内にTestComponent.vue ファイルの内容が挿入されます。
⑦Vueファイルを編集する
<template>
<div class="row justify-content-center">
<ul>
<li v-for="test in tests" :key="test.id">{{test.title}}</li>
</ul>
</div>
</template>
<script>
export default {
props:["tests"]
}
</script>
<template></template>が表示部分になります。
<script></script>が、vueのプログラミングを記述する箇所です。
⑧ファイルを表示してみる
npm run dev を実行した後、ブラウザで表示を確認してみましょう。
