Hello, web developers! In this article, we'll see how to install jquery ui in laravel vite. This article provides a detailed guide on how to install jQuery UI in Laravel 10. You'll learn how to add jQuery UI to your Laravel application step by step. We will cover how to install jQuery UI using npm and Vite in Laravel 10.
If you're looking to integrate jQuery UI, including the Datepicker widget, into your Laravel 10 application using Vite, this guide will walk you through the process. Follow the steps below to add jQuery UI with npm and Vite.
I'll present three different methods to install jQuery UI in your Laravel application. Let's explore each method with examples.
Laravel 10 Vite Install JQuery UI Example
We can directly use the jQuery UI CDN by adding a script tag to the <head> section of your Blade file. This method allows you to quickly include jQuery UI without needing to download or install it locally. Below is an example of how to include jQuery UI 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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
</head>
<body>
<div id="app">
<main class="container">
<h1> How to Install JQuery UI in Laravel 10 Vite Example - Vidvatek</h1>
<input type="text" class="datepicker" name="date">
</main>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( ".datepicker" ).datepicker();
});
</script>
In this method, we will download the jQuery UI JavaScript file and place it in the public folder of our Laravel application. Then, we will use the asset() helper to include it in our Blade file. Below is 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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="{{ asset('theme/jquery-ui.css') }}">
</head>
<body>
<div id="app">
<main class="container">
<h1> How to Install JQuery UI in Laravel 10 Vite Example - Vidvatek</h1>
<input type="text" class="datepicker" name="date">
</main>
</div>
</body>
</html>
<script src="{{ asset('theme/jquery-3.6.0.js') }}"></script>
<script src="{{ asset('theme/jquery-ui.js') }}"></script>
<script>
$( function() {
$( ".datepicker" ).datepicker();
});
</script>
Now, we'll add jquery ui using npm command.
npm install jquery-ui --save-dev
resources/js/app.js
import 'jquery-ui/external/jquery-1.8.3/jquery.js'
import 'jquery-ui/dist/jquery-ui.min.js'
Next, we need to import css file in app.scss file.
resources/sass/app.scss
@import 'jquery-ui/themes/base/all.css';
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">
</head>
<body>
<div class="app">
<main class="container">
<h1> How to Install JQuery UI in Laravel 10 Vite Example - Vidvatek</h1>
<input type="text" class="datepicker" name="date" autocomplete="false">
</main>
</div>
</body>
</html>
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<script type="module">
$('.datepicker').datepicker();
</script>
You might also like:
- Read Also: Laravel 10 Install Font Awesome Icons Example
- Read Also: Laravel 10 Add Flatpickr DateTime Exmple
- Read Also: How to Add Days in Date in React Native Calendar
- Read Also: How to Get Current Date and Time in Python