https://github.com/skyrpex/vue-jsx-hot-loader

Webpack loader for Vue.js v2 components with JSX render functions
https://github.com/skyrpex/vue-jsx-hot-loader

hot jsx loader vue webpack

Last synced: 7 days ago
JSON representation

Webpack loader for Vue.js v2 components with JSX render functions

• Host: GitHub
• URL: https://github.com/skyrpex/vue-jsx-hot-loader
• Owner: skyrpex
• License: mit
• Created: 2016-09-22T13:01:33.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2024-08-06T12:03:43.000Z (3 months ago)
• Last Synced: 2024-10-06T17:48:49.441Z (30 days ago)
• Topics: hot, jsx, loader, vue, webpack
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/vue-jsx-hot-loader
• Size: 419 KB
• Stars: 41
• Watchers: 5
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-jsx-hot-loader

[![Greenkeeper badge](https://badges.greenkeeper.io/skyrpex/vue-jsx-hot-loader.svg)](https://greenkeeper.io/)

[![TravisCI Build status](https://travis-ci.org/skyrpex/vue-jsx-hot-loader.svg?branch=master)](https://travis-ci.org/skyrpex/vue-jsx-hot-loader)

> Works with:

>

> ![Vue 2](https://img.shields.io/badge/vue-%5E2.0-green.svg)

> ![Webpack](https://img.shields.io/badge/webpack-%3E=2.0-green.svg)

This loader will enable `Hot Module Replacement` for [Webpack](http://webpack.js.org/) when using Vue's JSX render functions.

## Installation

`npm install vue-jsx-hot-loader`

## Usage

```js

// path/to/component.jsx

export default {

    render(h) {

        return (

            


                
Hello

            

        );

    },

};

```


```js

// webpack.config.js

export default {

    // ...

    module: {

        loaders: [

            // Enable HMR for JSX.

            {

                test: /\.jsx$/,

                use: [

                    'babel-loader',

                    'vue-jsx-hot-loader',

                ],

            },

            // Remember to use babel on the rest of the JS files.

            {

                test: /\.js$/,

                use: 'babel-loader',

            },

        ],

    },

};

```

## Gotchas

* It only works for the default exported module (which should normally be the component itself).

## Development

### Playground

```bash

npm run playground

```

### Release

```bash

npx np

```