Skip to content
Small utility for converting Vue templates to jsx.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
.gitignore
.npmignore
README.md
package-lock.json
package.json
tsconfig.json
vue2jsx.ts

README.md

vue2jsx

Convert Vue html templates to their JSX representation.

Usage:

npm i -g vue2jsx
vue2jsx my-component.vue > my-component.tsx

Note: some post-processing is usually necessary after the conversion.

Example

The following Vue SFC:

<script>
    export default {
        data() {
            return {
                user: null,
                users: null
            }
        }
    }
</script>

<template>
    <div>
        <h1 v-if="user">Hello, {{user.name}}!</h1>
        <div v-else-if="users">
            Hello to all of you:
            <ul>
                <li v-for="u in users" v-bind:key="u.id">u.name</li>!
            </ul>
        </div>
        <h1 v-else>Hello, anonymous!</h1>
    </div>
</template>

<style>
    h1 { color: green }
</style>

results in this output:

const render = function(h) { return (
    <div>
        { this.user ? <h1>Hello, { this.user.name }!</h1>
         : this.users ? <div>
            Hello to all of you:
            <ul>
                { this.users.map(u => <li key={ u.id }>u.name</li>) }!
            </ul>
        </div>
         : <h1>Hello, anonymous!</h1> }
    </div>
}
You can’t perform that action at this time.