Warning: You are browsing the documentation for Symfony 3.3, which is no longer maintained.
Read the updated version of this page for Symfony 5.3 (the current stable version).
Enabling Vue.js (vue-loader)
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.