• 1. はじめに
• 2. CompositionAPIを使うために
• 3.コンポーネント追加のイメージ
  • ■ ルーティング
  • ■ コントローラー
  • ■ ビュー
  • ■ コンポーネントの呼び込み部分
  • ■ コンポーネント
• 4.おわりに

1. はじめに

●●.blade.phpにコンポーネントを追加するという形でVue.jsを取り入れてみる。しかもVue.jsはCompositionAPIで書くこととする。ここでは、CompositionAPIの書き方自体の言及はしないが、その環境の整え方についてまとめておく。

2. CompositionAPIを使うために

▼resources/assets/js/app.js

require('./bootstrap');

import { createApp } from 'vue'
import App from './components/App.vue'

createApp({
  components: {
    App
  }
}).mount('#app')

3.コンポーネント追加のイメージ

■ ルーティング

▼ views/listings/vue

Route::get('/','ListingsController@index');

■ コントローラー

▼ app\Http\Controllers\ListingsController.php

    public function index(){
         return view('listings.index');
    }

■ ビュー

▼ resources\views\listings\index.blade.php）

   @extends('layouts.login')
    @section('content')
    <div id="app">
        <App></App>
    </div>
    //resources/assets/js/app.jsで書いたVueの設定を読み込む
    <script src="{{ asset('js/app.js') }}" defer="defer"></script>
    @endsection

■ コンポーネントの呼び込み部分

※Vue3をインストール時に自動で作成されるApp.vueのコンポーネントを使用
▼ resources\assets\js\components\App.vue

    <div id="app">
        <App></App>
    </div>

※ 下記コードの書く場所は本記事より良い場所があるかもしれない。 @extends('layouts.login')が 位置する共通のビューテンプレート部分に記述しても上手くVue.jsが読み込めなかったため、 index.blade.php内に記述した。

<script src="{{ asset('js/app.js') }}" defer="defer"></script>

■ コンポーネント

ここでは便宜上、簡単なコードサンプルを乗せるのみにとどめる。 ▼ resources\assets\js\components\App.vue

<template>
    <div class="container">
        <div>
            <div>{{ message }}</div>
            <div class="card">
                <div class="card-header">Laravel×Vue.js</div>
                <div class="card-body">
                    using CompositionAPI
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { ref } from "vue";
    export default {
        setup() {
            const message = ref("Hello Vue 3");

            return {
              message
            };
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

4.おわりに

Laravelのバージョンがやや古くともLaravel8でVue 3を使うが参考になる。もし、LaravelにVue.jsをインストールした後に軽く動作確認をしたい場合は参考になるだろう。