9951 explained code solutions for 126 technologies

php-symfonyHow to integrate Vue.js with PHP Symfony?

Integrating Vue.js with PHP Symfony is a straightforward process.

First, install the Symfony Encore package:

composer require symfony/webpack-encore-bundle

Then, create a webpack.config.js file in the root of your project:

// webpack.config.js

var Encore = require('@symfony/webpack-encore');

    // the project directory where all compiled assets will be stored

    // the public path used by the web server to access the previous directory

    // will create public/build/app.js and public/build/app.css
    .addEntry('app', './assets/js/app.js')

    // allow sass/scss files to be processed

    // allow legacy applications to use $/jQuery as a global variable


// export the final configuration
module.exports = Encore.getWebpackConfig();

Finally, run the Encore command to compile the assets:

./node_modules/.bin/encore dev

The compiled assets can then be included in your Symfony templates:

<script src="{{ asset('build/app.js') }}"></script>

This will integrate Vue.js with your Symfony application.

Helpful links

Edit this code on GitHub