Reading Time: 5 minutes

486 Views

Integrating jQuery into Laravel adds a powerful front-end scripting capability, allowing developers to manipulate DOM elements and handle client-side interactions seamlessly. In this tutorial, we’ll guide you through the process of installing and using jQuery within a Laravel application.

This short tutorial structure provides step-by-step guidance on installing jQuery in a Laravel project and offers a foundation for utilizing jQuery within Laravel’s Blade views.

Here, you will see two different methods to do to use jQuery in laravel,

Using CDN Link or File from local setup
Using Laravel Vite Add JQuery using NPM

Let’s get started.

Laravel Installation

Open terminal and run this command to create a laravel project.

composer create-project laravel/laravel myblog

It will create a project folder with name myblog inside your local system.

To start the development server of laravel –

php artisan serve

URL: http://127.0.0.1:8000

Assuming laravel already installed inside your system.

Example #1: Laravel Add JQuery using CDN

Suppose you have any view blade template file site.blade.php. The code of that file as,

<!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">
            <h3> How to Install Bootstrap 5 in Laravel 10</h3>
            
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>
  
</body>
    <script>
        $("button").click(function(){
            alert("Welcome To Online Web Tutor");
        });
    </script>
</html>

Here, you can see we have added a CDN link of jQuery to use.

Example #2: Laravel Add JQuery using asset()

Using jQuery library from local folder of application by asset() helper function of laravel.

<!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">
            <h3> How to Install Bootstrap 5 in Laravel 10</h3>
            
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>
  
</body>
    <script>
        $("button").click(function(){
            alert("Welcome To Online Web Tutor");
        });
    </script>
</html>

We used asset() helper function to add local jquery.min.js file from application’s folder.

Example #3: Laravel Vite Add JQuery using NPM

This is the most recommendation by which you can use jquery in application.

Step #1

Install jquery via NPM

npm install jquery

Next, we need to import jquery in app.js.

Step #2

Open this file from resources/js folder. Add these lines of code into it,

//...

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

Step #3

Next, we need to add $ in your vite config file.

Open vite.config.js file from project root.

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: [{
            // this is required for the SCSS modules
            find: /^~(.*)$/,
            replacement: '$1',
            '$': 'jQuery' // Added here
        }, ],
    },
});

Next, build npm js and css files using this command.

npm run build

Now, you can use any concept of jquery.

<!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("Welcome To Online Web Tutor");
        });
    </script>
  
</head>
<body>
    <div id="app">
  
        <main class="container">
            <h3>How to Install JQuery in Laravel</h3>
              
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>
  
</body>
</html>

Application Testing

Run this command into project terminal to start development server,

php artisan serve

That’s it.

We hope this article helped you to learn about How To Install and Use jQuery in Laravel Example Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.