### Plugin 'setup' Option Example

Source: https://vueform.com/docs/plugins

Extend component properties and methods using the 'setup' option. This example hides all 'TextElement' components by default and adds a 'myRef' property.

```javascript
import { ref } from 'vue'

export default function myPlugin() {
  return {
    apply: 'TextElement',
    setup(props, context, component) {
      const myRef = ref('Hello World')

      // Hides all text element by default
      component.hidden.value = true

      return {
        ...component,
        myRef,
      }
    },
  }
}
```

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

### Install Vueform with Bun

Source: https://vueform.com/docs

Use this command to install Vueform using Bun. It will guide you through the setup process for Vite, Nuxt, Astro, or Laravel environments.

```bash
bun create vueform
```

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

### Form Steps with Options API and setup

Source: https://vueform.com/docs/breaking-forms-into-steps

Example combining Vue's Options API with the `setup` function for form steps. This approach uses `mixins` and `data` to define the form structure.

```javascript
import { ref, h, resolveComponent } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      steps: {
        first: {
          label: 'First',
          elements: ['first_input'],
          labels: {
            previous: {
              props: ['step$'],
              render: () => h('span', [
                h(resolveComponent('AppIcon'), {
                  icon: ['far', 'arrow-left']
                }),
                h('Previous'),
              ])
            },
            // ...
          }
        },
        // ...
      },
      // ...
    }
  })
}
```

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

### Plugin 'install' Option Example

Source: https://vueform.com/docs/plugins

Execute custom logic after the configuration is resolved and before components are registered using the 'install' option. This example adds a variable to the global $vueform object.

```javascript
export default function myPlugin() {
  return {
    install(app, $vueform) {
      // Adding new variable to global $vueform object
      $vueform.foo = 'bar'
    }
  }
}
```

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

### Install Vueform with pnpm

Source: https://vueform.com/docs

Use this command to install Vueform using pnpm. It will guide you through the setup process for Vite, Nuxt, Astro, or Laravel environments.

```bash
pnpm create vueform
```

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

### Install Vueform with npm

Source: https://vueform.com/docs

Use this command to install Vueform using npm. It will guide you through the setup process for Vite, Nuxt, Astro, or Laravel environments.

```bash
npm create vueform@latest
```

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

### Form Steps with Composition API

Source: https://vueform.com/docs/breaking-forms-into-steps

Example of implementing form steps using Vue's Composition API with the `useVueform` hook. It demonstrates defining the form structure within the `setup` function.

```javascript
import { ref, h, resolveComponent } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: (props, context) => {
    const form = useVueform(props, context)

    const vueform = ref({
      steps: {
        first: {
          label: 'First',
          elements: ['first_input'],
          labels: {
            previous: {
              props: ['step$'],
              render: () => h('span', [
                h(resolveComponent('AppIcon'), {
                  icon: ['far', 'arrow-left']
                }),
                h('Previous'),
              ])
            },
            // ...
          }
        },
        // ...
      },
      // ...
    })

    return {
      ...form,
      vueform,
    }
  }
}
```

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

### Install Vueform with Yarn

Source: https://vueform.com/docs

Use this command to install Vueform using Yarn. It will guide you through the setup process for Vite, Nuxt, Astro, or Laravel environments.

```bash
yarn create vueform
```

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

### Install @vueform/plugin-mask with bun

Source: https://vueform.com/docs/input-mask

Install the input mask plugin using bun.

```bash
bun install @vueform/plugin-mask
```

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

### Install @vueform/plugin-mask with pnpm

Source: https://vueform.com/docs/input-mask

Install the input mask plugin using pnpm.

```bash
pnpm install @vueform/plugin-mask
```

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

### Vueform Form Steps with Composition API and useVueform

Source: https://vueform.com/docs/breaking-forms-into-steps

Integrate FormSteps with the useVueform composable for advanced reactivity and setup in the Composition API. This example shows how to manage form configuration within the setup function.

```vue
<!-- Composition API -->
<script>
import { ref } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: (props, context) => {
    const form = useVueform(props, context)

    const vueform = ref({
      steps: {
        first: {
          label: 'First',
          elements: ['first_input']
        },
        second: {
          label: 'Second',
          elements: ['second_input']
        },
        third: {
          label: 'Third',
          elements: ['third_input']
        },
      },
      schema: {
        first_input: { type: 'text', placeholder: 'First input' },
        second_input: { type: 'text', placeholder: 'Second input' },
        third_input: { type: 'text', placeholder: 'Third input' },
      }
    })

    return {
      ...form,
      vueform,
    }
  }
}
</script>
```

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

### Install Dependencies (bun)

Source: https://vueform.com/docs/tree-shaking

Installs necessary Vueform dependencies required for building from source using bun.

```bash
bun install autosize flatpickr locutus lodash sortablejs
```

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

### Install @vueform/plugin-mask with yarn

Source: https://vueform.com/docs/input-mask

Install the input mask plugin using yarn.

```bash
yarn add @vueform/plugin-mask
```

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

### Install @vueform/plugin-mask with npm

Source: https://vueform.com/docs/input-mask

Install the input mask plugin using npm.

```bash
npm install @vueform/plugin-mask
```

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

### Plugin 'apply' Option with Regex

