LaravelにVueコンポーネントをバインドする方法

2024-04-15 2024-04-15 6分28秒

コテツ

Laravelプロジェクトを運用している方が jQuery を卒業して Vue または React を導入したい！という悩みに直面する事はしばしばあると思います。

SPAを構築するのはコスト的に対応が難しいため、Laravelプロジェクトの一部にVueを導入する方法を解説しまっす。

Contents

環境
やりたいこと
手順
最後に

環境

PHP8.2
Laravel10
Vue3
- node v18.19.1
- npm 10.5.0

やりたいこと

Laravel10の一部にVue.jsを適用する

Vueコンポーネントを定義する
Vueコンポーネントをバインドする
Vueコンポーネントにバックエンドからデータを渡す

手順

なにわともあれVueのインストール

LaravelはビルドツールにViteを採用しているため、ViteのプラグインとしてVueをインストールします。
（CLIでインストールしても良いと思いますよ！

$ npm install @vitejs/plugin-vue

$ npm install @vitejs/plugin-vue --save-dev

vite.config.js の設定

インストールしたVueを設定ファイルに追記します

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 追記

export default defineConfig({
  plugins: [vue()] // 追記
});

app.jsを使える状態に持っていく

Vueコンポーネントをグローバルコンポーネントとして登録するために、以下の形でapp.jsを編集します。

下記の記述でやりたいこととしては、コンポーネントの作成及びコンポーネントのマウントです。

import './bootstrap';
import {createApp} from 'vue';
import Alpine from 'alpinejs';
import VueDatePicker from './Components/Utility/CsrfToken.vue';
import VueDatePicker from './Components/Utility/DatePicker.vue';
import AddSalesListModal from "./Components/AddSalesListModal.vue";

window.Alpine = Alpine;

Alpine.start();

const app = createApp({});

// グローバルコンポーネント
app.component('csrf-token', CsrfToken);
app.component('add-sales-list-modal', AddSalesListModal);
app.component('date-picker', VueDatePicker);

// #appにマウント
app.mount('#app');

マウント先の指定

app.js でマウント先を id='app' としたため、以下のように blade ファイルにマウント先となる記述を設定します。

<body id="app" class="font-sans antialiased flex flex-col min-h-screen">
~
~
~
</body>

コンポーネントの作成

試しにLaravelで生成されるCSRFトークンを扱うコンポーネントを作成します。

このコンポーネントはaxios等で非同期通信を実装するときなどに重宝されるはずですので、皆さんも作っておくと便利ですよん。
（今回は擬似的にpタグにCSRFトークンを出力していますが、本来はしません

<script>
import { ref, onMounted } from 'vue';

export default function useCsrfToken() {
    const csrfToken = ref('');

    onMounted(() => {
        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        if (token) {
            csrfToken.value = token;
        }
    });

    return csrfToken;
}
</script>

<template>
<p>{{ csrfToken }} </p>
</template>

コンポーネントの呼び出し

以下の通りに記述したらVueで取得したCSRFトークンが出力されているはずですぅぅ

<csrf-token></csrf-token>

Vueにバックエンドのデータを渡したいときには、以下の通りに実装してみてください

// Blade
<csrf-token :test='@json($test)'></csrf-token>

// Vue
<script setup>
import { defineProps, ref } from "vue";

const props = defineProps({
    test: Object,
});
</script>