Enabling Vue.js (vue-loader)

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

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

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@^14 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/options.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.