WordPress et Vue.js

Vues.JS permet de créer des architectures front-end rapides et modernes. WordPress propose un back-office intuitif, sécurisé et simple à modifier. Réunir WordPress et Vue.js parait donc être le combo parfait pour la création d’un site Internet. Et c’est effectivement le cas.

La communication entre Vue.js et WordPress

La meilleure solution pour communiquer avec WordPress est sa Rest API, lancée en 2015 et qui a totalement changé la donne. Vue.js comme tous les autres front-end JS peut donc aller récupérer très facilement le contenu de WordPress en allant faire des requêtes via sa Rest API. Il y aura sans doute quelques plugins à ajouter à WordPress comme un plugin pour associer les champs ACF au JSON de retour ou un plugin pour créer une route pour les menus de WordPress. Ce n’est pas un jeu d’enfant mais avec un peu d’expérience en JS, il ne devrait pas y avoir de difficultés. D’ailleurs, si vous vous lancez dans Vue.js, c’est sans doute même un prérequis.

Vue.js, WordPress et l’hébergement.

Quand on utilise Vue.js, on est sans doute intéressé par son rendu coté serveur, son fameux SSR. Il faut alors Node.js sur le serveur. Pour WordPress, il faut un hébergement classique Apache/MySQL ou équivalent. Il faudra donc 2 architectures différentes et 2 hébergements. Au sein de l’agence, nous hébergeons WordPress sur un hebergement pro chez OVH. Ce n’est peut pas ce qu’il y a de plus rapide. Mais nous avons mis en place un système de cache de la REST API. Les résultats obtenus sont satisfaisants mais nous pourrions effectivement faire mieux. Pour ce qui est de Vue.js, nous retenons la solution de Netlify qui présente quelques avantages, comme la simplicité d’utilisation ou le déploiement automatique via GIT. La encore, nous pourrions peut être faire mieux en administrant nous même un serveur. Mais nous considérons cela comme un métier à part entière et donc des difficultés supplémentaires. Par ailleurs, encore une fois, nous sommes satisfait du résultat, donc nous n’avons pas forcément besoin de pousser beaucoup plus loin. A noter concernant cet hébergement Vue.js, Il aurait aussi été possible de passer par Heroku qui propose à peu près les mêmes services que Netlify.

WordPress et Vue.js, le résultat.

Nous sommes une agence web WordPress et Vue.js, donc il paraissait obligatoire d’utiliser ces technologies pour réaliser le site de notre agence. Vous avez donc le résultat de L’utilisation de WordPress avec Vue.js devant vos yeux. Une interface plutôt sympa, réactive, sans raffraichissement de page. Et pour moi coté back, je rédige cet article via l’interface d’admin de WordPress, avec Gutemberg comme si de rien n’était.

Enfin, si vous voulez des statistiques concernant notre utilisation de WordPress avec Vue.js, vous pouvez aller consulter nos résultats sur Google Page speed via ce lien. Vous y constaterez que nous obtenons de très bons résultats en mobile avec une note de 84/100. Coté ordinateur, nous obtenons une note qui oscille entre 92/100 et 99/100, en étant pénalisé par l’indice de vitesse et le FID. L’utilisation seule de Vue.js et de WordPress n’est pas la seule raison de ces bons résultats, et nous avons bien sûr fait de nombreuses optimisations, aussi bien du coté de WordPress que de Vue.js. Pour aller encore plus loin, c’est sur les serveurs qu’il faudrait se pencher.

Pour conclure, si vous aussi vous avez des projets sur WordPress avec Vue.js, n’hésitez pas à nous contacter.