Unable to get HMR working in Vue with TypeScript

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.0.2
Cross-platform modules:
Android Runtime: ^8.0.0
iOS Runtime: ^8.0.0
XCode Version: 12.5.1
Plugin(s):

Describe the bug

Trying to get a HMR working with TypeScript and Vue

To Reproduce

ns create --vue --ts  ns-vue-app
# I also tested with ns create --vue   ns-vue-app no typescript and get similar results
cd ns-vue-app
ns run ios
# app is now in simulator
# modify app/components/Home.vue so the message is changed
#save

Expected behavior

The modified message appears in the simulator

Sample project

Additional context

Running on macOS and Simulator is running iPad Air simulator

{
  "name": "@nativescript/template-blank-vue-ts",
  "main": "app/app.ts",
  "displayName": "Blank Vue Typescript",
  "version": "8.0.3",
  "description": "NativeScript Application",
  "author": "NativeScript Team <oss@nativescript.org>",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "homepage": "https://github.com/NativeScript/nativescript-app-templates",
  "bugs": {
    "url": "https://github.com/NativeScript/NativeScript/issues"
  },
  "publishConfig": {
    "access": "public"
  },
  "files": [
    "app",
    "App_Resources",
    "hooks",
    "tools",
    "!tools/assets",
    "types",
    ".editorconfig",
    "tsconfig.json"
  ],
  "keywords": [
    "nstudio",
    "nativescript",
    "mobile",
    "{N}",
    "tns",
    "vue",
    "nativescript-vue",
    "template",
    "master-detail",
    "detail",
    "category-general"
  ],
  "dependencies": {
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.1",
    "nativescript-vue": "~2.9.0"
  },
  "devDependencies": {
    "@nativescript/ios": "8.0.0",
    "@nativescript/types": "~8.0.0",
    "@nativescript/webpack": "beta",
    "@types/node": "~14.6.2",
    "nativescript-vue-template-compiler": "~2.9.0",
    "typescript": "~4.0.0",
    "vue": "~2.6.12"
  },
  "private": "true",
  "readme": "NativeScript Application"
}

Code that I changed

<script lang="ts">
  import Vue from "nativescript-vue";

  export default Vue.extend({
    computed: {
      message() {
        return "Blank {N}-Vue app abcde"; // added abcde
      }
    }
  });
</script>

ns debug ios sort of works but it does a "restart" it does not update the running app. Or is that by design? Also it only reloads ONCE. Doing another change to the string and saving does not restart it. If I restart the app it allows for one restart.

Digging further I found this nativescript-vue/nativescript-vue#846 and nativescript-vue/nativescript-vue#747 and nativescript-vue/nativescript-vue#518 so it may likely be something specific to NativeScript-Vue

HMR does work. All you need to do is to navigate to another screen then go back to the screen you just modified because the hot reload those not update a screen in place until it's rerendered and you don't necessarily need to restart the app.

Is that a limitation of Vue's HMR implementation?

Yes with the current implementation - I'm working on improvements for Page HMR (other components that don't trigger a page to be re-rendered work fine).

This PR is part of the effort: #9460

@rigor789

@rigor789 your statement makes it sound like the issue is with NativeScript's implementation rather than VueJS' implementation.

Requires changes in both NativeScript (the above PR) and nativescript-vue - the latter being much less trivial to fix.

@rigor789

@rigor789 so nothing needed from VueJS team then, that's good.

I had the same problem and the solution was to run nativescript with the --no-hmr flag - this skips the hmr entirely and just reboots the app on code change (found via https://stackoverflow.com/questions/59180667/nativescript-vue-not-live-updating)

tns run android --no-hmr

no-hmr works, but having to wait ~5-10 seconds to then navigate to the page that's being edited, unfortunately is frustrating developer experience. (I know the page can be set as start page, so the navigation part can be skipped. but still..) I soo wish there was a solution to be able to quickly style pages with NativeScript Vue.

I can imagine HMR being super complicated to get right, but it would be such a big win for Nativescript (Vue)

@rigor789

@rigor789 the PR you specified #9460 seems to be merged now. Is the trivial fix ready?

@trajano

@trajano wish it was a trivial fix, though i do have a branch that is almost working, just need to revive it when i get the chance... Biggest pain point with it is preserving the navigation stack during refreshes.

any update on this?

any update on this?

https://twitter.com/igor_randj/status/1599830172143788032

any update on this?

https://twitter.com/igor_randj/status/1599830172143788032

Thank you, it seems I have a lot to catch up on. First I need to migrate my apps to Nativescript-Vue 3, are there any docs?

HMR for Vue is supported in nativescript-vue 3, and with @nativescript/vite as well. Please open an issue at https://github.com/nativescript-vue/nativescript-vue if HMR doesn't apply changes with a current setup.

Navigation Menu

Repository navigation

Unable to get HMR working in Vue with TypeScript #9507

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Unable to get HMR working in Vue with TypeScript #9507

Description

Activity

trajano commented on Aug 10, 2021

trajano commented on Aug 10, 2021

trajano commented on Aug 10, 2021

trajano commented on Aug 10, 2021

heywhy commented on Aug 24, 2021

trajano commented on Aug 24, 2021

rigor789 commented on Aug 24, 2021

trajano commented on Aug 24, 2021

rigor789 commented on Aug 24, 2021

trajano commented on Aug 24, 2021

AbrahamBrookes commented on Apr 7, 2022

MrSnoozles commented on Aug 21, 2022

trajano commented on Aug 26, 2022

rigor789 commented on Aug 26, 2022

tommag21 commented on Oct 4, 2023

rigor789 commented on Oct 4, 2023

tommag21 commented on Oct 4, 2023

NathanWalker commented on Oct 23, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions