Routing Symfony et VueJS mutli page
Le framework Vue.js est depuis quelques temps ce que je préfère utiliser pour la partie front-end de mes sites et application Symfony. Je n’utilise pas le single page et le routing de Vue.js car je trouve qu’il y a pleins d’avantages à utiliser le mutli-pages et le routing Symfony (multi-langues, sécurité, layout …) . Vue.js me permet de créer des composants réutilisables dans mon application (dites moi si ca vous intéresse) en faisant appel à une API. Je me suis donc vite retrouvé à devoir utiliser des routes dans mes composants Vue.
Passer les routes Symfony aux vues Vue.js
Pour rendre une page à l’utilisateur on utilise le format classique de Symfony, à savoir Controller + vue Twig. Le controller reste très simple car l’essentiel est géré ensuite via l’api … la différences avec un controller classique c’est que je passe les routes via un paramètre (toujours le même) :
return $this->render('modules/mon-module/list.twig', [
'symfonyRoutes' => [
'edit_data' => $this->generateUrl('app_edit_entity'),
'load_data' => $this->generateUrl('app_ajax_load_entities')
]]);
Il suffit ensuite de passer ces routes à Vue.JS, pour cela dans mon layout de base (afin de ne pas avoir à le rajouter dans chaque vue Twig) :
{% if symfonyRoutes is defined %}
window.symfonyRoutes = {{ symfonyRoutes|json_encode|raw }};
{% endif %}
(ps : à mettre dans une balise script que je ne peux pas mettre dans mon exemple car sinon elle est interprétée)
Utiliser les routes Symfony
Dans mes vue je peux alors très facilement accéder aux routes :
window.symfonyRoutes.edit_dataÀ noter que dans mon exemple j’ai des noms génériques ‘edit_data’, ‘load_data’. Cela me permet « d’automatiser » mon CRUD car ces routes sont déjà définies … affaire à suivre dans un prochain article.
Je vous présenterai bientôt comment gérer les formulaires Symfony dans Vue.JS très facilement en conservant la sécurité et la gestion des erreurs de Symfony. Pour vous donner une idée je réutilise ce que je décrivait dans mon article Symfony / Ajax il y a déjà quelques années ..
