[Symfony 4] Utiliser vue.js

Dans cet article nous allons nous attaquer à la mise en place de vue.js avec Symfony 4.

Vue.js est un framework javascript que j’apprécie particulièrement pour sa simplicité.

Avant de commencer assurez-vous d’avoir bien nodeJS sur votre poste.

On va tout d’abord créer un nouveau projet symfony :

Puis ajouter quelques librairies :

Et enfin installer vue.js :

Afin d’initialiser le projet, il suffit de faire :

Ces commandes vont créer les répertoires assets, node_module ainsi que le fichier webpack.config.js

C’est ce dernier que nous allons tout de suite modifier :

Et il faut enfin donner le chemin à symfony du manifest.json afin qu’il trouve les différents assets (le manifet.json sera créé au moment du build)

Voilà pour l’installation, on va maintenant passer aux choses sérieuses en créant nos pages.

On va d’abord créer notre controller, rien de compliqué ici :

Puis le fichier twig templates/base.html.twig :

Le composant vue.js dans assets/js/App.vue :

Le fichier main de vue dans assets/js/main.js :

Et enfin le fichier assets/js/components/Hello.vue :

Si vous lancer votre serveur à ce moment :

vous allez avoir une erreur 404 vous disant qu’il ne trouve pas le fichier build/app.js, c’est tout à faire normal puisqu’il faut que l’on lance la génération de ce fichier en faisant :

Si tout se passe bien, en allant sur http://127.0.0.1:8000 vous devez avoir un “Welcome to Your Vue.js App” s’afficher, et un “Oups… Problème” si il y a un… problème.

Petite astuce si voulez voir vos modifs en direct sans à chaque fois refaire une génération, à la place de la commande ci-dessus il faut faire :

Vous pouvez retrouver les sources ici : https://github.com/gponty/symfony-vue

7 commentaires

  1. bonjour j’arrive a cette etape mais il y a des choses que je comprend pas dans ce chapitre :
    la premier est pourquoi on crée un nouveau projet et es que il est en relation avec notre ancien projet ou non ?
    la deuxième : j’ai un problème lors de la création du projet ( je l’avait créer au sein de l’ancien projet

    merci d’avance 😀

    1. Bonjour,

      Ce chapitre n’a pas de rapport avec les anciens posts, d’où la création d’un nouveau projet.

      Il me faudrait ton erreur et ton code pour que je puisse t’aider.

    1. Oui tu as raison, je fichier manifest n’est créé seulement au moment de la phase de build :

      ./node_modules/.bin/encore dev

      Je mets à jour l’article.

  2. Bonjour Guillaume,

    Merci pour les post particulièrement, je voudrais savoir si dans la suite de Symfony 4,
    il pourrait avoir une validation email par token.
    Merci et bonne continuation

    Cdt

  3. A la fin du tuto, j’ai cette erreur :
    You may need an appropriate loader to handle this file type.

    Comment ça se fait il ?

    Merci de votre réponse

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.