@dallanj/vue-forms

@dallanj/vue-forms

Accessible Vue 3 form fields with framework-neutral error handling and Laravel 13-inspired defaults.

npm install @dallanj/vue-forms

Import the default Laravel 13-inspired stylesheet once in your application:

import '@dallanj/vue-forms/style.css';

<script setup lang="ts">
import { FormProvider, Input } from '@dallanj/vue-forms';
</script>

<template>
  <FormProvider :errors="errors" @clear-error="clearError">
    <Input v-model="form.email" name="email" label="Email" />
  </FormProvider>
</template>

Field IDs are derived from their name, so they remain stable during SSR hydration. When two forms on the same page use the same field names, give each provider a stable id to scope them:

<FormProvider id="billing">
  <Input name="email" label="Email" />
</FormProvider>

Chip is the standalone version of the chips MultiSelect shows for its selected options — useful for rendering things like applied filters:

<Chip label="Species: Dog" removable @remove="clearFilter('species')" />

Its remove affordance is a <button>. Inside another button, pass remove-as="span" (what MultiSelect does) to keep the markup valid.

Import @dallanj/vue-forms/style.css for the default theme or @dallanj/vue-forms/scss to configure Sass variables. Override CSS custom properties at application or component scope.

Inertia integration is optional:

import { InertiaFormProvider } from '@dallanj/vue-forms/inertia';