Giter VIP home page Giter VIP logo

vue2react's Introduction

vue2react

A tool that transforms Vue component to React component.

Now support tranform SFC (.vue) file.

There are 2 ways to use the transform tool: web page or cli.

Web Page

https://mcuking.github.io/vue2react/

To get better perfomance, suggest access to it via Chrome.

The demo screen is here.

CLI

Install

npm i vue2react -g

or

yarn add vue2react -g

Usage

bash example

vtr -i hello.vue -o ./screen -n nihao.js
vtr hello.vue ./screen nihao.js
vtr hello.vue

vtr help infomation

Usage: vtr [options]

Options:
  -V, --version  output the version number
  -i, --input    the input path for vue component
  -o, --output   the output path for react component, which default value is process.cwd()
  -n, --name     the output file name, which default value is "react.js"
  -h, --help     output usage information

Support

  • Data
    • data
    • props
    • propsData
    • computed
    • methods
    • watch
  • DOM
    • el
    • template
    • render
    • renderError
  • Lifecycle Hooks
    • created
    • mounted
    • updated
    • beforeDestroy
    • errorCaptured
  • Directives
    • v-text
    • v-html
    • v-show
    • v-if
    • v-else
    • v-else-if
    • v-for
    • v-on / @
    • v-bind / :
    • v-model
    • v-pre
    • v-cloak
    • v-once
  • Special Attributes
    • key
    • ref

Example

Demo1

Vue Code React Code

Demo2

Vue Code React Code

Inspiration

algorithm-visualizer

vue-to-react

vue2react's People

Contributors

mcuking avatar zjffun avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vue2react's Issues

Inline comments not translated to React

In following Vue component, not all inline comments are translated in React component.

<!----------------------------------------------------------------------
* CONFIDENTIAL
* ___________________
*
* Copyright 2019
* All Rights Reserved.
*
* NOTICE: Legal copyright notice.
* This will not be translated
------------------------------------------------------------------------>

<template>
  <div>
    My Template
  </div>
</template>

<script>
  // Comment 1: This will not be translated
  export default {
    data(){
      return {
        myData: "My Data"
      };
    },
    methods: {
      myMethod(){
        // Comment 2: This will be translated
        return 1;
      }
      // Comment 3: This will not be translated
    }
    // Comment 4: This will not be translated
  };
</script>

Verified at https://www.mcuking.club/vue2react/

Need support for inline comments at every block level.

Please add support for v-else

Can you please add support for v-else? Would be helpful for me.

Also, noticed that when a vue component does not have data(), then the conversion fails and throws error -> "TypeError: Property properties expected type of array but got null". Can you please check this as well?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.