Personnalisation de site avec Vue.js

Personnalisation de site avec Vue.js

Réalisé au sein de Gritchen Affinity, une interface dynamique réalisée avec Vue.js et Bootstrap permettant de gérer des minisites de souscription d’assurance accessibles pour tous !

Un template principale réalisé avec Bootstrap et disposant de nombreux paramètres personnalisables allant du logo au texte de présentation en passant par le positionnement d’une colonne de gauche (qui peut donc se retrouver en entête). Ce template est alors personnalisé via une interface d’administration, sauf que l’interface d’administration est directement intégrée au site et les modifications visibles en direct ! Je m’explique :

Grâce à Bootstrap et au système de grille, je retrouve avec un template fonctionnant sur 12 colonne (col-md-12) qui intégré dans l’interface d’administration est intégré dans un conteneur de 8 (col-md-8) avec une partie administration sur la droite de 4 de largeur (col-md-4). Nous avons donc bien notre template directement intégré à l’administration. Voilà pour l’affichage.

Maintenant, passons à la partie administration et fonctionnement du template. La gestion des éléments modifiable est basé sur Vue.js, ce qui permet de rendre le template entièrement réactif aux modifications réalisés avec l’interface d’administration sans aucun rechargement de page et sans même sauvegarder ! On voit donc la construction de notre page en direct.

Mais une vidéo vaut plus que ces explications :

Commentaires