smallcomfort / react-vue-loader Goto Github PK

View Code? Open in Web Editor NEW

This project forked from vuejs/vue-loader

45.0 7.0 8.0 2.2 MB

Webpack loader for Vue.js components

License: MIT License

JavaScript 100.00%

react-vue-loader's Introduction

react-vue-loader

A fork of vue-loader, use to compile the vue component into a react component.

Install

npm install --save react-vue react-vue-helper
npm install --save-dev react-vue-loader

Usage

One possible configuration is as follows:

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'react-vue-loader'
    }
  ]
}

demo

It supports almost all configurations of vue-loader. If you have used vue-loader, in most cases you only need to change your loader configuration loader: 'vue-loader' to loader: 'react-vue-loader'. Refer to the vue-loader for detailed configuration.

Some Difference

react-vue-loader does not support custom blocks
Use react-hot-loader to achieve hot reload
react-vue-loader adds additional options: vue, output

Additional Options

`vue`

type: String

Used to import a global vue configuration. The loader will load the configuration and apply it to each vue component.

// vue.config.js
import Vue from 'react-vue';
import Vuex from 'vuex';
import VueMaterial from 'vue-material/src'

Vue.use(Vuex);
Vue.use(VueMaterial);

export default Vue;

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'react-vue-loader',
      options: {
        vue: './vue.config.js'
      }
    }
  ]
}

`output`

type: [Boolean, String]
default: false

Be cautious, it just creates a file and can not remove the file later, when you may want to delete one by one.

Set true to see how the vue code is compiled into the react code, which will generate four js files in the same directory. To customize the generated file name, set a string type for output

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'react-vue-loader',
      options: {
        output: true
        // output: 'custome-name'
      }
    }
  ]
}

License

MIT

react-vue-loader's People

Contributors

Stargazers

Watchers

Forkers

faceyspacey pedronauck torns error500-team letteros-com nicky132

react-vue-loader's Issues

What works and what doesn't?

Is there anything inside a Vue <template> or Vue <script> that won't work when loaded by this loader?

Can you paste example of the output React component?

v-bind with object of attributes is not supported

The following isn't supported yet:

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

styles tag with `modules` or `scoped` attributes do not work

Hey there, first off, this is excellent work. Combining React + Vue works pretty much perfectly. So this is just a minor issue.

Basically the following does not result in scoped styles:

<template>
  <div class="container">
      foo
  </div>
</template>

<style lang="stylus" scoped>
.container
  background green
  position absolute
  top 0px
  left 0px 
  width 100vw
  height 100vh
  z-index -1
  display flex
  align-items center
  justify-content center
  & span
    color rgba(255,255,255, .5)
    font-size 32px
</style>

No attribute is added to the top template element, and the resulting css class definition is scoped to the attribute id.

<transition> element is removed before `leave` handler's `done` callback is called

I found one more likely small issue related to basic <transition> usage:

The dom element is removed before the leave handler's done callback is called.

I have a demo you can easily try like this:

git clone https://github.com/faceyspacey/universal-demo
cd universal-demo
git checkout vue-loader
yarn
yarn start
# visit this URL: http://localhost:3000/Rudy

It's a demo of this code sample from the Vue docs:
https://vuejs.org/v2/guide/transitions.html#Dynamic-Transitions

what's wrong

You'll notice that as soon as this.show is set to false in the enter handler's animation complete callback, the element is immediately removed. The leave callback is still called, but it doesn't matter since it's already gone.

expected behavior

The expected behavior is that the element is not removed until the leave handler calls done.

Doesn't work with webpack 4

Throws following error: Module build failed: TypeError: Cannot read property 'vue' of undefined

Probably is related to this vue-loader issue vuejs#1177

support for <transition-group> (possibly through the React package: npmjs.com/package/transition-group)

They aren't working for me.

Here's an example I copied from the Vue docs:

<template>
  <div class='container'>
    <button v-on:click='add'>Add</button>
    <button v-on:click='remove'>Remove</button>

    <transition-group name='list' tag='p'>
      <span v-for='item in items' v-bind:key='item' class='list-item'>
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [1,2,3,4,5,6,7,8,9],
        nextNum: 10
      }
    },
    methods: {
      randomIndex: function () {
        return Math.floor(Math.random() * this.items.length)
      },
      add: function () {
        this.items.splice(this.randomIndex(), 0, this.nextNum++)
      },
      remove: function () {
        this.items.splice(this.randomIndex(), 1)
      },
    }
  }
</script>

<style lang='stylus'>
.container
  background rgb(255, 190, 0)
  position absolute
  top 0px
  left 0px 
  width 100vw
  height 100vh
  display flex
  align-items center
  justify-content center
  & span
    color rgba(255,255,255, .5)
    font-size 32px

.list-item
  display inline-block
  margin-right 10px

.list-enter-active, .list-leave-active
  transition all 1s

.list-enter, .list-leave-to
  opacity 0
  transform translateY(30px)
</style>