WARNING: You are browsing the documentation for Symfony 4.0 which is not maintained anymore. Consider upgrading your projects to Symfony 4.3.

You are browsing the Symfony 4.0 documentation, which changes significantly from Symfony 3.x. If your app doesn't use Symfony 4.0 yet, browse the Symfony 3.4 documentation.

Enabling Vue.js (vue-loader)

4.0 version

Enabling Vue.js (vue-loader)

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

1
$ yarn add --dev vue [email protected]^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.

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