LinusBorg / LinusBorg/vue-lib-template

Changing props does not update

Open
#3 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
106
Forks
11
PR merge metrics
No merged PRs in 30d

Description

If you run the playground app and then edit `lib\src\Component.vue` to change the prop, e.g. rename `message` to `msg`, saving updates the UI and hides the message on the screen (as you would expect, it's no longer receiving a value for that prop). However, if you then update App.vue in the playground to use `msg` not `message`, whilst you can see HMR fires an update for `App.vue` it does not start rendering the message again. The JS console prints some warnings stating that you are passing an extraneous prop `msg` and missing the required prop `message`.

This is the case regardless of whether the component is registered via a plugin, or imported directly in App.vue.

It's easily worked around with a quick refresh - but perhaps there is a way to get it working?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the prop rename workflow in the playground, using lib\src\Component.vue and the playground's App.vue, and compare direct registration with plugin registration. Trace the HMR update after App.vue changes; done means the message renders again without a refresh and the extraneous or missing prop warnings disappear.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.