JavaScript - Vue.js - 設定

1.　概要

2.　vite 設定

3.　Laravel 設定

4.　Vue 設定

1.　概要

　「vite」が「Vue」プラグインを読み込むようにします。

2.　設定

　前ページの手順で、インストールしておくと、プロジェクトルートに。


vite.config.js


　というファイルが作成されています。
　これを編集します。
　プロジェクト所有者権限で。


vi vite.config.js


　デフォルトで下記のようになっています。


import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});


　下記のように編集します。
　3行目と11行目以下を追加する感じですね。


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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js',
        },
    },
});


3.　Laravel 設定

　ここは、「Laravel」での設定になりますが。


vi resources/js/app.js


　デフォルトでは。


import './bootstrap';


　のみ。


import './bootstrap';

import { createApp } from 'vue';
import SidebarAds from './components/SidebarAds.vue';

const app = createApp({});

app.component('sidebar-ads', SidebarAds);

app.mount('#app');


　「SidebarAds」や「sidebar-ads」というのは、個別の名前になります。
　作成するコンポーネントをインポートして、「sidebar-ads」という名前で登録。
　アプリケーションを「#app」という要素にマウント（紐付け）して、「Blade」のどこからでも呼び出せる状態（グローバル）にします。

4.　Vue 設定

　「Vue」の設定と言いますか。
　新しく「resources/js/components/」ディレクトリを作成し、その中に「SidebarAds.vue」という前項のファイル名で「Vue」コードを作成します。


mkdir -p resources/js/components
vi resources/js/components/SidebarAds.vue


　ここでは、「SidebarAds.vue」と「Laravel」の「.blade.php」の編集は、いったん割愛しておいて。
　ファイルを作成したら。


npm run dev


　これは、およそ下記のような表示が出ます。
　（実際には、もっとカラフル）


  VITE v5.4.19  ready in 2350 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

  LARAVEL v10.48.29  plugin v1.3.0

  ➜  APP_URL: http://localhost


　上記は、Ctrl+C で止めます。

　次にビルド。


npm run build


　上記は、「.vue」の更新の都度実行。
　およそ下記のような出力になります。


> build
> vite build

vite v5.4.19 building for production...
✓ 63 modules transformed.
public/build/manifest.json              0.34 kB x gzip:  0.17 kB
public/build/assets/app-BpsCziqS.css    0.14 kB x gzip:  0.12 kB
public/build/assets/app-l0sNRNKZ.js     0.00 kB x gzip:  0.02 kB
public/build/assets/app-CtV87gof.js   211.92 kB x gzip: 79.55 kB
✓ built in 1.57s


　これで、仕掛けが動くはず・・・。
　と、動作までは確認したのですが、結局今回（2026年5月28日）は、「Vue.js」は使用せず、「resources/js/app.js」内に仕掛けを書いて、実行するようにしました。