Framework front JS avec symfony

185633
,

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

J'aimerais me perfectionner dans symfony et réussi à intégrer des composants VueJS, Preact ou autre dans mon application symfony. J'ai regardé pas mal de tutoriels concernant l'installation mais je trouve quasiment que des exemples pour faire une single app application.

Voilà ce que j'ai fais pour le moment
1. Installer toutes les dépendances : encore, vuejs, ...
2. Activer dans la config de encore le vue loader.
3. Je créé un composant TestComposant dans le dossier components, fichier TestComposant.vue

<template>
<h1>Bibou c'est un test</h1>
</template>
<script>
export default {
      name: 'testcomposant'
}
</script>
  1. Dans mon fichier assets/app.js
// [...]
import TestComposant from './components/TestComposant';
import Vue from '...'; // J'ai pas le code sous les yeux je fais ça de mémoire

new Vue({
    el: '#app',
    components:{
      TestComposant
   }
});
  1. Ajouter le liens du app.js dans le base template de twig avec la fonction entry...tags('app')

Ce que je veux

Je voudrais pouvoir ou je veux dans un template twig mettre un ou plusieurs composants par exemple <testcomposant></testcomposant> . Je comprends pas trop le #app, est-ce la bonne pratique d'entourer tous les containers une div avec l'id app?

<!--base.html.twig-->
<!--[...]-->
<!-- Encore une fois c'est de tête donc ce n'est peut être pas exactement la bonne syntaxe mais vous avez compris l'idée :) -->
<body>
<div id="app">
  {% block 'body' %}{endblock}
  </div
</body>

Ce que j'obtiens

J'ai pas d'erreur en particulier, j'arrive bien a afficher mes coposants mais uniquement dans une div avec id="app". Je me demande déjà si c'est la bonne façon de déclarer ces composant dans ce cas (cf. app.js).
Quelle sont les bonnes pratiques?

Merci d'avance et bonne année à tous !