Enabling Vue.js (vue-loader)
Edit this page
Warning: You are browsing the documentation for Symfony 4.4, which is no longer maintained.
Read the updated version of this page for Symfony 6.2 (the current stable version).
Enabling Vue.js (vue-loader)
Screencast
Do you prefer video tutorials? Check out the Vue screencast series.
Tip
Check out live demos of Symfony UX Vue.js component at https://ux.symfony.com/vue!
Want to use Vue.js? No problem! First enable it in webpack.config.js:
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!
Any .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.
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, use the
dev-server with the --hot option:
1 2 3 4 5
# if you use the Yarn package manager
$ yarn encore dev-server --hot
# if you use the npm package manager
$ npm run 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.
JSX Support
You can enable JSX with Vue.js by configuring the second parameter of the
.enableVueLoader() method:
1 2 3 4 5 6 7 8 9 10 11 12
// webpack.config.js
// ...
Encore
// ...
.addEntry('main', './assets/main.js')
- .enableVueLoader()
+ .enableVueLoader(() => {}, {
+ useJsx: true
+ })
;Next, run or restart Encore. When you do, you will see an error message helping you install any missing dependencies. After running that command and restarting Encore, you're done!
Your .jsx files will now be transformed through @vue/babel-preset-jsx.
Using styles
You can't use <style> in .jsx files. As a workaround, you can import
.css, .scss, etc. files manually:
1 2 3 4 5 6 7 8 9 10 11 12 13
// App.jsx
import './App.css'
export default {
name: 'App',
render() {
return (
<div>
...
</div>
)
}
}Note
Importing styles this way makes them global. See the next section for scoping them to your component.
Using Scoped Styles
You can't use Scoped Styles (<style scoped>) either in .jsx files. As
a workaround, you can use CSS Modules by suffixing import paths with
?module:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
// Component.jsx
import styles from './Component.css?module' // suffix with "?module"
export default {
name: 'Component',
render() {
return (
<div>
<h1 class={styles.title}>
Hello World
</h1>
</div>
)
}
}1 2 3 4 5
/* Component.css */
.title {
color: red
}The output will be something like <h1 class="title_a3dKp">Hello World</h1>.
Using images
You can't use <img src="./image.png"> in .jsx files. As a workaround,
you can import them with require() function:
1 2 3 4 5 6 7 8 9 10
export default {
name: 'Component',
render() {
return (
<div>
<img src={require("./image.png")}/>
</div>
)
}
}Using Vue inside Twig templates
Twig templates can instantiate a Vue.js app in the same way as any other
JavaScript code. However, given that both Twig and Vue.js use the same delimiters
for variables, you should configure the delimiters Vue.js option to change
the default variable delimiters.
If you set for example delimiters: ['${', '}$'], then you can use the
following in your Twig templates:
1 2{{ twig_variable }} {# renders a Twig variable #} ${ vuejs_variable }$ {# renders a Vue.js variable #}
