3/1/2018 - 3:42 PM

Vue JS in a Symfony Project

Enable Vue JS in a symfony project

This able using full Vue JS possibilities (importing external librairies, components or frameworks..)


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

// Paths for Output, public and addEntry may vary in the project's context

var Encore = require('@symfony/webpack-encore'); Encore
   .addEntry('js/app', './assets/js/app.js')
   // .addStyleEntry('css/app', './assets/css/app.scss')
   // .enableSassLoader()
   // .autoProvidejQuery()
   // Enable Vue loader
module.exports = Encore.getWebpackConfig();
// Go into the web folder
cd myproject/web

yarn add --dev vue vue-loader vue-template-compiler
// We will use webpack-encore to manage the js file compilations in the Symfony environnement
yarn add @symfony/webpack-encore --dev

touch webpack.config.js

// After the configuration (the next files..), we can live compile the Vue components with:
yarn run encore dev --watch

// This will output a app.js file in the dist given in the config
// Just import this file a view, 
// and reference the desired component by adding an id to it as a normal Vue component,
// All the processing part is made in the app.js file and the view part is given in the view's component