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 :

En complément de cet article

Bootstrap 3 - Le framework 100 % Web Design

A partir de 32
Voir le produit

Commentaires

Me contacter

3 rue Garibaldi
18000 Bourges
SIRET : 81783887300021

contact@clementlevallois.fr

Liens amis
  • Nicolas Vannier, Création de sites à Bourges
  • AuréliA, Photographe à Bourges
  • JM Dubettier, consultant en communication
Mon actualité

Facebook Twitter

Plan du site | Mentions légales | Contactez-moi | Gestion des cookies