Enabling Vue.js (vue-loader)
Edit this pageWarning: You are browsing the documentation for Symfony 3.3, which is no longer maintained.
Read the updated version of this page for Symfony 6.3 (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 vue-template-compilerThen, 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 --hotThat'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.
