Install Alpine JS in Metronic

This is the simplified version.

1. Create a new file in and add below alphine init code: starterkit\resources\mix\common\app.js

import Alpine from "alpinejs";

window.Alpine = Alpine;
Alpine.start();

2. Update in webpack.mix.js file by adding this line:

mix.js('resources/mix/common/app.js', `public/assets/js/app.js`);

3. Run npm run dev.

4. Include the generated JS file starterkit\public\assets\js\app.js in your blade file.

To integrate Alpine.js into Metronic using Laravel Mix (assuming you are using Laravel and webpack), you can follow these steps:

Install Alpine.js:
Run the following command in your terminal to install Alpine.js:

Update webpack.mix.js:
Open your webpack.mix.js file and make sure it includes Alpine.js in the scripts section. Here's an example:


Include Alpine.js in Your Blade File:
Open the blade file where you want to use Alpine.js and include the script. For example, in your resources/views/layouts/app.blade.php:


Initialize Alpine.js:
In your app.js file or any other JavaScript file you are using, initialize Alpine.js:


Make sure this code comes before any other JavaScript that may rely on Alpine.js.

Compile Assets:
Run the following command to compile your assets:


Now, Alpine.js should be integrated into your Metronic project. Make sure to clear your browser cache and refresh the page.

If you encounter any issues, ensure that your webpack configuration is set up correctly and that there are no conflicts with other JavaScript libraries.