I started a new Laravel project and now Laravel Mix has been replaced with Vite.
I've installed Alpine.js and launched it in the bootstrap.js file but, Alpine.js not recognized in the Laravel blade files and the other JS files.
vite.config
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from "path";
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
resolve:{
alias:{
'~alpine':path.resolve(__dirname,'node_modules/alpinejs'),
}
}
});
app.js
import './bootstrap';
import alpine from "./alpinejs/src/alpine";
console.log(alpine.version);
I add Alpine like the following.
bootstrap.js
import _ from 'lodash';
window._ = _;
import $ from 'jquery';
window.jQuery = window.$ = $
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();