Vue.js

  • Laravel 5,  Vue.js

    Page dynamique

    Un fil récent sur le forum Laravel m’a paru suffisamment intéressant et didactique pour donner l’occasion d’un article. Le cas évoqué est assez fréquent et mérite qu’on s’y penche un peu. On a des données structurées dans un fichier JSON et on veut afficher une liste de nom et ensuite par un clic sur un nom afficher des détails. On peut envisager plusieurs façons de réaliser cela. De façon traditionnelle on va passer par jQuery, commencer par envoyer la liste des noms et ensuite utiliser Ajax pour récupérer les informations sélectionnées. Évidemment on aura ainsi une requête pour chaque clic. Une autre approche consiste à envoyer une page simple, celle-ci…

  • Vue.js

    Comprendre Vue.js : Nuxt en action

    Dans le précédent article je vous ai présenté Nuxt. On a vu qu’il simplifie le développement d’une application Vue en gérant par exemple de façon automatisé le routage. Dans le présent article je vous propose de l’utiliser pour une petite application de recherches d’informations nutritives à partir d’un code-barre. Ce genre d’application se multiplie étant donné la sensibilisation croissante aux méfaits des additifs et à l’équilibre alimentaire. Il existe une base de donnée ouverte renseignée par les utilisateurs qui expose une API que nous allons utiliser. C’est d’ailleurs cette API qui est exploitée par toutes les applications qui existent actuellement. Open Food Facts Open Food Facts est une initiative citoyenne…

  • Vue.js

    Comprendre Vue.js : Nuxt

    On a vu au cours des précédents articles que Vue se présente comme un outil simple et puissant. D’autre part il bénéficie d’une communauté très active et ses possibilités s’élargissent rapidement. Dans le présent article je vous présente Nuxt, un framework dont l’ambition n’est rien moins que créer des applications Vue.js universelles. L’idée est d’utiliser le SSR (Server Side Rendering). C’est quoi cette bête ? Imaginez que vous créez une application avec pas mal de manipulation de code côté client, vous risquez deux écueils : votre application risque de perturber les moteurs de recherche, ça peut poser des soucis parfois au navigateur qui se retrouve avec un gros boulot. La…

  • Vue.js

    Comprendre Vue.js : le routeur

    Dans cet article je vous propose de prolonger l’exemple du quiz en l’enrichissant. Jusque là on a proposé un seul questionnaire, ce qui est limité. Dans une situation réaliste on aurait le choix entre plusieurs questionnaires. Du coup on va se  retrouver avec deux page : une pour le choix du questionnaire et l’autre pour répondre aux questions. Ça nous donne l’occasion de découvrir le routeur de Vue qui est bien pratique ! Le code final pour cet article est téléchargeable ici. On crée le projet On va encore utiliser Vue Cli pour créer le projet. Je ne vais pas trop détailler à nouveau le processus parce que je l’ai…

  • Vue.js

    Comprendre Vue.js : Vuex

    Dans le précédent article on a vu la réalisation d’un quiz. Les données (questions et réponses) ont été placées dans la propriété data du composant. C’est simple et efficace. Mais imaginez qu’on ait plusieurs composants qui se partagent ces informations. On n’a pas trop creusé la communication entre composants mais on a vu déjà les props pour transmettre une information du composant parent vers l’enfant. On verra que dans l’autre sens on utilise des événements. Ça peut devenir rapidement assez lourd. Il serait bien de disposer des données dans un endroit accessible pour tous les composants… La solution préconisée est d’utiliser la librairie Vuex. Elle permet de stocker des données…

  • Vue.js

    Comprendre Vue.js : un quiz

    Poursuivons notre découverte de Vue.js avec une nouvelle petite application. Cette fois il va être question d’un quiz avec donc question et possibilités de réponses, ce qui va nous permettre de voir comment Vue gère les listes de données. Le code final pour cet article est téléchargeable ici. On crée le projet Toujours avec le Cli on crée un nouveau projet : vue create quiz Vérifiez que le projet est correctement créé en lançant le serveur : npm run serve Si vous avez la page d’accueil alors tout va bien on peut poursuivre… Cette fois on va commencer par supprimer le composant HelloWorld : Et pour que ça fonctionne encore…