Source: https://vueform.com/docs/plugins

Use a regular expression to specify which Vueform components this plugin's 'setup' option should be applied to. This example applies to all components ending with 'Element'.

```javascript
export default function myPlugin() {
  return {
    apply: /^[a-zA-Z]+Element$/, 
    setup(props, context, component) { /* ... */ },
  }
}
```

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

### Install Dependencies (pnpm)

Source: https://vueform.com/docs/tree-shaking

Installs necessary Vueform dependencies required for building from source using pnpm.

```bash
pnpm add autosize flatpickr locutus lodash sortablejs
```

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

### Install Dependencies (npm)

Source: https://vueform.com/docs/tree-shaking

Installs necessary Vueform dependencies required for building from source using npm.

```bash
npm install autosize flatpickr locutus lodash sortablejs
```

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

### Vueform Tabs Configuration with useVueform (Options API)

Source: https://vueform.com/docs/breaking-forms-into-steps

This Options API example uses the `useVueform` setup function to manage a form with tabs. The tab structure and schema are defined within the `vueform` data property.

```vue
import { ref } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      tabs: {
        first: {
          label: 'First',
          elements: ['first_input']
        },
        second: {
          label: 'Second',
          elements: ['second_input']
        },
        third: {
          label: 'Third',
          elements: ['third_input']
        },
      },
      schema: {
        first_input: { type: 'text', placeholder: 'First input' },
        second_input: { type: 'text', placeholder: 'Second input' },
        third_input: { type: 'text', placeholder: 'Third input' },
      }
    }
  })
}
```

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

### Set List Order Start

Source: https://vueform.com/docs/configuration

Globally configure whether lists should start their order from 0 or 1. Defaults to 1.

```javascript
// vueform.config.js

import { defineConfig } from '@vueform/vueform'

export default defineConfig({
  orderFrom: 0,
  // ...
})
```

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

### Install Dependencies (yarn)

Source: https://vueform.com/docs/tree-shaking

Installs necessary Vueform dependencies required for building from source using yarn.

```bash
yarn add autosize flatpickr locutus lodash sortablejs
```

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

### Plugin 'apply' Option with Array of Strings

Source: https://vueform.com/docs/plugins

Provide an array of component names to apply the plugin's 'setup' option to multiple specific components.

```javascript
apply: ['TextElement', 'TextareaElement'],
```

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

### Options API with Composition API Setup

Source: https://vueform.com/docs/breaking-forms-into-steps

A hybrid approach using Options API for data and Composition API's `setup` for `useVueform`. The `vueform` data property contains the tab configuration and `onMounted` hook.

```javascript
import { ref } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      tabs: {
        first: {
          label: 'First',
          elements: ['first_input'],
        },
      },
      onMounted(form$) {
        form$.tabs$ // returns FormTabs component instance
        form$.tabs$.tabs$.first // returns FormTab component instance named `first`
      },
      // ...
    }
  }),
}
```

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

### Define Form Steps (Options API with Composition API setup)

Source: https://vueform.com/docs/breaking-forms-into-steps

Define form steps in `data` while using Composition API's `setup` for other logic. Access FormSteps and FormStep instances via `form$.steps$` and `form$.steps$.steps$.<step_name>` respectively.

```javascript
import { ref } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      steps: {
        first: {
          label: 'First',
          elements: ['first_input'],
        },
      },
      onMounted(form$) {
        form$.steps$ // returns FormSteps component instance
        form$.steps$.steps$.first // returns FormStep component instance named `first`
      },
      // ...
    }
  }),
}
```

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

### Project Configuration

Source: https://vueform.com/docs/configuration

Set global configuration options for Vueform in the vueform.config.js file. This example includes theme, locales, and locale settings.

```javascript
// vueform.config.js

import { defineConfig } from '@vueform/vueform'
import vueform from '@vueform/vueform/themes/vueform'
import en from '@vueform/vueform/locales/en'

export default defineConfig({
  theme: vueform,
  locales: { en },
  locale: 'en',
})
```

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

### Basic Vueform Component Configuration

Source: https://vueform.com/docs/rendering-forms

This snippet shows a basic Vueform component setup using mixins and setup functions. It defines a schema for email and password fields.

```javascript
export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      schema: {
        email: { type: 'text', label: 'Email' },
        password: { type: 'text', inputType: 'password', label: 'Password' },
      }
    }
  }),
  // TIP:
  mounted() {
    // Vueform props and methods are available via `this`:
    const formData = this.data
    this.el$(/*...*/)
    this.update(/*...*/)
  }
}
</script>
```

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

### Plugin 'apply' Option with Array of Regex

Source: https://vueform.com/docs/plugins

Use an array of regular expressions to apply the plugin's 'setup' option to a broader set of components matching multiple patterns.

```javascript
apply: [/^[a-zA-Z]+Element/, /^Element[a-zA-Z]+$/],
```

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

### Plugin 'props' Option Example

Source: https://vueform.com/docs/plugins

Extend the component's prop list using the 'props' option. This example adds a 'format' prop to the 'TextElement' component.

```javascript
export default function myPlugin() {
  return {
    apply: 'TextElement',
    props: {
      format: {
        type: String,
        required: false,
      }
    }
  }
}
```

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

