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

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

• javascript
• laravel
• vite
• alpine.js

Share Improve this question Follow edited Jul 22, 2022 at 1:11 user633440 asked Jul 21, 2022 at 20:06 hossein darvishihossein darvishi 4111 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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