Form Intelligence for Vue.

Add FormLint to a Vue 3 component using the JavaScript SDK and template refs. Keep the form you built and manage its intelligence from your workspace.

One SDK. Your Vue app.

Create a project, save your mapping and rules, add allowed origins, and create a public key. Install the SDK from your own FormLint site:

npm install https://YOUR_SITE_HOST/sdk/formlint-widget-0.1.0.tgz

Replace the host with your public site’s URL. This installs @formlint/widget; a separate Vue package is not required.

Connect after the form mounts.

Attach the SDK when the template refs are available. Replace the example endpoint, public key and form action with your installation details and existing submission flow.

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { attach, getProvider } from '@formlint/widget';

const form = ref(null);
const endpoint = 'https://YOUR_EVALUATION_HOST/evaluate';
const key = 'YOUR_PROJECT_PUBLIC_KEY';
let disposed = false;
let widget;

onMounted(async () => {
  try {
    const provider = await getProvider(endpoint, key);
    if (disposed || !form.value) return;

    widget = attach({
      form: form.value,
      endpoint,
      key,
      fields: ['description'],
      provider
    });
  } catch {
    // Leave the host form usable and quiet when discovery is unavailable.
  }
});

onBeforeUnmount(() => {
  disposed = true;
  widget?.destroy();
});
</script>

<template>
  <!-- Keep your existing form action or @submit handler. -->
  <form ref="form" action="/YOUR_SUBMIT_ENDPOINT" method="post">
    <label>
      Describe your project
      <textarea name="description"></textarea>
    </label>
    <button type="submit">Request a quote</button>
  </form>
</template>

Keep the lifecycle tidy.

The connection begins in onMounted. Cleanup runs in onBeforeUnmount and calls widget.destroy(); the guard ignores provider discovery that finishes after cleanup. These hooks keep browser work out of server rendering. See Vue’s lifecycle documentation.

This example assumes a fixed endpoint and key for the mounted form. If your app switches projects without remounting, destroy the old connection before attaching the new one, or give the form component a key that changes with the project.

The rules live in FormLint.

Match the description field to your project’s saved mapping. Configure the checks and suggestions in your workspace. Explain pre-submit processing in your form’s privacy information; your original form remains responsible for submission.