How to Install jQuery in Laravel 10

Let's dive into a comprehensive guide on integrating jQuery with Laravel. In this tutorial, we will walk you through the process of installing jQuery in Laravel 10. Whether you're seeking an example of Laravel installing jQuery via npm or simply looking to add Bootstrap to your Laravel 10 application, you're in the right place.

I'll provide you with three distinct methods for installing jQuery in your Laravel application. Let's explore each of these approaches one by one.

Example 1: Laravel Add JQuery using CDN

You can easily utilize a CDN for jQuery by adding a script tag to the head section of your Blade file, as demonstrated below. This approach eliminates the need to download jQuery separately:

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>{{ config('app.name', 'Laravel') }}</title>
  
    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  
</head>
<body>
    <div id="app">
  
        <main class="container">
            <h1> How to Install JQuery in Laravel 10?</h1>
            
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>
  
</body>
    <script>
        $("button").click(function(){
            alert("Thanks");
        });
    </script>
</html>

Example 2: Laravel Add JQuery using asset()

In this method, we'll download the jQuery JavaScript file and place it in the public folder of your Laravel project. Then, we'll utilize the asset() helper to include it in your Blade file. Here's an example of how to do this:

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>{{ config('app.name', 'Laravel') }}</title>
  
    <!-- Scripts -->
    <script src="{{ asset('theme/jquery.min.js') }}"></script>
  
</head>
<body>
    <div id="app">
  
        <main class="container">
            <h1> How to Install JQuery in Laravel 10?</h1>
            
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>
  
</body>
    <script>
        $("button").click(function(){
            alert("Thanks");
        });
    </script>
</html>

Example 3: Laravel Vite Add JQuery using NPM

In this method, we will add jQuery using npm. To do this, run the following command:

npm install jquery

Next, we need to import jQuery in the app.js file. Add the following lines to your app.js file:

resources/js/app.js

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

Additionally, we must include the '$' symbol in your Vite configuration file. Let's proceed to add it there.

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

To build the npm JavaScript and CSS files, execute the following command:

npm run build

Now, you are all set to utilize jQuery using Vite. Below is an example of a simple Blade file code to demonstrate its usage:

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">
  
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
  
    <title>{{ config('app.name', 'Laravel') }}</title>
  
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
  
    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
  
    <script type="module">
        $("button").click(function(){
            alert("Thanks");
        });
    </script>
  
</head>
<body>
    <div id="app">
  
        <main class="container">
            <h1> How to Install JQuery in Laravel 10? - TechvBlogs.com</h1>
              
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>
  
</body>
</html>