How to Install JQuery in Laravel Vite?

By Hardik Savani November 5, 2023 Category : Laravel

Hey,

Now, let's see a tutorial of how to install jquery in laravel. Here you will learn how to add jquery in laravel. I would like to show you how to install jquery in laravel 10. if you want to see an example of laravel install jquery npm then you are in the right place. Alright, let us dive into the details.

If you want to install jquery using vite in laravel. Then i will help you to explain step by step install jquery with npm vite. so, let's follow the below step to add bootstrap in laravel 10 application.

I will give you following three ways to install jquery in your laravel application. let's see one by one examples.

Output:

Example 1: Laravel Add JQuery using CDN

we can directly use cdn js for jquery and add script tag on head tag as like the bellow. you can see the simple blade file code. here we don't require to download as well.

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 Bootstrap 5 in Laravel 10 - ItSolutionstuiff.com</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()

here, we will download jquery js file and put it into public folder and then we will use asset() helper to use it. you can see the simple blade file code.

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 Bootstrap 5 in Laravel 10 - ItSolutionstuiff.com</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

Here, we will add jquery using npm command. so, let's run following command:

npm install jquery

Next, we need to import jquery in app.js. so, let's add following lines on yout app.js file.

resources/js/app.js

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

Next, we need to add $ in your vite config file. so, let's add it.

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

Next, build npm js and css files using following command:

npm run build

now, we are ready to use jquery using vite. you can see the simple blade file code.

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 - ItSolutionstuiff.com</h1>
              
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>
  
</body>
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

Read Also: How to Read Content from PDF File in Laravel?
http://localhost:8000/

I hope it can help you...

Tags :
Previous

How to Read Content from PDF File in Laravel?
Next

How to Install JQuery UI in Laravel Vite?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares