Cover of the book Symfony 5: The Fast Track

Symfony 5: The Fast Track is the best book to learn modern Symfony development, from zero to production. +300 pages in full color showing how to combine Symfony with Docker, APIs, queues & async tasks, Webpack, Single-Page Applications, etc.

Buy printed version
WARNING: You are browsing the documentation for Symfony 4.1 which is not maintained anymore. Consider upgrading your projects to Symfony 5.1.

Enabling Vue.js (vue-loader)

4.1 version

Enabling Vue.js (vue-loader)

Want to use Vue.js? No problem! First enable it in webpack.config.js:

// webpack.config.js
// ...

    // ...
    .addEntry('main', './assets/main.js')

+     .enableVueLoader()

Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you’re done!

Any .vue files that you require will be processed correctly. You can also configure the vue-loader options by passing an options callback to enableVueLoader(). See the Encore’s index.js file for detailed documentation.

Hot Module Replacement (HMR)

The vue-loader supports hot module replacement: just update your code and watch your Vue.js app update without a browser refresh! To activate it, use the dev-server with the --hot option:

$ yarn encore dev-server --hot

That’s it! Change one of your .vue files and watch your browser update. But note: this does not currently work for style changes in a .vue file. Seeing updated styles still requires a page refresh.

See Using webpack-dev-server and HMR for more details.

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.