Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add JSX integration for Vue.js #553

wants to merge 9 commits into from


None yet
3 participants
Copy link

Kocal commented Apr 7, 2019

Will close #551.
Doc: symfony/symfony-docs#11346

This PR enable JSX support in Vue.js with the following code:

Encore.enableVueLoader(() => {}, {
  useJsx: true

I've added inline documentation and some tests for:

  • enableVueLoader() behavior (and validation)
  • Babel loader rules generation
  • Functional test, with styles and scoped styles (using CSS Modules)

As proof of concept for styles, after adding <link href="build/main.css" rel="stylesheet"> in generated testing.html file:
Capture d’écran de 2019-04-07 13-03-38

  • Styles from App.css, App.scss and App.less are applied globally correctly
  • Styles from Hello.css are applied correctly to Hello.jsx component only (import styles from './Hello.css?module')
This is an example of generated `main.css` file
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

#app {
  display: flex;
  color: #2c3e90; }

#app {
  margin-top: 40px;

.h1_jKs9e, .h2_3H2pR {
  font-weight: normal;

.ul_3us5c {
  list-style-type: none;
  padding: 0;

.li_3bINq {
  display: inline-block;
  margin: 0 10px;

.a_wKHXy {
  color: #42b983;

Some notes for the documentation:

  • Install @vue/babel-preset-jsx and @babel/plugin-transform-react-jsx
  • If you need to use scoped styles, use CSS Modules like this:
/* MyComponent.css */
.titlecolor: red }
// MyComponent.jsx
import styles from './MyComponent.css';

export default {
  name: 'MyComponent',
  render() {
    return (
      <div class={styles.title}>
        My component!
  • Not only CSS is supported for CSS Modules, Sass, Less and Stylus are supported too
  • If you need to require an image, <img src="./assets/image.png"> will not work, you should require it yourself like <img src={require("./assets.image.png")}/>.

Kocal added some commits Apr 7, 2019

@Kocal Kocal force-pushed the Kocal:feat/vue-jsx branch from 1d476a4 to 63d5d8b Apr 7, 2019

module.exports = {

This comment has been minimized.

Copy link

Kocal added some commits Apr 7, 2019


Lyrkan approved these changes Apr 8, 2019

Copy link

Lyrkan left a comment

Hi @Kocal,

Thank you for working on that, really good PR :)

@@ -936,11 +936,26 @@ class Encore {
* options.preLoaders = { ... }
* });
* // or configure Encore-specific options

This comment has been minimized.

Copy link

Lyrkan Apr 8, 2019


Depending on when it will get merged we'll have to make sure those next lines will be part of the code block added here:

Show resolved Hide resolved index.js Outdated
Copy link

weaverryan left a comment

Ha! This is wonderful! I read all the docs first (great job, very complete), then read the docs in index.js and finally... realized that the actual implementation is almost no code! That's awesome!

@Kocal Kocal deleted the Kocal:feat/vue-jsx branch Apr 10, 2019

javiereguiluz added a commit to symfony/symfony-docs that referenced this pull request Apr 11, 2019

minor #11346 [Frontend] Add section for using JSX with Vue.js (Kocal)
This PR was squashed before being merged into the 3.4 branch (closes #11346).


[Frontend] Add section for using JSX with Vue.js

Hi :)

This PR add a new section for using JSX with Vue.js:
Encore.useVueLoader(() => {}, {
    useJsx: true

We should not merge it before symfony/webpack-encore#553 is merged.


916ad73 [Frontend] Add section for using JSX with Vue.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.