【Laravel×Vue.js】装飾一切なしの汎用テンプレート～認証周りからAxiosまで～

はじめに

Laravelで認証機能を実装するにあたり、コマンドを使うと自動でビューが生成されます。

(大変便利な機能ですが。。。)

好みのコンポーネントUIを使おうとするとデフォルトのBootstrap実装に伴うクラスが邪魔だなと感じていたので整理しました。

※関連※

Laravelでアプリ制作する際にしておきたいこと(Vue.js/Sassの実装まで)

ソースコード

共通レイアウト

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の編集

おわりに

効率よくアプリ制作していきたいです。