Catégories
JavaScript Vue.js

Nuxt.js + Adonis.js / Chapitre 02 : Les templates de l’application

Au menu de ce chapitre

Dans ce nouvel article de notre série Nuxt.js + Adonis.js, nous allons nous préoccuper de la mise en place des templates de notre application.

Previously in « Nuxt.js + Adonis.js » 😀

Dans le précédent article, nous avons vu comment procéder à l’installation (relativement simple) de Nuxt.js en intégrant Adonis.js comme framework jouant le rôle de notre serveur.

Sommaire du tutoriel

Pour mieux se concentrer, travaillons en musique !

Perso, je me concentre beaucoup mieux lorsque j’écoute de la musique en travaillant et vous ?

Si c’est votre cas aussi, je vous propose de tester Amazon Music, le service est vraiment de qualité et il y en a pour tout les goûts musicaux.

Par souci de transparence, sachez que si vous faites l’essai gratuit 30 jours, je recevrai une commission qui m’aidera beaucoup et ne vous coûtera rien.
Si le service proposé par Amazon ne vous convenait pas, vous pouvez le résilier à tout moment avant la fin de la période d’essai.

Mise en place de la structure HTML de l’application

A présent, nous allons mettre en place le début de la structure de notre application, principalement au niveau HTML.

Ouvrez le répertoire de votre application dans votre IDE favori et lançons nous dans l’exploration et la construction de notre application !

A la différence du tutoriel de Gary Simon, ce n’est pas Adonis qui gère nos routes mais bien Nuxt.js via sa gestion des pages.

Les routes gérées par la structure des répertoires de Nuxt.js

Pour s’en assurer, on peut créer une page about.vue dans le répertoire pages et y placer un peu de lorem ipsum (si vous ne savez pas quel générateur de Lorem Ipsum utiliser, vous pouvez consulter notre article sur ce sujet :D). Puis, on enregistre la page. Enfin, on navigue sur l’url localhost:3000/about et bam !

Meet The Coders - Notre page 'about' directement plugguée sur le fichier resources/pages/about.vue
Notre page ‘about’ directement plugguée sur le fichier pages/about.vue

Comme vous pouvez le voir la gestion des routes est extrêmement simple.

A noter : il est possible d’utiliser deux modes de fonctionnement dans le répertoire resources/pages.

Soit vous créez un fichier comme nous venons de le faire « about.vue » et cela équivaudra à l’url http://localhost:3000/about

Soit vous créez un répertoire about, dans lequel vous placez un fichier « index.vue ». Ce fichier index.vue ayant le même contenu que « about.vue ». Le résultat sera identique, à vous de voir quelle organisation de répertoire / fichier, vous souhaitez avoir.

Ce qui est sûr, c’est qu’une fois que vous avez défini un mode de fonctionnement, essayez de préférence de le conserver pour éviter d’avoir à la fois des répertoires + index.vue qui cottoient des fichiers {nomDePage}.vue 😉

Revenons en à nos moutons, enfin plutôt à nos codeurs ! Nos codeurs ? me dites vous.

Mille excuses, je ne vous ai pas indiqué le thème de ce tutoriel. Là où Gary Simon parlait d’une liste de jobs, nous allons de notre côté mettre en place un système pour nous les développeurs, une plateforme où chacun pourra se créer un compte et indiquer sa localisation et les langages qu’il maîtrise. Cela nous permettra de véritablement plonger dans les méandres de Nuxt.js et Adonis.js.

Nous verrons par la suite si cette plateforme peut se développer et comment.

Les fichiers de templates dans Nuxt.js

Le layout

Nous allons définir ici le fichier principal qui nous servira d’ossature pour notre application Nuxt.js. Il gérera la barre de menu du site, le display du contenu principal et éventuellement un footer que nous verrons par la suite.

Dans votre répertoire layouts, vous allez créer un fichier main.vue. Il nous servira de template principal.

Meet The Coders - Ajout du fichier main.vue

Dans ce fichier, vous allez placer le code suivant :

