Laravelのインストール

下記コマンドでLaravelをインストール。
今回はバージョン9.19がインストールされました。

$ composer create-project --prefer-dist laravel/laravel vite-test
cd vite-test

package.jsonを開いてviteが含まれていることを確認しましょう。

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.0.0"
    }
}

確認できたらモジュールをインストール

$ yarn

動作確認

何も設定していない状態で動作確認してみましょう。

app.jsを次のように書き換えます。
これはidがappの要素にテキストを表示する簡単なプログラムです。

resources/js/app.js

document.getElementById('app').textContent = 'Hello Vite !';

初期表示されるビューファイルであるwelcome.blade.phpも編集します。
idがappの要素を追加したことと@viteディレクティブを使用してアセットパスを指定しています。
publicの出力先パスではなく、ビルド前のパスになるので注意してください。

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="ja">
	<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'])
	</head>
	<body>
		<div id="app"></div>
	</body>
</html>

Viteの開発サーバーを起動します。

$ yarn run dev

Laravelも動かすようにする必要があります。
今回はビルドインサーバーを使用します。

$ php artisan serv

http://localhost:8000にアクセスして「Hello Vite !」が表示されていることを確認してください。

TypeScriptを使う

次はTypeScriptを扱えるようにしてみます。
先ほど作成たapp.jsファイルとディレクトリをtsにリネームして、ファイルを下記のように編集します。

resources/ts/app.ts

document.getElementById('app')!.textContent = 'Hello Typescript !';

vite.config.jsのresources/js/app.jsとなっていたところを書き換えます。

vite.config.js

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

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

welcome.blade.phpの@viteのパスも変更しましょう。

resources/views/welcome.blade.php

@vite(['resources/css/app.css', 'resources/ts/app.ts'])

再度画面を確認して「Hello Typescript !」が表示されていることを確認してください。

Reactを使う

Reactを動かすのに必要なモジュールをインストールします。

$ yarn add -D react react-dom @types/react @types/react-dom @vitejs/plugin-react @vitejs/plugin-react-refresh

app.tsをapp.tsxに変更してReact動作確認ようのファイルを作成します。

resources/ts/app.tsx

import React from 'react'
import { createRoot } from 'react-dom/client'

const App = () => {
	return <h1>Hello React !</h1>
}

const root = createRoot(
	document.getElementById('app') as HTMLElement
)
root.render(<App />)

vite.config.jsはパスの変更の他Reactの部分を追加する。

vite.config.js

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

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

welcome.blade.phpの@viteのパスも変更しましょう。

resources/views/welcome.blade.php

@viteReactRefresh
@vite(['resources/css/app.css', 'resources/ts/app.tsx'])

エイリアスの設定

インポートするときtsディレクトリのルートからパス指定したいですよね。
その場合はエイリアスを設定します。

vite.config.js

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

export default defineConfig({
	plugins: [
		laravel({
			input: ['resources/css/app.css', 'resources/ts/app.tsx'],
			refresh: true,
		}),
		react()
	],
	resolve: {
        alias: {
            '@': '/resources/ts',
        },
    },
});

これで@を指定すると/resources/tsからパスが指定されます。

import { Title } from '@/components/Title'

ただこれだけだとVSCodeで開くとエラー表示になりますので、tsconfig.jsonも作成します。

vite.config.js

{
	"compilerOptions": {
		"baseUrl": "./resources/ts",
		"paths": {
			"@/*": ["*"]
		}
	}
}

ビルド

開発が終わったら最後にビルドしてファイルに書き出します。

$ yarn run build

ファイルがpublic/build/assetsに書き出されていることを確認してください。
この状態ならVite開発サーバーを閉じても動作確認できると思います。