Laravelにvue3を組み込む

2024.06.21 09:00

2024.06.17 09:22

laravelプロジェクトにvue3を組み込んでみました。
まずは、vite用のvueプラグインをインストール。

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

そうするとvite.config.jsができるので、そこに設定を追加。
こんな感じにします。

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

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

次にresources/js/app.jsをこんな感じにします。

import './bootstrap';

import {createApp} from 'vue/dist/vue.esm-bundler.js'

const app = createApp({})
app.mount('#app')

基本的な設定はここまで。
次はviewにvueを読み込ませます。
resources/views/layouts/app.blade.phpにviteを追加します。

<html lang="ja">
<head>
  
</head>
<body>

<div id="app">

コンテンツ

</div>

@vite('resources/js/app.js')
</body>
</html>

こんな感じで、body閉じタグの直前に@viteで読み込んであげます。
これで勝手に読み込んでくれる他、キャッシュ問題もクリアしてくれるようです。

また、コンテンツを<div id=”app”></div>で囲むのも大事みたいですね。
この中じゃないと、vueが動かないということみたいです。

まずはここまでで実行。

npm run dev

エラーが出なければOK！
実際の処理は書いてないので、画面上では変化ないですね。
では実際にvueのコンポーネントを作ってみます。
「resources/js/vue/TestComponent.vue」というファイルを作って、以下のコードを入れていきます。

<template>
  <div>
    Vue!!!
  </div>
</template>

ただ「Vue!!!」と表示するだけのコンポーネントです。

次にこれを読み込めるようにします。
app.jsにコンポーネント読み込み指定を追加します。

import './bootstrap';

import {createApp} from 'vue/dist/vue.esm-bundler.js'
import TestComponent from './vue/TestComponent.vue'

const app = createApp({})
app.component('test-component', TestComponent);
app.mount('#app')

こんな感じです。
importで読み込んで、app.componentでviewで使えるようにします。
この時に注意することが、app.componentの名前はキャメルケースじゃなくて、ケバブケースにしなくてはいけないみたいです。

次にこれを読み込む場所を指定します。
さっきのlayouts/app.blade.phpに追加してみます。

<html lang="ja">
<head>
  
</head>
<body>

<div id="app">

コンテンツ
<test-component></test-component>

</div>

@vite('resources/js/app.js')
</body>
</html>

npm run devが走っているので、すでに更新されたはずですね。
これで無事表示されました！

今回は以上です！

Laravelにvue3を組み込む

Category

Tag