Cours

Vuetify + VueJS 2.0

Dans ce TP nous allons voir dans un premier temps comment créer une application VueJS avec VueCLI. Puis à partir de ce projet, nous allons y ajouter la librairie Vuetify afin de manipuler des composants fournis par un développeur tiers.

Table des matières

Installer VueCLI

⚠️ Si vous ne l'avez pas déjà sur votre ordinateur ⚠️

Nous allons avoir besoin de plusieurs outils :

  • NodeJS
  • Vue-cli

NodeJS

La première étape va être l’installation de NodeJS, la démarche est différente en fonction de votre environnement, mais pour résumer :

Une fois installé, vous êtes prêt, vous allez pouvoir installer l’outil VueCLI.

Vue-cli

Vue-cli est un outil qui simplifie la création d’un nouveau projet Vue-JS à partir de template fourni par la communauté.

Pour ceux sous Windows lancez Node.js Command Prompt :

npm install -g @vue/cli

Pour ceux sous Linux / OSX, lancer dans un terminal :

npm install -g @vue/cli

Vous venez d'installer vue-cli. Vous avez maintenant à votre disposition sur votre ordinateur une nouvelle commande, la commande vue.

Création du projet

Créer un nouveau projet est très simple, il suffit de saisir la commande suivante :

vue create le-nom-du-projet

ou dans notre cas :

vue create vuetify-vuejs

Votre ordinateur va vous poser quelques questions :

vuecli

Pour l'instant, nous allons rester sur VueJS 2.0 comme évoqué en cours. Valider votre choix avec la touche entrée.

VueCLI est en train d'installer l'ensemble des dépendances nécessaire au bon fonctionnement de votre application. Cette étape va prendre quelques secondes / minutes.

Tester

Pour lancer votre projet, il suffit de suivre les commandes proposées par votre console à savoir :

🎉  Successfully created project vuetify-vuejs.
👉  Get started with the following commands:

 $ cd vuetify-vuejs // <-- Étape 1
 $ npm run serve  // <--  Étape 2

Toujours dans votre terminal :

cd vuetify-vuejs
npm run serve

TIP

Rappel, la commande cd permet de vous déplacer dans le dossier vuetify-vuejs. La commande npm run serve est une commande interne à votre projet, elle va lancer un « serveur » qui vous permettra de tester votre code pendant la phase de développement.

Votre code est disponible iciopen in new window

Vous devez voir quelque chose qui ressemble à

vuejs

Ajouter Vuetify

Maintenant que votre code fonctionne, nous allons le faire évoluer pour ajouter Vuetify. Avec Vue-Cli c'est très simple. Il suffit de saisir une commande.

ATTENTION

la commande va modifier en profondeur votre projet. Il ne faut pas la faire à n'importe quel moment. Il est préférable de faire celle-ci au début de la création de votre projet.

Dans le dossier de votre projet :

vue add vuetify

ET C'EST TOUT !

Votre projet va être modifié, afin d'inclure vuetify.

Tester à nouveau

Pour tester, il suffit de saisir à nouveau la commande npm run serve.

Votre projet est maintenant différent, il doit ressembler à

vuetify-init

🤔 Sacrée différence n'est-ce pas ?

Simplifier le code fourni

Le but de ce TP est de découvrir le fonctionnement de VueJS et de Vuetify, nous allons simplifier le code dès à présent pour n'en garder que l'essentiel.

Modifier le App.vue

Remplacer le contenu du fichier App.vue par le code suivant :

<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <v-toolbar-title>{{ school }}</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <div class="text-center pa-10">👋 Bonjour 👋</div>
      <!-- Votre Code ICI -->
    </v-main>
  </v-app>
</template>

<script>
  export default {
    name: "App",
    data() {
      return { school: "MyDigitalSchool" };
    },
  };
</script>

Tester à nouveau votre application.

Test & Évolutions

Afin de tester les possibilités de Vuetify, nous allons ajouter des éléments dans l'interface. En vous servant de la documentation.

Dans la balise v-main nous allons ajouter :

  • Un bouton
  • Une card
  • Une liste

Le bouton

En suivant la documentationopen in new window ajouter le code à la place du commentaire « votre code ici » inséré :

<v-btn>Clique ici</v-btn>

🤓 Vérifier que celui-ci s'affiche comme attendu.

