28-Jun-2023
.
Admin
Hi dev,
Let's now look at a guide on installing Jquery in Laravel. You may learn here how to integrate JQuery with Laravel. I'll demonstrate how to install jQuery in Laravel 10 for you. You have come to the right place if you want to view an example of laravel install jquery npm. Okay, let's get into the specifics.
If you want to use Laravel to install Jquery. Then I'll assist you in understanding how to install Jquery using npm vite step by step. In order to add bootstrap to a Laravel 10 application, let's follow the steps below.
I will give you following three ways to install jquery in your laravel application. let's see one by one examples.
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</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</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:
http://localhost:8000/
I hope it can help you...
#Laravel 10
