### Install @sfxcode/formkit-primevue Dependency

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/getting-started.md

This command adds the @sfxcode/formkit-primevue package to your project as a development dependency using pnpm. This is the first step to enable PrimeVue components within FormKit.

```sh
$ pnpm add -D @sfxcode/formkit-primevue
```

--------------------------------

### Complete FormKitDataEdit Component Example with Script Setup

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/form.md

A comprehensive Vue example demonstrating the full integration of the FormKitDataEdit component. It includes the script setup section for importing the component, defining reactive data and schema, and an asynchronous function to handle form submission, along with the template usage.

```vue
<script setup lang='ts'>
import { FormKitDataEdit } from '@sfxcode/formkit-primevue/components'

const formSchema = ref({}) // some schema should be provided
const formData = ref({}) // some data

async function submitHandler(data: any) {
  // some action on form submit
}
</script>

<template>
  <div>
    <FormKitDataEdit
      v-model="formData" :schema="formSchema"
      :debug-schema="false" :debug-data="true"
      @data-saved="submitHandler"
    />
  </div>
</template>
```

--------------------------------

### Vue Component Example with FormKit and PrimeVue

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/getting-started.md

This comprehensive Vue 3 component showcases the integration of FormKit with various PrimeVue form elements. It defines a reactive schema for the form, including inputs like text, textarea, editor, checkbox, and dropdown, and demonstrates data binding and form submission handling.

```vue
<script setup lang='ts'>
import { reactive, ref } from 'vue'

const options = [
  { label: 'Every page load', value: 'refresh' },
  { label: 'Ever hour', value: 'hourly' },
  { label: 'Every day', value: 'daily' },
]

const schema = reactive(
  [
    {
      "$el": 'h2',
      children: ['Register ', '$email'],
    },
    {
      "$el": 'h3',
      children: 'Header Text H3',
    },
    {
      "$formkit": 'primeInputText',
      name: 'email',
      label: 'Email',
      help: 'This will be used for your account.',
      validation: 'required|email',
    },
    {
      "$formkit": 'primeTextarea',
      name: 'myText',
      label: 'Text',
      validation: '',
      rows: '3',
    },
    {
      "$formkit": 'primeEditor',
      name: 'myEditor',
      label: 'Editor',
      style: 'height: 160px;',
    },
    {
      "$formkit": 'primeInputText',
      name: 'password',
      label: 'Password',
      help: 'Enter your new password.',
      validation: 'required|length:5,16',
    },
    {
      "$formkit": 'primeInputText',
      name: 'password_confirm',
      label: 'Confirm password',
      help: 'Enter your new password again.',
      validation: 'required|confirm',
      validationLabel: 'password confirmation',
    },
    {
      "$formkit": 'primeCheckbox',
      name: 'eu_citizen',
      id: 'eu',
      label: 'Are you a european citizen?',
    },
    {
      "$formkit": 'primeDropdown',
      if: '$get(eu).value', // 👀 Oooo, conditionals!
      name: 'cookie_notice',
      label: 'Cookie notice frequency',
      optionLabel: 'label',
      optionValue: 'value',
      options,
      help: 'How often should we display a cookie notice?',
    },
  ],
)

const data = ref({ email: 'tom@sfxcode.com' })

async function submitHandler() {
  await new Promise(resolve => setTimeout(resolve, 1000))
}
</script>

<template>
  <div class="max-w-xl">
    <div class="myFormkit">
      <FormKit
        id="form"
        v-model="data"
        type="form"
        :submit-attrs="{
          inputClass: 'p-button p-component',
        }"
        @submit="submitHandler"
      >
        <FormKitSchema :schema="schema" :data="data" />
      </FormKit>
    </div>
    <h4>Data</h4>
    <pre>{{ data }}</pre>
  </div>
</template>
```

--------------------------------

### Install FormKit PrimeVue Nuxt Module

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/advanced/nuxt.md

This command utilizes the `nuxi` CLI to add the `@sfxcode/formkit-primevue-nuxt` module to your Nuxt application, streamlining the initial setup process.

```bash
npx nuxi module add @sfxcode/formkit-primevue-nuxt
```

--------------------------------

### Configure FormKit with PrimeVue Inputs

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/getting-started.md

This TypeScript configuration snippet for formkit.config.ts demonstrates how to import and register the 'primeInputs' collection from the @sfxcode/formkit-primevue library. This step makes PrimeVue-based FormKit inputs available for use in your application.

```ts
// formkit.config.ts
import type { DefaultConfigOptions } from '@formkit/vue'
import { primeInputs } from '@sfxcode/formkit-primevue'

const config: DefaultConfigOptions = {
  inputs: primeInputs
}

export default config
```

--------------------------------

### FormKit Schema Example with PrimeOutputBoolean

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/prefix.md

