Vue.js

  • Vue.js

    Comprendre Vue.js : simple application

    Pour poursuivre notre exploration de Vue je vous propose dans ce nouvel article de créer une petite application qui va se contenter de calculer la TVA avec ses différents taux. Ça va nous permettre de voir de nouvelles possibilités et d’avancer dans la compréhension de Vue. Le code final pour cet article est téléchargeable ici. On crée le projet On commence par créer un nouveau projet en acceptant les réglages par défaut : vue create tva Si ça se termine comme ça c’est parfait : Si ce n’est pas le cas reportez-vous au précédent article pour voir si vous avez tous les outils nécessaires. Voilà la structure du projet :…

  • Vue.js

    Comprendre Vue.js : introduction

    Vue.js connaît un succès de plus en plus grand. Le projet sur Github a 118621 étoiles au moment ou j’écris cette ligne. Qui aurait parié sur ce petit poucet face à React et Angular ? Vue.je est un « framework progressif », ce qui signifie qu’on peut le mettre en œuvre de façon incrémentielle. D’autre part il s’entend très bien avec la plupart des librairies Javascript. Il devient ainsi une solution incontournable pour créer une application SPA (Single Page Application). Mais il trouve également toute sa place dans des application qui font un appel intensif au serveur… Pour les développeurs PHP Javascript se présente toujours comme un langage un peu étrange avec…

  • Vue.js

    Vue.js2 : pagination avancée

    Dans le précédent article on a vu un exemple de pagination très simplifié. Je vous propose dans le présent article de poursuivre l’exemple en construisant un composant de pagination digne de ce nom qui soit à la fois pratique, complet et esthétique. On va donc partir de la situation telle qu’on l’a laissée précédemment en transformant la pagination en composant indépendant. Je vous ai mis un zip contenant tout le code final ici. Côté Laravel Du côté de Laravel on va garder le même code mais on va ajouter des utilisateurs. Dans le seeder on va en prévoir 1000 : <?php use Illuminate\Database\Seeder; class DatabaseSeeder extends Seeder { /** *…

  • Vue.js

    Vue.js2 : vue-resource (2/2)

    Dans le précédent article j’ai montré comment utiliser le plugin vue-resource pour générer facilement des requêtes Ajax avec une apllication de gestion d’utilisateurs. Dans le présent article on va améliorer cette application en prévoyant d’une part une pagination simplifiée, d’autre part un composant spécifique pour les messages. On va prendre l’application telle qu’on l’a laissée au précédent article. Pour vous faciliter la vie et si vous n’avez pas le courage de suivre tout le processus vous pouvez télécharger ici le code complet. Il suffit de l’installer… Un composant pour les messages Dans le template tel qu’on l’a construit on a 3 messages différents : <div class="ui positive message" v-show="success"> <i…

  • Vue.js

    Vue.js2 : vue-resource (1/2)

    Dans les articles précédents on a vu l’essentiel de Vue.js mais cette librairie bénéficie de nombreuses ressources additonnelles. Vous en trouvez l’ensemble sur cette page avec en plus la références des tutoriels et autres. Dans cet article je vous propose de découvrir le plugin vue-resource qui simplifie la mise en place de requêtes Ajax. Pour l’occasion on va utiliser Laravel pour d’une part fournir l’application et d’autre paert présenter une API. Comme sujet je ne vais pas faire dans l’originalité puisque je vais me contenter de gérer la table par défaut des utilisateurs. Pour vous faciliter la vie et si vous n’avez pas le courage de suivre tout le processus…

  • Vue.js

    Vue.js2 : avec Laravel

    Comme ce blog est essentiellement consacré à Laravel il me faut évoquer l’utilisation de Vue.js 2 avec Laravel 5.3 puisque cette version a été enrichie de tout ce qu’il faut pour sceller ce mariage. J’en ai un peu parlé dans mon article sur les nouveautés de la version 5.3. je vais y revenir de façon plus précise maintenant en poursuivant l’exemple du panier dans le contexte de Laravel. Etat des lieux Dans l’article référencé ci-dessus j’avais présenté l’infrastructure en place lorsqu’on installe Laravel 5.3 : On a déjà : un composant vue.js 2 : Exemple.vue une application de base : app.js un fichier d’initialisation : bootstrap.js Avec Laravel on n’utilise…