Symfony et Vue.Js — Partie 1 : Installation et configuration

Vous maitrisez déjà Symfony mais vous aimeriez ajouter un peu de dynamisme dans votre frontend ? Parfait, cet article est fait pour vous !

Image for post
Image for post

Les prérequis

Tout d’abord, commençons par installer tous les prérequis. Je vous les listes et vous laisse le soin de les installer avant de commencer.

La création du projet

Utilisons l’exécutable Symfony pour créer un nouveau projet. En ligne de commande, placez-vous dans le répertoire où vous désirez créer votre projet et tapez :

symfony new --full MyVueProject 

Installation de Webpack-Encore

Webpack est un module “Bundler”. C’est à dire qu’il va nous permettre de gérer nos modules Javascript. Bien qu’ici nous allons l’utiliser avec Symfony c’est un outil que vous pouvez également utiliser en stand-alone.

composer require symfony/webpack-encore-bundle
yarn install

Les bases de Webpack

Avant d’installer Vue.js, laissez-moi vous expliquer les bases de Webpack.

Notre première compilation avec Webpack-Encore

A cette étape du projet, vous devriez trouver les fichiers suivants dans le répertoire assets :

  • assets/styles/app.css
yarn encore dev
yarn encore production
symfony server:start

Installation de Vue.Js

Entrons dans le cœur du sujet, l’installation et l’activation de Vue.js.

yarn add vue vue-loader vue-template-compiler --dev
yarn encore dev

Allons un peu plus loin

Parfait, nous avons intégré un tout petit peu de Vue.js sur notre micro-application Symfony. En tant que tel, cela ne va pas beaucoup nous servir alors essayons d’aller plus loin.

  • <script></script> : Défini la configuration et le comportement du composant (dont son nom)

Pour aller encore plus loin sur Vue.js

Comme vous avez pu le voir, je me suis concentré sur l’implémentation de Vue.js dans Symfony et je n’ai pas expliqué en détail son fonctionnement en tant que tel. Je vous donnerais plus d’information à ce sujet avec quelques exemples dans un futur article, mais en attendant je vous invite à vous renseigner sur la documentation officielle.

Written by

Lead Développeur PHP/Symfony, Chargé de recrutement technique

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store