1. Home
  2. Documentation
  3. Frontend
  4. Enabling Vue.js (vue-loader)
WARNING: You are browsing the documentation for Symfony 3.3 which is not maintained anymore. Consider upgrading your projects to Symfony 5.0.

Enabling Vue.js (vue-loader)

3.3 version
Maintained
3.4 4.3 4.4 5.0 current 5.1 master
Unmaintained
4.0 4.1 4.2

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.

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