Laravel 11 and Vite: How to Set Up jQuery Easily

Install JQuery

npm install jquery

Change in resources/js/app.js

import jQuery from 'jquery';
window.$ = jQuery;

Also change vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '$': 'jQuery'
        },
    },
});

Create a NPM Build for laravel 11

npm run build

Adding in head tage Laravel app.blade.php or welcome.blade.php

    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

    <script type="module">
        $("button").click(function(){
            alert("Thanks");
        });
    </script>

Also body Change

<button class="btn btn-success">Click Me</button>

Now running laravel app

php artisan serve

if using script tag then using module

<script type="module">
</script>

don’t use this

<script type="text/javascript">
</script>

Did you know you can clap multiple times? 🥰 If this story added value to your day, please show your support by giving it a 👏 clap, sharing it with others, or even sponsoring my work. Your appreciation means the world to me!

Sponsor @bhargavraviya on GitHub Sponsors

Raviya Technical is creating flutter open source project for starter kit