SPA – エンジニア見習い https://otonan-syusyoku.work 三流プログラマー Mon, 15 Apr 2024 14:08:12 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://otonan-syusyoku.work/wp-content/uploads/2023/10/cropped-名称未設定のデザイン-16-32x32.png SPA – エンジニア見習い https://otonan-syusyoku.work 32 32 LaravelにVueコンポーネントをバインドする方法 https://otonan-syusyoku.work/archives/1720 https://otonan-syusyoku.work/archives/1720#respond Mon, 15 Apr 2024 14:06:40 +0000 https://otonan-syusyoku.work/?p=1720 Laravelプロジェクトを運用している方が jQuery を卒業して Vue または React を導入したい！という悩みに直面する事はしばしばあると思います。

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

環境

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

やりたいこと

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

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

手順

Let`s GO

なにわともあれ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>

最後に

SPAカッコいいから時間さえあればSPA化したい。

]]> https://otonan-syusyoku.work/archives/1720/feed 0