Un composant est composé d'un template (du code HTML), de code CSS et JavaScript. Il a pour but d'être réutilisé dans une autre page (ou un autre composant). Il ressemble donc beaucoup à l'instance racine de Vue.

Toutefois, des différences existent :

• Le composant a un nom qui sera celui d'une "nouvelle" balise HTML. Dès lors, il ne peut pas être celui d'une balise "officielle" du HTML 5. De plus, les navigateurs pouvant convertir une majuscule en minuscule lors de la génération d'un nom de balise (ou d'un nom d'attribut), le nom du composant sera composé de minuscules, les mots le composant seront séparés par un trait d'union (et non un underscore). Exemple : mon-composant

  L'outil Tidy pourrait ne pas apprécier ces "nouvelles" balises HTML et stopper la mise en page du code source.

  Les noms de composant devraient toujours être des mots multiples, à l'exception du composant racine App et des composants préconçus fournis par Vue comme <transition> ou <component>

• L'instanciation du composant :
  Vue.component('mon-composant', { /* options */ });
  De plus, cette instanciation doit précéder celle de l'instance racine. Et, la "nouvelle balise" HTML ne peut être qu'utilisée dans la zone de l'application (définie par la valeur de la clé el). Et, tout composant doit avoir un unique élément racine.

• Parmi les options lors de la déclaration du composant, la clé el: ne doit pas exister (logique !) et la clé template: doit exister. Ce template contient du code HTML.

  Puisque les composants sont des instances de Vue réutilisables, ils acceptent les mêmes options que new Vue comme data, computed, watch, methods, et les hooks du cycle de vie. Les seules exceptions sont quelques options spécifiques à la racine comme el.

• À la place, la propriété du composant data doit être une fonction, afin que chaque instance puisse conserver une copie indépendante de l'objet retourné :

  data: function () {
    return {
      count: 0,
      variable2: 2
    }
  }

  Sinon, la même variable sera utilisée pour toutes les instances du composant.

Code HTML

<div id="components-demo">
  <button-counter></button-counter>
</div>

Code JS

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
});

var app1 = new Vue({ el: '#components-demo' });

Un composant n'est utile que si des informations peuvent lui être passé. L'option props: permet de déclarer le nom des propriétés du composant.

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

De même que le nom d'un composant est celui d'une balise HTML personnalisée, le nom d'une propriété est le nom d'un attribut personnalisé (propre à la balise HTML personnalisée).

<blog-post title="Mon initiation avec Vue"></blog-post>
<blog-post title="Blogger avec Vue"></blog-post>
<blog-post title="Pourquoi Vue est tellement cool"></blog-post>

Les définitions de prop devraient être aussi détaillées que possible

props: {
  status: String
}

/* ou mieux ... */
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

Installation de Vue CLI

L'installation de Vue CLI requiert l'installation préalable de Node.js.

Video d'installation de Node.js en Français, sur Windows 10.