Possible to set this up when use Vue with Vanilla JS (not .vue)

Hey I recently posted an issue on vue-router about not being able to properly hot reload vue components with Vanilla JS (at the time I thought it was vue-router).

I have a demo repo here that demonstrates the problem but I will quickly explain it here also.

Basically I am using Vue without .vue files this is simply because I find my workflow (syntax highlighting, how I structure my SASS, etc…) works better using Vanilla JS files. I am requiring .html files using the webpack html-loader as the component template like so:

export default {
    name: 'Home',
    // ...
    template: require('./Home.html')
}

<!-- Home.html -->
<div>
    <p>
        <router-link to="/test-one">Test One</router-link>
    </p>
    <p>
        <router-link to="/test-two">Test Two</router-link>
    </p>
</div>

Is there a way I can set up the vue-hot-reload-api to work with this?

[Toilal]

I wrote a fork of official webpack template that supports Hot Module Reload out of the box for people who don’t want to use vue-loader and .vue single component files. It also support a TypeScript option.

https://github.com/Toilal/vue-webpack-template

[Toilal]

I just found the issue on vue-hot-reload-loader, you can try my Pull Request available on my fork, it works like a charm.