Objectif :

  • Expérimenter avec l'API de Composition de Vue.js

  • Utiliser les outils de construction (build) de projets de Vue - Vite

  • Rétuliser des composants à partir de bibliothèques de compsoants.

    • Vue.js propose deux styles d'API différents pour la création de composants : l'Option API et la Composition API. Jusqu'à présent nous avons travaillé avec l'Options API où la logique d'un composant est définie en JavaScript par un objet d'options telles que data, methods, mounted, etc.. Les propriétés définies par les options sont accédées dans les fonctions d'un composant au travers de this qui pointe sur l'instance du composant. Cette API ne nécessite l'utilisation d'aucun outil pour sa mise en oeuvre et peut être utilisées directement dans un application classique à base de HTML, CSS et JavaScript.

    Avec la Composition API, la logique d'un composant est définie à l'aide de fonctions API importées. Dans les Composants monofichier (SFC pour Single File Components), la Composition API est généralement utilisée avec <script setup>. qui permet aux outils de construction de projet de Vue (Vite) d'effectuer des transformations au moment de la compilation évitant l'écriture de code souvent répétitif et pas toujours très lisible nécessaires aux déclarations des composants avec l'Option API.

    L'objectif de ce TP est de découvrir cette seconde approche. Elle nécessite une bonne compréhension du fonctionnement de la réactivité dans Vue pour être utilisée efficacement (que nous avons pu découvrir via l'utilisation de l'API d'Options dans les TPs précédents), mais elle permet une plus grande liberté d'écriture et offre plus flexibilité pour organiser et réutiliser la logique des composants pour écrire des modèlés complexes et puissants.

    Pour en savoir plus sur la comparaison entre les deux styles et les avantages potentiels de la Composition API, vous pouvez consulter :

    Pour ce TP, vous allez réaliser un application simple qui permet d'afficher sur une des marqueurs indiquant la localisation géogrpahiques d'événements (fictifs) ayant lieu en 2026. Votre travail va consister à partir d'une application existante écrite avec l'API de Composition et de la compléter afin d'offrir de nouvelles fonctionnalité, en particulier le filtrage des événements en fonction de leur date. Pour cela vous utliser un composants prédéfini (composant sur étagère) : Vue DatePicker offrant de nombreuse possibilité de sélection de dates et la définition d'intervalles de temps.

    L'interface de l'application visualisation cartographique d'événements futurs

    1. Récupération et installation de l'application existante

    1. Téléchargez le fichier TP07-APIComposition.zip et décompressez le. Dans le dossier TP0T-APIComposition vous disposez d'une application Vue.js écrite avec l'API de Composition.

    2. Ouvrez le dossier TP07-APIComposition avec VSCode. Pur cela, vous pouvez procéder comme suit :

      1. Ouvrez une fenêtre terminal et placez vous dans le dossier TP0T-APIComposition

      2. Lancez la commande code . &

      Ouverture et contenu du projet dans VSCode

    3. Explorer le contenu du projet et prenez le temps de comprendre le rôle de chacun des fichiers présents

    4. Conformément aux indications contenues dans le fichier README.md, installez, si ce n'est déjà fait, l'extension Vue (Official) recommandée officiellement par les développeurs de Vue et qui facilitera l'intégration de projet Vue dans l'IDE VScode.

    5. Dans VScode, ouvrez une fenêtre terminal est tapez la commande npm install. Pouvez-vous expliquer quel est son effet ?

    6. Tapez ensuite la commande npm run dev. Cette commande compile le projet en utilisant l'outil de build Vite Cette commande démarre le serveur de développement qui prend en charge la compilation en temps réel de votre application ainsi qu’une fonctionnalité “Hot Module Replacement” (HMR), qui permet aux développeurs de voir les modifications apportées à leur code en temps réel sans avoir à recharger la page.

      Installation des dépendances puis lancement de l'application depuis le terminal intégré de VSCode

    2. Ecoute des événement issus de la carte

    Modifiez l'application de manière à ce que lorsqu'un marqueur est sélectionné sur la carte (en rouge) le nom du lieu et la date de l'événement soient affichées en dessous de la carte comme indiqué ci dessous.

    Affichage des informations de l'événement sélectionné

    3. Utilisation d'un composant Vue Datepicker

    Rajoutez à l'application la possibilité de filtrer les événements en n'affichant que ceux compris entre deux dates choisies par l'utilisateur. Pour cela utilisez le composant Vue Datepicker que vous pourrez utilisez dans votre application en suivant les instructions d'installation fournies dans sa documentation.

    Utilsation d'un datepicker pour filtrer les événements selon leur date

    Rajoutez un bouton clear qui permet d'enlever le filtre sur les dates.

    Supression du filtre sur les dates des événements