À faire :

  • Ajouter un @click qui affiche une alerte quand vous cliquez sur votre bouton.
  • Modifier le comportement pour que votre bouton soit un block (100% de la largeur).

Ajouter une card

Le composant Card est un conteneur, il va nous permettre d'ajouter d'autres éléments dedans. Il est utile pour symboliser à votre utilisateur les éléments importants.

Toujours en utilisant la documentation,open in new window ajoutez le code suivant :

<v-card>
  <v-card-text>
    <!-- Votre contenu ici -->
  </v-card-text>
</v-card>

Vérifier que votre card s'affiche correctement.

À faire :

  • Modifier la couleur de la card avec les attributs suivants color="#385F73" dark.

Ajouter une liste

Le composant « Liste » va nous permettre d'afficher du contenu « sous forme de liste »… Incroyable non ?

Comme dans les précédents exemples pour réaliser le code, vous devez utiliser la documentationopen in new window.

Ajouter dans la balise v-card-text le code suivant :

<v-list-item>
  <v-list-item-content>
    <v-list-item-title>Votre texte</v-list-item-title>
  </v-list-item-content>
</v-list-item>

À faire :

  • Déclarer une liste dans les data de votre objet. Exemple : list: ["A", "B", "C"].
  • Répéter la balise v-list-item-content autant de fois qu'il y a d'éléments dans la liste (en utilisant un v-for)

Créer un composant

Le principe même de VueJS c'est la création de composants. Pour l'instant nous avons tout mis dans « le App.vue », ça fonctionne… mais clairement pas idéal.

Nous allons donc remédier à ça en créant votre premier composant.

Création du composant

Première étape, créer le fichier .vue de votre composant.

  • Créer un nouveau fichier nommé Home.vue dans le dossier components.

La structure de fichier est la suivante :

<template>
  <!-- Votre Code ICI -->
</template>

<script>
  export default {
    name: "Home",
  };
</script>

Déplacer le code de votre composant

Maintenant que votre composant est prêt. Déplacer le contenu du v-main dans le template de votre nouveau composant.

TIP

N'oubliez pas de prendre également les data associées à votre vue.

Utiliser votre composant

Pour utiliser un composant, vous devez réaliser trois opérations :

  • Le déclarer dans les imports.
  • Le déclarer dans la page où vous souhaitez l'utiliser.
  • L'utiliser dans votre template.

Voilà un exemple :

<template>
  <Home />
</template>

<script>
  import Home from "./components/Home.vue";

  export default {
    name: "App",
    components: {
      Home,
    },
  };
</script>

À faire:

  • Adapter le code fourni pour l'utiliser dans votre projet.

Ajouter « un router »

Le Router va nous permettre de créer plusieurs pages dans notre site / application. « Avant » vous aviez l'habitude de simplement créer un fichier PHP / HTML et celui-ci était automatiquement disponible.

Avec VueJS en mode application ça sera un peu différent, nous allons devoir ajouter un router qui nous permettra de faire correspondre « Un lien » et « une page ».

Ajout du plugin

La première étape est l'ajout du plugin. Avec vue cli il nous suffit de faire dans le bon dossier.

ATTENTION

Comme l'installation de Vuetify cette étape va reconfigurer « de manière » importante votre projet. Ça veut dire que votre fichier App.vue va être remplacé par une nouvelle version qui contiendra le nécessaire au bon fonctionnement du VueRouter.

vue add router

Regarder les modifications

En quelques mots :

  • Le fichier App.vue est différent.
  • Le dossier router.
  • Le dossier view.

Arrêtons-nous ensemble pour regarder les modifications en détail.

Création d'une nouvelle vue

Ajouter un nouveau fichier vue dans le dossier view. Nommé le comme bon vous semble c'est votre page 🥰.

Et pour le contenu ?

Pour le contenu, je vous laisse réutiliser le composant que vous avez précédemment créé.

Ajout d'une AppBar

Nous avons maintenant plusieurs pages, nous allons donc remettre notre AppBar. En utilisant la documentationopen in new window remettre la AppBar dans le fichier App.vue.

À faire :

  • Ajouter un titre.
  • Ajouter au bout 3 boutons nous permettant de naviguer entre les pages.

Aller plus loin ?

Dans le monde du mobile, les menus de navigation sont appelés des Navigations Drawers. Ce composant existe également chez Vuetify.

En utilisant la documentationopen in new window implémenté un Navigation Drawer dans votre application.