Suite de notre dossier sur vue. Aujourd'hui on s'attaque à l'encapsulation et la réutilisation des composants grace aux fichiers .vue.

A qui s'adresse cet article ?

Cet article s'adresse à toute personne portant un intérêt aux composants Vue, quel que soit leur niveau en matière de task-runner, Javascript ou développement en général.

Prérequis

Aucun prérequis aujourd'hui pour la première partie de cet article, si ce n'est savoir créer et utiliser des composants vue. Si vous ne savez pas trop de quoi je parle actuellement, bonne nouvelle, c'est le sujet des deux premiers articles de ce dossier !

#1 : L'installation et les bases de Vue

Nouveau ! Trouvez un webdesigner sur le BlogDuWebdesign

Trouvez gratuitement le prochain talent qui réalisera votre projet ou rejoindra votre équipe.

#2 : Création et usages de composants

La seconde partie de l'article demandera de petites connaissances au sujet des tasks-runners et de Webpack.

Encapsuler ses composants : les fichiers .vue

La semaine dernière nous avons vu que les composants Vus sont un excellent moyen de créer des modules et comportements qu'il est possible de réutiliser de sites en sites, à une exception près : les composants possèdent trois parties distinctes, à ranger à trois endroits différents (la template est dans le HTML, le style est dans le CSS, la declaration du composant est dans votre js).

Pour avoir des composants vraiment deplacables, il faudrait pouvoir mettre la template, le style et le code javascript dans un seul et meme fichier n'est-ce pas ? C'est exactement ce que nous proposent de faire les fichiers .vue

Un fichier .vue est une sorte de fichier HTML ayant à sa racine obligatoirement les trois balises suivantes: <template>, <script> et <style>, dans lesquels vous pouvez mettre les differentes partie de votre composant.

Pas grand chose a dire a propos de l'element <template>, mais il existe des petites choses a noter sur les deux autres elements.

La balise <script> pour commencer, possede une structure particuliere qu'il vous faudra respecter.

<script>
  module.exports = {
    props: [],
    data: function () {
    },
    computed: {
    },
    methods: {
    }
  }
</script>

Comme vous pouvez le remarquer, nous avons perdu le nom du composant, au profit de "module.exports". Cela est dû au fait que le nom du composant lui sera donné dans la page où vous l'importez, et pas dans ce fichier. Pour le reste, c'est comme d'habitude.

Enfin, la partie <style> est semblable à ce que vous pourriez trouver n'importe ou a l'exception d'un point d'importance : l'attribut "scoped". Si vous l'insérez dans votre balise (qui devient donc <style scoped></style>), tout le style que vous mettrez dedans ne s'appliquera qu'à votre composant et aux balises qu'il contient

Vous pouvez donc coder en toute sérénité, sans "trop" vous préoccuper du nom des classes autour.

Utiliser les fichiers .vue simplement, directement dans votre navigateur

Le moyen le plus simple d'utiliser les fichiers .vue est de le faire a travers http-vue-loader.

Pour l'utilisez, ajoutez simplement les deux lignes suivantes a votre head

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>

Puis effectuez la declaration de Vue simplement, en listant les fichiers .vue que vous voulez utiliser.

      new Vue({
        el: '#app',
        components: {
          'mon-composant': httpVueLoader('./composants/mon-composant.vue')
        }
      });

Votre composant sera à partir de ce moment la accessible dans votre application Vue à travers <mon-composant>.

Utiliser les fichiers Vue à travers Webpack

Comme je le disais en introduction, je ne vais pas revenir sur le concept de task-runner. Si vous ne savez pas du tout ce qu'est un task-runner, je vous encourage a lire cet article Les ressources JS de l'été : des task runner pour automatiser vos process (attention, l'article date de 2015, les ressources peuvent etre obsolètes).

En quelques mots, Webpack est un module bundler, c'est-à-dire un outil qui vous permet de construire des modules composés de plusieurs types de fichiers (js, css, ou dans notre cas .vue) et de les importer directement depuis votre Javascript. Il s'utilise généralement conjointement avec un Task-runner ou directement depuis NodeJs pour une application Express par exemple.

Une fois que vous avez votre installation Webpack en place, vous pourrez lui apprendre a charger les fichiers .vue grace au module vue-loader, et en insérant dans votre configuration un module comme le suivant 

      {
        test: /.vue$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              loaders: {
                css: 'vue-style-loader!css-loader',
                scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
                sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
              }
            }
          }
        ]       },

De cette manière, il vous sera possible de require() ou import from vos components, comme s'il s'agissait de fichiers Javascript.