Why does Chrome autofill not work on Vue?

Chrome writes a field's value directly to the DOM and fires a change event. Vue's v-model listens for input events, not change events, so Vue's reactive state never updates even though the field looks filled.

Why is my Vue submit button still disabled after autofill?

The button is gated on Vue's reactive state, not the visible DOM value. Autofill changed the pixels but not the reactive property, so validators still see an empty value and keep the button disabled.

Does adding autocomplete attributes fix Vue autofill?

It helps the browser and assistive tech identify the field per WCAG 1.3.5, but it does not change the event Chrome fires after filling. Vue's v-model still misses the update, so the attribute alone does not fix it.

Do I need to write code to use QuickForm?

No. Record Mode captures your keystrokes as you fill the form once, then replays them with the input event v-model expects. No native-setter code, no CSS selectors, no config files.

Chrome Autofill Not Working on Vue? How to Fix It

Vue reached 51% usage and 87% retention among front-end developers in the State of JS 2024 survey (State of JS, "State of JavaScript 2024: Front-end Frameworks"), the highest retention figure of any major framework. Developers who pick Vue tend to stay with it, which means Vue powers a large, stable share of the web's interactive forms. And yet Chrome's built-in autofill, designed for static HTML, quietly fails on Vue's v-model-bound inputs: the field looks filled, the user submits, and the reactive state sends empty strings.

Key Takeaways

Chrome writes a field's .value directly to the DOM. Vue's v-model only updates reactive state from a dispatched input event, so the direct write is invisible to Vue.

Vue reached 51% usage and 87% retention in the State of JS 2024 survey, meaning this touches a large, well-established developer community.

You can fix it in code by using the native value setter and dispatching a single input event, the one v-model listens to.

The autocomplete attribute helps accessibility and field matching but does not change which event Chrome fires after filling.

Across 93 million tracked sessions, the average form completes just 51.7% of the time (Zuko, "25 Conversion Rate Statistics You Need"). Silent autofill failure pushes that number lower.

Why does Chrome autofill fail on Vue?

The failure is an event-timing mismatch, not a bug in either tool. Vue's v-model on a text input is shorthand for binding :value and listening for @input. When Chrome autofills a field, it writes to the DOM node's .value property and fires a native change event. Vue's reactivity system is not listening for change on v-model text inputs; it is waiting for input. That event never arrives, so Vue's reactive property stays at its previous empty value even though the field visually shows the autofill text.

This is why "the email field is filled but I get a required-field error" is the signature Vue autofill symptom. The DOM and Vue's reactive state have diverged. The same structural mismatch affects React and Angular, though each framework listens to a slightly different set of events, which is why the code fix differs per framework.

How do you fix Vue autofill in code?

If you control the page, the fix follows the same native-setter pattern as React, but only the input event is needed because that is what v-model syncs on:

const input = document.querySelector("#email")
// Vue overrides the value setter, so reach the native one:
const nativeSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype, "value").set
nativeSetter.call(input, "[email protected]")
// v-model syncs on the input event
input.dispatchEvent(new Event("input", { bubbles: true }))

One event is enough for v-model on Vue 3 text inputs. If you are using a form library like VeeValidate or FormKit that also tracks change, add that event too. Skip the native setter and Vue's overridden one absorbs the write silently; skip the event and Vue's reactivity never wakes up.

Does the autocomplete attribute fix it?

Not on its own. Adding autocomplete="email" is still worth doing: W3C's WCAG 2.2 criterion 1.3.5 Identify Input Purpose recommends it so assistive tech and password managers can identify the field's purpose, which helps users with cognitive and motor needs (W3C, "Understanding SC 1.3.5: Identify Input Purpose (WCAG 2.2)"). But the attribute only tells the browser what a field is for. It does not change which event Chrome dispatches after filling, so Vue's reactivity gap remains. Use it alongside the native-setter fix.

What does broken Vue autofill cost your users?

Friction at the form is where conversions die. Across 93 million tracked sessions, Zuko found the average online form completes just 51.7% of the time, and form length is the single reason cited by 27% of people who quit (Zuko, "25 Conversion Rate Statistics You Need", 2025). Vue is a common choice for consumer-facing products: checkout pages, account signup, and contact forms where autofill usage is highest. When autofill silently fails, every field becomes manual again, which is exactly the effort that pushes completion rates below that 51.7% average.

The no-code fix: QuickForm Record Mode

Not everyone owns the page, and not every team wants to patch v-model across a large Vue app. A dedicated autofill extension for Vue does the same job as the snippet above without touching component code. QuickForm's Record Mode captures your real keystrokes once, then replays them through the same native-setter-plus-input-event path v-model expects. Reactive state updates, validation runs, and the submit button enables, exactly as if you had typed.

Fill Vue forms in one click, free

No account required. Works in 60 seconds.

Add to Chrome, it's free

50,000+ users · 4.2 stars

Setting it up takes about a minute:

Install QuickForm from the Chrome Web Store (free, no account needed)
Open the Vue form you want to autofill
Click the QuickForm icon, then enable Record Mode
Fill the form once, normally. QuickForm captures every field
Save the profile and give it a name
Next time, click the profile and the whole form fills in one click, using the events Vue recognises