Passer des données des controllers Symfony vers Vue JS

Par worksfather, il y a 4 ans

PHP Symfony
Javascript VueJS

Bonjour à tous.

Voilà jai suivi le tutoriel d'intégration de Vite JS à Symfony. J'ai compris les problématiques et j'ai tout bien mis en place. Tout fonctionne parfaitement.

Maintenant je voudrais faire du Vue JS (du SSR) avec le système. Le problème : je ne sais pas comment je peux faire passer les données des controllers Symfony vers les routes Vuejs.

Quelqu'un a-t-il une idée de comment je peux procéder ?

Merci d'avance pour votre aide.

5 réponses

Gulivert, il y a 4 ans

Pour passer des données de Symfony vers Javascript, tu as plusieurs manière de le faire.
Dans le controller tu envoies dans le render du template les données que tu veux, de manière traditionnel à Symfony.

Puis depuis le template soit tu mets ces données dans des data-attributs et tu les récupère coté JS.
Sois tu passes tes données dans une variable JS via les balises <script>...</script> pour créer un preloadState avant que ton composant vueJS soit chargé et tu récupères la variable dans le composant vueJS.

Une autre manière de faire est de créer une partie API dans ton app Symfony et tu crées les routes qui retournent du JSON, puis depuis le frontend vueJS tu fais les requêtes sur ces routes pour en recevoir les données.

worksfather, il y a 4 ans

Bonjour @Gulivert.

Merci beaucoup pour ta réponse.

J'avais bien immaginé déjà ces différentes alternatives (à part celle de la création de preloadState). Mais dans les deux cas, il y a quelque chose qui me gêne. Je t'explique.

J'ai déjà fait des applis VueJs avec pour backend du php pur et du Symfony (avec FOSRestBundle). Et ce qui me gêne avec ces systèmes d'API, c'est la limitation SEO pour les routes dynamiques. Du coup, je me suis dit, peut-être que si j'intégrais directement VueJS dans Symfony, je peux trouver un moyen de rendre les templates Symfony directement avec VueJS, et trouver un moyen de conserver l'avantage SEO de Symfony.

Et j'avoue que j'ai pensé surtout comme ça quand j'ai vu le fonctionnement actuel de Grafikart. Comme tu le sais déjà certainement Jonathan a utilisé ici preact (une techno que je ne maîtrise pas du tout, je le précise) pour rendre à chaque fois les pages. Ce qui lui fait conserver le SEO Symfony tout en profitant des avantages d'un SPA.

Donc c'est quelque chose comme ça que je souhaiterais bien faire. Comme je ne maîtrise pas Preact, je me suis dit que je me servirait de VueJs. Mais comme tu devrais déjà le comprendre, en utilisant les méthodes dont tu as parlé, j'ai toujours les mêmes problèmes que quand je me connecte à une API Symfony distant. Les pages sont rendues par VueJS une fois qu'elle a reçu les données et donc si on regarde les sources des pages, on ne verrait pas de contnu pré-rendus (on n'aura que la fameuse balise root).

Tu devrais maintenant saisir complétement mon problème :). Désolé si c'est trop long.

Gulivert, il y a 4 ans

Du coup ce n'est pas passer des données (dans l'idée de données reçu de DB ou autre) mais plutôt de charger ton JS sur le serveur pour qu'il te renvoie le html généré par ton JS ?

Si c'est le cas tu peux passer par php-v8 qui injecterait dans symfony. Je ne l'ai jamais fait je dois dire personellement, et je ne connais pas vueJS, je travaille exlusivement avec React, qui est bien fourni pour faire du rendu coté serveur. Du coup je suis pas la meilleure personne pour te conseiller au mieux...
Pour React il y a un Bundle (ReactBundle de Limenius), tu pourrais peut-être voir pour t'en inspirer...

Désolé du coup je ne vais pas pouvoir plus t'aider. Bonne chance.

worksfather, il y a 4 ans

Merci Gulivert. Tu m'es déjà d'une grande aide. Je vais voir avec php-v8