This TypeScript code snippet demonstrates a FormKit schema array containing a single definition for a `primeOutputBoolean` component. It illustrates how to assign a `name`, `label`, and apply both text-based (`prefix`, `suffix`) and icon-based (`iconPrefix`, `iconSuffix`) properties. The icons are specified using PrimeIcons classes (`pi pi-check`, `pi pi-times`), showcasing how to visually adorn form elements.

```typescript
const schema
= [
  {
    $formkit: 'primeOutputBoolean',
    name: 'falseValue',
    label: 'False',
    prefix: 'prefix',
    iconPrefix: 'pi pi-check',
    suffix: 'suffix',
    iconSuffix: 'pi pi-times',
  }
]
```

--------------------------------

### FormKit PrimeVue Nuxt Module Configuration Options

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/advanced/nuxt.md

Defines the available options for configuring the `@sfxcode/formkit-primevue-nuxt` module, allowing developers to control asset inclusion and automatic installation of related Nuxt modules.

```APIDOC
Module Options:
  includePrimeIcons: boolean
    default: true
    description: Add PrimeIcons CSS to the project.
  includeStyles: boolean
    default: true
    description: Add custom FormKit CSS to the project.
  installI18N: boolean
    default: true
    description: Install nuxt i18n module automatically.
  installFormKit: boolean
    default: true
    description: Install nuxt formkit module automatically.
```

--------------------------------

### Simplify Formkit Schema with addElement (JSON & TypeScript)

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/advanced/composables.md

Illustrates how the `addElement` helper from `useFormKitSchema` can simplify the creation of schema elements, replacing verbose JSON structures with more concise TypeScript code. It provides an example of adding `h2` and `h3` elements to a schema.

```json
[
  {
    "$el": "h2",
    "children": ["Register ", "$email"]
  },
  {
    "$el": "h3",
    "children": "Header Text H3"
  }
]
```

```ts
const { addElement } = useFormkitSchema()

const formData = ref([
  addElement('h2', ['Register ', '$email']),
  addElement('h3', 'Header Text H3')
  // more form elements ...
])
```

--------------------------------

### Import useFormkitRepeater Composable (Vue/TypeScript)

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/advanced/composables.md

Shows how to import and destructure helper functions from the `useFormkitRepeater` composable within a Vue 3 `<script setup>` block. This composable provides utilities like `addInsertButton`, `addGroupButtons`, and `addListGroupFunctions` for building repeater functionality.

```vue
<script setup lang='ts'>
import { useFormKitRepeater } from '@sfxcode/formkit-primevue/comosables'

const { addInsertButton, addGroupButtons, addListGroupFunctions } = useFormKitRepeater()
</script>
```

--------------------------------

### Define PrimeOutputText FormKit Type

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/prefix.md

This TypeScript code defines `primeOutputTextDefinition` as a FormKitTypeDefinition. It utilizes `createInput` to associate the `PrimeOutputText` component with FormKit, explicitly listing the supported props: `prefix`, `suffix`, `iconPrefix`, and `iconSuffix`. This configuration ensures FormKit correctly processes these properties when rendering `PrimeOutputText` components.

```typescript
export const primeOutputTextDefinition: FormKitTypeDefinition = createInput(PrimeOutputText, {
  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix'],
})
```

--------------------------------

### Render Formkit Form with Schema in Vue

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/usage.md

This Vue template demonstrates how to render a Formkit form using the defined schema and bind data to it. It configures the submit button with PrimeVue styling and hooks into a submit handler function.

```Vue
<template>
  <FormKit
    id="form"
    v-model="data"
    type="form"
    :submit-attrs={
      inputClass: 'p-button p-component',
    }
    @submit="submitHandler"
  >
    <FormKitSchema :schema="schema" :data="data" />
  </FormKit>
</template>
```

--------------------------------

### Define Formkit Schema and Data in TypeScript

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/usage.md

This TypeScript code defines a reactive Formkit schema for a registration form, including input fields like email and textarea with validation rules. It also initializes form data and provides a placeholder asynchronous submit handler function.

```TypeScript
const schema = reactive(
  [
    {
      "$el": "h2",
      "children": "Registration Form"
    },
    {
      "$el": "h3",
      "children": ["Register ", "$email"]
    },
    {
      "$formkit": "primeInputText",
      "name": "email",
      "label": "Email",
      "help": "This will be used for your account.",
      "validation": "required|email"
    },
    {
      "$formkit": "primeTextarea",
      "name": "comment",
      "label": "Text",
      "validation": "",
      "rows": "3"
    }
  ]
)

const data = ref({ email: 'tom@sfxcode.com' })

async function submitHandler() {
  await new Promise(resolve => setTimeout(resolve, 1000))
}
```

--------------------------------

### Configure FormKit with PrimeVue Inputs and Outputs

Source: https://github.com/sfxcode/formkit-primevue/blob/main/README.md

