Enabling Vue.js (vue-loader)

Warning: You are browsing the documentation for Symfony 3.3, which is no longer maintained.

Read the updated version of this page for Symfony 6.1 (the current stable version).

Hot Module Replacement (HMR)

Enabling Vue.js (vue-loader)

Want to use Vue.js? No problem! First, install Vue and some dependencies:

        1
        $ yarn add --dev vue vue-loader vue-template-compiler
    

Then, activate the vue-loader in webpack.config.js:

        1
2
3
4
5
6
7
8
9
        // webpack.config.js
// ...

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

+     .enableVueLoader()
;
    

That's it! Any .vue files that you require will be processed correctly. You can also configure the vue-loader options via a callback:

        1
2
3
4
5
6
7
        .enableVueLoader(function(options) {
    // https://vue-loader.vuejs.org/en/configurations/advanced.html

    options.preLoaders = {
        js: '/path/to/custom/loader'
    };
});
    

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, just use the dev-server with the --hot option:

        1
        $ ./node_modules/.bin/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.