Exercices avec Vue.js et TailwindCSS

Dans cette série d'exercices, les étudiants vont mettre en pratique leurs connaissances de Vue.js et TailwindCSS en créant des composants élémentaires. Chaque exercice augmentera progressivement en difficulté, permettant ainsi aux étudiants de renforcer leur compréhension et leur maîtrise de ces outils. Vous pouvez utiliser TypeScript si vous le souhaitez.

Exercice 1 : Création de Titres#

Objectif : Créer un composant de titre qui peut être utilisé pour différents niveaux de titres (h1, h2, h3, etc.).

Instructions :

1. Créez un composant TitleComponent.
2. Ajoutez une prop pour passer le niveau de titre souhaité.
3. Stylez le titre en fonction de son niveau avec TailwindCSS.

Exercice 2 : Création d'un Bouton#

Objectif : Créer un composant bouton réutilisable avec plusieurs variantes de style avec TailwindCSS.

Instructions :

1. Créez un nouveau composant Vue.js nommé ButtonComponent.
2. Utilisez les classes TailwindCSS pour appliquer différents styles de boutons (par exemple, primaire, secondaire, danger, etc.).
3. Ajoutez les props nécessaires pour personnaliser le texte du bouton et le type de bouton (par exemple, type="primary").

Exercice 3 : Création d'un Formulaire de Contact#

Objectif : Créer un formulaire de contact avec validation des champs.

Instructions :

1. Créez une nouvelle page Contact.vue.
2. Le formulaire doit inclure des champs pour le nom, l'email, le sujet et le message.
3. Utilisez v-model pour la liaison bidirectionnelle des champs du formulaire.
4. Affichez les valeurs des inputs en dessous du formulaire dans une section dédiée quand l’utilisateur clique sur le bouton “Envoyer”.

Exercice 4 : Création d'un Select avec Recherche Autocomplete#

Objectif : Construire un composant de sélection personnalisé avec une fonctionnalité de recherche autocomplete.

Instructions :

1. Créez un composant AutocompleteSelectComponent.
2. Le composant doit permettre à l'utilisateur de taper une recherche et de filtrer les options de sélection disponibles.
3. Utilisez des slots ou des props pour passer les options au composant.
4. Assurez-vous que le composant est accessible et navigable au clavier.

Exercice 5 : Création d'un Tableau#

Objectif : Créer un composant de tableau qui affiche des données sous forme de lignes et de colonnes.

Instructions :

1. Créez un composant TableComponent.
2. Passez les données du tableau et la configuration des colonnes via des props.
3. Utilisez TailwindCSS pour le style du tableau.
4. Implémentez des fonctionnalités supplémentaires telles que le tri, la recherche et la pagination si le temps le permet.