Laravel, Vue.js メモ – 勉強メモ

環境構築

laravel プロジェクト作成

composer create-project laravel/laravel laravel-vue-app
cd laravel-vue-app

node.jsインストール

Node.jsがインストールされていない場合は、公式サイトからダウンロードしてインストール

viteのvueインストール

Laravel 10ではViteがデフォルトのビルドツールとして使用されているため、Vue CLIは必要ない。代わりに、ViteのVueプラグインを使用する。

viteでvueを使うため vitejs/plugin-vueをインストール

npm install vue@next @vitejs/plugin-vue

viteの設定

vite.config.jsの設定

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',
        },
    },
});

vueプロジェクト作成

ファイル作成

App.vueを作成

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3 + Laravel 10!'
    }
  }
}
</script>

app.jsの修正

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

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

bladeファイルの修正

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 10 + Vue 3</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app"></div>
</body>
</html>

データの流れ

Controller→View(Bladeファイル)→Vue(Vue.jsテンプレート)

Laravel 10とVue 3を使用したアプリケーションでのデータフロー

Controller: データを取得または処理。
View (Bladeファイル): コントローラーからのデータを受け取り、Vue.jsコンポーネントにプロパティとして渡す。
Vue (Vue.jsテンプレート): Bladeから渡されたデータを表示し、ユーザーインタラクションを処理。