Nextcloud vue app not updating when running npm run build

Greetings, I am new to developing in Nextcloud so forgive me if the answer to this question is simple but I have been unable to find any information regarding this issue.

I am developing a Nextcloud app using Vue.js for my frontend however; whenever I make changes to the Vue components, save them, then create a new build of the app using “npm run build” those changes are not reflected in Nextcloud at all. Is there an additional step that needs to be done to get the Vue change to reflect in Nextcloud?

Steps to reproduce:

  1. Download skeleton app
  2. Load app in Nextcloud and navigate to it to load the page
  3. Make a change to the content of the Vue file and create a new build
  4. Reloading the app in Nextcloud still shows the original content without the change

Update: I have figured out that the template of the older version is being cached by Nextcloud since after performing a hard reload that emptied the cache it loaded the updated page.

My new question though is to ask whether there is an easier way to streamline updates without having to empty my cache on each update since that could impact my development time in losing data that I may need to cache.

First, I suggest to disable all caches during development. These are only for performance there and performance is no issue during development. Just keeping the developer console open should do the trick.

You could add the hmr_enabler app to your Nextcloud instance. With that in place, you can call npm run dev or similar to build a development version that is upgrades as you save. If the hmr is working, the changed should be automatically released to the browser. Very nice for development.