Enabling Vue.js (vue-loader)Edit this page
Warning: You are browsing the documentation for Symfony 4.1, which is no longer maintained.
Read the updated version of this page for Symfony 6.2 (the current stable version).
Want to use Vue.js? No problem! First enable it in
1 2 3 4 5 6 7 8 9
// webpack.config.js // ... Encore // ... .addEntry('main', './assets/main.js') + .enableVueLoader() ;
Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you're done!
.vue files that you require will be processed correctly. You can also
configure the vue-loader options by passing an options callback to
enableVueLoader(). See the Encore's index.js file for detailed documentation.
vue-loader supports hot module replacement: just update your code and watch
your Vue.js app update without a browser refresh! To activate it, use the
dev-server with the
$ yarn 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.