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.
resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
<!-- Styles -->
@vite(['resources/css/app.css','resources/js/app.js'])
<style>
</style>
</head>
Step - 4. Download and integrate jQuery
In this step we will create a directory (directory name js) inside public folder for keeping jQuery file.
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>
</body>
</html>
jQuery Setup is completely done.
Step - 5. Modify app.js file
open app.js file from resources/js folder and paste the bellow code.
resources/js/app.js
import './bootstrap';
//todo:jquery
$(document).ready(function(){
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.
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.
We appreciate your support and are committed to providing you useful and informative content.
We are thankful for your ongoing support