Skip to content

Vue and JSX #551

@Kocal

Description

@Kocal

Actually that's not an issue, but just an help if some people want to write JSX code with their Vue components. I'm planning to open a PR on symfony/symfony-docs aswell.

The Vue team created a repo (vuejs/jsx) that explains how to use JSX with Vue.

We should start to install dependencies:

$ npm install --save-dev @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
# with yarn
$ yarn add -D @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

And then configure Babel to use the preset @vue/babel-preset-jsx, this is how we do that with Encore:

Encore.configureBabel(babelConfig => {
  babelConfig.presets.push('@vue/babel-preset-jsx')
}

And that's all. 😄

By the way, like it has been done for React (.enableReactPreset()) maybe we should consider adding a new method to Encore, like .enableVueJSX() that will mutate Babel config?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions