サクサク行きます。
laravelのインストール
ララベルをイントールします。
composer create-project laravel/laravel --prefer-dist laravel8_vue3
npm install
依存関係をインストールします。
npm install
vue3をインストール
npm install vue@next --save-dev
vue routerもインストール
npm install vue-router@4
@4をつけないと、'vue3'と互換性のないのがインストールされちゃう。
webpackの編集
vue()をつけないとコンパイルでエラーが発生します。
vue()を追加
mix.js('resources/js/app.js', 'public/js').vue() //ここ
.postCss('resources/css/app.css', 'public/css', [
//
]);
### コンポーネントを作成
resources/js/components/ExampleComponent.vueを作成します。
resources/js/components/ExampleComponent.vue
<template>
<div>Hello Vue3</div>
</template>
中身はご自由に。
route.jsの作成
ルーティングを記述するファイルを作る。（resources/js/routes.js）
resources/js/routes.js
import ExampleComponent from './components/ExampleComponent.vue';
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: "/",
component: ExampleComponent,
name:'home',
},
];
const router = createRouter({
routes, // short for `routes: routes`
history: createWebHistory(),
})
export default router;
vue-routerもバージョン4になって、記述方法が少し変わっているので注意。
app.jsにを編集
app.js
require('./bootstrap');
import router from "./routes";
import ExampleComponent from './components/ExampleComponent.vue';
import { createApp } from 'vue';
const app = createApp({
components: {
ExampleComponent
}
}).mount('#app');
こんな感じにすればあと少し。
web.phpのルーティングを編集
web.php
Route::get('/{any?}', function () {
return view('welcome');
})->where('any', '^(?!api\/)[\/\w\.-]*');
welcome.phpの編集
<head>
<script src="{{ asset('js/app.js') }}" defer></script> //追加
<head>
<body>
~省略~
<div id="app">
<router-view></router-view>
<div>
</body>
これで完成です。
おしまい！