Vue Adapter Guide (@continuejs/vue)

The @continuejs/vue package provides the useDraft composable for Vue 3 Composition API.

---

Vue 3 Composition API Example

<script setup>
import { ref, onMounted } from 'vue';
import { useDraft } from '@continuejs/vue';

const { draft, restore, clearDraft } = useDraft('profile-editor', {
  retention: '7d',
});

const form = ref({
  username: '',
  bio: '',
});

const hasDraft = ref(false);

onMounted(async () => {
  hasDraft.value = await draft.hasDraft();
});

async function handleRestore() {
  const data = await restore();
  if (data) {
    form.value.username = data.username || '';
    form.value.bio = data.bio || '';
  }
}

function handleInput() {
  draft.setMultiple(form.value);
  draft.save();
}
</script>

<template>
  <div class="vue-form">
    <button v-if="hasDraft" @click="handleRestore">Restore Draft</button>

    <form @submit.prevent="clearDraft">
      <input v-model="form.username" @input="handleInput" placeholder="Username" />
      <textarea v-model="form.bio" @input="handleInput" placeholder="Bio"></textarea>
      <button type="submit">Save Profile</button>
    </form>
  </div>
</template>