Nuxt3表单输入框自动补全失效：强制刷新后内容丢失

在纯净Nuxt3项目中，执行强制刷新（Cmd+Shift+R）时，表单输入框会依次呈现三种状态：空 → 浏览器自动补全 → 空，期望每次刷新后浏览器自动补全的内容能稳定保留在输入框内。

相关代码如下：

模板代码 #

<form>
  <input
    v-model="formData.email"
    type="email"
    name="email"
    autocomplete="email"
  />

  <input
    v-model="formData.password"
    type="password"
    name="password"
    autocomplete="password"
  />
</form>

脚本代码 #

<script lang="ts" setup>
const formData = reactive({
  email: '',
  password: ''
});
</script>

已知将表单或输入框放入<ClientOnly>标签可解决此问题，但需其他替代方案。

1. 客户端挂载后同步输入框值到响应式数据 #

通过onMounted钩子，在客户端挂载完成后，手动获取输入框当前值（含浏览器自动补全内容）并同步到formData，覆盖初始空值：

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';

const formData = reactive({
  email: '',
  password: ''
});

onMounted(() => {
  const emailInput = document.querySelector('input[name="email"]') as HTMLInputElement;
  const passwordInput = document.querySelector('input[name="password"]') as HTMLInputElement;
  
  if (emailInput.value) formData.email = emailInput.value;
  if (passwordInput.value) formData.password = passwordInput.value;
});
</script>

2. 为组件禁用SSR #

在组件中通过defineOptions设置仅客户端渲染，避免服务器端初始空值覆盖浏览器自动补全内容：

<script lang="ts" setup>
defineOptions({
  ssr: false
});

const formData = reactive({
  email: '',
  password: ''
});
</script>

3. 利用Cookie持久化邮箱输入（可选） #

将邮箱内容存在Cookie中，页面加载时从Cookie读取初始值，确保刷新后内容保留（注意：密码请勿持久化，避免安全风险）：

<script lang="ts" setup>
import { reactive, watch } from 'vue';

const savedEmail = useCookie('saved-email');
const formData = reactive({
  email: savedEmail.value || '',
  password: ''
});

// 输入变化时更新Cookie
watch(() => formData.email, (newVal) => {
  savedEmail.value = newVal;
});
</script>

4. 禁用页面缓存 #

通过useHead添加缓存控制meta标签，阻止服务器端缓存表单初始状态：

<script lang="ts" setup>
const formData = reactive({
  email: '',
  password: ''
});

useHead({
  meta: [
    { httpEquiv: 'Cache-Control', content: 'no-cache, no-store, must-revalidate' },
    { httpEquiv: 'Pragma', content: 'no-cache' },
    { httpEquiv: 'Expires', content: '0' }
  ]
});
</script>

内容的提问来源于stack exchange，提问作者Sklfcha