React-vue-loader NPM

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: js, output

Additional Options

`js`

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