CODEWITHSUNDEEP
laraveldrop-down-menuvitebreeze
Mohsen Arab
Mohsen Arab

Reputation: 503

User dropdown menu in Laravel breeze does not work [in fresh installation]

I have installed new project in Laravel. After that, I installed Laravel Breeze package.

At first, when I clicked on register link to go to /register Uri, I received the following error: "npm ERR! Missing script : 'build' "

Then, I followed the instruction in "https://stackoverflow.com/questions/72798465/vite-manifest-not-found-at-c-users-hp-example-app-public-build-manifest-json" which says to install "vite" and "laravel-vite-plugin" and then update package.json like this:

  "scripts": {
        "dev": "vite",
        "build": "vite build"
    }

I did them. Then I ran "npm run build". By doing them, Register and Login works perfectly. I could log in successfully. After login, I redirected in /dashboard Uri.

But, in "dashboard", when I clicked on the users avatar (my name title) in the top right corner , drop down menu did not work. The drop down menu supposed to be opened with logout link inside it, but it did not open.

I installed another project and repeated the above process again and again, but drop down menu did not work. My app.blade.php includes @vite(['resources/css/app.css', 'resources/js/app.js'])

I even included JQuery script to the app.blade.php, but It did not work too.

What can I do ? Any suggestions ?

Upvotes: 0

Views: 1593

Answers (2)

Fredrick Adjei Quansah
Fredrick Adjei Quansah

Reputation: 1

This problem is likely to happen when you add LiveWire to your Breeze scaffolding. When you add LiveWire, you will have multipine alpineJS running. To solve this, you will have to remove the import of alpineJS from the app.js. If you remove it, the dashboard and profile page will not have alpineJS for the dropdown. To solve this, add @livewireScripts to your app-layout page.

Upvotes: 0

Mohsen Arab
Mohsen Arab

Reputation: 503

I realized that It is not enough to have @vite(['resources/css/app.css', 'resources/js/app.js']) in app.blade.php.

You should manually add these two to app.blade.php as well:

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

<script src="{{ asset('js/app.js') }}"></script>

I did this and the problem solved .

Upvotes: -1

Related Questions