search

framework7io / framework7-template-vue-webpack

Deprecated! Framework7 Vue Webpack starter app template with hot-reload & css extraction
https://framework7.io/vue/
MIT License
384 stars 136 forks source link

Hot reload doesn't working #83

Open Taxi4you opened 5 years ago

Taxi4you commented 5 years ago

I have cloned the project, ran npm install and npm start, changed something in the code - from MyApp to something else, and hot reload is not getting actioned.

I am using Mac, Chrome, Atom (tried also with Visual Studio Code).

Any fix for this?

danof commented 5 years ago

I'm experiencing the same issue. When I run "npm run dev" the app gets built. When I make a change to any of the files, the app is not rebuilt (nothing happens in the terminal).

I am using a Mac with Chrome and Atom as well.

759325100 commented 5 years ago

i'm modify file.vue and save but chrome console output : image @nolimits4web

Taxi4you commented 5 years ago

I have found that I should bootstrap the app using this line: Framework7.use(Framework7React) (I am using React), and then (after the app is fully loaded) I comment this line and the hot module replacement is working.

This is not the best solution, since everytime I need to make hard refresh I have to uncomment this line, then hard refresh and then comment this line if I want HMR to be working.

@nolimits4web maybe you have an idea why this line collides with the Webpacks HMR?

natuan62 commented 5 years ago

I got same issue.

natuan62 commented 5 years ago

I got the answer what I want from Natalia Sulkama in his article

I have faced the same issue, I mentioned it in the tutorial as well. It only happens in app.vue, and no other component or page, most likely because app.vue contains the f7-app root element, and the parameters to initialize Framework7, so hot-reloading causes Framework7 to re-initialize which causes an error. To avoid this the best way is to just not edit app.vue as much, and instead use components which you import in app.vue. I hope it helps!

https://medium.com/js-dojo/creating-a-todo-app-using-vuejs-and-framework7-f18236cdd099

gawirable commented 5 years ago

I use this template, using Axios to display data from the API, I previously did the same thing without using webpack and it works fine, I tried to use this template, the method is executed properly but the data appears Only when I save the file for the second time, can you help me?