1. 必要な依存関係のインストール

既存の CakePHP5 プロジェクトディレクトリに移動し、必要な依存関係をインストールします。

cd your_existing_cakephp5_project_directory
npm init -y
npm install vue

2. Webpack の設定

Vue.js を使用するために、Webpack の設定を行います。

2.1 Webpack のインストール

npm install --save-dev webpack webpack-cli webpack-dev-server vue-loader@next vue-template-compiler css-loader style-loader

2.2 Webpack の設定ファイルを作成

プロジェクトのルートディレクトリに webpack.config.js を作成し、以下の内容を追加します。

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'webroot/js'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: JSON.stringify(true),
      __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false)
    })
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler.js'
    },
    extensions: ['.js', '.vue', '.json']
  },
  devServer: {
    static: path.join(__dirname, 'webroot'),
    compress: true,
    port: 9000
  }
};

3. Vue.js アプリケーションの作成

3.1 `src` ディレクトリに `main.js` を作成します。

src/main.js:

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

createApp(App).mount('#app');

3.2 `src` ディレクトリに `App.vue` ファイルを作成します。

src/App.vue:

<template>
  <div id="app" class="container">
    <h1 class="my-3">Hello Vue with Bootstrap 5</h1>
    <button class="btn btn-primary">Bootstrap Button</button>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* スタイルを追加する場合はここに記載 */
</style>

4. ビルドスクリプトの設定

package.json の scripts セクションにビルドスクリプトを追加します。

"scripts": {
  "build": "webpack",
  "start": "webpack serve"
}

5. ビルドとサーバーの起動

以下のコマンドでビルドを実行し、開発サーバーを起動します。

npm run build
npm start

6. CakePHP ビューへの組み込み

CakePHP のビューで生成された bundle.js を読み込むようにします。以下のレイアウトファイルに bundle.js のスクリプトタグを追加します。

templates/layout/default.php:

<!DOCTYPE html>
<html lang="ja">

<head>
  <?= $this->Html->charset() ?>
  <?= $this->Html->meta('icon') ?>
  <?= $this->Html->meta('format-detection', 'telephone=no') ?>
  <?= $this->element('header/meta') ?>
  <title><?= $this->Page->getPageTitle($page_name) ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <?= $this->Html->css('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css', [
    'integrity' => 'sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN',
    'crossorigin' => 'anonymous'
  ]) ?>
  <?= $this->Html->css('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css', [
    'integrity' => 'sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ==',
    'crossorigin' => 'anonymous',
    'referrerpolicy' => 'no-referrer'
  ]) ?>
  <?= $this->fetch('meta') ?>
  <?= $this->fetch('css') ?>
</head>

<body>
  <?= $this->element('header') ?>
  <?= $this->Flash->render() ?>

  <main id="main_container">
    <div id="app"></div> <!-- この要素が必要 -->
    <?= $this->fetch('content') ?>
    <?= $this->element('footer_bp') ?>
  </main>

  <?= $this->Html->script('https://code.jquery.com/jquery-3.7.1.min.js', [
    'block' => 'script',
    'integrity' => 'sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=',
    'crossorigin' => 'anonymous'
  ]) ?>
  <?= $this->Html->script('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js', [
    'block' => 'script',
    'integrity' => 'sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==',
    'crossorigin' => 'anonymous',
    'referrerpolicy' => 'no-referrer'
  ]) ?>
  <?= $this->Html->script('bundle.js', ['block' => 'script']) ?><!-- この要素が必要 -->
  <?= $this->fetch('script') ?>
  <?= $this->element('footer_tag') ?>
</body>
</html>