This snippet extends the basic FormKit configuration to include PrimeVue-based output components alongside inputs. It imports `primeOutputs` in addition to `primeInputs` and merges them into the `inputs` configuration object, enabling both input and output functionalities.

```typescript
import { defaultConfig, plugin } from '@formkit/vue'
import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'

app.use(plugin, defaultConfig({
  locales: { de, en },
  // Define the active locale
  locale: 'en',
    inputs: { ...primeInputs, ...primeOutputs }
}))
```

--------------------------------

### FormKitDataEdit Component Main Properties API Reference

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/form.md

Detailed API documentation for the FormKitDataEdit component's main properties. This includes properties for data binding, schema definition, and debugging options, along with their respective types and descriptions.

```APIDOC
FormKitDataEdit:
  Main Properties:
    v-model:
      Type: Object
      Description: The data object to be edited with 2-Way-Binding
    data:
      Type: Object
      Description: The data object to be edited
    :schema:
      Type: Object
      Description: The schema object to be used
    :debug-schema:
      Type: Boolean
      Description: Display the schema
    :debug-data:
      Type: Boolean
      Description: Display the data
    :show-reset:
      Type: Boolean
      Description: Display some Button for resetting data to initial state
```

--------------------------------

### Basic FormKitDataEdit Component Usage

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/form.md

Demonstrates the basic integration of the FormKitDataEdit component in a Vue template, showing how to bind data using v-model, pass a schema, and handle the data-saved event upon form submission.

```vue
    <FormKitDataEdit v-model="formData" :schema="formSchema"
                     @data-saved="submitHandler"
/>
```

--------------------------------

### Configure PrimeDropdown with Simple String Array Options

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/options.md

Demonstrates how to populate a `primeDropdown` FormKit input using a simple array of strings as options. The dropdown will display these strings directly, and the selected value will be one of these strings.

```vue
const stringArray = ['refresh', 'hourly', 'daily']

const schema
= [
    {
    $formkit: 'primeDropdown',
    name: 'selectString',
    label: 'Simple String Array Dropdown',
    options: stringArray,
    },
]
```

--------------------------------

### Configure FormKit with PrimeVue Inputs

Source: https://github.com/sfxcode/formkit-primevue/blob/main/README.md

This code snippet demonstrates how to configure FormKit in a Vue application to use PrimeVue-based input components. It imports `defaultConfig` and `plugin` from `@formkit/vue` and `primeInputs` from `@sfxcode/formkit-primevue`, then registers them with the Vue app.

```typescript
import { defaultConfig, plugin } from '@formkit/vue'
import { primeInputs } from '@sfxcode/formkit-primevue'

app.use(plugin, defaultConfig({
  locales: { de, en },
  // Define the active locale
  locale: 'en',
  inputs: primeInputs 
}))
```

--------------------------------

### Using FormKit Components Directly (Without Schema)

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/advanced/schema.md

Demonstrates how to construct a form in a Vue application by directly using FormKit components, bypassing the FormKit Schema. This approach provides explicit control over each form element and its properties within the template.

```vue
<template>
  <FormKit type="form" @submit="handleSubmit">
    <FormKit
      type="text"
      label="Your Name"
      placeholder="Enter your name"
      validation="required"
    />
    <FormKit
      type="email"
      label="Your Email"
      placeholder="Enter your email"
      validation="required|email"
    />
    <FormKit
      type="submit"
      label="Submit"
    />
  </FormKit>
</template>

<script setup>
import { FormKit } from '@formkit/vue';

const handleSubmit = (data) => {
  console.log('Form submitted with data:', data);
  alert('Form submitted! Check console for data.');
};
</script>
```

--------------------------------

### Configure FormKit with AsteriskPlugin

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/advanced/plugins.md

This code snippet demonstrates how to integrate the AsteriskPlugin into your FormKit configuration. The AsteriskPlugin automatically appends an asterisk to labels of validated input fields, signaling required fields to users. To use it, ensure `addPrimeAsteriskPlugin` is imported and included in the `plugins` array within your FormKit configuration.

```ts
plugins: [
  addPrimeAsteriskPlugin,
]
```

--------------------------------

### FormKit Grid Layout with PrimeVue

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/styling.md

This TypeScript snippet demonstrates how to implement a 2-column grid layout for FormKit elements using the `formkit-primevue.scss` grid system. By applying the `outerClass: 'col-6'` property to two FormKit items, they will be placed side-by-side, each occupying half of the available width.

```ts
const formkitItems = [
  {
    $formkit: 'primePassword',
    name: 'password',
    label: 'Password',
    help: 'Enter your new password.',
    validation: 'required|length:5,16',
    feedback: true,
    outerClass: 'col-6'
  },
  {
    $formkit: 'primePassword',
    name: 'password_confirm',
    label: 'Confirm password',
    help: 'Enter your new password again.',
    validation: 'required|confirm',
    validationLabel: 'password confirmation',
    outerClass: 'col-6'
  }
]
```

