Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
bin
 
 
 
 
 
 
 
 
 
 
 
 

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>
}

About

Small utility for converting Vue templates to jsx.

Resources

Releases

No releases published

Packages

No packages published