Vue-Router et Vue-Styleguidedist

18/05/2021 par Adeline Caro.

La librairie Vue Styleguidist permet de créer facilement un guide de style pour présenter simplement des composants Vue.Js et leurs options.
En parallèle, Vue Router est une brique essentielle de Vue.Js, et propose une approche programmatique de la navigation.
Malheureusement, l’utilisation du styleguide pour des composants qui utilisent la navigation programmatique pose problème.

Voici notre Point de Vue !

Différentes directions

Contexte

Nous avons, en interne, une librairie assez complète de composants Vue.Js que nous pouvons utiliser sur nos projets.

Certains composants utilisent le router-link mis à disposition par Vue Router, et pour eux, Vue Styleguidist propose une solution assez simple afin de pouvoir les intégrer dans le guide de style.

Mais nous avons un autre composant qui utilise la navigation programmatique pour mettre à jour les paramètres de l’URL (filtres de recherche sur un tableau).

Ici, nous avons besoin d’utiliser $router.push, et d’accéder à $route.path pour effectuer notre ré-écriture d’URL :

<template>
    <div>
        <TableContent :table-data="tableData" />
        <TableFilters @sumbit:Filter="submitFilters" />
    </div>
</template>

<script>
export default {
    name: 'Table',
    components: {
        TableContent,
        TableFilters,
    },
    props: {
        tableData: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    methods: {
        submitFilters(queryFilter) {
            return this.$router.push({ path: this.$route.path, query: { q: queryFilter } });
        },
    },
};
</script>

Lorsque l’on tente d’utiliser ce composant dans notre guide de style, nous faisons face à une erreur dans la console :

[Vue warn]: Error in v-on handler: "TypeError: this.$router is undefined"

La difficulté réside dans le fait qu’il n’est pas possible d’importer Vue-Router dans le guide de style car il rentre en conflit avec la navigation déjà mise en place par Vue Styleguidist.

La solution : créer un faux Vue-Router

Corriger les problèmes

En suivant le même principe que pour le router-link, nous allons créer un faux Vue Router.
Pour cela, il nous faut deux objets $route et $router, qui sont généralement utilisés pour la navigation programmatique, les compléter, et les ajouter à l’objet Vue, afin qu’ils soient accessibles à nos composants :

// Fichier config/styleguide/router.js
import Vue from 'vue';

const router = {
    push: () => console.info('Vue router push'),
    replace: () => console.info('Vue router replace'),
};

const route = {
    fullPath: '/',
    path: '',
    query: {
        q: '',
    },
};

Vue.prototype.$router = router;
Vue.prototype.$route = route;

Et ensuite, il reste simplement à l’importer dans la partie require du fichier de configuration styleguide.config.js :

// Fichier styleguide.config.js
module.exports = {
    require: [
        path.join(__dirname, 'config/styleguide/router.js'),
        path.join(__dirname, 'config/styleguide/routerLink.js'),
    ],
};

Conclusion

La solution du faux Vue Router n’est finalement pas compliquée du tout à mettre en place, et évolutive pour supporter d’autre fonctionnalités de Vue Router.

Cependant, elle demande un peu de connaissance sur la base de Vue.Js et de rentrer dans la configuration de Vue Styleguidist.

J’ai beau avoir fouillé sur le net et dans les issues de dépôt Github, ce cas est peut être peu répandu, mais je n’ai pas pu trouver de solution clés en main, alors la voici.

Point de Vue