Source: https://vuejs.org/v2/guide/single-file-components.html

L'avantage des composants monofichiers

Dans beaucoup de projets Vue, des composants globaux seront définis en utilisant Vue.component, suivi de new Vue({ el: '#container' }) pour cibler un élément conteneur dans le corps de chaque page.

Cela peut très bien fonctionner pour des petits projets ou des projets de taille moyenne, pour lesquels JavaScript est utilisé uniquement pour améliorer certaines vues. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par JavaScript, des désavantages se manifestent :

• Les définitions globales forcent à avoir un nom unique pour chaque composant

• Les templates sous forme de chaines de caractères ne bénéficient pas de la coloration syntaxique et requièrent l’usage de slashes disgracieux pour le HTML multiligne.

• L’absence de support pour le CSS signifie que le CSS ne peut pas être modularisé comme HTML et JavaScript

• L’absence d’étape de build nous restreint au HTML et à JavaScript ES5, sans pouvoir utiliser des préprocesseurs tels que Babel ou Pug (anciennement Jade).

Tous ces désavantages sont résolus par les composants monofichiers avec une extension .vue, rendus possibles par les outils de build tels que webpack ou Browserify.

Un exemple de composant monofichier

Afin de mieux comprendre les composants monofichiers, prenons comme exemple le composant NavBar de l'application:

<template>
  <b-container fluid id="navbar-container">
    <b-navbar
      toggleable="xl"
      type="light"
      class="justify-content-md-center justify-content-start"
    >
      <b-navbar-toggle target="navbar-toggle-collapse" class="mr-4 ml-auto">
        <template v-slot:default="{ expanded }">
          <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
          <b-icon v-else icon="chevron-bar-down"></b-icon>
        </template>
      </b-navbar-toggle>

      <b-collapse id="navbar-toggle-collapse" is-nav>
        <b-navbar-nav
          class="mx-auto justify-content-between align-items-center"
        >
          <b-nav-item v-for="link in routes" :key="link.path" :to="link.path">
            {{ link.text }}
          </b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </b-container>
</template>

<script>
import { routes } from "../router";
import BrandLogo from "../assets/logo.jpg";

export default {
  data() {
    return {
      routes,
      logo: BrandLogo,
    };
  },
};
</script>

<style lang="stylus">
/* Import theme colors palette */
@import '../css/palette.styl';

#navbar-container nav {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

#navbar-container ul .nav-link {
  margin-left: 20px;
  margin-right: 20px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

@media (max-width: 768px) {
  #navbar-container ul .nav-link {
    margin-left: 10px;
    margin-right: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1rem;
  }
}

#navbar-container ul .nav-link:hover {
  color: $pastelGreenColor;
  border-bottom: 2px solid $pastelGreenColor;
}

#navbar-container ul .router-link-exact-active {
  color: $navbarActiveColor;
  border-bottom: 2px solid $accentColor;
}
</style>

Comprendre les composants monofichier

Un composant monofichier peut être composé de 3 blocks:

• <template>: Le template HTML du composant
• <script>: Le javascript associé avec le composant
• <style>: Le style associé au composant

Le template HTML du composant

Le template peut utilisé toutes les fonctionnalités de Vue.js (directives, interpolation de texte, ...)

<template>
  <b-container fluid id="navbar-container">
    <b-navbar
      toggleable="xl"
      type="light"
      class="justify-content-md-center justify-content-start"
    >
      <b-navbar-toggle target="navbar-toggle-collapse" class="mr-4 ml-auto">
        <template v-slot:default="{ expanded }">
          <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
          <b-icon v-else icon="chevron-bar-down"></b-icon>
        </template>
      </b-navbar-toggle>

      <b-collapse id="navbar-toggle-collapse" is-nav>
        <b-navbar-nav
          class="mx-auto justify-content-between align-items-center"
        >
          <b-nav-item v-for="link in routes" :key="link.path" :to="link.path">
            {{ link.text }}
          </b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </b-container>
</template>

NOTE: Ce composant utilise des composants fournis par la librairie bootstrap-vue. De nombreux composants du site web utilisent cette librairie.

Le javascript associé au composant

Toutes les dépendances recquises par le composant peuvent être importés en utilisant la syntaxe d'import ES6.

De plus, le script peut définir les données associées au composant, des méthodes, des propriétés, ainsi que des hooks du cycle de vie.

Dans notre exemple, nous nous contentons de définir des données associées au composant.

<script>
import { routes } from "../router";
import BrandLogo from "../assets/logo.jpg";

export default {
  data() {
    return {
      routes,
      logo: BrandLogo,
    };
  },
};
</script>

Le style associé au composant

Il est possible d'utiliser le langage CSS pour appliquer un style particulier au composant. De plus, il est possible d'utiliser n'importe quel pré-processeur CSS. Dans notre exemple, le pré-processeur stylus est utilisé en spécifiant l'attribut lang="stylus" au sein de la balise <style>.

<style lang="stylus">
/* Import theme colors palette */
@import '../css/palette.styl';

#navbar-container nav {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

#navbar-container ul .nav-link {
  margin-left: 20px;
  margin-right: 20px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}
/* Rest of style is ommited */
...
</style>

Cycle de vie du composant

Chaque composant suit le cycle de vie d'une application Vue. Ce cycle de vie expose des "hooks" qui sont appelés lors d'événements spécifiques.