### Vuex Store Setup

Source: https://vueform.com/docs/handling-form-data

Register a Vuex object in state and a mutation to update form data.

```javascript
// stores/forms.js

export default {
  state: {
    forms: {
      registration: {}
    }
  },
  mutations: {
    UPDATE_FORM_DATA(state, value) {
      state.forms[value.form] = value.data
    }
  }
}
```

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

### Plugin 'config' Option Example

Source: https://vueform.com/docs/plugins

Modify the default Vueform configuration using the 'config' option. This example adds a new config value and applies a preset.

```javascript
import myPreset from 'my-preset'

export default function myPlugin() {
  return {
    config(config) {
      // Adds a new config value
      config.foo = 'bar'

      // Applies `myPreset` by default to all Vueform instances
      config.presets.myPreset = myPreset
      config.usePresets.push('myPreset')
    }
  }
}
```

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

### Pinia Store Setup

Source: https://vueform.com/docs/handling-form-data

Define a Pinia store to manage form data.

```javascript
// stores/forms.js

import { defineStore } from 'pinia'

export const useFormsStore = defineStore('forms', {
  state: () => {
    return {
      registration: {}
    }
  },
})
```

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

### LoginForm SFC with Inline Elements

Source: https://vueform.com/docs/rendering-forms

This example defines a LoginForm as a Single File Component (SFC) using inline elements within the template. It leverages Vueform mixins and setup for core functionality.

```vue
<!-- ./components/forms/LoginForm.vue -->

<template>
  <form>
    <div class="w-full flex">
      <div class="w-1/2"><TextElement name="email" label="Email" /></div>
      <div class="w-1/2"><TextElement name="password" label="Password" /></div>
    </div>
  </form>
</template>

<script>
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
}
</script>
```

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

### TextElement with Props

Source: https://vueform.com/docs/rendering-forms

Example of configuring a TextElement with various props like label and placeholder.

```vue
<TextElement name="name" label="Name" placeholder="Your name" ... />
```

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

### Copy and Extend EditorElement (Script)

Source: https://vueform.com/docs/creating-elements

Copy an existing element like EditorElement by extending its properties and overriding its setup function. Ensure the setup function is manually called and its return value is exported.

```vue
<!-- CustomElement.vue -->

<script>
  import { EditorElement } from '@vueform/vueform'

  export default {
    ...EditorElement, // adding props, mixins, emits
    name: 'CustomElement',
    setup(props, context) {
      const element = EditorElement.setup(props, context)

      return {
        ...element
      }
    }
  })
</script>
```

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

### Using Generic Element Methods in Setup

Source: https://vueform.com/docs/creating-elements

Access the GenericElement's API, including methods like 'update', through the 'element' property in the context object within the setup function. This allows you to programmatically control element behavior.

```vue
<!-- CustomElement.vue -->

<script>
  import { defineElement } from '@vueform/vueform'

  export default defineElement({
    name: 'CustomElement',
    setup(props, { element }) {
      const { update } = element

      // This will update the element's value,
      // using the GenericElement's `update` method:
      update('value')
    }
  })
</script>
```

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

### After Date Validation Rule Examples

Source: https://vueform.com/docs/validating-elements

Provides examples of using the 'after' validation rule for dates. It shows how to specify an exact date, a relative date ('today'), or reference another element's date.

```javascript
// being an exact date
'after:2018-01-01'

// being a relative date
'after:today'

// being an other elements's path
'after:checkin_date'
```

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

### Dynamic Class Combination Example

Source: https://vueform.com/docs/styles-and-layout

Illustrates how static and dynamic classes are combined for the input element in the 'tailwind' theme, considering size and enabled state.

```javascript
input: `w-full form-border form-border-color z-1 transition-shadow
        addon-before:form-rounded-l-none outline-none
        addon-after:form-rounded-r-none ` // from `input`
     + `form-p-input form-rounded ` // from `input_md`
     + `focus:form-ring` // from `input_enabled`
```

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

### Formatted Submitted Data Example

Source: https://vueform.com/docs/handling-form-data

Illustrates the structure of data after being processed by the `format-data` functions.

```javascript
{
  name: '<div>JOHN DOE</div>',
  email: '<div>john@doe.com</div>'
}
```

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

### Listing All Generic Properties and Methods

Source: https://vueform.com/docs/creating-elements

Log all available properties and methods of the GenericElement to the console using Object.keys(element) within the setup function. This is useful for exploration and understanding the full API.

