Vue3 + laravel10でSPA作成　①環境構築 #初心者

はじめに

全3回にわたり、簡単なToDoリストの作成を行っていきます。
今回の目標はプロジェクト作成～トップページにアクセスするところまでとなります。
ソースコードはUP済ですので、動かない場合にはご参照ください。

前提

・php, npm, composerのパスが通っていること
・xamppのインストール（任意）
※mysqlでローカルホストにDBをたてるために使用します。

プロジェクト作成

１．作成コマンド

任意のディレクトリで以下のコマンドを実行し、プロジェクトを作成します。

composer create-project --prefer-dist laravel/laravel TodoApp

２．各種ライブラリ追加

プロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。
今回はCSSフレームワークにVuetifyを使用します。一番下のコマンドはVuetifyでiconを使用する場合に追加します。

composer require laravel/ui
npm i @vitejs/plugin-vue
npm i vite-plugin-vuetify
npm i vue-router
npm i @mdi/font

３．vite.config.jsの編集

vite(ビルドツール)の設定。
hmrはhot module reloadの略で、コードを修正すると再ビルドをしなくても自動で画面に反映させる仕組みになります。

vite.config.js

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

export default defineConfig({
+     server: {
+         hmr: { host: 'localhost' },
+         host: 'localhost',
+     },

    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
+         vue(),
+         vuetify(),
    ],
});

４．app.jsの編集

エントリポイントとなるapp.jsで使用ライブラリの読み込みを行います。
resources\js\app.jsを開き、以下のように編集します。

app.js

import './bootstrap';
+ import { createApp } from 'vue';
+ import{ createVuetify } from 'vuetify'
+ import App from "../views/App.vue"
+ import '@mdi/font/css/materialdesignicons.css'
+ import 'vuetify/dist/vuetify.min.css'

+ const app = createApp(App);
+ const vuetify = createVuetify();

+ app.use(vuetify) 
+ app.mount('#app');

５．web.phpの編集

localhost:8000以下のURLが何であってもapp.blade.phpを返すようにroutes\web.phpを編集します。

web.php

- Route::get('/', function () {
-     return view('welcome');
- });
+ Route::get('/{any?}', fn() => view('app')) -> where('any', '.+');

６．app.blade.phpの作成

resources\views\welcome.blade.phpを削除し、同フォルダにapp.blade.phpを作成します。
手順５で同一のものを返すように設定したbladeファイルの中身になります。

app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @vite(['resources/css/app.css','resources/js/app.js'])

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Vue Laravel SPA') }}</title>

    <!-- Styles -->
</head>
<body>
<div id="app">
</div>
<!-- Scripts -->
</body>
</html>

７．App.vueの作成

resources\views\App.vueを作成します。
手順６で作成したbladeのdivタグの箇所に埋め込まれます。

<template>
    test
</template>

動作確認

以下のコマンドでサーバとクライアントを起動します。
※私はコマンドプロンプトとVSCodeのターミナルで同時に起動しております。

・npm run dev
・php artisan serve

ブラウザを開きアドレスバーにhttp://localhost:8000を入力し、ページにtestの文字が表示されれば完了です。

#参考にしたサイト
Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編

Vue3 + laravel10でSPA作成 ①環境構築