How to setup jQuery with Laravel 10 and vite - WebJourney

How to setup jQuery with Laravel 10 and vite - WebJourney

Setup jQuery with laravel and vite is easier than the other modern framework like Vue, React and Angular. jQuery is a very popular javascript library still in strong use in laravel community now a days. If you are looking how to use jquery with laravel 9/10 and vite then you are in the right article. In this article we will learn how to setup jquery with vite and laravel 10. Don't worry this process is the similar for laravel 9 that means following this way you can also use jquery with  laravel 9 and vite.

We can integrate jquery in our laravel app many ways. We will download jquery and load it from a local public directory. No build action is required.

Keep in mind for laravel 10 we must nedd php >=8.1


Bellow Steps are required


1. Install laravel 10 App

2. Instal NPM Dependencies

3. Use vite derictive to add assets.

4. Download and integrate jQuery

5. Modify app.js file

6. Start development server


Step - 1. Install laravel 10 App


Create a new laravel app using the bellow command

composer create-project laravel/laravel jquery-setup-laravel10-vite


Step - 2. Instal NPM Dependencies


Run the bellow command to install frontend dependencies.

npm install


Step - 3. Use vite derictive to add assets


Open welcome.blade.php file and add app.css and app.js file inside the head section.


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Fonts -->
        <link rel="preconnect" href="">
        <link href=",600&display=swap" rel="stylesheet" />
        <!-- Styles -->


Step - 4. Download and integrate jQuery 


In this step we will create a directory (directory name js) inside public folder for keeping jQuery file.

jquery file location


Now download jQuery from the following link.


LinK:  Click to Download jQuery


After download the jQuery back to the welcome.blade.php and add jquery above the closing <body/> tage.

        <script src="{{ asset('js/jquery.js') }}"></script>


jQuery Setup is completely done.


Step - 5. Modify app.js file


open app.js file from resources/js folder and paste the bellow code.

app.js file location


import './bootstrap';

      alert('jQuery Works fine');


Step - 6. Start development server


Now open your terminal and run the following command to compile application css and js assets.

npm run dev

npm run dev compile the app.css and app.js file. Don't close the command.


Finally open another terminal and run the artisan development server to test jQuery works or not.

php artisan serve



Now copy the url and hit in the browser. Everything works fine.


application output


Hope this will help you a lot. Thanks




If you like what you are reading, please think about buying us a coffee as a token of appreciation.

Buy Me A Coffee

We appreciate your support and are committed to providing you useful and informative content.

We are thankful for your ongoing support 



  • Share This: