このページについて
laravel sailを使ってlaravel10 + vue3.js + postgresSQL環境を作る方法を記載します。
環境
- WSL2
- DockerDesktop
laravelのインストール
DockerDesctopを起動し、コマンド操作でlaravelをインストールします。
ここで設定したいサービスをwithというクエリ文字列変数を使って、新しいアプリケーションのdocker-compose.ymlファイルで設定するサービスを選択できます。
今回は、pgsql（postgresSQL）、mailpitを指定します。
curl -s "https://laravel.build/example-app?with=pgsql,mailpit" | bash
※example-appは任意の名前に変更可能。
シェルエイリアスの設定
以後、Sailを起動するコマンドのエイリアスが登録されている前提で記述します。
Viteの設定
ViteでVue.jsを利用するために@vitejs/plugin-vueのインストールを行います。
sail npm install @vitejs/plugin-vue --save-dev
@vitejs/plugin-vueのインストールが完了したらvite.config.jsにvueを利用するための追加設定を行います。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
+ import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [
+ vue(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
npm installコマンドを実行してJavaScriptのパッケージのインストールを行います。
sail npm install
npm run devコマンドを実行し、viteの開発サーバを起動します。
sail npm run dev
app.jsファイルの読み込み
app.jsファイルを読み込むapp.blade.phpを作成してみます。
パスを指定します。
// デフォルトをコメントアウト
// Route::get('/', function () {
// return view('welcome');
// });
Route::get('/', function () {
return view('app');
});
resources/views/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">
<title>Laravel</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
</body>
</html>
※headタグ内はデフォルトのresources/views/welcome.blade.phpに以下を追記したのみです。
@vite(['resources/css/app.css', 'resources/js/app.js'])
※styleタグは一旦無しで良いと思います。
Laravelの開発サーバを起動します。
sail artisan serve
http://localhost/を確認します。
ブラウザは何も表示されていませんが、
ブラウザのデベロッパーツールを見ると、app.cssとapp.jsファイルにアクセスしていることを確認できました。
vueファイルを表示する
試しにresources/js/App.vueを以下のように作成します。
<template>
<h1>Hello World</h1>
</template>
resources/js/app.jsにて、作成したApp.vueをimportしてcreareAppの引数に設定します。
createApp 関数で新しいアプリケーションのインスタンス を作成することができます。
// 略
+ import { createApp } from "vue";
+ import App from "./App.vue";
+ const app = createApp(App);
+ app.mount("#app");
http://localhost/を確認すると、App.vueで記述した内容が表示されました！
下記のコンソールエラーが出る場合があります。
- 0.0.0.0:5173/@vite/client net::ERR_ADDRESS_INVALID
- 0.0.0.0:5173/resources/css/app.css net::ERR_ADDRESS_INVALID
- 0.0.0.0:5173/resources/js/app.js net::ERR_ADDRESS_INVALID
その場合、public/hotを以下のように書き換えてください。
+ http://localhost:5173
- http://0.0.0.0:5173