```vue
<!-- CustomElement.vue -->

<script>
  import { defineElement } from '@vueform/vueform'

  export default defineElement({
    name: 'CustomElement',
    setup(props, { element }) {
      console.log(Object.keys(element))

      /* Output: [
        "activate",
        "active",
        "addConditions",
        "additionalConditions",
        "aria",
        "available",
        "busy",
        "classes",
        "classesInstance",
        "clean",
        "clear",
        "clearMessages",
        "cols",
        "columnsClasses",
        "columnsClassesService",
        "conditionList",
        "container",
        "data",
        "dataPath",
        "deactivate",
        "debouncing",
        "defaultValue",
        "descriptionId",
        "dirt",
        "dirty",
        "disable",
        "el$",
        "elementLayout",
        "elementSlots",
        "empty",
        "enable",
        "error",
        "errorId",
        "errors",
        "events",
        "fieldId",
        "fieldSlots",
        "fire",
        "flat",
        "focus",
        "focused",
        "form$",
        "genericName",
        "handleInput",
        "hasLabel",
        "hidden",
        "hide",
        "infoId",
        "initMessageBag",
        "initValidation",
        "initWatcher",
        "initialValue",
        "input",
        "internalValue",
        "invalid",
        "isActive",
        "isArrayType",
        "isDanger",
        "isDisabled",
        "isFileType",
        "isImageType",
        "isStatic",
        "isSuccess",
        "Label",
        "labelId",
        "listeners",
        "load",
        "localDisabled",
        "messageBag",
        "model",
        "mounted",
        "nullValue",
        "off",
        "on",
        "parent",
        "path",
        "pending",
        "prepare",
        "reinitValidation",
        "removeConditions",
        "requestData",
        "reset",
        "resetValidators",
        "show",
        "Size",
        "state",
        "template",
        "Templates",
        "theme",
        "update",
        "updateColumns",
        "updateConditions",
        "validate",
        "validated",
        "validationRules",
        "Validators",
        "value",
        "View",
        "Views",
        "visible"
      ] */
    }
  })
</script>
```

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

### Set Default Provider Options

Source: https://vueform.com/docs/configuration

Configure default options for registered providers. This example shows setting the `sitekey` for the `recaptcha2` provider.

```javascript
// vueform.config.js

import { defineConfig } from '@vueform/vueform'

export default defineConfig({
  providerOptions: {
    recaptcha2: {
      sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
    }
  },
  // ...
})
```

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

### Defining Form Steps in Options API

Source: https://vueform.com/docs/breaking-forms-into-steps

Example of defining form steps using the Options API in Vue. This includes setting up the 'first' step with custom previous button rendering.

```javascript
export default {
  data: () => ({
    forms: {
      steps: {
        first: {
          label: 'First',
          elements: ['first_input'],
          labels: {
            previous: {
              props: ['step$'],
              render: () => h('span', [
                h(resolveComponent('AppIcon'), {
                  icon: ['far', 'arrow-left']
                }),
                h('Previous'),
              ])
            },
            // ...
          }
        },
        // ...
      },
      // ...
    }
  })
}
```

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

### Main JS File Default

Source: https://vueform.com/docs/tree-shaking

Default setup for a main JavaScript file (e.g., main.js) to integrate Vueform with a Vue application.

```javascript
// eg. main.js

import Vueform from '@vueform/vueform'
import vueformConfig from './vueform.config'

const app = createApp(App)
app.use(Vueform, vueformConfig)
app.mount('#app')
```

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

### Define Form Steps with Basic Labels

Source: https://vueform.com/docs/breaking-forms-into-steps

Use the 'steps' object in the form configuration to define individual steps. Each step can have a 'label' and a list of 'elements'. This example shows basic string labels.

```vue
<template>
  <Vueform v-bind="form" />
</template>

<!-- Composition API -->
<script setup>
import { ref, h, resolveComponent } from 'vue'

const form = ref({
  steps: {
    first: {
      label: '<b>I.</b> First',
      elements: ['first_input'],
    },
    // ...
  },
  // ...
})
</script>

<!-- Options API -->
<script>
import { h, resolveComponent } from 'vue'

export default {
  data: () => ({
    forms: {
      steps: {
        first: {
          label: '<b>I.</b> First',
          elements: ['first_input'],
        },
        // ...
      },
      // ...
    }
  })
}
</script>
```

```vue
<!-- Composition API -->
<script>
import { ref, h, resolveComponent } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: (props, context) => {
    const form = useVueform(props, context)

    const vueform = ref({
      steps: {
        first: {
          label: '<b>I.</b> First',
          elements: ['first_input'],
        },
        // ...
      },
      // ...
    })

    return {
      ...form,
      vueform,
    }
  }
}
</script>

<!-- Options API -->
<script>
import { ref, h, resolveComponent } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      steps: {
        first: {
          label: '<b>I.</b> First',
          elements: ['first_input'],
        },
        // ...
      },
      // ...
    }
  })
}
</script>
```

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

### Exists Validation Backend Request Example

Source: https://vueform.com/docs/validating-elements

Demonstrates how backend parameters are structured for the 'exists' validation rule, including dynamic parameter values from form fields.

```php
$params = $_REQUEST['params'];
$type = $params[0]; // will be 'users'

```

```php
$value = $_REQUEST['value']; // the value of the input field
$name = $_REQUEST['name']; // the name of the input field
$params = $_REQUEST['params'];
$type = $params[0];

switch($type) {
  case 'users':
    return ... // check value against users

  case 'product_identifiers':
    return ... // check value against product identifiers

  case 'slugs':
    return ... // check value against slugs
}
```

```javascript
// request params sent to `exists` endpoint

requestParams: {
  value: 'john@doe.com',
  name: 'email',
  params: [
    'users',
    5984
  ]
}
```

```php
$value = $_REQUEST['value']; // the value of the input field - 'john@doe.com'
$name = $_REQUEST['name']; // the name of the input field - 'email'
$params = $_REQUEST['params'];
$type = $params[0]; // will be 'users'
$id = $params[1]; // will be the value of the 'id' field in the same form - 5984

```

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

