Laravel10でVue.js＋Vite環境を作る

2023/04/11 19:45 Laravel

Laravel10でVue3とViteの環境を作った作業ログです。

Laravelプロジェクト作成

プロジェクト作成は通常通りです。

 composer create-project laravel/laravel laravel-vite

今回は10.6.2がインストールされました。

Vueのインストール

以下のコマンドを実行します。

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

vite.config.jsの編集

vite.config.jsを以下のように編集します。

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

export default defineConfig({
　plugins: [
　　laravel(['resources/js/app.js']),
　　vue({
　　　template: {
　　　　transformAssetUrls: {
　　　　　base: null,
　　　　　includeAbsolute: false,
　　　　},
　　　},
　　}),
　],
});

Viteの起動

Vue.jsの起動以下のコマンドを実行します。

npm run dev

URLが表示されるのでブラウザで開きます。
今回は「http://localhost:5173/」でした。
トップページが表示されました。
なお、Laravel自体は動いてないので別途Laravelも起動させる必要があります。

Laravelの投稿一覧