Intégrer VueJS dans Symfony 5

Installation de Symfony

 symfony new vue-symfony

Déplacez vous sur le dossier et installer le serveur web.

  cd vue-symfony
  composer require server -- dev

Créez votre contrôleur:

php bin/console make:controller ControllerName

Mettez dans le contrôleur une méthode :

  /**
* @Route("/", name="home")
 */
  public function home()
  {
	  return $this->render('home.html.twig');

 }

Ajoutez votre fichier.html.twig dans dossier Template. Mettez ce contenu de base.

 {% extends 'base.html.twig' %}

 {% block body %}

	 <h3>My Symfony 4 sample project</h3>

 {% endblock %}

Installation de Vue et ses dépendances

Installer Encore

 composer require symfony/webpack-encore-bundle
 yarn install

À l'aide de yarn, installez Vue et ses dépendances 😉.

npm install --dev vue vue-loader vue-template-compiler

Activé VueJs dans le webpack.config.js c'est grâce à M webpack.config.js que la magie va s'opérer, 😥 faut pas avoir peur, je suis là pour te guider.

var Encore = require('@symfony/webpack-encore'); 
Encore.setOutputPath('public/build/')
   .setPublicPath('/build')
   .cleanupOutputBeforeBuild()
   .enableSourceMaps(!Encore.isProduction())
   .addEntry('js/app', './assets/js/app.js')
   // .addStyleEntry('css/app', './assets/css/app.scss')
   // .enableSassLoader()
   // .autoProvidejQuery()


   // Enable Vue loader
   .enableVueLoader()
;

module.exports = Encore.getWebpackConfig();

Webpack Encore attend un point d'entrée.
Avant d'aller plus loin 🙏 jettez un oeil à webpack encore; voici le lien 👨‍🦳, il y a beaucoup à découvrir. Créez un sous-répertoire nommé js dans le dossier assets, puis ajoutez-y un fichier app.js.

// assets/js/app.js
import Vue from 'vue';

import Example from './components/Example'

/**
* Create a fresh Vue Application instance
*/
new Vue({
  el: '#app',
  components: {Example}
});

Créer le composant Vue

Créez un dossier que vous allez appeler components comme sous dossier de js et ajouter le fichier Example.vue. Voici ce qu'on a : assets/js/components/Example.vue

<template>
   <div>
       <p>This is an example of a new components in VueJs</p>
   </div>
</template>

<script>
   export default {
       name: "example"
   }
</script>

<style scoped>

</style>

c'est cool 😎 les amis, nous allons bientôt terminer. Compilons :

 yarn encore dev-server --hot

Rendez-vous 🏃‍♂️ sur le Template de base de twig pour ajouter notre app.js

  <div id="app">
       {% block body %}{% endblock %}
   </div>

   {% block javascripts %}
       {{ encore_entry_script_tags('app') }}
   {% endblock %}

Ne vous iniquitez 😰 pas je vais vous expliquer 😉: Le id="app" te permet de manipuler le DOM, et c'est quoi le DOM 😟 désolé mon ami va demander à Google.

Affichons le contenu de notre composant Vue

Rendons nous sur la page home.html.twig qui est dans le dossier template(templates/index.html.twig), ajoutons juste le composant Example 😎

On aura:

{% extends 'base.html.twig' %}
{% block body %}

<div class="text-center">
    <h3>My Symfony 4 sample project</h3>

    <div class="jumbotron text-center">
        <example></example>
    </div>
</div>

{% endblock %}

Youpi !! 🎉🎉👏 tu as réussi à intégrer VueJs à Symfony