### Pattern Mask with Incomplete Input Allowed

Source: https://vueform.com/docs/input-mask

This example demonstrates how to allow incomplete input for a pattern mask using the 'allowIncomplete' option. The mask '000-00-0000' is used for an SSN.

```vue
<TextElement name="ssn" :mask="{ mask: '000-00-0000', placeholder: true }" allow-incomplete ... />
```

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

### Math Expressions

Source: https://vueform.com/docs/expressions

Perform calculations and use operators directly within expressions to compute values dynamically. This example calculates total price.

```vue
<TextElement
  name="qty"
  label="Quantity"
  input-type="number"
  default="5"
/>
<TextElement
  name="price"
  label="Price"
  input-type="number"
  default="10"
/>
<TextElement
  name="total"
  label="Total"
  expression="{ qty * price }"
  readonly
/>
```

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

### Configure Form Steps (Composition API)

Source: https://vueform.com/docs/breaking-forms-into-steps

Set up form steps using `ref` and `useVueform` for Composition API.

```javascript
import { ref } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: (props, context) => {
    const form = useVueform(props, context)

    const vueform = ref({
      steps: {
        first: {
          label: 'First',
          elements: ['first_input'],
          buttons: {
            previous: false,
          }
        },
        // ...
      },
      // ...
    })

    return {
      ...form,
      vueform,
    }
  }
}
```

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

### Format Data Before Submit (Composition API)

Source: https://vueform.com/docs/handling-form-data

Use the `:format-data` option with a function to format form data. This example shows formatting for the entire form and individual elements.

```vue
<template>
  <Vueform :format-data="formatFormData">
    <TextElement
      name="name"
      label="Name"
      default="John Doe"
      :format-data="formatName"
    />
    <TextElement
      name="email"
      label="Email"
      default="john@Doe.com"
      :format-data="formatEmail"
    />
  </Vueform>
</template>

<script setup>
const formatFormData = ({ name, email }) => {
  return {
    name: `<div>${name}</div>`,
    email: `<div>${email}</div>`,
  }
}

const formatName = (name, value) => {
  return { [name]: value.toUpperCase() } // must return an object
}

const formatEmail = (name, value) => {
  return { [name]: value.toLowerCase() } // must return an object
}
</script>
```

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

### Configure Form Steps with `useVueform` (Options API)

Source: https://vueform.com/docs/breaking-forms-into-steps

Integrate `useVueform` with Options API for form step configuration.

```javascript
import { ref } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      steps: {
        first: {
          label: 'First',
          elements: ['first_input'],
          buttons: {
            previous: false,
          }
        },
        // ...
      },
      // ...
    }
  })
}
```

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

### Using LoginForm Component

Source: https://vueform.com/docs/rendering-forms

Demonstrates how to use a pre-defined LoginForm component within an application's template.

```html
<template>
  <div id="app">
    <LoginForm />
  </div>
</template>
```

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

### Switch Locale on Vueform Installation

Source: https://vueform.com/docs/i18n

Set the default locale for Vueform when installing the plugin by passing the `locale` option. Ensure the desired locale is also included in the `locales` object in `vueform.config.js`.

```javascript
import Vue from 'vue'
import Vueform from '@vueform/vueform'
import vueformConfig from './../vueform.config'

Vue.use(Vueform, {
  ...vueformConfig,
  locale: 'de'
})
```

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

### Incorrect Regex Mask Example

Source: https://vueform.com/docs/input-mask

Avoid regex masks that only match the final input and not intermediary states, as this prevents users from typing. For example, '/^123$/' is incorrect because it doesn't allow '1' or '12'.

```vue
<!-- Don't do this -->
<TextElement :mask="/^123$/" ... />
```

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

### Get and Set Text Element Data (Options API)

Source: https://vueform.com/docs/handling-form-data

Access element data via `this.$refs.form$.el$(path)` to get or set values. This method is available after the component is mounted.

```vue
<template>
  <Vueform ref="form$">
    <TextElement name="name" label="Name" />
    <TextElement name="email" label="Email" />
  </Vueform>
</template>

<script>
export default {
  mounted(){
    const name = this.$refs.form$.el$('name')
    const email = this.$refs.form$.el$('email')

    // Get element value
    console.log(name.value) // getting `name` element value
    console.log(email.value) // getting `email` element value

    // Set element value
    name.update('John Doe') // setting `name` element value
    email.update('john@doe.com') // setting `email` element value
  }
}
</script>
```

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

### Define Form Steps (Composition API)

Source: https://vueform.com/docs/breaking-forms-into-steps

Define form steps using a `ref` in the `setup` function. Access FormSteps and FormStep instances via `form$.steps$` and `form$.steps$.steps$.<step_name>` respectively.

```javascript
import { ref, onMounted } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: (props, context) => {
    const form = useVueform(props, context)

    const vueform = ref({
      steps: {
        first: {
          label: 'First',
          elements: ['first_input'],
        },
      },
      onMounted(form$) {
        form$.steps$ // returns FormSteps component instance
        form$.steps$.steps$.first // returns FormStep component instance named `first`
      }
      // ...
    })

    return {
      ...form,
      vueform,
    }
  }
}
```

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

