Comment utiliser Laravel avec Vue.js 3

Vue.js est l'un des cadres JavaScript les plus utilisés pour créer des interfaces Web et des applications à page unique. Avec Laravel, il devient un outil de développement très puissant.

Pour le développement d'applications web, un outil largement utilisé est vuejs, et dans cet article nous verrons comment l'installer et l'utiliser avec Laravel. Le framework Vue.js était definito cadre progressif car il est spécialisé dans la création de vues HTML et vous permet de l'intégrer facilement aux composants d'autres bibliothèques et projets.

Le succès de Vue.js tient aussi au choix de Laravel pour le proposer comme framework frontal, conduisant ainsi à la sortie de la version 2.0.

Création de projet Laravel

La première étape consiste bien sûr à créer un nouveau projet dans Laravel. Si vous en avez un sur votre ordinateur, utilisez-le ou vous pouvez en créer un nouveau juste pour ce tutoriel.

composer create-project laravel/laravel guide-laravel-vue

Après le démarrage du projet, vous devrez installer le npm dépendances. Pour ce faire, exécutez la commande suivante dans le répertoire de votre projet :

npm install

Une fois les dépendances installées, exécutez la commande suivante pour compiler les ressources et vous assurer que tout fonctionne vraiment :

npm run dev

La commande npm run dev effectue une variété de vérifications et de constructions, en particulier Laravel Mix compiler le fichier resources/js/app.js et le dossier resources/css/app.css dans les dossiers public/js/app.js e public/css/app.css.

Une fois terminé, si tout fonctionne bien, vous verrez quelque chose comme ceci :

Installation de Vue.js

Après avoir préparé le projet Laravel, nous pouvons procéder à l'installation de Vue.js 3. Pour ce faire, exécutez la commande suivante dans votre répertoire de projet :

npm install --save-dev vue

Cela installera Vue.js comme l'une des dépendances de développement. Après avoir compilé les actifs, votre fichier JavaScript de production sera autonome, il vous suffit donc d'installer Vue.js en tant que dépendance de développement.

Pour vous assurer que Vue 3 a été installé correctement, ouvrez le fichier package.json (présent à la racine du projet) et recherchez "vue" dans la section "devDependencies":

// package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.37"
    }
}

Comme vous pouvez le voir, le numéro de version indique que Vue.js 3 a été installé. 

Premier essai de Vue.js

Dans votre fichier welcome.blade.php mettez le code suivant :

<div id="vue-app">
    {{ text }}
</div>
<script>
window.vueApp = new Vue({
  el: '#vue-app',
  data: {
    text: 'Hello World from Vue!'
  }
});
</script>

Comme vous pouvez le voir, nous avons créé un élément div avec id "vue-app“. À l'intérieur de l'élément de script, nous avons créé une instance de Vue, où nous passons au constructeur un objet qui nous permet de defiTerminez certains paramètres d'application, tels que les données et les comportements, dans notre cas :

• el : référence à l'élément div defiterminé dans le html
• date : jeu de données

Dès que l'objet est créé, Vue acquiert le div avec id vue-app et s'occupe de remplacer l'espace réservé {{ text }} avec la valeur contenue dans l'objet de données. Bien sûr, cet objet peut contenir plus d'une propriété, même de types différents : les nombres, tableaux et autres objets imbriqués sont valides

Outre ce remplacement, Vue a également activé son moteur et rendu l'application responsive, c'est-à-dire que toute modification de la propriété text entraînera une mise à jour instantanée de l'élément correspondant dans le HTML.

Deuxième test de Vue.js

Pour passer au deuxième essai, vous devez d'abord instancier l'application pour créer un nouveau composant. Vous ouvrez resources/app.js (o resources/js/app.js) et mettez à jour son contenu comme suit :

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

Dans ce fichier, nous créons une nouvelle instance Vue.js, et pour ce faire, nous avons besoin d'un composant Vue que nous avons appelé HelloVue.vue. Pour plus d'informations consulter les documents officiels . 

Créer un nouveau fichier resources/components/HelloVue.vue et entrez le code suivant :

// resources/components/HelloVue.vue

<template>
  <h1>Hello Vue!</h1>
</template>

<script>
export default {
    name: 'HelloVue'
}
</script>

Le fichier que nous venons de créer est un composant Vue.js de base qui imprime Hello Vue! comment header1 sur la page. Enfin, ouvrez le webpack.mix.js fichier à la racine du projet et mettez à jour son contenu comme suit :

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({
        version: 3,
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Dans ce fichier, l'appel de méthode .vue() compilera tout code Vue.js et le regroupera dans le fichier JavaScript de production. La fonction accepte un objet où vous pouvez definition de la version de Vue.js que vous utilisez. 

Après avoir édité le fichier webpack.mix.js vous devez compiler le code javascript. Pour ce faire, nous exécutons à nouveau la commande npm run dev.

Enfin, pour essayer Vue de manière opérationnelle, ouvrez le fichier resources/views/welcome.blade.php et entrez le code suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel Vue</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <hello-vue />
    </div>
</body>
</html>

Le code, avec le composant créé précédemment, produira un message vidéo Bonjour Vue!, en raison du montage de l'instance Vue.js sur un élément HTML avec id app.

Exécutez votre application en utilisant php artisan serve, et ouvrez-le dans votre navigateur préféré.

Ercole Palmeri

Vous pourriez aussi être intéressé par ...

• Fournisseurs de services à Laravel : qu'est-ce qu'ils sont et comment utiliser les fournisseurs de services à Laravel ?
• Comment installer ChatGPT localement sur votre ordinateur
• Comment personnaliser l'impression de projet Gantt dans Microsoft Project
• Qu'est-ce qu'un framework en génie logiciel, defidéfinition et types de cadres
• Voici le premier testament numérique avec blockchain