Introduction à Vue et Vuetify

Utilisation de Vuetify dans ce cours

Dans ce cours, nous allons utiliser Vuetify, une bibliothèque de composants établie sur Material Design pour Vue.js.

Vuetify nous permettra de créer rapidement des interfaces utilisateur élégantes, réactives, et cohérentes, en nous appuyant sur une large collection de composants préconçus (boutons, cartes, formulaires, etc.) que nous pourrons personnaliser et intégrer facilement dans nos applications.

Exemple de composant V-BTN (Vuetify Button)

<v-btn prepend-icon="$vuetify" stacked>
  Button
</v-btn>

Documentation : v-btn

D'autres outils disponibles

Il existe d'autres bibliothèques et frameworks d'interface utilisateur compatibles avec Vue.js :

• BootstrapVue : Basé sur Bootstrap, il fournit des composants classiques et une mise en page fluide.
• Quasar : Un framework complet pour créer des applications web, mobiles, et de bureau.
• Element Plus : Offre une grande collection de composants professionnels adaptés aux projets d'envergure.
• Ant Design Vue : Basé sur le design system d'Ant Design, idéal pour les applications d'entreprise.

Pourquoi utiliser Vuetify ?

Vuetify est un excellent choix pour débuter, car il est bien documenté, facile à utiliser, et garantit une cohérence visuelle grâce à Material Design.

Cependant, connaître d'autres outils vous permettra d'adapter vos choix selon les besoins et la nature de vos futurs projets.

Utilisation des SFC (Single File Components) et de l'API Composition dans ce cours

<script setup>
  import {ref} from "vue";

  const message = ref("Coucou !");
</script>

<template>
  <h1>{{ message }}</h1>
</template>

<style>
  h1 {
    color: deeppink;
    font-weight: bold;
  }
</style>

Dans ce cours, nous utilisons des Single File Components (SFC), un format de fichier spécial avec l'extension .vue qui permet de structurer chaque composant de manière claire et organisée. Les SFC contiennent trois sections principales :

• <template> : Contient le balisage HTML du composant.
• <script> : Inclut la logique JavaScript du composant.
• <style> : Contient les styles CSS spécifiques au composant.

API Composition

Nous utilisons également l'API Composition, une approche plus moderne et flexible pour structurer la logique d’un composant dans Vue.js 3.

Caractéristiques de l'API Composition :

• Utilisation de ref et reactive pour la gestion de la réactivité.
• setup ajouter en attribut de la balise <script> est la fonction clé où toute la logique du composant est définie.

Attention !

Pour pouvoir utiliser ref et reactive, il faudra les importer au tout début du code comme présenter à la ligne 2 de l'exemple ci-après.

Exemple

<script setup>
    import {ref, reactive} from "vue";
    // Création d'une valeur réactive avec `ref`
    const compteur = ref(0);

    // Création d'un objet réactif avec `reactive`
    const utilisateur = reactive({
        nom: "Alice",
        age: 25
    });

    // Fonction pour incrémenter le compteur
    function incrementer() {
        compteur.value++; // .value obligatoire pour accéder à la valeur réactive
    }

    // Fonction pour incrémenter l'âge de l'utilisateur
    function incrementerAge() {
        utilisateur.age++; // pas de .value pour les objets réactifs
    }
</script>

<template>
    <div class="main">
        <p>Compteur: {{ compteur }}</p>
        <button @click="incrementer">Incrémenter le compteur</button>

        <p>Personne: {{ utilisateur.nom }} {{ utilisateur.age }} ans</p>
        <button @click="incrementerAge">Incrémenter l'âge</button>
    </div>
</template>

<style scoped>
    .main {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    button {
        color: #4fc08d;
        background: none;
        border: solid 1px;
        border-radius: 2em;
        font: inherit;
        padding: 0.75em 2em;
        transition: all 0.3s;
    }

    button:hover {
        color: white;
        background: #4fc08d;
    }
</style>

Pourquoi cette approche ?

• Organisation du code : L'utilisation des SFC et de l'API Composition facilite la maintenance du code en regroupant la logique liée.
• Réutilisabilité : Le code est plus modulaire et réutilisable.
• Flexibilité : L'API Composition permet de mieux structurer le code pour les composants complexes, notamment dans les projets plus grands.

Découpage et réutilisation des composants Vue

Ainsi, les exemples de code présentés dans ce cours sont établis sur ces concepts de SFC et de l’API Composition pour offrir une approche moderne et efficace du développement avec Vue.js.

Cheat Sheet pour Vue 3 SFC et composition API

Méthodes de rendu web

L'objectif de ce chapitre est de vous familiariser avec les différentes techniques de rendu disponibles pour vos projets web utilisant Vue.js. Chaque technique de rendu a été conçue pour répondre à des besoins spécifiques en matière de performances, de référencement (SEO), et d'expérience utilisateur. Comme développeurs, il est important de comprendre ces différences afin de * choisir la méthode la plus adaptée à chaque projet*.

Ces différentes techniques existent parce que les applications web ont des exigences variées. Certaines applications nécessitent une indexation optimale par les moteurs de recherche (SEO), tandis que d'autres privilégient la rapidité ou l'interactivité. De plus, selon la nature du contenu (statique ou dynamique), la manière dont les pages sont générées et servies aux utilisateurs peut grandement influencer les performances et l'expérience utilisateur.

Le tableau ci-dessous vous offre une vue d'ensemble des principales méthodes de rendu, leurs avantages, leurs inconvénients, et les contextes dans lesquels elles sont le plus appropriées.

Astuce

Dans ce cours, nous utiliserons la méthode CSR, car elle est la plus simple à mettre en place.

Méthode	Utilisation	Résumé	SEO	Perfs	Serveur JS
CSR	Applications SPA (Single Page Application)	Le rendu se fait entièrement côté client après le chargement du JavaScript. Haute interactivité.	❌	🔴	❌
PWA (CSR)	Expériences mobiles, applications hors ligne	Application web progressive basée sur le CSR, permettant des fonctionnalités hors ligne et des performances améliorées grâce aux Service Workers.	❌	🟡	❌
SSR	Applications dynamiques nécessitant un bon SEO	Rendu côté serveur. La page HTML est générée sur le serveur à chaque requête et envoyée au client. Bon pour le SEO et le temps de chargement initial.	✅	🟠	✅
SSG	Sites à contenu statique (blogs, sites vitrine)	Génération de pages HTML statiques au moment du build. Très rapide et excellent pour le SEO.	✅	🟢	❌
ISR	Contenus semi-dynamiques	Combinaison de SSR et SSG. Les pages sont pré-rendues mais peuvent être régénérées périodiquement ou à la demande, optimisant les performances et la fraîcheur du contenu.	✅	🟢	✅
Pre-rendering	Amélioration du SEO et du chargement initial	Les pages importantes sont pré-rendues en HTML statique au moment du build, puis "hydratées" côté client avec JavaScript pour l'interactivité.	✅	🟢	❌

• SEO : Indique si la méthode est favorable au référencement naturel.
• Perfs (Performances) : 🟢 : Excellent 🟡 : Moyen 🟠 : Moyenne à mauvaise 🔴 : Mauvais
• Serveur JS : Si un serveur JavaScript est requis (✅) ou non (❌).