### Accessing Generic Props in Custom Element Setup

Source: https://vueform.com/docs/creating-elements

Access custom and generic props within the `setup()` function of a custom element using the `props` argument. Transform props with `toRefs()` to maintain reactivity.

```vue
<!-- CustomElement.vue -->

<script>
  import { toRefs } from 'vue'
  import { defineElement } from '@vueform/vueform'

  export default defineElement({
    name: 'CustomElement',
    setup(props, context) {
      const { type } = toRefs(props)

      console.log(type.value) // 'custom' - the element type

      console.log(Object.keys(props))

      /* Output: [
        "addClass",
        "addClasses",
        "after",
        "before",
        "between",
        "columns",
        "conditions",
        "default",
        "description",
        "disabled",
        "fieldName",
        "formatData",
        "formatLoad",
        "id",
        "info",
        "infoPosition",
        "inline",
        "label",
        "layout",
        "messages",
        "name",
        "onBeforeCreate",
        "onBeforeMount",
        "onBeforeUnmount",
        "onBeforeUpdate",
        "onChange",
        "onCreated",
        "onMounted",
        "onUnmounted",
        "onUpdated",
        "overrideClass",
        "overrideClasses",
        "presets",
        "removeClass",
        "removeClasses",
        "replaceClass",
        "replaceClasses",
        "rules",
        "size",
        "slots",
        "submit",
        "templates",
        "type",
        "view",
        "views"
      ] */
    }
  })
</script>
```

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

### Pattern Mask Preventing Shift Back

Source: https://vueform.com/docs/input-mask

This example illustrates how to prevent the 'shift back' behavior in a pattern mask using a backtick `` ` ``. The second example prevents characters after the backtick from shifting back.

```vue
<TextElement mask="000-000" ... /> 
         <!-- allow shift back -->
```

```vue
<TextElement mask="000-`000" ... /> 
         <!-- prevent shift back -->
```

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

### Single File Component Structure (Options API)

Source: https://vueform.com/docs/rendering-forms

Setting up a Single File Component to act as a Vueform, utilizing the Options API.

```vue
<!-- ./components/forms/LoginForm.vue -->

<script>
import { Vueform, useVueform } from '@vueform/vueform'

```

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

### Accessing Tabs API via Refs (Composition API)

Source: https://vueform.com/docs/breaking-forms-into-steps

Use `ref` to get the form instance and access its `tabs$` property to get the FormTabs component instance. Then, access individual FormTab instances via `tabs$.tabs$.<name>`.

```vue
<template>
  <Vueform ref="form$">
    <template #empty>
      <FormTabs>
        <FormTab name="first" ... />
      </FormTabs>
    </template>
  </Vueform>
</template>

<!-- Composition API -->
<script setup>
import { ref, onMounted } from 'vue'

const form$ = ref(null)

onMounted(() => {
  form$.value.tabs$ // returns FormTabs component instance
  form$.value.tabs$.tabs$.first // returns FormTab component instance named `first`
})
</script>
```

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

### Accessing FormSteps and FormStep instances with useVueform (Options API)

Source: https://vueform.com/docs/breaking-forms-into-steps

In the Options API, after using `setup: useVueform`, the FormSteps and FormStep instances are available directly as `this.steps$` and `this.steps$.steps$.first` respectively within the `mounted` hook.

```vue
<!-- Options API -->
<script>
import { ref } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      steps: {
        first: {
          label: 'First',
          elements: ['first_input'],
        },
      },
      // ...
    }
  }),
  mounted() {
    this.steps$ // returns FormSteps component instance
    this.steps$.steps$.first // returns FormStep component instance named `first`
  }
}
</script>
```

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

### Vueform Component with Steps Configuration

Source: https://vueform.com/docs/breaking-forms-into-steps

This snippet shows the basic configuration of a Vueform component using steps, including event subscriptions for step navigation.

```javascript
export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      steps: {
        first: {
          label: 'First',
          elements: ['first_input'],
        },
      },
      // ...
    }
  }),
  mounted() {
    // Subscribe to FormSteps' @next event
    this.steps$.on('next', (step$) => {
      // ...
    })

    // Subscribe to `first` FormStep's @activate event
    this.steps$.steps$.first.on('activate', (step$) => {
      // ...
    })

  }
}
```

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

### Replace Default Submit Endpoint

Source: https://vueform.com/docs/configuration

Example of how to override the default form submission endpoint in your Vueform configuration.

```javascript
// vueform.config.js

import { defineConfig } from '@vueform/vueform'

export default defineConfig({
  endpoints: {
    submit: {
      url: '/form/submit',
      method: 'post',
    },
  }
  // ...
})
```

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

### Configure Form Steps (Options API)

Source: https://vueform.com/docs/breaking-forms-into-steps

Define form steps and their configurations within the `data` object for Options API.

```javascript
export default {
  data: () => ({
    forms: {
      steps: {
        first: {
          label: 'First',
          elements: ['first_input'],
          buttons: {
            previous: false,
          }
        },
        // ...
      },
      // ...
    }
  })
}
```

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

### Set Default Views

Source: https://vueform.com/docs/configuration

Define the default views for each component in Vueform. This example sets the view for 'CheckboxgroupCheckbox' to 'tabs'.

```javascript
// vueform.config.js

