Les composantes sont une partie importante de Vue. Elles permettent de créer des sites complexes ou, même des applications web à l’aide de composantes autonomes pouvant être réutilisables.
Les composantes nous permettent de fractionner l'interface (UI) en morceaux indépendants et réutilisables, sur lesquels nous pouvons réfléchir de manière isolée. Il est courant pour une application d'être organisée en un arbre de composantes imbriquées.

Pour définir une composante, il suffit d’appeler la méthode component d’une application Vue et de lui passer deux paramètres:
- Le nom à lui attribuer.
- Un objet {} contenant des propriétés.
Par exemple, pour définir une composante de compteur:
Lorsqu'une composante est définie, il est possible d'y faire référence dans le HTML d'une app à partir de son nom sous forme d'une balise.
Par exemple:Une composante peut-être réutilisée aussi souvent que désiré.
Chaque bouton est entièrement indépendant. Ainsi le compteur de l'un n'a aucune influence sur le compteur d'un autre.
Si nous construisons un blog, il est probable que nous ayons besoin d'un composant pour représenter un article du blog. Nous voulons que tous les articles partagent la même mise en page, mais avec un contenu différent. Un tel composant ne sera utile que si vous pouvez lui passer des données, comme le titre et le contenu d'un article spécifique que l'on voudrait afficher. C'est là que les props entrent en jeu.
Les props sont des données passées à une composante. Pour en définir, il faut spécifier le nom des props attendus dans un tableau.
Par exemple, si seulement la props msg est attendue:
Pour passer une donnée, il suffit ensuite d'ajouter un attribut avec la valeur désirée:
Lorsqu'une props est passée à une composante, elle devient l'équivalent d'une donnée dans data.
Les composantes sont souvent utilisées conjointement avec de boucles afin de tirer profit de leur réusabilité.
Par exemple:
Voici un autre exemple avec une composante de 2 props: pletter et pcolor.