Hello, web developers! in this article, we'll see how to install jquery in laravel 10 vite. In this tutorial, we'll go over how to install jQuery in Laravel 10. You'll learn how to add jQuery to your Laravel application step by step. If you're looking for an example of how to install jQuery using npm in Laravel, you're in the right place. Let's dive into the details.
If you want to install jQuery using Vite in Laravel, I'll guide you through the process step by step. Follow the instructions below to integrate jQuery with npm and Vite in your Laravel 10 application.
I'll provide you with three different methods to install jQuery in your Laravel application. Let's explore each one with examples.
We can directly use the jQuery CDN by adding a script tag to the <head> section of your Blade file. This method allows you to quickly include jQuery without needing to download or install it locally. Below is an example of how to include jQuery using the CDN in your Blade file.
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 class="app">
<main class="container">
<h1> How to Install jQuery in Laravel 10 Vite - Vidvatek</h1>
<button class="btn btn-success">Click Me</button>
</main>
</div>
</body>
<script>
$("button").click(function(){
alert("Thanks");
});
</script>
</html>
In this approach, we will download the jQuery JavaScript file and place it in the public folder of our Laravel application. Then, we'll use the asset() helper to include it in our Blade file. Below is an example of how to implement 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 class="app">
<main class="container">
<h1> How to Install jQuery in Laravel 10 Vite - Vidvatek</h1>
<button class="btn btn-success">Click Me</button>
</main>
</div>
</body>
<script>
$("button").click(function(){
alert("Thanks");
});
</script>
</html>
Now, we'll add jquery using npm command.
npm install jquery
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 the following command.
npm run build
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 class="app">
<main class="container">
<h1> How to Install jQuery in Laravel 10 Vite</h1>
<button class="btn btn-success">Click Me</button>
</main>
</div>
</body>
</html>
You might also like:
- Read Also: How To Add Bootstrap 5 Modal In Laravel 10
- Read Also: How to Display Tooltip in Bootstrap Vue JS
- Read Also: How to Install JQuery UI in Laravel 10 Vite Example
- Read Also: Delete Multiple Records using Checkbox in Laravel 10