import { defineConfig } from '@vueform/vueform'

export default defineConfig({
  views: {
    CheckboxgroupCheckbox: 'tabs'
  },
  // ...
})
```

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

### Tailwind CSS Classes for ElementError

Source: https://vueform.com/docs/styles-and-layout

Example of default Tailwind CSS classes applied to the ElementError component's container.

```js
// @vueform/vueform/themes/tailwind/classes.js

export default {
  // ...
  ElementError: {
    container: 'form-color-danger block',
    container_sm: 'form-text-small-sm mt-0.5',
    container_md: 'form-text-small mt-1',
    container_lg: 'form-text-small-lg mt-1',
    $container: (classes, { Size }) => ([
      classes.container,
      classes[`container_${Size}`],
    ]),
  },
  // ...
}
```

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

### Using Rule Parameters with Global Registration

Source: https://vueform.com/docs/validating-elements

Demonstrates how to provide parameters to a globally registered custom rule using a colon and comma-separated values.

```vue
<TextElement rules="uppercase:A,H" ... />
```

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

### Vueform with Birthday Element

Source: https://vueform.com/docs/creating-elements

A basic example demonstrating the usage of the BirthdayElement within a Vueform component, including a validation rule.

```html
<template>
  <Vueform>
    <BirthdayElement name="birthday" label="Birthday" rules="after:2022-02-01" />
  </Vueform>
</template>
```

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

### Single File Component Structure (Composition API)

Source: https://vueform.com/docs/rendering-forms

Setting up a Single File Component to act as a Vueform, utilizing the Composition API and useVueform hook.

```vue
<!-- ./components/forms/LoginForm.vue -->

<script>
import { ref, onMounted } from 'vue'
import { Vueform, useVueform } from '@vueform/vueform'

export default {
  mixins: [Vueform],
  setup(props, context) {
    const form = ...useVueform(props, context)

    const vueform = ref({
      schema: {
        email: { type: 'text', label: 'Email' },
        password: { type: 'text', inputType: 'password', label: 'Password' },
      }
    })

    // TIP:
    onMounted(() => {
      // Vueform props and methods can be used here, eg:
      const formData = form.data.value
      form.el$(/*...*/)
      form.update(/*...*/)
    })

    return {
      ...form,
      vueform,
    }
  },
}
</script>
```

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

### Define Available Locales

Source: https://vueform.com/docs/configuration

Specify the available locales for your form. Ensure you import the locale data, for example, 'en' from '@vueform/vueform/locales/en'.

```javascript
// vueform.config.js

import { defaultConfig } from '@vueform/vueform'
import { en } from '@vueform/vueform/locales/en'

export default defineConfig({
  locales: {
    en,
  },
  // ...
})
```

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

### Set Default Size

Source: https://vueform.com/docs/configuration

Configure the default size for all Vueform components. This example sets the default size to 'lg' (large).

```javascript
// vueform.config.js

import { defineConfig } from '@vueform/vueform'

export default defineConfig({
  size: 'lg',
  // ...
})
```

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

### Define and Subscribe to Step Events (Options API)

Source: https://vueform.com/docs/breaking-forms-into-steps

Define steps in `data` and subscribe to `FormSteps` and `FormStep` events in `mounted`. Access component instances via `this.$refs.form$.steps$` and `this.$refs.form$.steps$.steps$.<step_name>`.

```javascript
export default {
  data: () => ({
    steps: {
      first: {
        label: 'First',
        elements: ['first_input']
      },
    },
    // ...
  }),
  mounted() {
    // Subscribe to FormSteps' @next event
    this.$refs.form$.steps$.on('next', (step$) => {
      // ...
    })
    
    // Subscribe to `first` FormStep's @activate event
    this.$refs.form$.steps$.steps$.first.on('activate', (step$) => {
      // ...
    })
  }
}
```

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

### Functional Condition Example

Source: https://vueform.com/docs/conditional-rendering

Implements a custom functional condition using a JavaScript function that receives form and element instances.

```template
<template>
  <SelectElement name="delivery" :items="{
    ups: 'UPS',
    fedex: 'FedEx',
    shop: 'In person'
  }" ... />

  <CheckboxElement name="ask_call" text="Ask for a call" ... />

  <TextElement name="phone" :conditions="[
    function(form$) {
      return ['ups', 'fedex'].indexOf(form$.el$('delivery')?.value) !== -1 ||
            form$.el$('ask_call')?.value
    }
  ]" ... />
</template>
```

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

### Computed Class Example ($container)

Source: https://vueform.com/docs/styles-and-layout

Illustrates how computed classes like '$container' work by dynamically resolving class names based on component properties such as 'Size'. It shows the resolved class names for different sizes.

```javascript
$container: (classes, { Size }) => (
  [
    classes.container, // returns 'vf-element-error vf-element-error-right'
    classes[`container_${Size}`], // returns 'vf-element-error-sm' or '' or 'vf-element-error-lg'
  ]
)
```

```vue
<TextElement size="sm" />
<!-- vf-element-error vf-element-error-right vf-element-error-sm -->

