はじめに
Laravelで認証機能を実装するにあたり、コマンドを使うと自動でビューが生成されます。
(大変便利な機能ですが。。。)
好みのコンポーネントUIを使おうとするとデフォルトのBootstrap実装に伴うクラスが邪魔だなと感じていたので整理しました。
※関連※
ソースコード
共通レイアウト
app.blade.php
ログイン画面
auth/login.blade.php

会員登録画面
auth/register.blade.php

ナビゲーションバー
nav.blade.php
ナビゲーションバーのみ、実装した際に分かりやすいよう、インライン記述で背景色を加えています。
トップ画面
index.blade.php(welcome.blade.php)

Vueコンポーネントを取り込むケース
追記:拡張性を考えてApp.vue(親コンポーネント)を追加しました。
トップ画面
①index.blade.php(welcome.blade.php)
下記を任意の場所に追加
<div id="app"> <App /> </div>
②App.vueの作成
③コンポーネントの編集
components/Example.vue
④app.jsの編集

Axios関連
bootstrap.js
必要以上にコードを記載するとLaravel Mixのコンパイルエラーに繋がったりするので以下のみ。
(当たり前だけどコードは1つ1つ意味を理解したうえで記載していくほうが良いですね。)
window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
参考:windowオブジェクト
ファイルの整理
①Authディレクトリ下の各コントローラのリダイレクト先を”/”に変更
②HomeControllerとviews/home.blade.phpを削除
③web.phpの編集
おわりに
効率よくアプリ制作していきたいです。
コメントを残す