laravel6 ユーザー認証 ログアウトができない

Question

laravel6 ユーザー認証について
laravel6でユーザ認証を導入しようとし、

$ php artisan ui vue --auth
$ npm install
$ npm run dev
$ php artisan migrate
を行いユーザー登録、ログインまではできたのですが、ログイン後にユーザー名を押すとドロップダウンリストでログアウトできると思うのですが、ユーザ名を押してもドロップダウンリストは表示されず、http://localhost/home から　http://localhost/home#　に変化するだけでデペロッパーツールでもエラーはでていません。

<li class="nav-item dropdown"> <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> {{ Auth::user()->name }} <span class="caret"></span> </a>

                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="{{ route('logout') }}"
                                   onclick="event.preventDefault();
                                                 document.getElementById('logout-form').submit();">
                                    {{ __('Logout') }}
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                    @csrf
                                </form>
                            </div>
                        </li>

他の方の以前の質問で{{ route('logout') }}にPOST送信をしていないといった回答があったのですが、こちらのコードでは送れていると思うのですが、
この場合考えられる不備はどこがありますでしょうか
よろしくお願いいたします。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください

Answer 1

ソースがないので間違っている可能性がありますが、bootstrap.jsでBootstrapのJavaScriptを使うようになっていないものと思われます
前のバージョンのLaravelのプロジェクトテンプレートには含まれていましたのでそれを参考に修正してみてください
こちらのハイライトで表示されている箇所です

Comments

[tapioka28]

回答ありがとうございます!
resorces内のbootstrap.jsを確認したところ教えてくださったハイライトの部分は記述されていませんでした。

window._ = require('lodash');

/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });

だったため

window._ = require('lodash');

window.Popper = require('popper.js').default;

/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/

try {
window.$ = window.jQuery = require('jquery');

require('bootstrap');
} catch (e) {}

/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
ここから下は変更していません。

上記のように変更しました。
デペロッパーツールでネットワークキャッシュの削除して動作確認してみたのですが、エラーも出ず先程と同じ状況です..
後なにか思い当たることがありましたら教えていただけましたら幸いです。
よろしくお願いいたします。

[退会済みユーザー]

npm run devは実行されましたか?

[tapioka28]

retlat様
後れてしまいましたが返信ありがとうございます!
npm run devを行っておりませんでした。
実行しログアウトできるようになりました。
ありがとうございました。
またなにかありましたらご指導いただけましたら幸いです。
宜しくお願い致します。

[退会済みユーザー]

解決したのでしたらヘルプに従い解決ずみにしていただければと思います
https://teratail.com/help#resolve-question