Morioh
Login
Thadée Cisowski

Thadée Cisowski

4 months ago

Comment installer jQuery dans Laravel 10

Dans ce tutoriel, nous apprendrons comment installer jQuery dans Laravel 10. Dans ce tutoriel, nous vous proposerons trois méthodes distinctes pour installer jQuery dans votre application Laravel. Apprenez à utiliser NPM ou Vite pour ajouter de manière transparente jQuery et améliorer les interactions de votre interface utilisateur.

  • Méthode 1 : Laravel ajoute JQuery à l'aide de CDN
  • Méthode 2 : Laravel ajoute JQuery à l’aide d’asset()
  • Méthode 3 : Laravel Vite Ajouter JQuery à l'aide de NPM

Méthode 1 : Laravel ajoute JQuery à l'aide de CDN

Vous pouvez facilement utiliser un CDN pour jQuery en ajoutant une balise de script à la section head de votre fichier Blade, comme illustré ci-dessous. Cette approche élimine le besoin de télécharger jQuery séparément :

ressources/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 JQuery in Laravel 10?</h1>
            
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>
  
</body>
    <script>
        $("button").click(function(){
            alert("Thanks");
        });
    </script>
</html>

Méthode 2 : Laravel ajoute JQuery à l’aide d’asset()

Dans cette méthode, nous allons télécharger le fichier JavaScript jQuery et le placer dans le dossier public de votre projet Laravel. Ensuite, nous utiliserons l' asset()assistant pour l'inclure dans votre fichier Blade. Voici un exemple de la façon de procéder :

ressources/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 JQuery in Laravel 10?</h1>
            
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>
  
</body>
    <script>
        $("button").click(function(){
            alert("Thanks");
        });
    </script>
</html>

Méthode 3 : Laravel Vite Ajouter JQuery à l'aide de NPM

Dans cette méthode, nous ajouterons jQuery en utilisant npm. Pour ce faire, exécutez la commande suivante :

npm install jquery

Ensuite, nous devons importer jQuery dans le app.jsfichier. Ajoutez les lignes suivantes à votre app.jsfichier :

ressources/js/app.js

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

De plus, nous devons inclure le symbole « $ » dans votre fichier de configuration Vite. Commençons par l'ajouter ici.

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

Pour créer les fichiers npm JavaScript et CSS, exécutez la commande suivante :

npm run build

Maintenant, vous êtes prêt à utiliser jQuery à l’aide de Vite. Vous trouverez ci-dessous un exemple de code de fichier Blade simple pour démontrer son utilisation :

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

Exécutez l'application Laravel :

Une fois que vous avez terminé toutes les étapes nécessaires, vous pouvez exécuter votre application Laravel en tapant la commande suivante et en appuyant sur Entrée :

php artisan serve

Maintenant, ouvrez votre navigateur Web et entrez l'URL fournie pour afficher le résultat de votre application :

http://localhost:8000

Dans ce didacticiel, vous avez appris trois méthodes distinctes pour installer jQuery dans votre application Laravel de la manière la plus simple possible.

1.15 GEEK