--------------------------------

### Add Component to Formkit Schema using addComponent (TypeScript)

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/advanced/composables.md

Demonstrates how to use the `addComponent` helper from `useFormKitSchema` to programmatically add a PrimeVue Button component to a Formkit schema. It shows the function signature, parameters like `onClick`, `label`, `icon`, `severity`, `render`, and `styleClass`, and how it returns an object representing the component.

```ts
const { addComponent } = useFormKitSchema()

function addButtonComponent(onClick: string = '', label: string = '', icon: string = '', severity: string = '', render: string = 'true', styleClass: string = 'p-button-sm ml-2'): object {
  return addComponent('Button', { onClick, label, icon, class: styleClass, severity }, render)
}
```

--------------------------------

### Configure PrimeDropdown with Object Array and optionLabel

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/options.md

Illustrates how to use an array of objects as options for a `primeDropdown` FormKit input. The `optionLabel` property is used to specify which object key's value should be displayed in the dropdown, while the entire object is returned upon selection.

```vue
const cities = [
    { name: 'New York', code: 'NY' },
    { name: 'Rome', code: 'RM' },
    { name: 'London', code: 'LDN' },
    { name: 'Istanbul', code: 'IST' },
    { name: 'Paris', code: 'PRS' },
]

const schema = [
    {
    $formkit: 'primeDropdown',
    name: 'selectObjectByLabel',
    label: 'Select Object Dropdown',
    optionLabel: 'name',
    options: cities,
    },
]
```

--------------------------------

### Configure PrimeDropdown with Object Array, optionLabel, and optionValue

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/options.md

Shows how to use an array of objects for `primeDropdown` options, explicitly defining both the display label (`optionLabel`) and the underlying value (`optionValue`) using different object keys. This allows for distinct display text and stored values for each option.

```vue
const options = [
    { label: 'Every page load', value: 'refresh' },
    { label: 'Every hour', value: 'hourly' },
    { label: 'Every day', value: 'daily' },
]

const schema = [
    {
    $formkit: 'primeDropdown',
    name: 'selectValue',
    label: 'Cookie notice Dropdown',
    value: 'hourly',
    optionLabel: 'label',
    optionValue: 'value',
    options,
    help: 'Cookie notice frequency ?',
    },
]
```

--------------------------------

### FormKitDataEdit Component Style Properties API Reference

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/form.md

Detailed API documentation for the FormKitDataEdit component's style-related properties. These properties allow for customization of CSS classes, PrimeVue button severity, labels, and icons for various form elements and action buttons.

```APIDOC
FormKitDataEdit:
  Style Properties:
    formClass:
      Type: String
      Description: Add additional classes to the form
    actionsClass:
      Type: String
      Description: Add additional classes to the action div
    submitClass:
      Type: String
      Description: Add additional classes to the submit button
    submitSeverity:
      Type: String
      Description: PrimeVue Button severity
    submitLabel:
      Type: String
      Description: Default: Save
    submitIcon:
      Type: String
      Description: PrimeVue Button icon
    resetClass:
      Type: String
      Description: Add additional classes to the reset button
    resetSeverity:
      Type: String
      Description: PrimeVue Button severity
    resetLabel:
      Type: String
      Description: Default: Reset
    resetIcon:
      Type: String
      Description: PrimeVue Button icon
```

--------------------------------

### Define Formkit Schema with PrimeVue Components

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/index.md

This TypeScript schema demonstrates how to define a Formkit form using PrimeVue input components like `primeInputText` and `primeTextarea`. It includes basic validation rules for fields such as email and defines structural elements like headers within the form.

```ts
const schema = reactive(
  [
    {
      "$el": "h2",
      "children": ["Register ", "$email"]
    },
    {
      "$el": "h3",
      "children": "Header Text H3"
    },
    {
      "$formkit": "primeInputText",
      "name": "email",
      "label": "Email",
      "help": "This will be used for your account.",
      "validation": "required|email"
    },
    {
      "$formkit": "primeTextarea",
      "name": "myText",
      "label": "Text",
      "validation": "",
      "rows": "3"
    }
  ]
)
```

--------------------------------

### FormKit Schema Definition for PrimeVue OutputNumber

Source: https://github.com/sfxcode/formkit-primevue/blob/main/docs/guide/outputs.md

This TypeScript snippet illustrates how to define an output number component within a FormKit schema. It uses the `primeOutputNumber` type, assigns a field name, and specifies a `vue-i18n` format for displaying the numerical value.

```TypeScript
const formkitItem = {
  $formkit: 'primeOutputNumber',
  name: 'mumber',
  format: 'decimal' // vue-i18n format
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.