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

[chopfitzroy]

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]

You could try this loader : https://github.com/ktsn/vue-hot-reload-loader or this one : https://github.com/jshmrtn/vue-hot-loader.

First one seems a bit better, but for some reason I can't make it work with typescript. reload is called on api, but it has no effect.

[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.

[chopfitzroy]

Awesome :) thanks @Toilal

[Toilal]

You can now use the original library, pull request has been merged. Le 16 mars 2017 20:34, "Otis Wright" <notifications@github.com> a écrit :

…

Awesome :) thanks @Toilal <https://github.com/Toilal> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#50 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABHJvhvpO6lxmVU0JB3z7uyb2EN5rhyZks5rmY6ngaJpZM4MNjAo> .

[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

[chopfitzroy]

Hey @Toilal & @yyx990803,

Is there any chance of this getting merged back in to the official repo?

Cheers.

[Toilal]

I don't think main repo will allow merging this back because it advocates for not using .vue single component files. This is a really personnal choice and vue dev team promotes using .vue files.