<TextElement size="md" />
<!-- vf-element-error vf-element-error-right -->

<TextElement size="lg" />
<!-- vf-element-error vf-element-error-right vf-element-error-lg -->
```

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

### Registering Official Plugin

Source: https://vueform.com/docs/plugins

Register an official Vueform plugin in your vueform.config.js file. Ensure the plugin is installed via npm or yarn.

```javascript
// vueform.config.js

import { defineConfig } from '@vueform/vueform'
import vueformPlugin from '@vueform/vueform-plugin'

export default defineConfig({
  plugins: [
    vueformPlugin,
  ],
  // ...
})
```

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

### Asynchronous Validation Rule Example

Source: https://vueform.com/docs/validating-elements

Validation rules can be asynchronous, such as the 'unique' rule which sends a request to an endpoint to check for value uniqueness.

```vue
<TextElement rules="nullable|unique:users" />
```

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

### Listen to Custom Events

Source: https://vueform.com/docs/creating-elements

Demonstrates how to listen to custom events emitted by a custom element, both inline in the template and via the schema configuration.

```html
<!-- App.vue -->

<template>
  <!-- Subscribing to the event inline -->
  <Vueform>
    <CustomElement
      name="custom"
      @custom-event="handleCustomEvent"
    />
  </Vueform>

  <!-- Subscribing to the event using schema -->
  <Vueform :schema="schema" />
</template>
```

```javascript
<script setup>
import { ref } from 'vue'

const schema = ref({
  custom: {
    type: 'custom',
    onCustomEvent: (foo, bar) => { ... }
  }
})
</script>
```

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

### Accessing Array Values

Source: https://vueform.com/docs/expressions

Access array elements using dot notation with the index. For example, `{options.0}` refers to the first element.

```vue
<TagsElement
  name="options"
  label="Options"
  :items="['Option 1', 'Option 2', 'Option 3']"
  :default="['Option 2', 'Option 3']"
/>
<TextElement
  name="first"
  label="First option"
  expression="First option: {options.0}"
  readonly
/>
```

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

### Gallery View for File Preview

Source: https://vueform.com/docs/file-uploads

Utilize the 'view="gallery"' prop on FileElement to display file previews in a gallery format.

```vue
<FileElement view="gallery" />
```

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

### Override Component Templates

Source: https://vueform.com/docs/configuration

Globally replace component templates provided by the theme. This example shows how to replace the template for the 'ElementDescription' component.

```javascript
// vueform.config.js

import { defineConfig } from '@vueform/vueform'
import CustomElementDescription from '/path/to/custom/CustomElementDescription.vue'

export default defineConfig({
  templates: {
    ElementDescription,
  }
  // ...
})
```

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

### Using LoginForm with Full Width Prop

Source: https://vueform.com/docs/rendering-forms

This example shows how to use the LoginForm component with the 'width' prop set to 'full', overriding the default element width and making them occupy the full available space.

```html
<template>
  <div id="app">
    <LoginForm width="full" />
  </div>
</template>
```

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

### Basic Multilingual Form Setup

Source: https://vueform.com/docs/i18n

Enable multilingual support for your form to allow translation of elements. This will automatically display the FormLanguages component.

```vue
<template>
  <Vueform multilingual>
    <TTextElement name="title" placeholder="Title" />
    <TEditorElement name="description" placeholder="Description" />
  </Vueform>
</template>
```

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

### Configure Axios Instance for Vueform

Source: https://vueform.com/docs/configuration

Integrate an existing Axios instance by importing and exporting it. Ensure any necessary Axios configurations, like `withCredentials`, are set before passing the instance to Vueform.

```javascript
// vueform.config.js

import { defineConfig } from '@vueform/vueform'
import axios from 'axios'

axios.defaults.withCredentials = true
// ...

export default defineConfig({
  axios,
  // ...
})
```

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

### Prepare Form Data Asynchronously (Options API)

Source: https://vueform.com/docs/handling-form-data

Shows how to use an `async` function for the `:prepare` option in the Options API. This function runs after validation and can cancel submission by throwing an error.

```vue
<template>
  <Vueform :prepare="prepare">
    <TextElement name="name" label="Name" />
    <TextElement name="email" label="Email" />
  </Vueform>
</template>

<script>
export default {
  methods: {
    async prepare(form$) { // form$ is the <Vueform> component
      try {
        await // async process
      } catch (error) {
        throw error // this will cancel the submit process
      }
    }
  }
}
</script>
```

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

### Customizing Element Validation Messages

Source: https://vueform.com/docs/validating-elements

Provides an example of replacing the default 'required' validation message for a specific TextElement using the ':messages' prop.

```vue
<template>
  <Vueform>
    <TextElement rules="required" :messages="{
      required: 'Please fill in this field'
    }" />
  </Vueform>
</template>
```

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

### Logical Expressions (Ternary)

Source: https://vueform.com/docs/expressions

Use ternary expressions for conditional logic within expressions. This example determines an 'allowed' status based on age.

```vue
<DateElement
  name="dob"
  label="Date of birth"
  default="1989-07-07"
/>
<TextElement
  name="allowed"
  label="Allowed"
  expression="{AGE(dob) > 18 ? 'allowed' : 'not_allowed'}"
  readonly
/>
```