Navbar et icones avec VueJS

Bonjour à tous ! Il fait beau aujourd’hui nan ? (*bruit de la pluie*)

Comme dit dans le dernier articles aujourd’hui nous allons créer nos pages page et les boutons pour y accéder comme cela :

Pour cela, nous allons créer des composants.

Mais qu’est-ce que sont les composants en VueJS ?

Je vous explique tous ça ici. (c’est aussi expliqué dans la documentation n’oubliez as de toujours l’avoir ouverte au cas où)

C’est une instance qui va nous servir à créer nos pages en les ajoutant à ces dernières créer des composants va nous servir à construire nos pages et y ajouter du contenu.

Par exemple, vous pouvez avoir des composants pour un en-tête, une barre latérale et une zone de contenu, chacun contenant généralement d’autres composants pour les liens de navigation, les articles de blog, etc.

L’utilisation d’un composant Vue se fait de la même façon qu’un élément HTML classique, avec sa balise, ses attributs, valeurs, bindings… Donc pas d’inquiétudes pour vous lancer !

Pour un plus beau design, nous allons utiliser tailwind css qui est semblable a bootstrap

Alors c’est parti !

Pour installer tailwind css exécutez cette commande dans votre terminal

Maintenant que nous l’avons installé nous allons le configurer pour que tailwind fasse parti de notre projet

Dans le fichier tailwind.config.js recopié le code que vous voyez en dessous

Et celui-ci de même

Ensuite dans le dossier style créer un fichier main.css et y recopier le code suivant

Parfait maintenant quand nous voulons faire du design nous avons juste à regarder la documentation de tailwind vue pour pouvoir ajouter certain composant ce qui va nous faciliter la vie.

Maintenant créons notre navbar

Dans le dossier src/components/navigation créer le fichier NavBar.vue

Comme vous le voyez nous avons créer une navbar avec les composants de tailwind.

Le « @click » signifie l’évènement click, c’est-à-dire quand je clique sur ce bouton-là ça me renvoie vers mon accueil qui est mon fichier « cour-list » et de même pour mes posts.

Voilà ce que ça donne :

Maintenant nous allons voir comme y intégrer des icônes semblables à celles d’Instagram

Déjà, je vais commencer par ajouter l’image dans mon dossier assets/img.

Pour récupérer de bonnes icônes gratuitement, je vous conseille le site flaticon, c’est sur ce site que j’ai récupéré l’icône que je vais utiliser.

recopiez cet ligne faites attentions a bien mettre le nom de votre image

<button v-on:click=”changeComponent”>img(src=”../assets/img/home.png”)</button>

Après bien sur c’est à vous de gérer la taille et l’emplacement de votre icone selon vos besoins.

Faites de même pour les autres icônes de votre Navbar et le tour est joué !

C’est déjà la fin de cet article j’espère que cela vous a plus et que vous continuerez a vous perfectionner de votre coté en attendant le prochain article !

À la prochaine !