どうもきよです！
今回はLaravel6にVueを導入からSPAにするまでの方法をメモします。
環境は下記です。
◇環境 ・Laravel6. ・Vue 2.5 ・VueRouter 3.1
スポンサーリンク
１.Vueをインストール
Laravel6では、Vueをインストールするときに、
「laravel/ui」というパッケージが必要になります。
下記を実行しパッケージのインストールをします。
composer require laravel/ui --dev
パッケージがインストールできたら、VueとVueRouterを入れていきます。
下記を実行。
php artisan ui vue npm install vue-router npm install
これで必要なものは揃いましたので、
SPAの設定に移ります。
２.SPAの設定
SPAの設定に必要な手順は下記です。
1.web.phpの修正 2.app.blade.php作成（ファイル名は任意） 3.router.js作成 4.app.jsの修正
1.web.phpの修正
web.phpを下記のように設定します。
Route::get('/{any}', function () {
return view('app');// 今回はapp.blade.phpを常に表示するのでapp
})->where('any', '.*');
※ファイル名に合わせてview()の中は修正してください
2.app.blade.php作成（ファイル名は任意）
SPAはJSで表示を一部切り替えるだけなので、基本はBladeファイル一枚。
<html>
<head></head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="js/app.js"></script>
</body>
</html>
※<router-view>の箇所が、Vueコンポーネントで切り替わる
3.router.js作成
今回は、routerの設定はrouter.jsに書くようにしました。
(app.js内に書いちゃっても大丈夫です)
import Vue from 'vue';
import VueRouter from 'vue-router';
// component import
import Hoge from './components/ExampleComponent.vue';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history', // URLに#が付くのを防ぐ
routes: [
{path: '/', component: Hoge}
]
});
export default router;
※mode: ‘history’をつけると、 URLの「#」が付かなくなります。
4.app.jsの修正
app.jsにrouterの設定を読み込ませます。
require('./bootstrap');
window.Vue = require('vue');
import router from './router.js';
const app = new Vue({
el: '#app',
router
});
最後に npm run dev を実行すれば完了です。
「/hoge」にアクセスすると、ExampleComponent.vue
の内容が出てるはずです。
それでは！
以上、よろしくお願いいたします。