Enable Vue JS in a symfony project
This able using full Vue JS possibilities (importing external librairies, components or frameworks..)
//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}
});
// Paths for Output, public and addEntry may vary in the project's context
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();
// 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