Install Alpine JS in Metronic
I want to install alpine js in metronic but wherever I import it, it gives error.
How to add it.
I tried
import Apline from 'alpinejs';
in plugins.js export array
'node_modules/alpinejs',
Uncaught SyntaxError: Cannot use import statement outside a module (at plugins.bundle.js:61318:1)
Also cannot do
window.Alpine = Apline;
Alpine.start():
This gives window is undefined.
How can I add alpine js in it.
in Laravel webpack
Replies (3)
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:
npm install alpinejsUpdate webpack.mix.js:
Open your webpack.mix.js file and make sure it includes Alpine.js in the scripts section. Here's an example:
mix.copy("node_modules/alpinejs/dist/alpine.js", "public/js/alpine.js");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:
<script src="{{ mix("js/alpine.js") }}"></script>Initialize Alpine.js:
In your app.js file or any other JavaScript file you are using, initialize Alpine.js:
import Alpine from "alpinejs";
window.Alpine = Alpine;
Alpine.start();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:
npm run devNow, 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.
I have installed it it runs and also included it through plugins.js file. not tried with mix.
It builds and loads script.
But the issue occur when I call
import Alpine from "alpinejs";
window.Alpine = Alpine;
Alpine.start();
it says
Uncaught SyntaxError: Cannot use import statement outside a module (at plugins.bundle.js:61318:1)
when I open webpage.
Or it says Alpine or window not defined.
I tried it in app.js file and many other. same everywhere.
laravel project.
in folders
resources/_keenthemes/*
resources/mix/*
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.
<script src="{{ asset("assets/js/app.js") }}"></script>
