ktsn / vue-hot-reload-loader

Enable hot module replacement (HMR) on your Vue components

vue-hot-reload-loader

Enable hot module replacement (HMR) on your Vue components.

This loader is for Vue components written in .js (or other non single file components format) file. If you are using .vue file, you don't need this loader because they already have HMR feature.

Installation

# NPM
$ npm install --save-dev vue-hot-reload-loader

# Yarn
$ yarn add --dev vue-hot-reload-loader

Usage

You need to update your webpack config to let webpack awere vue-hot-reload-loader. Note that you should carefuly set webpack's rule condition so that vue-hot-reload-loader is only used for actual component files. See a discussion.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js/,
        use: ['vue-hot-reload-loader', 'buble-loader'],
        // If and only if all your components are in `path/to/components` directory
        include: path.resolve(__dirname, 'path/to/components')
      }
    ]
  }
}

And you have to export each component as default export.

export default {
  data () {
    return {
      message: 'hi'
    }
  }
}

License

MIT

vue-hot-reload-loader's Issues

SourceMap broken

When using this loader on TypeScript, sourcemaps are broken making debuging impossible.

Some module exports may break the build

For some reason, I need to create this dummy module ...

require("muicss/lib/sass/mui.scss");
require("./mui-layout.scss");

export default function(){};

This is not a Vue component at all, but vue-hot-reload-loader consider it is, and it then throw an exception inside the vue-hot-loader-api.

We should provide a way to ignore some module.

require("muicss/lib/sass/mui.scss");
require("./mui-layout.scss");

/* vue-hot-reload-loader: false */
export default function(){};

Also, we should think about improving the detection of Vue components to avoid using this comment on every non-component modules. Do you have any idea to enhance Vue component module detection ?

Interference with Dynamic Imports

I found that with my current configuration (TypeScript with ESNext going into Babel with WebPack) having this loader in my chain causes the build process to fail when compiling components that use dynamic imports.

This is the error, it appears to be occurring in acorn.

ERROR in ./client/app/components/app/app.component.ts
Module build failed: SyntaxError: Unexpected token (10:23)
  at Parser.pp$4.raise (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:2649:13)
  at Parser.pp.unexpected (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:637:8)
  at Parser.pp$3.parseExprAtom (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:2117:10)
  at Parser.pp$3.parseExprSubscripts (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:1968:19)
  at Parser.pp$3.parseMaybeUnary (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:1945:17)
  at Parser.pp$3.parseExprOps (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:1887:19)
  at Parser.pp$3.parseMaybeConditional (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:1870:19)
  at Parser.pp$3.parseMaybeAssign (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:1845:19)
  at Parser.pp$3.parseFunctionBody (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:2473:22)
  at Parser.pp$3.parseArrowExpression (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:2456:8)
  at Parser.pp$3.parseParenArrowList (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:2208:15)
  at Parser.pp$3.parseParenAndDistinguishExpression (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:2174:19)
  at Parser.pp$3.parseExprAtom (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:2084:41)
  at Parser.pp$3.parseExprSubscripts (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:1968:19)
  at Parser.pp$3.parseMaybeUnary (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:1945:17)
  at Parser.pp$3.parseExprOps (/Users/chrissimpson/code/~my-vue-project~/node_modules/acorn/dist/acorn.js:1887:19)
@ ./client/app/bootstrap/app.bootstrap.ts 16:0-47
@ multi (webpack)-dev-server/client?http://0.0.0.0:9000 webpack/hot/dev-server ./client/app/bootstrap/app.bootstrap.ts

I forked and edited it to use acorn-dynamic-import, but then estraverse had problems, which I also tried to fix but then escodegen had problems, so I had to give up and get back to work. Maybe you'll have better luck. ;)

Arrow function overrides this and break this loader

I have try to setup this loader on my project running typescript, but it doesn't work properly.

Chrome logs shows that update is detected and considered as a hot module reload change, reload() function is called on hot reload api, but it has no effect, the component is not updated with html template changes.

Any idea ? Maybe it's a hot reload api issue ...

Invalid sourcemap generation

I think there's an issue with sourcemap generation.

In some case, I'm not able to set breakpoint in some part of the file processed by vue-hot-reload-loader. When I disable this loader, it works properly, so i'm pretty sure the issue comes from this module.

Maybe we could replace AST + estraverse with recast, as it seems to support sourcemap properly through the whole parse + replacement process ...

HMR Issue when combined with vue-template-loader

When I enable both this module and hmr option of vue-template-loader, the hmr from vue-template-loader may have no effect.

• Create a project using vue-cli vue init Toilal/vue-webpack-template with default options for each question.
• Run npm install && npm dev.

Step to reproduce:

1. Edit components/HelloWorld.html template. It's reloaded.
2. Edit components/HelloWorld.vue.ts msg variable. It's reloaded.
3. Edit components/HelloWorld.html template again. It's NOT reloaded, and won't be reloaded ever.