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'),
        }
    }
});

enter image description here

app.js

import './bootstrap';
import alpine from "./alpinejs/src/alpine";
console.log(alpine.version);

enter image description here

CodePudding user response：

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();