layouts/main.vue

Ce qu’il faut retenir ici , c’est la mise en place de la barre de menu. Pour le moment, tout n’est pas pluggué, nous verrons la mise en place de ces liens par la suite.

On peut remarquer également la balise <nuxt /> qui permet de placer le contenu principal.

Le reste et l’essentiel de ce fichier de template concerne principalement du CSS que vous pouvez bien évidemment adapter à votre goût.

Les fichiers templates de notre application Nuxt.js

A présent nous allons voir le fichier pages/index.vue qui va définir notre page d’accueil. Ce fichier héritera de notre template que nous venons de définir.

resources/pages/index.vue

L’héritage du layout main.vue s’effectue via la l’instruction :

layout: ‘main’ du code source du fichier pages/index.vue.

Cette instruction permet tout simplement de définir un layout à utiliser pour le fichier source en cours.

Cela est utilisable évidemment pour tous les fichiers de templates à venir. Il est également possible de définir plusieurs layouts et adapter ensuite les affichages en fonction des besoins.

Dans le reste du fichier, on met en place la structure, sans toutefois apporter de données dynamiques. Pour le moment, tout est statique, nous verrons l’intégration de données provenant de la base de données dans un prochain article.

Première version de nos templates pour notre application Nuxt.js

Actuellement notre page d’accueil ressemble à ceci :

Meet the Coders - Nuxt.js - Page d'accueil après intégration de la barre de menu et d'un peu de CSS dans nos templates
Meet The Coders – Page d’accueil après intégration de la barre de menu et d’un peu de CSS

C’est assez sympa pour le moment et en plus nous n’avons pas fait grand chose 😀

Adaptation des boutons à notre contexte

Ainsi, adaptons les boutons présents sur la page par défaut de l’installation de Nuxt à notre contexte.

En conséquence, vous allez remplacer le bloc div avec la classe ‘links’ par le code ci-dessous :

Remplacement des textes, liens et portées des boutons en page d’accueil

Pour le moment aucun lien n’est affecté à ces boutons. Toutefois, le but de cette partie est de mettre en place l’architecture statique de notre application. Encore une fois, nous verrons cela par la suite

Le résultat est le suivant :

Meet the Coders - Nuxt.js - L'apparence de notre site après avoir redéfini les boutons dans les templates
L’apparence de notre site après avoir redéfini les boutons

Une touche de CSS

Afin de rendre plus visible les éléments de listing pour nos coders rajoutons un peu de couleur de fond aux classes CSS du fichier main.vue :

.coder-container, 
.coder-container2 {
  background: white;
  border-radius: 7px;
  padding: 1em;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 120px auto;
  justify-content: left;
  text-align: left;
  background-color: rgba(65, 184, 131, 0.1)
}

Résultat final

Ensuite, enregistrez et voyez le résultat immédiatement dans votre navigateur :

Meet the Coders - Nuxt.js - L'apparence de notre site après la mise en place des templates
L’apparence de notre site après la mise en place des templates

Voilà qui termine cette partie de notre tutoriel sur Nuxt.js et Adonis.js en ce qui concerne la partie affichage. Nous n’avons encore rien fait d’extraordinaire mais on voit tout de même comment pour le moment tout se met en place avec une grande simplicité.

Vous pouvez obtenir les sources complètes du projet correspondantes à ce chapitre sur GitHub !

En revanche, dans notre prochain article de ce tutoriel, nous allons aborder la partie base de données. Cela va nous donner l’occasion de mettre un peu plus les mains dans le cambouis !

Aidez nous à nous améliorer en évaluant cet article :
[Total: 0 Moyenne: 0]

Par HappyToDev

Absolument passionné depuis toujours par l'informatique et la programmation, je souhaite via ce blog vous faire passer un peu du savoir que j'ai accumulé depuis des années.
Et même, pourquoi pas, vous aider à faire le premier pas dans le développement web.

Vous êtes prêts ?
Alors allons y ensemble et n'oubliez pas que les débutants sont vraiment les bienvenus.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.